基于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>