Element Dialog对话框的使用示例


Posted in Javascript onJuly 26, 2020

组件— 对话框

基本用法

Element Dialog对话框的使用示例

Element Dialog对话框的使用示例

<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>

<el-dialog
 title="提示"
 :visible.sync="dialogVisible"
 width="30%"
 :before-close="handleClose">
 <span>这是一段信息</span>
 <span slot="footer" class="dialog-footer">
  <el-button @click="dialogVisible = false">取 消</el-button>
  <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
 </span>
</el-dialog>

<script>
 export default {
  data() {
   return {
    dialogVisible: false
   };
  },
  methods: {
   handleClose(done) {
    this.$confirm('确认关闭?')
     .then(_ => {
      done();
     })
     .catch(_ => {});
   }
  }
 };
</script>

Element Dialog对话框的使用示例

自定义内容

Element Dialog对话框的使用示例

Element Dialog对话框的使用示例

Element Dialog对话框的使用示例

<!-- Table -->
<el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>

<el-dialog title="收货地址" :visible.sync="dialogTableVisible">
 <el-table :data="gridData">
  <el-table-column property="date" label="日期" width="150"></el-table-column>
  <el-table-column property="name" label="姓名" width="200"></el-table-column>
  <el-table-column property="address" label="地址"></el-table-column>
 </el-table>
</el-dialog>

<!-- Form -->
<el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>

<el-dialog title="收货地址" :visible.sync="dialogFormVisible">
 <el-form :model="form">
  <el-form-item label="活动名称" :label-width="formLabelWidth">
   <el-input v-model="form.name" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="活动区域" :label-width="formLabelWidth">
   <el-select v-model="form.region" placeholder="请选择活动区域">
    <el-option label="区域一" value="shanghai"></el-option>
    <el-option label="区域二" value="beijing"></el-option>
   </el-select>
  </el-form-item>
 </el-form>
 <div slot="footer" class="dialog-footer">
  <el-button @click="dialogFormVisible = false">取 消</el-button>
  <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
 </div>
</el-dialog>

<script>
 export default {
  data() {
   return {
    gridData: [{
     date: '2016-05-02',
     name: '王小虎',
     address: '上海市普陀区金沙江路 1518 弄'
    }, {
     date: '2016-05-04',
     name: '王小虎',
     address: '上海市普陀区金沙江路 1518 弄'
    }, {
     date: '2016-05-01',
     name: '王小虎',
     address: '上海市普陀区金沙江路 1518 弄'
    }, {
     date: '2016-05-03',
     name: '王小虎',
     address: '上海市普陀区金沙江路 1518 弄'
    }],
    dialogTableVisible: false,
    dialogFormVisible: false,
    form: {
     name: '',
     region: '',
     date1: '',
     date2: '',
     delivery: false,
     type: [],
     resource: '',
     desc: ''
    },
    formLabelWidth: '120px'
   };
  }
 };
</script>

嵌套的 Dialog

Element Dialog对话框的使用示例

Element Dialog对话框的使用示例

<template>
 <el-button type="text" @click="outerVisible = true">点击打开外层 Dialog</el-button>
 
 <el-dialog title="外层 Dialog" :visible.sync="outerVisible">
  <el-dialog
   width="30%"
   title="内层 Dialog"
   :visible.sync="innerVisible"
   append-to-body>
  </el-dialog>
  <div slot="footer" class="dialog-footer">
   <el-button @click="outerVisible = false">取 消</el-button>
   <el-button type="primary" @click="innerVisible = true">打开内层 Dialog</el-button>
  </div>
 </el-dialog>
</template>

<script>
 export default {
  data() {
   return {
    outerVisible: false,
    innerVisible: false
   };
  }
 }
</script>

居中布局

Element Dialog对话框的使用示例

Element Dialog对话框的使用示例

<template>
 <el-button type="text" @click="outerVisible = true">点击打开外层 Dialog</el-button>
 
 <el-dialog title="外层 Dialog" :visible.sync="outerVisible">
  <el-dialog
   width="30%"
   title="内层 Dialog"
   :visible.sync="innerVisible"
   append-to-body>
  </el-dialog>
  <div slot="footer" class="dialog-footer">
   <el-button @click="outerVisible = false">取 消</el-button>
   <el-button type="primary" @click="innerVisible = true">打开内层 Dialog</el-button>
  </div>
 </el-dialog>
</template>

<script>
 export default {
  data() {
   return {
    outerVisible: false,
    innerVisible: false
   };
  }
 }
</script>

Element Dialog对话框的使用示例

Attributes

Element Dialog对话框的使用示例

Element Dialog对话框的使用示例Slot

Element Dialog对话框的使用示例Events

Element Dialog对话框的使用示例

Element 对话框简单使用

官方文档介绍的是页内对话框,但没有基于组件的对话框,这里记录一下,原理就是父子传值是否显示

父页导入组件

<template>
  <div class="home">
    <el-button @click="btnAdd">添加用户</el-button>
    <Dialog :visible.sync="visible" title="添加用户"></Dialog>
  </div>
</template>

<script>
  import Dialog from "../components/dialog";

  export default {
    name: 'Home',
    components: {
      Dialog
    },
    data() {
      return {
        visible: false
      }
    },
    methods: {
      btnAdd() {
        this.visible = true
      }
    }
  }
</script>

对话框

