博客

在Vue.js前端开发中，弹窗组件是常见的交互元素之一。为了提高开发效率并保持代码的可维护性，我们可以创建自定义弹窗组件。本文将详细解析Vue.js结合ElementUi自定义弹窗组件ByDialog的实现原理和使用示例，并提供相关代码和注释。

ByDialog组件代码

下面是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>

ByDialog组件详解

下面对ByDialog组件的关键部分进行详细解释：

模板部分

• 
el-dialog

  是Element UI库提供的弹窗组件，我们在此基础上进行扩展和定制。
• 
:title

  属性绑定了弹窗的标题，可以通过父组件传递属性进行自定义。
• 
:visible

  属性控制弹窗的显示与隐藏，我们使用了双向绑定，即通过
  
v-model

  将组件内部的
  
visible

  属性与外部的
  
value

  属性进行关联。
• 
v-bind="$attrs"

  和
  
v-on="$listeners"

  用于将父组件传递的属性和事件绑定到内部的
  
el-dialog

  组件上，以实现属性和事件的传递和继承。
• 
@close

  事件绑定了
  
$emit('cancel')

  ，当弹窗关闭时触发，向父组件传递取消按钮被点击的信号。
• 
:width

  属性控制弹窗的宽度，可以根据实际需求进行自定义。
• 
@touchmove.prevent

  阻止在触摸设备上滚动弹窗时的默认滚动行为。

插槽部分

• 
<slot></slot>

  标签用于显示弹窗的主要内容，父组件可以在使用
  
<by-dialog>

  标签时插入自定义的内容。
• 
<slot name="footer" slot="footer"></slot>

  定义了名为
  
footer

  的插槽，用于显示弹窗底部的按钮区域。父组件可以通过使用
  
<template v-slot:footer>

  或
  
<template #footer>

  的方式插入自定义的按钮组件或文本。

属性部分

• 
value

  属性是组件的一个
  
props

  ，用于控制弹窗的显示与隐藏，它的类型是布尔型，默认值为
  
false

  。
• 
okText

  和
  
cancelText

  属性分别用于设置确定按钮和取消按钮的文案，默认值分别为”确定”和”取消”。
• 
title

  属性用于设置弹窗的标题，默认值为空字符串。
• 
width

  属性用于设置弹窗的宽度，默认值为”600px”。

计算属性和方法部分

• 
visible

  是一个计算属性，用于对外部的
  
value

  属性进行双向绑定。通过
  
get

  方法获取
  
value

  的值，通过
  
set

  方法触发
  
input

  事件，将新的值传递给父组件。
• 
close

  方法用于关闭弹窗，它触发
  
cancel

  事件，向父组件传递取消按钮被点击的信号。
• 
$emit('ok')

  和
  
$emit('cancel')

  分别用于处理确定按钮和取消按钮的点击事件。在实际应用中，您可以在这两个事件向父组件传递确定跟取消的信号。

样式部分


.by-dialog-content

类定义了弹窗内容区域的样式，其中

max-height

属性限制了内容区域的最大高度，并通过

overflow-y

属性实现垂直滚动效果。

使用示例

在使用ByDialog组件时，我们可以通过传递不同的属性和事件监听器来实现定制化的弹窗效果。下面是一个使用示例：

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

总结： 通过自定义弹窗组件ByDialog，我们可以在Vue.js应用中创建高度定制化的弹窗功能。通过属性、事件和插槽的灵活运用，我们可以实现各种弹窗样式和交互效果