"use strict";(self["webpackChunklin_cms_vue"]=self["webpackChunklin_cms_vue"]||[]).push([[5931],{85931:function(e,t,l){l.r(t),l.d(t,{default:function(){return A}});var i=l(20641),s=l(90033);const n=e=>((0,i.Qi)("data-v-45dcb760"),e=e(),(0,i.jt)(),e),p={class:"lin-container"},a=n((()=>(0,i.Lk)("div",{class:"lin-title"},"Steps 步骤条",-1))),c={class:"lin-wrap-ui"},d=n((()=>(0,i.Lk)("div",{slot:"header"},[(0,i.Lk)("span",null,"基础用法")],-1))),u={style:{"white-space":"pre-wrap"}},o=n((()=>(0,i.Lk)("div",{slot:"header"},[(0,i.Lk)("span",null,"含状态步骤条")],-1))),r={style:{"white-space":"pre-wrap"}},b=n((()=>(0,i.Lk)("div",{slot:"header"},[(0,i.Lk)("span",null,"有描述的步骤条")],-1))),k={style:{"white-space":"pre-wrap"}},v=n((()=>(0,i.Lk)("div",{slot:"header"},[(0,i.Lk)("span",null,"居中的步骤条")],-1))),F={style:{"white-space":"pre-wrap"}},f=n((()=>(0,i.Lk)("div",{slot:"header"},[(0,i.Lk)("span",null,"带图标的步骤条")],-1))),_={style:{"white-space":"pre-wrap"}},m=n((()=>(0,i.Lk)("div",{slot:"header"},[(0,i.Lk)("span",null,"竖式步骤条")],-1))),h={style:{height:"300px"}},L={style:{"white-space":"pre-wrap"}},g=n((()=>(0,i.Lk)("div",{slot:"header"},[(0,i.Lk)("span",null,"简洁风格的步骤条")],-1))),y={style:{"white-space":"pre-wrap"}};function w(e,t,l,n,w,x){const 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",p,[a,(0,i.Lk)("div",c,[(0,i.bF)(Q,{style:{"margin-bottom":"50px"}},{default:(0,i.k6)((()=>[d,(0,i.bF)(B,null,{default:(0,i.k6)((()=>[(0,i.Lk)("div",null,[(0,i.bF)(j,{active:w.active,"finish-status":"success"},{default:(0,i.k6)((()=>[(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)((()=>[(0,i.eW)("下一步")])),_:1},8,["onClick"])])])),_:1}),(0,i.bF)(I,null,{default:(0,i.k6)((()=>[(0,i.bF)(E,{title:"查看代码",name:"2"},{default:(0,i.k6)((()=>[(0,i.Lk)("div",u,(0,s.v_)(w.base),1)])),_:1})])),_:1})])),_:1}),(0,i.bF)(Q,{style:{"margin-bottom":"50px"}},{default:(0,i.k6)((()=>[o,(0,i.bF)(B,null,{default:(0,i.k6)((()=>[(0,i.Lk)("div",null,[(0,i.bF)(j,{space:200,active:1,"finish-status":"success"},{default:(0,i.k6)((()=>[(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)((()=>[(0,i.bF)(E,{title:"查看代码",name:"2"},{default:(0,i.k6)((()=>[(0,i.Lk)("div",r,(0,s.v_)(w.title),1)])),_:1})])),_:1})])),_:1}),(0,i.bF)(Q,{style:{"margin-bottom":"50px"}},{default:(0,i.k6)((()=>[b,(0,i.bF)(B,null,{default:(0,i.k6)((()=>[(0,i.Lk)("div",null,[(0,i.bF)(j,{active:1},{default:(0,i.k6)((()=>[(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)((()=>[(0,i.bF)(E,{title:"查看代码",name:"2"},{default:(0,i.k6)((()=>[(0,i.Lk)("div",k,(0,s.v_)(w.description),1)])),_:1})])),_:1})])),_:1}),(0,i.bF)(Q,{style:{"margin-bottom":"50px"}},{default:(0,i.k6)((()=>[v,(0,i.bF)(B,null,{default:(0,i.k6)((()=>[(0,i.Lk)("div",null,[(0,i.bF)(j,{active:2,"align-center":""},{default:(0,i.k6)((()=>[(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)((()=>[(0,i.bF)(E,{title:"查看代码",name:"2"},{default:(0,i.k6)((()=>[(0,i.Lk)("div",F,(0,s.v_)(w.alignCenter),1)])),_:1})])),_:1})])),_:1}),(0,i.bF)(Q,{style:{"margin-bottom":"50px"}},{default:(0,i.k6)((()=>[f,(0,i.bF)(B,null,{default:(0,i.k6)((()=>[(0,i.Lk)("div",null,[(0,i.bF)(j,{active:1},{default:(0,i.k6)((()=>[(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)((()=>[(0,i.bF)(E,{title:"查看代码",name:"2"},{default:(0,i.k6)((()=>[(0,i.Lk)("div",_,(0,s.v_)(w.icon),1)])),_:1})])),_:1})])),_:1}),(0,i.bF)(Q,{style:{"margin-bottom":"50px"}},{default:(0,i.k6)((()=>[m,(0,i.bF)(B,null,{default:(0,i.k6)((()=>[(0,i.Lk)("div",null,[(0,i.Lk)("div",h,[(0,i.bF)(j,{direction:"vertical",active:1},{default:(0,i.k6)((()=>[(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)((()=>[(0,i.bF)(E,{title:"查看代码",name:"2"},{default:(0,i.k6)((()=>[(0,i.Lk)("div",L,(0,s.v_)(w.vertical),1)])),_:1})])),_:1})])),_:1}),(0,i.bF)(Q,{style:{"margin-bottom":"50px"}},{default:(0,i.k6)((()=>[g,(0,i.bF)(B,null,{default:(0,i.k6)((()=>[(0,i.Lk)("div",null,[(0,i.bF)(j,{active:1,simple:""},{default:(0,i.k6)((()=>[(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)((()=>[(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)((()=>[(0,i.bF)(E,{title:"查看代码",name:"2"},{default:(0,i.k6)((()=>[(0,i.Lk)("div",y,(0,s.v_)(w.simple),1)])),_:1})])),_:1})])),_:1})])])}var x={name:"LinCmsUiButton",components:{},data(){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(){this.init()},methods:{next(){this.active++>2&&(this.active=0)},init(){}}},C=l(66262);const j=(0,C.A)(x,[["render",w],["__scopeId","data-v-45dcb760"]]);var A=j}}]);
|
