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 相关文章推荐
jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
Dec 25 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
Jun 08 Javascript
node.js中的fs.rmdirSync方法使用说明
Dec 16 Javascript
javascript实现手机震动API代码
Aug 05 Javascript
基于jQuery实现的菜单切换效果
Oct 16 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
Dec 08 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
May 21 Javascript
JavaScript数组操作详解
Feb 04 Javascript
使用pm2自动化部署node项目的方法步骤
Jan 28 Javascript
Angular实现svg和png图片下载实现
May 05 Javascript
JavaScript展开操作符(Spread operator)详解
Jul 20 Javascript
JS前后端实现身份证号验证代码解析
Jul 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
Cannot modify header information错误解决方法
2008/10/08 PHP
PHP中source #N问题的解决方法
2014/01/27 PHP
PHP采集静态页面并把页面css,img,js保存的方法
2014/12/23 PHP
php使用APC实现实时上传进度条功能
2015/10/26 PHP
Zend Framework教程之Bootstrap类用法概述
2016/03/14 PHP
PHP编程实现的TCP服务端和客户端功能示例
2018/04/13 PHP
实践中学习AngularJS表单
2016/03/21 Javascript
浅析js绑定事件的常用方法
2016/05/15 Javascript
文本框只能输入数字的js代码(含小数点)
2016/07/10 Javascript
JS中使用正则表达式g模式和非g模式的区别
2017/04/01 Javascript
BootStrap selectpicker后台动态绑定数据
2017/06/01 Javascript
jquery实现放大镜简洁代码(推荐)
2017/06/08 jQuery
详解wow.js中各种特效对应的类名
2017/09/13 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
2017/09/18 Javascript
Vue-Router2.X多种路由实现方式总结
2018/02/09 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
2018/03/08 Javascript
angularJs提交文本框数据到后台的方法
2018/10/08 Javascript
ES6 Class中实现私有属性的一些方法总结
2019/07/08 Javascript
JS数组方法join()用法实例分析
2020/01/18 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
2020/01/21 Javascript
在Vue.js中使用TypeScript的方法
2020/03/19 Javascript
vscode 调试 node.js的方法步骤
2020/09/15 Javascript
[48:24]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第一场 12.09
2020/12/12 DOTA
Python获取服务器信息的最简单实现方法
2015/03/05 Python
举例详解Python中循环语句的嵌套使用
2015/05/14 Python
使用PyCharm创建Django项目及基本配置详解
2018/10/24 Python
浅谈Python 列表字典赋值的陷阱
2019/01/20 Python
在python带权重的列表中随机取值的方法
2019/01/23 Python
python主线程与子线程的结束顺序实例解析
2019/12/17 Python
常用python爬虫库介绍与简要说明
2020/01/25 Python
巴西网上药房:onofre
2016/11/21 全球购物
为智能设备设计个性化保护套网站:caseable
2017/01/05 全球购物
国际政治学专业推荐信
2014/09/26 职场文书
python设置 matplotlib 正确显示中文的四种方式
2021/05/10 Python
nginx日志格式分析和修改
2022/04/28 Servers
mysql 获取相邻数据项
2022/05/11 MySQL