VUE宝典之el-dialog使用

文章目录

🍁前言

el-dialog是Element UI库中的一个重要组件，用于在Vue应用程序中创建弹出框。它提供了一组实用的属性和事件，让我们能够轻松地实现各种弹出框功能。本文将详细介绍el-dialog组件的使用方法和示例，帮助您更好地理解如何在实际项目中使用它。

🍁el-dialog简介

el-dialog是一个非常灵活的弹出框组件，它可以通过简单的配置来实现各种样式的弹出框。el-dialog组件基于Element UI库，因此在使用之前需要确保已经正确引入了Element UI库。

🍁el-dialog属性

el-dialog提供了许多属性，用于控制弹出框的外观和行为。以下是一些常用的属性：

📒visible：控制弹出框是否可见。
📒title：弹出框的标题。
📒width：弹出框的宽度。
📒fullscreen：是否全屏显示。
📒append-to-body：将弹窗附加到body上。
📒close-on-click-modal：点击蒙层是否关闭弹窗。
📒close-on-press-escape：按下Esc键是否关闭弹窗。
📒show-close：是否显示关闭按钮。
📒draggable：是否可拖动。
📒resizable：是否可调整大小。
除了以上属性外，el-dialog还支持一些自定义事件，例如：@open、@close等。这些事件可以在组件实例中通过 $emit 方法来触发。

🍁el-dialog示例

下面是一个简单的el-dialog示例，展示了如何使用属性和事件来控制弹出框的行为和样式：

在模板中添加el-dialog组件：

html

html 复制代码

<template>  
  <div>  
    <el-button @click="dialogVisible = true">打开弹出框</el-button>  
    <el-dialog :visible.sync="dialogVisible" title="提示" width="30%" @close="dialogVisible = false">  
      <p>这是一段信息</p>  
      <div slot="footer" class="dialog-footer">  
        <el-button @click="dialogVisible = false">取 消</el-button>  
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>  
      </div>  
    </el-dialog>  
  </div>  
</template>

在脚本中定义数据和方法：

javascript 复制代码

export default {  
  data() {  
    return {  
      dialogVisible: false,  
    };  
  },  
};

在这个示例中，我们通过点击按钮来控制dialogVisible的值，从而打开或关闭弹出框。visible.sync属性用于双向绑定弹出框的可见性。title属性用于设置弹出框的标题。width属性用于设置弹出框的宽度。@close事件用于监听弹出框关闭事件，并在关闭时设置dialogVisible为false。在弹出框的内容部分，我们通过p标签来添加文本。在底部工具栏中，我们通过slot="footer"来定义底部按钮的位置，并通过el-button来添加取消和确定按钮。注意，为了能够正确显示底部工具栏，我们需要在弹出的内容后面添加一个div元素作为底部工具栏的容器，并使用slot="footer"来指定插槽名称。同时，我们还可以根据需要添加其他属性和事件来控制弹出框的行为和样式。例如，我们可以设置fullscreen属性为true来全屏显示弹出框，或者设置draggable属性为true来使弹出框可拖动。同时，我们还可以通过触发自定义事件来实现一些特定的功能，例如在弹出框打开时触发@open事件来执行一些操作。总之，el-dialog组件提供了丰富的属性和事件，让我们可以灵活地实现各种样式的弹出框功能。在实际项目中，我们可以根据具体需求进行配置和使用。

🍁父子组件值传递示例

当el-dialog组件声明在子组件中时，父组件和子组件可以通过props和事件进行相互传递参数。以下是一个代码示例：

父组件（ParentComponent.vue）：

html

html 复制代码

<template>  
  <div>  
    <child-component ref="childDialog" :initial-message="parentMessage" @child-event="handleChildEvent"></child-component>  
    <el-button @click="openChildDialog">打开子组件的弹出框</el-button>  
  </div>  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  components: {  
    ChildComponent  
  },  
  data() {  
    return {  
      parentMessage: 'Hello from parent'  
    };  
  },  
  methods: {  
    openChildDialog() {  
      // 通过 $refs 访问子组件实例，并调用 openDialog 方法打开弹出框  
      this.$refs.childDialog.openDialog();  
    },  
    handleChildEvent(childMessage) {  
      // 处理子组件传递的事件和参数  
      console.log('Received message from child:', childMessage);  
      // 可以在这里执行其他逻辑或更新父组件的数据  
    }  
  }  
};  
</script>

子组件（ChildComponent.vue）：

html

html 复制代码

<template>  
  <div>  
    <el-dialog :visible.sync="dialogVisible" title="子组件的弹出框">  
      <p>{{ message }}</p>  
    </el-dialog>  
  </div>  
</template>  
  
<script>  
export default {  
  props: {  
    initialMessage: {  
      type: String,  
      default: ''  
    }  
  },  
  data() {  
    return {  
      dialogVisible: false, // 控制弹出框的显示与隐藏  
      message: this.initialMessage // 初始化时接收父组件传递的参数  
    };  
  },  
  methods: {  
    openDialog() {  
      // 打开弹出框，并触发父组件的事件传递参数  
      this.dialogVisible = true;  
      this.$emit('child-event', 'Hello from child');  
    },  
    closeDialog() {  
      // 关闭弹出框  
      this.dialogVisible = false;  
    }  
  },  
  watch: {  
    initialMessage(newValue) {  
      // 监听父组件传递的参数变化，并更新子组件的数据  
      this.message = newValue;  
    }  
  }  
};  
</script>

在父组件中，我们使用了ref属性给子组件指定了一个引用名称childDialog，并通过:initial-message="parentMessage"将父组件的数据parentMessage传递给子组件。同时，在父组件的模板中添加了一个按钮，当点击该按钮时，会触发openChildDialog方法，通过$ refs访问子组件实例，并调用子组件的openDialog方法打开弹出框。在父组件的方法handleChildEvent中，我们处理子组件传递的事件和参数，并可以在这里执行其他逻辑或更新父组件的数据。在子组件中，我们定义了一个props属性initialMessage来接收父组件传递的参数，并在初始化时将参数赋值给子组件的message数据属性。子组件的openDialog方法中，我们打开弹出框，并通过$emit触发一个自定义事件child-event，将参数'Hello from child'传递给父组件。同时，我们使用:visible.sync="dialogVisible"来绑定弹出框的显示状态。这样，当dialogVisible的值变化时，弹出框的显示状态也会相应地改变。

🏫博客主页：魔王-T

🥝大鹏一日同风起扶摇直上九万里

❤️感谢大家点赞👍收藏⭐评论✍️