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