Dialog 對話框
用于彈出窗口
按需引入方式
如果是完整引入可跳過此步驟
import Vue from 'vue'
import { Dialog } from 'element-ui'
import 'element-ui/lib/theme-chalk/base.css'
import 'element-ui/lib/theme-chalk/dialog.css'Vue.use(Dialog)
基礎使用
<template><el-button @click="dialogVisible = true">點擊打開 Dialog</el-button><el-dialog title="提示" :visible.sync="dialogVisible" width="30%"><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 {data() {return {dialogVisible: false}}
}
</script>
Attributes
| 參數 | 說明 | 類型 | 默認值 |
|---|---|---|---|
| visible | 是否顯示 Dialog | boolean | false |
| title | 標題 | string | |
| width | Dialog 的寬度 | string | 50% |
| ... |
原文鏈接：菜園前端
