使用elment 自己封装提示弹窗，内容用插槽自定义

最新推荐文章于 2025-04-29 18:30:36 发布

时光伊始

最新推荐文章于 2025-04-29 18:30:36 发布

阅读量317

点赞数

文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_45243726/article/details/124352560

版权

这是一个关于Vue应用中实现对话框组件的示例。通过`<el-dialog>`元素，展示了如何创建一个包含标题为'试卷描述'的对话框，并设置宽度、关闭前回调函数以及自定义按钮操作。点击确定按钮时，对话框将关闭并触发'dis'事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
 <el-dialog
  title="试卷描述"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
      <slot></slot>
  <span slot="footer" class="dialog-footer">
    <el-button type="primary"  @click="display">确 定</el-button>
  </span>
</el-dialog>
</template>

<script>
export default {
  data() {
      return {
        dialogVisible: true,
      };
    },
    methods:{
        display(){
            this.dialogVisible=false;
            this.$emit("dis");
        }
    }
}
</script>

<style>

</style>