"use strict";(self["webpackChunklin_cms_vue"]=self["webpackChunklin_cms_vue"]||[]).push([[6947],{46947:function(e,n,t){t.r(n),t.d(n,{default:function(){return W}});t(62010);var l=t(20641),i=t(90033),o=function(e){return(0,l.Qi)("data-v-7d6a3ef8"),e=e(),(0,l.jt)(),e},a={class:"lin-container"},r=o((function(){return(0,l.Lk)("div",{class:"lin-title"},"Dialog 对话框",-1)})),u={class:"lin-wrap-ui"},d=o((function(){return(0,l.Lk)("div",null,[(0,l.Lk)("span",null,"基础用法")],-1)})),s=o((function(){return(0,l.Lk)("span",null,"这是一段信息",-1)})),c={class:"dialog-footer"},b={style:{"white-space":"pre-wrap"}},f=o((function(){return(0,l.Lk)("div",null,[(0,l.Lk)("span",null,"自定义内容")],-1)})),p={class:"dialog-footer"},m={style:{"white-space":"pre-wrap"}},g=o((function(){return(0,l.Lk)("div",null,[(0,l.Lk)("span",null,"嵌套的 Dialog")],-1)})),k=o((function(){return(0,l.Lk)("span",{class:"demonstration"},"如果需要在一个 Dialog 内部嵌套另一个 Dialog，需要使用 append-to-body 属性",-1)})),V={class:"dialog-footer"},v={style:{"white-space":"pre-wrap"}},y=o((function(){return(0,l.Lk)("div",null,[(0,l.Lk)("span",null,"居中布局")],-1)})),F=o((function(){return(0,l.Lk)("span",{class:"demonstration"},"标题和底部可水平居中",-1)})),h=o((function(){return(0,l.Lk)("span",null,"需要注意的是内容是默认不居中的",-1)})),_={class:"dialog-footer"},D={style:{"white-space":"pre-wrap"}};function w(e,n,t,o,w,L){var x=(0,l.g2)("el-button"),C=(0,l.g2)("el-dialog"),W=(0,l.g2)("el-row"),T=(0,l.g2)("el-collapse-item"),U=(0,l.g2)("el-collapse"),j=(0,l.g2)("el-card"),B=(0,l.g2)("el-table-column"),$=(0,l.g2)("el-table"),A=(0,l.g2)("el-input"),E=(0,l.g2)("el-form-item"),I=(0,l.g2)("el-option"),Q=(0,l.g2)("el-select"),X=(0,l.g2)("el-form");return(0,l.uX)(),(0,l.CE)("div",a,[r,(0,l.Lk)("div",u,[(0,l.bF)(j,{style:{"margin-bottom":"50px"}},{header:(0,l.k6)((function(){return[d]})),default:(0,l.k6)((function(){return[(0,l.bF)(W,null,{default:(0,l.k6)((function(){return[(0,l.bF)(x,{type:"text",onClick:n[0]||(n[0]=function(e){return w.dialogVisible=!0})},{default:(0,l.k6)((function(){return[(0,l.eW)("点击打开 Dialog")]})),_:1}),(0,l.bF)(C,{title:"提示",visible:w.dialogVisible,"onUpdate:visible":n[3]||(n[3]=function(e){return w.dialogVisible=e}),width:"30%","before-close":L.handleClose},{footer:(0,l.k6)((function(){return[(0,l.Lk)("span",c,[(0,l.bF)(x,{onClick:n[1]||(n[1]=function(e){return w.dialogVisible=!1})},{default:(0,l.k6)((function(){return[(0,l.eW)("取 消")]})),_:1}),(0,l.bF)(x,{type:"primary",onClick:n[2]||(n[2]=function(e){return w.dialogVisible=!1})},{default:(0,l.k6)((function(){return[(0,l.eW)("确 定")]})),_:1})])]})),default:(0,l.k6)((function(){return[s]})),_:1},8,["visible","before-close"])]})),_:1}),(0,l.bF)(U,null,{default:(0,l.k6)((function(){return[(0,l.bF)(T,{title:"查看代码",name:"2"},{default:(0,l.k6)((function(){return[(0,l.Lk)("div",b,(0,i.v_)(w.base),1)]})),_:1})]})),_:1})]})),_:1}),(0,l.bF)(j,{style:{"margin-bottom":"50px"}},{header:(0,l.k6)((function(){return[f]})),default:(0,l.k6)((function(){return[(0,l.bF)(W,null,{default:(0,l.k6)((function(){return[(0,l.bF)(x,{type:"text",onClick:n[4]||(n[4]=function(e){return w.dialogTableVisible=!0})},{default:(0,l.k6)((function(){return[(0,l.eW)("打开嵌套表格的 Dialog")]})),_:1}),(0,l.bF)(C,{title:"收货地址",visible:w.dialogTableVisible,"onUpdate:visible":n[5]||(n[5]=function(e){return w.dialogTableVisible=e})},{default:(0,l.k6)((function(){return[(0,l.bF)($,{data:w.gridData},{default:(0,l.k6)((function(){return[(0,l.bF)(B,{property:"date",label:"日期",width:"150"}),(0,l.bF)(B,{property:"name",label:"姓名",width:"200"}),(0,l.bF)(B,{property:"address",label:"地址"})]})),_:1},8,["data"])]})),_:1},8,["visible"]),(0,l.bF)(x,{type:"text",onClick:n[6]||(n[6]=function(e){return w.dialogFormVisible=!0})},{default:(0,l.k6)((function(){return[(0,l.eW)("打开嵌套表单的 Dialog")]})),_:1}),(0,l.bF)(C,{title:"收货地址",visible:w.dialogFormVisible,"onUpdate:visible":n[11]||(n[11]=function(e){return w.dialogFormVisible=e}),class:"dialogForm"},{footer:(0,l.k6)((function(){return[(0,l.Lk)("div",p,[(0,l.bF)(x,{onClick:n[9]||(n[9]=function(e){return w.dialogFormVisible=!1})},{default:(0,l.k6)((function(){return[(0,l.eW)("取 消")]})),_:1}),(0,l.bF)(x,{type:"primary",onClick:n[10]||(n[10]=function(e){return w.dialogFormVisible=!1})},{default:(0,l.k6)((function(){return[(0,l.eW)("确 定")]})),_:1})])]})),default:(0,l.k6)((function(){return[(0,l.bF)(X,{model:w.form},{default:(0,l.k6)((function(){return[(0,l.bF)(E,{label:"活动名称","label-width":w.formLabelWidth},{default:(0,l.k6)((function(){return[(0,l.bF)(A,{modelValue:w.form.name,"onUpdate:modelValue":n[7]||(n[7]=function(e){return w.form.name=e}),autocomplete:"off"},null,8,["modelValue"])]})),_:1},8,["label-width"]),(0,l.bF)(E,{label:"活动区域","label-width":w.formLabelWidth},{default:(0,l.k6)((function(){return[(0,l.bF)(Q,{modelValue:w.form.region,"onUpdate:modelValue":n[8]||(n[8]=function(e){return w.form.region=e}),placeholder:"请选择活动区域"},{default:(0,l.k6)((function(){return[(0,l.bF)(I,{label:"区域一",value:"shanghai"}),(0,l.bF)(I,{label:"区域二",value:"beijing"})]})),_:1},8,["modelValue"])]})),_:1},8,["label-width"])]})),_:1},8,["model"])]})),_:1},8,["visible"])]})),_:1}),(0,l.bF)(U,{class:"test",style:{color:"red"}},{default:(0,l.k6)((function(){return[(0,l.bF)(T,{title:"查看代码",name:"2"},{default:(0,l.k6)((function(){return[(0,l.Lk)("div",m,(0,i.v_)(w.diy),1)]})),_:1})]})),_:1})]})),_:1}),(0,l.bF)(j,{style:{"margin-bottom":"50px"}},{header:(0,l.k6)((function(){return[g]})),default:(0,l.k6)((function(){return[(0,l.bF)(W,null,{default:(0,l.k6)((function(){return[k,(0,l.Lk)("template",null,[(0,l.bF)(x,{type:"text",onClick:n[12]||(n[12]=function(e){return w.outerVisible=!0})},{default:(0,l.k6)((function(){return[(0,l.eW)("点击打开外层 Dialog")]})),_:1}),(0,l.bF)(C,{title:"外层 Dialog",visible:w.outerVisible,"onUpdate:visible":n[16]||(n[16]=function(e){return w.outerVisible=e})},{footer:(0,l.k6)((function(){return[(0,l.Lk)("div",V,[(0,l.bF)(x,{onClick:n[14]||(n[14]=function(e){return w.outerVisible=!1})},{default:(0,l.k6)((function(){return[(0,l.eW)("取 消")]})),_:1}),(0,l.bF)(x,{type:"primary",onClick:n[15]||(n[15]=function(e){return w.innerVisible=!0})},{default:(0,l.k6)((function(){return[(0,l.eW)("打开内层 Dialog")]})),_:1})])]})),default:(0,l.k6)((function(){return[(0,l.bF)(C,{width:"30%",title:"内层 Dialog",visible:w.innerVisible,"onUpdate:visible":n[13]||(n[13]=function(e){return w.innerVisible=e}),"append-to-body":""},null,8,["visible"])]})),_:1},8,["visible"])])]})),_:1}),(0,l.bF)(U,{class:"test",style:{color:"red"}},{default:(0,l.k6)((function(){return[(0,l.bF)(T,{title:"查看代码",name:"2"},{default:(0,l.k6)((function(){return[(0,l.Lk)("div",v,(0,i.v_)(w.appendToBody),1)]})),_:1})]})),_:1})]})),_:1}),(0,l.bF)(j,{style:{"margin-bottom":"50px"}},{header:(0,l.k6)((function(){return[y]})),default:(0,l.k6)((function(){return[(0,l.bF)(W,null,{default:(0,l.k6)((function(){return[F,(0,l.bF)(x,{type:"text",onClick:n[17]||(n[17]=function(e){return w.centerDialogVisible=!0})},{default:(0,l.k6)((function(){return[(0,l.eW)("点击打开 Dialog")]})),_:1}),(0,l.bF)(C,{title:"提示",visible:w.centerDialogVisible,"onUpdate:visible":n[20]||(n[20]=function(e){return w.centerDialogVisible=e}),width:"30%",center:""},{footer:(0,l.k6)((function(){return[(0,l.Lk)("span",_,[(0,l.bF)(x,{onClick:n[18]||(n[18]=function(e){return w.centerDialogVisible=!1})},{default:(0,l.k6)((function(){return[(0,l.eW)("取 消")]})),_:1}),(0,l.bF)(x,{type:"primary",onClick:n[19]||(n[19]=function(e){return w.centerDialogVisible=!1})},{default:(0,l.k6)((function(){return[(0,l.eW)("确 定")]})),_:1})])]})),default:(0,l.k6)((function(){return[h]})),_:1},8,["visible"])]})),_:1}),(0,l.bF)(U,{class:"test",style:{color:"red"}},{default:(0,l.k6)((function(){return[(0,l.bF)(T,{title:"查看代码",name:"2"},{default:(0,l.k6)((function(){return[(0,l.Lk)("div",D,(0,i.v_)(w.center),1)]})),_:1})]})),_:1})]})),_:1})])])}var L={name:"",components:{},data:function(){return{centerDialogVisible:!1,outerVisible:!1,innerVisible:!1,dialogVisible:!1,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:!1,dialogFormVisible:!1,form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},formLabelWidth:"120px",base:'\n <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>\n\n<el-dialog\n title="提示"\n :visible.sync="dialogVisible"\n width="30%"\n :before-close="handleClose">\n <span>这是一段信息</span>\n <span slot="footer" class="dialog-footer">\n <el-button @click="dialogVisible = false">取 消</el-button>\n <el-button type="primary" @click="dialogVisible = false">确 定</el-button>\n </span>\n</el-dialog>\n\n<script>\n export default {\n data() {\n return {\n dialogVisible: false\n };\n },\n methods: {\n handleClose(done) {\n this.$confirm(\'确认关闭？\')\n .then(_ => {\n done();\n })\n .catch(_ => {});\n }\n }\n };\n<\/script>',diy:'\x3c!-- Table --\x3e\n<el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>\n\n<el-dialog title="收货地址" :visible.sync="dialogTableVisible">\n <el-table :data="gridData">\n <el-table-column property="date" label="日期" width="150"></el-table-column>\n <el-table-column property="name" label="姓名" width="200"></el-table-column>\n <el-table-column property="address" label="地址"></el-table-column>\n </el-table>\n</el-dialog>\n\n\x3c!-- Form --\x3e\n<el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>\n\n<el-dialog title="收货地址" :visible.sync="dialogFormVisible">\n <el-form :model="form">\n <el-form-item label="活动名称" :label-width="formLabelWidth">\n <el-input v-model="form.name" autocomplete="off"></el-input>\n </el-form-item>\n <el-form-item label="活动区域" :label-width="formLabelWidth">\n <el-select v-model="form.region" placeholder="请选择活动区域">\n <el-option label="区域一" value="shanghai"></el-option>\n <el-option label="区域二" value="beijing"></el-option>\n </el-select>\n </el-form-item>\n </el-form>\n <div slot="footer" class="dialog-footer">\n <el-button @click="dialogFormVisible = false">取 消</el-button>\n <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>\n </div>\n</el-dialog>\n\n<script>\n export default {\n data() {\n return {\n gridData: [{\n date: \'2016-05-02\',\n name: \'王小虎\',\n address: \'上海市普陀区金沙江路 1518 弄\'\n }, {\n date: \'2016-05-04\',\n name: \'王小虎\',\n address: \'上海市普陀区金沙江路 1518 弄\'\n }, {\n date: \'2016-05-01\',\n name: \'王小虎\',\n address: \'上海市普陀区金沙江路 1518 弄\'\n }, {\n date: \'2016-05-03\',\n name: \'王小虎\',\n address: \'上海市普陀区金沙江路 1518 弄\'\n }],\n dialogTableVisible: false,\n dialogFormVisible: false,\n form: {\n name: \'\',\n region: \'\',\n date1: \'\',\n date2: \'\',\n delivery: false,\n type: [],\n resource: \'\',\n desc: \'\'\n },\n formLabelWidth: \'120px\'\n };\n }\n };\n<\/script>',appendToBody:'\n<template>\n <el-button type="text" @click="outerVisible = true">点击打开外层 Dialog</el-button>\n\n <el-dialog title="外层 Dialog" :visible.sync="outerVisible">\n <el-dialog\n width="30%"\n title="内层 Dialog"\n :visible.sync="innerVisible"\n append-to-body>\n </el-dialog>\n <div slot="footer" class="dialog-footer">\n <el-button @click="outerVisible = false">取 消</el-button>\n <el-button type="primary" @click="innerVisible = true">打开内层 Dialog</el-button>\n </div>\n </el-dialog>\n</template>\n\n<script>\n export default {\n data() {\n return {\n outerVisible: false,\n innerVisible: false\n };\n }\n }\n<\/script>',center:'<el-button type="text" @click="centerDialogVisible = true">点击打开 Dialog</el-button>\n\n<el-dialog\n title="提示"\n :visible.sync="centerDialogVisible"\n width="30%"\n center>\n <span>需要注意的是内容是默认不居中的</span>\n <span slot="footer" class="dialog-footer">\n <el-button @click="centerDialogVisible = false">取 消</el-button>\n <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>\n </span>\n</el-dialog>\n\n<script>\n export default {\n data() {\n return {\n centerDialogVisible: false\n };\n }\n };\n<\/script>'}},computed:{},watch:{},mounted:function(){this.init()},methods:{handleClose:function(e){this.$confirm("确认关闭？").then((function(n){e()})).catch((function(e){}))},init:function(){}}},x=t(66262);const C=(0,x.A)(L,[["render",w],["__scopeId","data-v-7d6a3ef8"]]);var W=C}}]);
|
