E-dialog-radio NPM

基于vue+element-ui 封装的 dialog组件

功能描述

element 对话框组件

支持动态传入单选列表,根据选值不同展示不同内容

配置设计

字段名	说明	类型	是否必填	可选值	默认值
title	对话框title	string	非必填	--	--
radioList	单选列表	object[]	必填	--	[]
radio	当前选中的单选label值	string	必填	--	''
dialogVisible	弹窗是否展示	boolean	必填	true/false	false
cancelText	取消按钮文案	string	非必填	--	取消
sureText	确认按钮文案	string	非必填	--	确认

更多dialog属性配置参考原生 el-dialog

事件

事件名	说明
sure	确认按钮回调	() => {}
cancel	取消按钮回调	() => {}
dialogClose	对话框关闭前回调	() => {}

更多dialog事件参考原生 el-dialog

插槽


插槽名称为当前选中单选的label值

示例

vue 
<EDialogRadio
    :dialogVisible="dialogVisible"
    :title="'groups.addUser'"
    :radioList="radioList"
    :radio.sync="radio"
    width="592px"
    @dialogClose="dialogClose"
    @sure="sure"
>
	<template #aaa>
	...
    </template>
    <template #bbb>
    ...
    </template>
</EDialogRadio>

<script>
export default {
  name: '',
  data() {
    return {
		dialogVisible: false,
      radio: 'xxx',
    	radioList: [
            {
              text: 'xxx',
              label: 'aaa'
            },
            { text: 'xxx', label: 'bbb' },
            { text: 'xxxx', label: 'ccc' }
          ]
    };
  }
  computed: {

  },
  methods: {
    dialogClose() {
      // ...
      this.dialogVisible = false
      // ...
    },
    sure() {
      // ...
      console.log(this.radio)
      this.dialogVisible = false
      // ...
    }
  }
};
</script>

e-dialog-radio

@everything-registry/sub-chunk-1544

1.0.0

1 year ago