首页 前端知识 一文读懂Vue中的el-dialog(附Demo)

一文读懂Vue中的el-dialog(附Demo)

2024-05-26 00:05:45 前端知识 前端哥 555 355 我要收藏

目录

  • 前言
  • 1. 基本知识
  • 2. Demo

前言

原先对于该知识点写过一个Demo,推荐阅读:点击按钮框来选择相应信息(Vue + Java)

1. 基本知识

el-dialog 是 Element UI 框架中的一个组件,用于创建对话框

提供了丰富的功能和选项,可以用来创建各种类型的对话框,如信息确认框、表单填写框等

基本用法如下:

<template>
  <el-dialog :visible.sync="dialogVisible" title="对话框标题">
    <!-- 对话框内容 -->
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false // 控制对话框的显示与隐藏
    }
  }
}
</script>

常用的属性如下:

  • visible:控制对话框的显示与隐藏,可以使用.sync修饰符实现双向绑定。
  • title:对话框标题。
  • width:对话框宽度。
  • top:对话框距离顶部的距离。
  • modal:是否显示遮罩层。
  • modal-append-to-body: 遮罩层是否插入至 body 元素上。
  • close-on-click-modal:是否点击遮罩层关闭对话框。
  • close-on-press-escape:是否按下 ESC 键关闭对话框
  • draggable:是否可拖动
  • resizable:是否可调整大小

事件:

  • open: 对话框打开时触发的事件
  • close: 对话框关闭时触发的事件

2. Demo

点击按钮可以打开对话框,对话框标题为 “示例对话框”,宽度为页面宽度的 30%,内容为 “这是一个简单的示例对话框”

对话框有两个按钮,一个是 “取消”,点击后对话框关闭,另一个是 “确定”,点击后同样关闭对话框

<template>
  <div>
    <el-button type="primary" @click="openDialog">打开对话框</el-button>
    <el-dialog :visible.sync="dialogVisible" title="示例对话框" width="30%">
      <span>这是一个简单的示例对话框</span>
      <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>

<script>
export default {
  data() {
    return {
      dialogVisible: false
    };
  },
  methods: {
    openDialog() {
      this.dialogVisible = true;
    }
  }
};
</script>

结合大部分属性的Demo:

Demo特性主要围绕属性的作用

  • 对话框标题为 “示例对话框”
  • 对话框宽度为页面宽度的 50%
  • 对话框距离顶部的距离为页面高度的 20%
  • 显示遮罩层
  • 遮罩层插入至 body 元素上
  • 点击遮罩层时关闭对话框
  • 按下 ESC 键时关闭对话框
  • 对话框可拖动
  • 对话框可调整大小
<template>
  <div>
    <el-button type="primary" @click="openDialog">打开对话框</el-button>
    <el-dialog
      :visible.sync="dialogVisible"
      :title="dialogTitle"
      :width="dialogWidth"
      :top="dialogTop"
      :modal="modalVisible"
      :modal-append-to-body="appendToBody"
      :close-on-click-modal="closeOnClickModal"
      :close-on-press-escape="closeOnPressEscape"
      :draggable="draggable"
      :resizable="resizable"
      @close="handleClose">
      <span>这是一个演示对话框</span>
      <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>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      dialogTitle: "示例对话框",
      dialogWidth: "50%",
      dialogTop: "20vh",
      modalVisible: true,
      appendToBody: true,
      closeOnClickModal: true,
      closeOnPressEscape: true,
      draggable: true,
      resizable: true
    };
  },
  methods: {
    openDialog() {
      this.dialogVisible = true;
    },
    handleClose() {
      console.log("对话框已关闭");
    }
  }
};
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
</style>
转载请注明出处或者链接地址:https://www.qianduange.cn//article/9543.html
标签
评论
发布的文章

html5怎么实现语音搜索

2024-06-01 10:06:32

HTML5

2024-02-27 11:02:15

HTML - 头部元素

2024-06-01 10:06:06

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!