element-ui dialog對話框組件的具體使用

對話框的格式:

<el-dialog>
</el-dialog>

dialog的屬性

---

dialog的插槽

插槽比較常用

dialog的事件

常用屬性與事件的說明

屬性
:visible.sync="dialogVisible"   是否顯示對話框，.sync修飾符實時更新數據
				參數為boolean類型,為true時顯示對話框，為false不顯示對話框
:titel="title"			對話框的標題，參數為string類型
width="30%"			對話框的寬度
:append-to-body="true"		對話框自身是否插入到body元素中，(嵌套的對話框該屬性必須為true,默認為false)
:before-close="function()"      關閉前的回調，會暫停對話框的關閉，是處理對話框中關閉按鈕的事件
事件
@close="function()"		對話框關閉的回調，一般用於清空彈窗中的數據

實例

父組件

<template>
  <div class="app-container">
    <div class="the-container">
      <div>
        <el-button type="primary" @click="openDialog">打開對話框</el-button>
      </div>
    </div>
    <Dialog ref="dialog" />
  </div>
</template>

<script>
import Dialog from './dialog'
export default {
  name: 'Index',
  components: {
    Dialog
  },
  data() {
    return {
    }
  },
  methods: {
    openDialog() {
      this.$refs.dialog.show()
    }
  }
}
</script>

<style lang="scss" scoped>
  .app-container{
    height: 100%;
    background-color: #f1f1f1;
  }
  .the-container{
    height: 100%;
    background-color: #fff;
    padding: 20px;
    display: flex;
    justify-content: center;
  }
</style>

子組件

<template>
  <el-dialog
    title="提示"
    :visible="dialogVisible"
    width="30%"
    :append-to-body="true"
    @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>

</template>

<script>
export default {
  name: 'Dialog',
  data() {
    return {
      dialogVisible: false
    }
  },
  methods: {
    show() {
      this.dialogVisible = true
    },
    handleClose() {
      this.dialogVisible = false
      console.log('close')
    }
  }
}
</script>

<style scoped>

</style>