"use strict";(self["webpackChunklin_cms_vue"]=self["webpackChunklin_cms_vue"]||[]).push([[9462],{77081:function(e,n,t){t.r(n),t.d(n,{default:function(){return W}});var l=t(20641),a=t(90033),s=t(53751);const i=e=>((0,l.Qi)("data-v-5c81e650"),e=e(),(0,l.jt)(),e),u={class:"lin-container"},p=i((()=>(0,l.Lk)("div",{class:"lin-title"},"Tag 标签",-1))),d={class:"lin-wrap-ui"},o=i((()=>(0,l.Lk)("span",null,"基础用法",-1))),g={style:{"white-space":"pre-wrap"}},c=i((()=>(0,l.Lk)("span",null,"可移除标签",-1))),r={style:{"white-space":"pre-wrap"}},m=i((()=>(0,l.Lk)("div",{slot:"header"},[(0,l.Lk)("span",null,"动态编辑标签")],-1))),b={style:{"white-space":"pre-wrap"}},f=i((()=>(0,l.Lk)("div",{slot:"header"},[(0,l.Lk)("span",null,"不同尺寸")],-1))),k={style:{"white-space":"pre-wrap"}},y=i((()=>(0,l.Lk)("div",{slot:"header"},[(0,l.Lk)("span",null,"不同主题,通过设置effect属性来改变主题，默认为 light")],-1))),h={class:"block"},v=i((()=>(0,l.Lk)("span",{class:"demonstration"},"Dark主题",-1))),_={class:"tag-group"},w={class:"block"},F=i((()=>(0,l.Lk)("span",{class:"demonstration"},"Plain主题",-1))),C={class:"tag-group"},L={style:{"white-space":"pre-wrap"}};function V(e,n,t,i,V,x){const T=(0,l.g2)("el-tag"),I=(0,l.g2)("el-row"),W=(0,l.g2)("el-collapse-item"),z=(0,l.g2)("el-collapse"),X=(0,l.g2)("el-card"),E=(0,l.g2)("el-input");return(0,l.uX)(),(0,l.CE)("div",u,[p,(0,l.Lk)("div",d,[(0,l.bF)(X,{style:{"margin-bottom":"50px"}},{header:(0,l.k6)((()=>[o])),default:(0,l.k6)((()=>[(0,l.bF)(I,null,{default:(0,l.k6)((()=>[(0,l.Lk)("div",null,[(0,l.bF)(T,null,{default:(0,l.k6)((()=>[(0,l.eW)("标签一")])),_:1}),(0,l.bF)(T,{type:"success"},{default:(0,l.k6)((()=>[(0,l.eW)("标签二")])),_:1}),(0,l.bF)(T,{type:"info"},{default:(0,l.k6)((()=>[(0,l.eW)("标签三")])),_:1}),(0,l.bF)(T,{type:"warning"},{default:(0,l.k6)((()=>[(0,l.eW)("标签四")])),_:1}),(0,l.bF)(T,{type:"danger"},{default:(0,l.k6)((()=>[(0,l.eW)("标签五")])),_:1})])])),_:1}),(0,l.bF)(z,null,{default:(0,l.k6)((()=>[(0,l.bF)(W,{title:"查看代码",name:"2"},{default:(0,l.k6)((()=>[(0,l.Lk)("div",g,(0,a.v_)(V.base),1)])),_:1})])),_:1})])),_:1}),(0,l.bF)(X,{style:{"margin-bottom":"50px"}},{header:(0,l.k6)((()=>[c])),default:(0,l.k6)((()=>[(0,l.bF)(I,null,{default:(0,l.k6)((()=>[(0,l.Lk)("div",null,[((0,l.uX)(!0),(0,l.CE)(l.FK,null,(0,l.pI)(V.tags,(e=>((0,l.uX)(),(0,l.Wv)(T,{key:e.name,closable:"",onClose:n=>x.handleCloseTag(e),type:e.type},{default:(0,l.k6)((()=>[(0,l.eW)((0,a.v_)(e.name),1)])),_:2},1032,["onClose","type"])))),128))])])),_:1}),(0,l.bF)(z,{class:"test",style:{color:"red"}},{default:(0,l.k6)((()=>[(0,l.bF)(W,{title:"查看代码",name:"2"},{default:(0,l.k6)((()=>[(0,l.Lk)("div",r,(0,a.v_)(V.closable),1)])),_:1})])),_:1})])),_:1}),(0,l.bF)(X,{style:{"margin-bottom":"50px"}},{default:(0,l.k6)((()=>[m,(0,l.bF)(I,null,{default:(0,l.k6)((()=>[(0,l.Lk)("div",null,[((0,l.uX)(!0),(0,l.CE)(l.FK,null,(0,l.pI)(V.dynamicTags,(e=>((0,l.uX)(),(0,l.Wv)(T,{key:e,closable:"","disable-transitions":!1,onClose:n=>x.handleClose(e)},{default:(0,l.k6)((()=>[(0,l.eW)((0,a.v_)(e),1)])),_:2},1032,["onClose"])))),128)),V.inputVisible?((0,l.uX)(),(0,l.Wv)(E,{key:0,class:"input-new-tag",modelValue:V.inputValue,"onUpdate:modelValue":n[0]||(n[0]=e=>V.inputValue=e),ref:"saveTagInput",size:"small",onKeyup:(0,s.jR)(x.handleInputConfirm,["enter"]),onBlur:x.handleInputConfirm},null,8,["modelValue","onKeyup","onBlur"])):((0,l.uX)(),(0,l.CE)("i",{key:1,class:"el-icon-circle-plus button-new-tag",onClick:n[1]||(n[1]=(...e)=>x.showInput&&x.showInput(...e))}))])])),_:1}),(0,l.bF)(z,{class:"test",style:{color:"red"}},{default:(0,l.k6)((()=>[(0,l.bF)(W,{title:"查看代码",name:"2"},{default:(0,l.k6)((()=>[(0,l.Lk)("div",b,(0,a.v_)(V.dynamic),1)])),_:1})])),_:1})])),_:1}),(0,l.bF)(X,{style:{"margin-bottom":"50px"}},{default:(0,l.k6)((()=>[f,(0,l.bF)(I,null,{default:(0,l.k6)((()=>[(0,l.Lk)("div",null,[(0,l.bF)(T,{closable:""},{default:(0,l.k6)((()=>[(0,l.eW)("默认标签")])),_:1}),(0,l.bF)(T,{size:"medium",closable:""},{default:(0,l.k6)((()=>[(0,l.eW)("中等标签")])),_:1}),(0,l.bF)(T,{size:"small",closable:""},{default:(0,l.k6)((()=>[(0,l.eW)("小型标签")])),_:1}),(0,l.bF)(T,{size:"mini",closable:""},{default:(0,l.k6)((()=>[(0,l.eW)("超小标签")])),_:1})])])),_:1}),(0,l.bF)(z,null,{default:(0,l.k6)((()=>[(0,l.bF)(W,{title:"查看代码",name:"2"},{default:(0,l.k6)((()=>[(0,l.Lk)("div",k,(0,a.v_)(V.size),1)])),_:1})])),_:1})])),_:1}),(0,l.bF)(X,{style:{"margin-bottom":"50px"}},{default:(0,l.k6)((()=>[y,(0,l.bF)(I,null,{default:(0,l.k6)((()=>[(0,l.Lk)("div",h,[v,(0,l.Lk)("div",_,[((0,l.uX)(!0),(0,l.CE)(l.FK,null,(0,l.pI)(V.items,(e=>((0,l.uX)(),(0,l.Wv)(T,{key:e.label,type:e.type,effect:"dark"},{default:(0,l.k6)((()=>[(0,l.eW)((0,a.v_)(e.label),1)])),_:2},1032,["type"])))),128))])]),(0,l.Lk)("div",w,[F,(0,l.Lk)("div",C,[((0,l.uX)(!0),(0,l.CE)(l.FK,null,(0,l.pI)(V.items,(e=>((0,l.uX)(),(0,l.Wv)(T,{key:e.label,type:e.type,effect:"plain"},{default:(0,l.k6)((()=>[(0,l.eW)((0,a.v_)(e.label),1)])),_:2},1032,["type"])))),128))])])])),_:1}),(0,l.bF)(z,null,{default:(0,l.k6)((()=>[(0,l.bF)(W,{title:"查看代码",name:"2"},{default:(0,l.k6)((()=>[(0,l.Lk)("div",L,(0,a.v_)(V.theme),1)])),_:1})])),_:1})])),_:1})])])}t(44114);var x={name:"",components:{},data(){return{items:[{type:"",label:"标签一"},{type:"success",label:"标签二"},{type:"info",label:"标签三"},{type:"danger",label:"标签四"},{type:"warning",label:"标签五"}],dynamicTags:["标签一","标签二","标签三"],inputVisible:!1,inputValue:"",tags:[{name:"标签一",type:""},{name:"标签二",type:"success"},{name:"标签三",type:"info"},{name:"标签四",type:"warning"},{name:"标签五",type:"danger"}],text:"",base:' \n <el-tag>标签一</el-tag>\n <el-tag type="success">标签二</el-tag>\n <el-tag type="info">标签三</el-tag>\n <el-tag type="warning">标签四</el-tag>\n <el-tag type="danger">标签五</el-tag>',closable:"\n <el-tag\n v-for=\"tag in tags\"\n :key=\"tag.name\"\n closable\n @close=\"handleCloseTag(tag)\"\n :type=\"tag.type\">\n {{tag.name}}\n </el-tag>\n\n <script>\n export default {\n data() {\n return {\n tags: [\n { name: '标签一', type: '' },\n { name: '标签二', type: 'success' },\n { name: '标签三', type: 'info' },\n { name: '标签四', type: 'warning' },\n { name: '标签五', type: 'danger' }\n ]\n };\n methods: {\n handleCloseTag(tag) {\n this.tags.splice(this.tags.indexOf(tag), 1);\n },\n }\n }\n <\/script>",dynamic:'\n <el-tag\n :key="tag"\n v-for="tag in dynamicTags"\n closable\n :disable-transitions="false"\n @close="handleClose(tag)">\n {{tag}}\n </el-tag>\n <el-input\n class="input-new-tag"\n v-if="inputVisible"\n v-model="inputValue"\n ref="saveTagInput"\n size="small"\n @keyup.enter.native="handleInputConfirm"\n @blur="handleInputConfirm"\n >\n </el-input>\n <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>\n\n <style>\n .el-tag + .el-tag {\n margin-left: 10px;\n }\n .button-new-tag {\n margin-left: 10px;\n height: 32px;\n line-height: 30px;\n padding-top: 0;\n padding-bottom: 0;\n }\n .input-new-tag {\n width: 90px;\n margin-left: 10px;\n vertical-align: bottom;\n }\n .input-new-tag :v-deep(.el-input__inner) {\n height: 24px;\n }\n </style>\n\n <script>\n export default {\n data() {\n return {\n dynamicTags: [\'标签一\', \'标签二\', \'标签三\'],\n inputVisible: false,\n inputValue: \'\'\n };\n },\n methods: {\n handleClose(tag) {\n this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);\n },\n\n showInput() {\n this.inputVisible = true;\n this.$nextTick(_ => {\n this.$refs.saveTagInput.$refs.input.focus();\n });\n },\n\n handleInputConfirm() {\n let inputValue = this.inputValue;\n if (inputValue) {\n this.dynamicTags.push(inputValue);\n }\n this.inputVisible = false;\n this.inputValue = \'\';\n }\n }\n }\n <\/script>',size:'\n <el-tag closable>默认标签</el-tag>\n <el-tag size="medium" closable>中等标签</el-tag>\n <el-tag size="small" closable>小型标签</el-tag>\n <el-tag size="mini" closable>超小标签</el-tag>\n ',theme:'<div class="tag-group">\n <span class="tag-group__title">Dark</span>\n <el-tag\n v-for="item in items"\n :key="item.label"\n :type="item.type"\n effect="dark">\n {{ item.label }}\n </el-tag>\n </div>\n <div class="tag-group">\n <span class="tag-group__title">Plain</span>\n <el-tag\n v-for="item in items"\n :key="item.label"\n :type="item.type"\n effect="plain">\n {{ item.label }}\n </el-tag>\n </div>\n\n <script>\n export default {\n data() {\n return {\n items: [\n { type: \'\', label: \'标签一\' },\n { type: \'success\', label: \'标签二\' },\n { type: \'info\', label: \'标签三\' },\n { type: \'danger\', label: \'标签四\' },\n { type: \'warning\', label: \'标签五\' }\n ]\n }\n }\n }\n <\/script>'}},computed:{},watch:{},mounted(){this.init()},methods:{handleInputConfirm(){let e=this.inputValue;e&&this.dynamicTags.push(e),this.inputVisible=!1,this.inputValue=""},handleCloseTag(e){this.tags.splice(this.tags.indexOf(e),1)},handleClose(e){this.dynamicTags.splice(this.dynamicTags.indexOf(e),1)},showInput(){this.inputVisible=!0,this.$nextTick((()=>{this.$refs.saveTagInput.$refs.input.focus()}))},init(){}}},T=t(66262);const I=(0,T.A)(x,[["render",V],["__scopeId","data-v-5c81e650"]]);var W=I}}]);
|
