"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}}]);
//# sourceMappingURL=9462-legacy.cba4a5bf.js.map