<template>
  <div>
    <el-dialog
        v-bind="$attrs"
        v-on="$listeners"
        @open="onOpen"
        @close="onClose"
        :title="title"
        对话框打开后是否可以点击后边灰色区域关闭对话框
        :close-on-click-modal='false'>
      <el-row :gutter="15">
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
          <el-col :span="23">
            <el-form-item label="姓名" prop="userName">
              <el-input v-model="formData.userName" placeholder="请输入姓名" :maxlength="50" clearable
                   prefix-icon='el-icon-user-solid' :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="23">
            <el-form-item label="性别" prop="sex">
              <el-radio-group v-model="formData.sex" size="medium">
                <el-radio v-for="(item, index) in sexOptions" :key="index" :label="item.value"
                     :disabled="item.disabled">{{item.label}}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="23">
            <el-form-item label="生日" prop="birthday">
              <el-date-picker v-model="formData.birthday" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                      :style="{width: '100%'}" placeholder="请选择生日" clearable></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    inheritAttrs: false,
    props: {
      title: String
    },
    data() {
      return {
        formData: {
          userName: undefined,
          sex: 3,
          birthday: null,
        },
        rules: {
          userName: [{
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
          }],
          sex: [{
            required: true,
            message: '性别不能为空',
            trigger: 'change'
          }],
          birthday: [{
            required: true,
            message: '请选择生日',
            trigger: 'change'
          }],
        },
        sexOptions: [{
          "label": "男",
          "value": 1
        }, {
          "label": "女",
          "value": 2
        }, {
          "label": "保密",
          "value": 3
        }],
      }
    },
    methods: {
      onOpen() {
        //打开对话框执行
      },
      onClose() {
        //关闭对话框执行清除以上字段内容
        this.$refs['elForm'].resetFields()
      },
      close() {
        //手工调用关闭,显示状态为隐藏
        this.$emit('update:visible', false)
      },
      handelConfirm() {
        this.$refs['elForm'].validate(valid => {
          if (valid) {
            //点击确定后执行验证并执行方法,执行完毕后调用close()方法
            this.$message.success({
              message: "成功了"
            })
            this.close()
          }
        })
      }
    }
  }

</script>

执行效果

Element Dialog对话框的使用示例

到此这篇关于Element Dialog对话框的使用示例的文章就介绍到这了,更多相关Element Dialog对话框内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js读取本地excel文档数据的代码
Nov 11 Javascript
原生js实现查找/添加/删除/指定元素的class
Apr 12 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
Nov 24 Javascript
AngularJS 路由详解和简单实例
Jul 28 Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
Feb 23 Javascript
一次围绕setTimeout的前端面试经验分享
Jun 15 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
Nov 14 Javascript
详解vue项目中实现图片裁剪功能
Jun 07 Javascript
微信小程序如何访问公众号文章
Jul 08 Javascript
js实现图片跟随鼠标移动效果
Oct 16 Javascript
Node.js API详解之 util模块用法实例分析
May 09 Javascript
JS中循环遍历数组的四种方式总结
Jan 23 Javascript
在vue中使用防抖函数组件操作
Jul 26 #Javascript
Vue 中使用lodash对事件进行防抖和节流操作
Jul 26 #Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
Jul 26 #Javascript
关于vue 结合原生js 解决echarts resize问题
Jul 26 #Javascript
Element Tooltip 文字提示的使用示例
Jul 26 #Javascript
Element Popover 弹出框的使用示例
Jul 26 #Javascript
Element Card 卡片的具体使用
Jul 26 #Javascript
You might like
php对象和数组相互转换的方法
2015/05/12 PHP
php版微信开发之接收消息,自动判断及回复相应消息的方法
2016/09/23 PHP
JavaScript中的Location地址对象
2008/01/16 Javascript
js 面向对象的技术创建高级 Web 应用程序
2010/02/25 Javascript
jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法
2011/07/28 Javascript
jquery实现pager控件示例
2014/04/09 Javascript
多个$(document).ready()的执行顺序实例分析
2014/07/26 Javascript
jQuery判断浏览器并动态调整select宽度的方法
2016/03/02 Javascript
浅析BootStrap模态框的使用(经典)
2016/04/29 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
2016/05/17 Javascript
微信小程序  modal弹框组件详解
2016/10/27 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
2016/12/28 Javascript
js获取当前页的URL与window.location.href简单方法
2017/02/13 Javascript
vue-router路由简单案例介绍
2017/02/21 Javascript
详解react-router如何实现按需加载
2017/06/15 Javascript
Swiper实现轮播图效果
2017/07/03 Javascript
node使用Koa2搭建web项目的方法
2017/10/17 Javascript
nodeJs实现基于连接池连接mysql的方法示例
2018/02/10 NodeJs
JavaScript实现封闭区域布尔运算的示例代码
2018/06/25 Javascript
ES6 系列之 WeakMap的使用示例
2018/08/06 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
2018/11/08 Javascript
ES6 Promise对象的应用实例分析
2019/06/27 Javascript
JavaScript如何操作css
2020/10/24 Javascript
[41:52]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第二场 2月22日
2021/03/11 DOTA
在Python中操作日期和时间之gmtime()方法的使用
2015/05/22 Python
Django中使用group_by的方法
2015/05/26 Python
Python读取MRI并显示为灰度图像实例代码
2018/01/03 Python
python在文本开头插入一行的实例
2018/05/02 Python
opencv 查找连通区域 最大面积实例
2020/06/04 Python
Python绘图之二维图与三维图详解
2020/08/04 Python
CSS3模块的目前的状况分析
2010/02/24 HTML / CSS
关爱留守儿童倡议书
2014/04/15 职场文书
培训讲师开场白
2015/06/01 职场文书
考试后的感想
2015/08/07 职场文书
入党积极分子培养联系人意见
2015/08/12 职场文书
CentOS7设置ssh服务以及端口修改方式
2022/12/24 Servers