"use strict";(self["webpackChunklin_cms_vue"]=self["webpackChunklin_cms_vue"]||[]).push([[5931],{85931:function(t,e,n){n.r(e),n.d(e,{default:function(){return A}});n(52675),n(89463);var i=n(20641),l=n(90033),s=function(t){return(0,i.Qi)("data-v-45dcb760"),t=t(),(0,i.jt)(),t},u={class:"lin-container"},c=s((function(){return(0,i.Lk)("div",{class:"lin-title"},"Steps 步骤条",-1)})),r={class:"lin-wrap-ui"},p=s((function(){return(0,i.Lk)("div",{slot:"header"},[(0,i.Lk)("span",null,"基础用法")],-1)})),a={style:{"white-space":"pre-wrap"}},o=s((function(){return(0,i.Lk)("div",{slot:"header"},[(0,i.Lk)("span",null,"含状态步骤条")],-1)})),d={style:{"white-space":"pre-wrap"}},f=s((function(){return(0,i.Lk)("div",{slot:"header"},[(0,i.Lk)("span",null,"有描述的步骤条")],-1)})),b={style:{"white-space":"pre-wrap"}},k=s((function(){return(0,i.Lk)("div",{slot:"header"},[(0,i.Lk)("span",null,"居中的步骤条")],-1)})),v={style:{"white-space":"pre-wrap"}},F=s((function(){return(0,i.Lk)("div",{slot:"header"},[(0,i.Lk)("span",null,"带图标的步骤条")],-1)})),_={style:{"white-space":"pre-wrap"}},m=s((function(){return(0,i.Lk)("div",{slot:"header"},[(0,i.Lk)("span",null,"竖式步骤条")],-1)})),h={style:{height:"300px"}},L={style:{"white-space":"pre-wrap"}},g=s((function(){return(0,i.Lk)("div",{slot:"header"},[(0,i.Lk)("span",null,"简洁风格的步骤条")],-1)})),y={style:{"white-space":"pre-wrap"}};function w(t,e,n,s,w,x){var C=(0,i.g2)("el-step"),j=(0,i.g2)("el-steps"),A=(0,i.g2)("el-button"),B=(0,i.g2)("el-row"),E=(0,i.g2)("el-collapse-item"),I=(0,i.g2)("el-collapse"),Q=(0,i.g2)("el-card");return(0,i.uX)(),(0,i.CE)("div",u,[c,(0,i.Lk)("div",r,[(0,i.bF)(Q,{style:{"margin-bottom":"50px"}},{default:(0,i.k6)((function(){return[p,(0,i.bF)(B,null,{default:(0,i.k6)((function(){return[(0,i.Lk)("div",null,[(0,i.bF)(j,{active:w.active,"finish-status":"success"},{default:(0,i.k6)((function(){return[(0,i.bF)(C,{title:"步骤 1"}),(0,i.bF)(C,{title:"步骤 2"}),(0,i.bF)(C,{title:"步骤 3"})]})),_:1},8,["active"]),(0,i.bF)(A,{style:{"margin-top":"12px"},onClick:x.next},{default:(0,i.k6)((function(){return[(0,i.eW)("下一步")]})),_:1},8,["onClick"])])]})),_:1}),(0,i.bF)(I,null,{default:(0,i.k6)((function(){return[(0,i.bF)(E,{title:"查看代码",name:"2"},{default:(0,i.k6)((function(){return[(0,i.Lk)("div",a,(0,l.v_)(w.base),1)]})),_:1})]})),_:1})]})),_:1}),(0,i.bF)(Q,{style:{"margin-bottom":"50px"}},{default:(0,i.k6)((function(){return[o,(0,i.bF)(B,null,{default:(0,i.k6)((function(){return[(0,i.Lk)("div",null,[(0,i.bF)(j,{space:200,active:1,"finish-status":"success"},{default:(0,i.k6)((function(){return[(0,i.bF)(C,{title:"已完成"}),(0,i.bF)(C,{title:"进行中"}),(0,i.bF)(C,{title:"步骤 3"})]})),_:1})])]})),_:1}),(0,i.bF)(I,{class:"test",style:{color:"red"}},{default:(0,i.k6)((function(){return[(0,i.bF)(E,{title:"查看代码",name:"2"},{default:(0,i.k6)((function(){return[(0,i.Lk)("div",d,(0,l.v_)(w.title),1)]})),_:1})]})),_:1})]})),_:1}),(0,i.bF)(Q,{style:{"margin-bottom":"50px"}},{default:(0,i.k6)((function(){return[f,(0,i.bF)(B,null,{default:(0,i.k6)((function(){return[(0,i.Lk)("div",null,[(0,i.bF)(j,{active:1},{default:(0,i.k6)((function(){return[(0,i.bF)(C,{title:"步骤 1",description:"这是一段很长很长很长的描述性文字"}),(0,i.bF)(C,{title:"步骤 2",description:"这是一段很长很长很长的描述性文字"}),(0,i.bF)(C,{title:"步骤 3",description:"这段就没那么长了"})]})),_:1})])]})),_:1}),(0,i.bF)(I,{class:"test",style:{color:"red"}},{default:(0,i.k6)((function(){return[(0,i.bF)(E,{title:"查看代码",name:"2"},{default:(0,i.k6)((function(){return[(0,i.Lk)("div",b,(0,l.v_)(w.description),1)]})),_:1})]})),_:1})]})),_:1}),(0,i.bF)(Q,{style:{"margin-bottom":"50px"}},{default:(0,i.k6)((function(){return[k,(0,i.bF)(B,null,{default:(0,i.k6)((function(){return[(0,i.Lk)("div",null,[(0,i.bF)(j,{active:2,"align-center":""},{default:(0,i.k6)((function(){return[(0,i.bF)(C,{title:"步骤1",description:"这是一段很长很长很长的描述性文字"}),(0,i.bF)(C,{title:"步骤2",description:"这是一段很长很长很长的描述性文字"}),(0,i.bF)(C,{title:"步骤3",description:"这是一段很长很长很长的描述性文字"}),(0,i.bF)(C,{title:"步骤4",description:"这是一段很长很长很长的描述性文字"})]})),_:1})])]})),_:1}),(0,i.bF)(I,null,{default:(0,i.k6)((function(){return[(0,i.bF)(E,{title:"查看代码",name:"2"},{default:(0,i.k6)((function(){return[(0,i.Lk)("div",v,(0,l.v_)(w.alignCenter),1)]})),_:1})]})),_:1})]})),_:1}),(0,i.bF)(Q,{style:{"margin-bottom":"50px"}},{default:(0,i.k6)((function(){return[F,(0,i.bF)(B,null,{default:(0,i.k6)((function(){return[(0,i.Lk)("div",null,[(0,i.bF)(j,{active:1},{default:(0,i.k6)((function(){return[(0,i.bF)(C,{title:"步骤 1",icon:"el-icon-edit"}),(0,i.bF)(C,{title:"步骤 2",icon:"el-icon-upload"}),(0,i.bF)(C,{title:"步骤 3",icon:"el-icon-picture"})]})),_:1})])]})),_:1}),(0,i.bF)(I,null,{default:(0,i.k6)((function(){return[(0,i.bF)(E,{title:"查看代码",name:"2"},{default:(0,i.k6)((function(){return[(0,i.Lk)("div",_,(0,l.v_)(w.icon),1)]})),_:1})]})),_:1})]})),_:1}),(0,i.bF)(Q,{style:{"margin-bottom":"50px"}},{default:(0,i.k6)((function(){return[m,(0,i.bF)(B,null,{default:(0,i.k6)((function(){return[(0,i.Lk)("div",null,[(0,i.Lk)("div",h,[(0,i.bF)(j,{direction:"vertical",active:1},{default:(0,i.k6)((function(){return[(0,i.bF)(C,{title:"步骤 1"}),(0,i.bF)(C,{title:"步骤 2"}),(0,i.bF)(C,{title:"步骤 3",description:"这是一段很长很长很长的描述性文字"})]})),_:1})])])]})),_:1}),(0,i.bF)(I,null,{default:(0,i.k6)((function(){return[(0,i.bF)(E,{title:"查看代码",name:"2"},{default:(0,i.k6)((function(){return[(0,i.Lk)("div",L,(0,l.v_)(w.vertical),1)]})),_:1})]})),_:1})]})),_:1}),(0,i.bF)(Q,{style:{"margin-bottom":"50px"}},{default:(0,i.k6)((function(){return[g,(0,i.bF)(B,null,{default:(0,i.k6)((function(){return[(0,i.Lk)("div",null,[(0,i.bF)(j,{active:1,simple:""},{default:(0,i.k6)((function(){return[(0,i.bF)(C,{title:"步骤 1",icon:"el-icon-edit"}),(0,i.bF)(C,{title:"步骤 2",icon:"el-icon-upload"}),(0,i.bF)(C,{title:"步骤 3",icon:"el-icon-picture"})]})),_:1}),(0,i.bF)(j,{active:1,"finish-status":"success",simple:"",style:{"margin-top":"20px"}},{default:(0,i.k6)((function(){return[(0,i.bF)(C,{title:"步骤 1"}),(0,i.bF)(C,{title:"步骤 2"}),(0,i.bF)(C,{title:"步骤 3"})]})),_:1})])]})),_:1}),(0,i.bF)(I,null,{default:(0,i.k6)((function(){return[(0,i.bF)(E,{title:"查看代码",name:"2"},{default:(0,i.k6)((function(){return[(0,i.Lk)("div",y,(0,l.v_)(w.simple),1)]})),_:1})]})),_:1})]})),_:1})])])}var x={name:"LinCmsUiButton",components:{},data:function(){return{active:0,base:' \n <el-steps :active="active" finish-status="success">\n <el-step title="步骤 1"></el-step>\n <el-step title="步骤 2"></el-step>\n <el-step title="步骤 3"></el-step>\n </el-steps>\n\n <el-button style="margin-top: 12px;" @click="next">下一步</el-button>\n\n <script>\n export default {\n data() {\n return {\n active: 0\n };\n },\n\n methods: {\n next() {\n if (this.active++ > 2) this.active = 0;\n }\n }\n }\n <\/script>',title:'\n <el-steps :space="200" :active="1" finish-status="success">\n <el-step title="已完成"></el-step>\n <el-step title="进行中"></el-step>\n <el-step title="步骤 3"></el-step>\n </el-steps>',alignCenter:'\n <el-steps :active="2" align-center>\n <el-step title="步骤1" description="这是一段很长很长很长的描述性文字"></el-step>\n <el-step title="步骤2" description="这是一段很长很长很长的描述性文字"></el-step>\n <el-step title="步骤3" description="这是一段很长很长很长的描述性文字"></el-step>\n <el-step title="步骤4" description="这是一段很长很长很长的描述性文字"></el-step>\n </el-steps>',description:'\n <el-steps :active="1">\n <el-step title="步骤 1" description="这是一段很长很长很长的描述性文字"></el-step>\n <el-step title="步骤 2" description="这是一段很长很长很长的描述性文字"></el-step>\n <el-step title="步骤 3" description="这段就没那么长了"></el-step>\n </el-steps>',icon:'\n <el-steps :active="1">\n <el-step title="步骤 1" icon="el-icon-edit"></el-step>\n <el-step title="步骤 2" icon="el-icon-upload"></el-step>\n <el-step title="步骤 3" icon="el-icon-picture"></el-step>\n </el-steps>',vertical:'\n <div style="height: 300px;">\n <el-steps direction="vertical" :active="1">\n <el-step title="步骤 1"></el-step>\n <el-step title="步骤 2"></el-step>\n <el-step title="步骤 3" description="这是一段很长很长很长的描述性文字"></el-step>\n </el-steps>\n </div>',simple:'\n <el-steps :active="1" simple>\n <el-step title="步骤 1" icon="el-icon-edit"></el-step>\n <el-step title="步骤 2" icon="el-icon-upload"></el-step>\n <el-step title="步骤 3" icon="el-icon-picture"></el-step>\n </el-steps>\n\n <el-steps :active="1" finish-status="success" simple style="margin-top: 20px">\n <el-step title="步骤 1" ></el-step>\n <el-step title="步骤 2" ></el-step>\n <el-step title="步骤 3" ></el-step>\n /el-steps>'}},computed:{},watch:{},mounted:function(){this.init()},methods:{next:function(){this.active++>2&&(this.active=0)},init:function(){}}},C=n(66262);const j=(0,C.A)(x,[["render",w],["__scopeId","data-v-45dcb760"]]);var A=j}}]);
|
