快活林资源网

Element Dialog对话框的使用示例
网络编程 2024/12/23 佚名
3 1
快活林资源网 Design By www.csstdc.com

组件— 对话框

基本用法

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对话框的使用示例

快活林资源网 Design By www.csstdc.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
快活林资源网 Design By www.csstdc.com
www.csstdc.com 快活林资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
快活林资源网 Design By www.csstdc.com