"use strict";(self["webpackChunklin_cms_vue"]=self["webpackChunklin_cms_vue"]||[]).push([[9462],{77081:function(n,e,t){t.r(e),t.d(e,{default:function(){return W}});t(62010);var l=t(20641),a=t(90033),i=t(53751),u=function(n){return(0,l.Qi)("data-v-5c81e650"),n=n(),(0,l.jt)(),n},s={class:"lin-container"},r=u((function(){return(0,l.Lk)("div",{class:"lin-title"},"Tag 标签",-1)})),o={class:"lin-wrap-ui"},c=u((function(){return(0,l.Lk)("span",null,"基础用法",-1)})),p={style:{"white-space":"pre-wrap"}},f=u((function(){return(0,l.Lk)("span",null,"可移除标签",-1)})),d={style:{"white-space":"pre-wrap"}},g=u((function(){return(0,l.Lk)("div",{slot:"header"},[(0,l.Lk)("span",null,"动态编辑标签")],-1)})),m={style:{"white-space":"pre-wrap"}},b=u((function(){return(0,l.Lk)("div",{slot:"header"},[(0,l.Lk)("span",null,"不同尺寸")],-1)})),k={style:{"white-space":"pre-wrap"}},y=u((function(){return(0,l.Lk)("div",{slot:"header"},[(0,l.Lk)("span",null,"不同主题,通过设置effect属性来改变主题，默认为 light")],-1)})),h={class:"block"},v=u((function(){return(0,l.Lk)("span",{class:"demonstration"},"Dark主题",-1)})),_={class:"tag-group"},w={class:"block"},F=u((function(){return(0,l.Lk)("span",{class:"demonstration"},"Plain主题",-1)})),C={class:"tag-group"},L={style:{"white-space":"pre-wrap"}};function V(n,e,t,u,V,x){var 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",s,[r,(0,l.Lk)("div",o,[(0,l.bF)(X,{style:{"margin-bottom":"50px"}},{header:(0,l.k6)((function(){return[c]})),default:(0,l.k6)((function(){return[(0,l.bF)(I,null,{default:(0,l.k6)((function(){return[(0,l.Lk)("div",null,[(0,l.bF)(T,null,{default:(0,l.k6)((function(){return[(0,l.eW)("标签一")]})),_:1}),(0,l.bF)(T,{type:"success"},{default:(0,l.k6)((function(){return[(0,l.eW)("标签二")]})),_:1}),(0,l.bF)(T,{type:"info"},{default:(0,l.k6)((function(){return[(0,l.eW)("标签三")]})),_:1}),(0,l.bF)(T,{type:"warning"},{default:(0,l.k6)((function(){return[(0,l.eW)("标签四")]})),_:1}),(0,l.bF)(T,{type:"danger"},{default:(0,l.k6)((function(){return[(0,l.eW)("标签五")]})),_:1})])]})),_:1}),(0,l.bF)(z,null,{default:(0,l.k6)((function(){return[(0,l.bF)(W,{title:"查看代码",name:"2"},{default:(0,l.k6)((function(){return[(0,l.Lk)("div",p,(0,a.v_)(V.base),1)]})),_:1})]})),_:1})]})),_:1}),(0,l.bF)(X,{style:{"margin-bottom":"50px"}},{header:(0,l.k6)((function(){return[f]})),default:(0,l.k6)((function(){return[(0,l.bF)(I,null,{default:(0,l.k6)((function(){return[(0,l.Lk)("div",null,[((0,l.uX)(!0),(0,l.CE)(l.FK,null,(0,l.pI)(V.tags,(function(n){return(0,l.uX)(),(0,l.Wv)(T,{key:n.name,closable:"",onClose:function(e){return x.handleCloseTag(n)},type:n.type},{default:(0,l.k6)((function(){return[(0,l.eW)((0,a.v_)(n.name),1)]})),_:2},1032,["onClose","type"])})),128))])]})),_:1}),(0,l.bF)(z,{class:"test",style:{color:"red"}},{default:(0,l.k6)((function(){return[(0,l.bF)(W,{title:"查看代码",name:"2"},{default:(0,l.k6)((function(){return[(0,l.Lk)("div",d,(0,a.v_)(V.closable),1)]})),_:1})]})),_:1})]})),_:1}),(0,l.bF)(X,{style:{"margin-bottom":"50px"}},{default:(0,l.k6)((function(){return[g,(0,l.bF)(I,null,{default:(0,l.k6)((function(){return[(0,l.Lk)("div",null,[((0,l.uX)(!0),(0,l.CE)(l.FK,null,(0,l.pI)(V.dynamicTags,(function(n){return(0,l.uX)(),(0,l.Wv)(T,{key:n,closable:"","disable-transitions":!1,onClose:function(e){return x.handleClose(n)}},{default:(0,l.k6)((function(){return[(0,l.eW)((0,a.v_)(n),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":e[0]||(e[0]=function(n){return V.inputValue=n}),ref:"saveTagInput",size:"small",onKeyup:(0,i.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:e[1]||(e[1]=function(){return x.showInput&&x.showInput.apply(x,arguments)})}))])]})),_:1}),(0,l.bF)(z,{class:"test",style:{color:"red"}},{default:(0,l.k6)((function(){return[(0,l.bF)(W,{title:"查看代码",name:"2"},{default:(0,l.k6)((function(){return[(0,l.Lk)("div",m,(0,a.v_)(V.dynamic),1)]})),_:1})]})),_:1})]})),_:1}),(0,l.bF)(X,{style:{"margin-bottom":"50px"}},{default:(0,l.k6)((function(){return[b,(0,l.bF)(I,null,{default:(0,l.k6)((function(){return[(0,l.Lk)("div",null,[(0,l.bF)(T,{closable:""},{default:(0,l.k6)((function(){return[(0,l.eW)("默认标签")]})),_:1}),(0,l.bF)(T,{size:"medium",closable:""},{default:(0,l.k6)((function(){return[(0,l.eW)("中等标签")]})),_:1}),(0,l.bF)(T,{size:"small",closable:""},{default:(0,l.k6)((function(){return[(0,l.eW)("小型标签")]})),_:1}),(0,l.bF)(T,{size:"mini",closable:""},{default:(0,l.k6)((function(){return[(0,l.eW)("超小标签")]})),_:1})])]})),_:1}),(0,l.bF)(z,null,{default:(0,l.k6)((function(){return[(0,l.bF)(W,{title:"查看代码",name:"2"},{default:(0,l.k6)((function(){return[(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)((function(){return[y,(0,l.bF)(I,null,{default:(0,l.k6)((function(){return[(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,(function(n){return(0,l.uX)(),(0,l.Wv)(T,{key:n.label,type:n.type,effect:"dark"},{default:(0,l.k6)((function(){return[(0,l.eW)((0,a.v_)(n.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,(function(n){return(0,l.uX)(),(0,l.Wv)(T,{key:n.label,type:n.type,effect:"plain"},{default:(0,l.k6)((function(){return[(0,l.eW)((0,a.v_)(n.label),1)]})),_:2},1032,["type"])})),128))])])]})),_:1}),(0,l.bF)(z,null,{default:(0,l.k6)((function(){return[(0,l.bF)(W,{title:"查看代码",name:"2"},{default:(0,l.k6)((function(){return[(0,l.Lk)("div",L,(0,a.v_)(V.theme),1)]})),_:1})]})),_:1})]})),_:1})])])}t(44114),t(54554);var x={name:"",components:{},data:function(){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:function(){this.init()},methods:{handleInputConfirm:function(){var n=this.inputValue;n&&this.dynamicTags.push(n),this.inputVisible=!1,this.inputValue=""},handleCloseTag:function(n){this.tags.splice(this.tags.indexOf(n),1)},handleClose:function(n){this.dynamicTags.splice(this.dynamicTags.indexOf(n),1)},showInput:function(){var n=this;this.inputVisible=!0,this.$nextTick((function(){n.$refs.saveTagInput.$refs.input.focus()}))},init:function(){}}},T=t(66262);const I=(0,T.A)(x,[["render",V],["__scopeId","data-v-5c81e650"]]);var W=I}}]);
|
