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