Vue组件解析之如何自定义弹窗组件ByDialog

<template>
  <!-- 
    el组件的大部分属性在by-dialog标签上都可以使用，如果某属性或事件不生效可以在by-dialog组件中    去扩展        
   （例如通过props）
    -->
  <el-dialog
    :title="title"
    :visible="visible"
    v-bind="$attrs"
    v-on="$listeners"
    @close="$emit('cancel')"
    :width="width"
    @touchmove.prevent
    class="by-dialog"
  >
    <div class="by-dialog-content">
      <slot></slot>
    </div>
    <slot name="footer" slot="footer">
      <el-button @click="$emit('ok')" type="primary">{{ okText }}</el-button>
      <el-button @click="$emit('cancel')">{{ cancelText }}</el-button>
    </slot>
  </el-dialog>
</template>

<script>
export default {
  name: 'ByDialog',
  props: {
    // 弹框的显示隐藏
    value: {
      type: Boolean,
      default: false,
    },
    // 确定按钮文本
    okText: {
      type: String,
      default: '确定',
    },
    // 取消按钮文本
    cancelText: {
      type: String,
      default: '取消',
    },
    // 弹框标题
    title: {
      type: String,
      default: '',
    },
    // 弹框的宽度
    width: {
      type: String,
      default: '600px',
    },
  },
  computed: {
    visible: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      },
    },
  },
  methods: {
  },
};
</script>

<style scoped>
.by-dialog-content {
  max-height: 500px;
  overflow-y: auto;
}
</style>

<template>
  <!-- 其他组件内容 -->
  <by-dialog
    title="修改密码"
    width="350px"
    v-model="dialogVisible"
    okText="确认修改"
    cancelText="取消修改"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <!-- 弹窗内容区域 -->
    <div>
      <label for="password">新密码：</label>
      <input type="password" id="password" v-model="password" />
    </div>
  </by-dialog>
  <!-- 其他组件内容 -->
</template>

<script>
export default {
  // 组件代码
  data() {
    return {
      dialogVisible: false,
      password: '',
    };
  },
  methods: {
    // 其他方法
 
    handleOk() {
      // 处理确认按钮点击事件
      // 执行修改密码操作
      if (this.password !== '') {
        // 执行密码修改逻辑
        this.dialogVisible = false; // 关闭弹窗
        this.password = ''; // 清空密码输入框
        // 其他操作...
      } else {
        // 提示密码不能为空
        // 其他逻辑...
      }
    },
    handleCancel() {
      // 处理取消按钮点击事件
      this.dialogVisible = false; // 关闭弹窗
      this.password = ''; // 清空密码输入框
      // 其他操作...
    },
  },
};
</script>