快捷導(dǎo)航

Element Dialog對話框的使用示例

更新時間：2020年07月26日 14:29:03 作者：ForeverJPB.

這篇文章主要介紹了Element Dialog對話框的使用示例,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

組件— 對話框

基本用法

<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('確認(rèn)關(guān)閉？')
     .then(_ => {
      done();
     })
     .catch(_ => {});
   }
  }
 };
</script>

自定義內(nèi)容

<!-- 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="活動區(qū)域" :label-width="formLabelWidth">
   <el-select v-model="form.region" placeholder="請選擇活動區(qū)域">
    <el-option label="區(qū)域一" value="shanghai"></el-option>
    <el-option label="區(qū)域二" 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: '上海市普陀區(qū)金沙江路 1518 弄'
    }, {
     date: '2016-05-04',
     name: '王小虎',
     address: '上海市普陀區(qū)金沙江路 1518 弄'
    }, {
     date: '2016-05-01',
     name: '王小虎',
     address: '上海市普陀區(qū)金沙江路 1518 弄'
    }, {
     date: '2016-05-03',
     name: '王小虎',
     address: '上海市普陀區(qū)金沙江路 1518 弄'
    }],
    dialogTableVisible: false,
    dialogFormVisible: false,
    form: {
     name: '',
     region: '',
     date1: '',
     date2: '',
     delivery: false,
     type: [],
     resource: '',
     desc: ''
    },
    formLabelWidth: '120px'
   };
  }
 };
</script>

嵌套的 Dialog

<template>
 <el-button type="text" @click="outerVisible = true">點擊打開外層 Dialog</el-button>
 
 <el-dialog title="外層 Dialog" :visible.sync="outerVisible">
  <el-dialog
   width="30%"
   title="內(nèi)層 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">打開內(nèi)層 Dialog</el-button>
  </div>
 </el-dialog>
</template>

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

居中布局

<template>
 <el-button type="text" @click="outerVisible = true">點擊打開外層 Dialog</el-button>
 
 <el-dialog title="外層 Dialog" :visible.sync="outerVisible">
  <el-dialog
   width="30%"
   title="內(nèi)層 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">打開內(nèi)層 Dialog</el-button>
  </div>
 </el-dialog>
</template>

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

Attributes

Slot

Events

Element 對話框簡單使用

官方文檔介紹的是頁內(nèi)對話框，但沒有基于組件的對話框，這里記錄一下，原理就是父子傳值是否顯示

父頁導(dǎo)入組件

<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"
        對話框打開后是否可以點擊后邊灰色區(qū)域關(guān)閉對話框
        :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() {
        //打開對話框執(zhí)行
      },
      onClose() {
        //關(guān)閉對話框執(zhí)行清除以上字段內(nèi)容
        this.$refs['elForm'].resetFields()
      },
      close() {
        //手工調(diào)用關(guān)閉，顯示狀態(tài)為隱藏
        this.$emit('update:visible', false)
      },
      handelConfirm() {
        this.$refs['elForm'].validate(valid => {
          if (valid) {
            //點擊確定后執(zhí)行驗證并執(zhí)行方法,執(zhí)行完畢后調(diào)用close()方法
            this.$message.success({
              message: "成功了"
            })
            this.close()
          }
        })
      }
    }
  }

</script>

執(zhí)行效果