"use strict";(self["webpackChunklin_cms_vue"]=self["webpackChunklin_cms_vue"]||[]).push([[7883],{17883:function(e,n,t){t.r(n),t.d(n,{default:function(){return X}});var i=t(20641),l=t(90033),r=function(e){return(0,i.Qi)("data-v-680b70a1"),e=e(),(0,i.jt)(),e},a={class:"lin-container"},u=r((function(){return(0,i.Lk)("div",{class:"lin-title"},"Timeline 时间线",-1)})),c={class:"lin-wrap-ui"},o=r((function(){return(0,i.Lk)("div",null,[(0,i.Lk)("span",null,"基础用法")],-1)})),s=r((function(){return(0,i.Lk)("span",{class:"demonstration"},"Timeline 可拆分成多个按照时间戳正序或倒序排列的 activity，时间戳是其区分于其他控件的重要特征，使⽤时注意与 Steps 步骤条等区分。",-1)})),m={class:"block"},p={class:"radio"},d={style:{"white-space":"pre-wrap"}},f=r((function(){return(0,i.Lk)("div",null,[(0,i.Lk)("span",null,"⾃定义时间戳")],-1)})),v={class:"block"},k={style:{"white-space":"pre-wrap"}},b=r((function(){return(0,i.Lk)("div",null,[(0,i.Lk)("span",null,"⾃定义时间戳")],-1)})),_={class:"block"},y=r((function(){return(0,i.Lk)("h4",null,"更新 Github 模板",-1)})),h=r((function(){return(0,i.Lk)("p",null,"王小虎 提交于 2018/4/12 20:46",-1)})),F=r((function(){return(0,i.Lk)("h4",null,"更新 Github 模板",-1)})),L=r((function(){return(0,i.Lk)("p",null,"王小虎 提交于 2018/4/3 20:46",-1)})),g=r((function(){return(0,i.Lk)("h4",null,"更新 Github 模板",-1)})),w=r((function(){return(0,i.Lk)("p",null,"王小虎 提交于 2018/4/2 20:46",-1)})),x={style:{"white-space":"pre-wrap"}};function z(e,n,t,r,z,C){var W=(0,i.g2)("el-radio"),G=(0,i.g2)("el-radio-group"),X=(0,i.g2)("el-timeline-item"),E=(0,i.g2)("el-timeline"),I=(0,i.g2)("el-row"),V=(0,i.g2)("el-collapse-item"),K=(0,i.g2)("el-collapse"),T=(0,i.g2)("el-card");return(0,i.uX)(),(0,i.CE)("div",a,[u,(0,i.Lk)("div",c,[(0,i.bF)(T,{style:{"margin-bottom":"50px"}},{header:(0,i.k6)((function(){return[o]})),default:(0,i.k6)((function(){return[(0,i.bF)(I,null,{default:(0,i.k6)((function(){return[s,(0,i.Lk)("div",m,[(0,i.eW)(" 排序: "),(0,i.Lk)("div",p,[(0,i.bF)(G,{modelValue:z.reverse,"onUpdate:modelValue":n[0]||(n[0]=function(e){return z.reverse=e})},{default:(0,i.k6)((function(){return[(0,i.bF)(W,{label:!0},{default:(0,i.k6)((function(){return[(0,i.eW)("倒序")]})),_:1}),(0,i.bF)(W,{label:!1},{default:(0,i.k6)((function(){return[(0,i.eW)("正序")]})),_:1})]})),_:1},8,["modelValue"])]),(0,i.bF)(E,{reverse:z.reverse},{default:(0,i.k6)((function(){return[((0,i.uX)(!0),(0,i.CE)(i.FK,null,(0,i.pI)(z.activities,(function(e,n){return(0,i.uX)(),(0,i.Wv)(X,{key:n,timestamp:e.timestamp},{default:(0,i.k6)((function(){return[(0,i.eW)((0,l.v_)(e.content),1)]})),_:2},1032,["timestamp"])})),128))]})),_:1},8,["reverse"])])]})),_:1}),(0,i.bF)(K,null,{default:(0,i.k6)((function(){return[(0,i.bF)(V,{title:"查看代码",name:"2"},{default:(0,i.k6)((function(){return[(0,i.Lk)("div",d,(0,l.v_)(z.base),1)]})),_:1})]})),_:1})]})),_:1}),(0,i.bF)(T,{style:{"margin-bottom":"50px"}},{header:(0,i.k6)((function(){return[f]})),default:(0,i.k6)((function(){return[(0,i.bF)(I,null,{default:(0,i.k6)((function(){return[(0,i.Lk)("div",v,[(0,i.bF)(E,null,{default:(0,i.k6)((function(){return[((0,i.uX)(!0),(0,i.CE)(i.FK,null,(0,i.pI)(z.activities1,(function(e,n){return(0,i.uX)(),(0,i.Wv)(X,{key:n,icon:e.icon,type:e.type,color:e.color,size:e.size,timestamp:e.timestamp},{default:(0,i.k6)((function(){return[(0,i.eW)((0,l.v_)(e.content),1)]})),_:2},1032,["icon","type","color","size","timestamp"])})),128))]})),_:1})])]})),_:1}),(0,i.bF)(K,{class:"test",style:{color:"red"}},{default:(0,i.k6)((function(){return[(0,i.bF)(V,{title:"查看代码",name:"2"},{default:(0,i.k6)((function(){return[(0,i.Lk)("div",k,(0,l.v_)(z.diy),1)]})),_:1})]})),_:1})]})),_:1}),(0,i.bF)(T,{style:{"margin-bottom":"50px"}},{header:(0,i.k6)((function(){return[b]})),default:(0,i.k6)((function(){return[(0,i.bF)(I,null,{default:(0,i.k6)((function(){return[(0,i.Lk)("div",_,[(0,i.bF)(E,null,{default:(0,i.k6)((function(){return[(0,i.bF)(X,{timestamp:"2018/4/12",placement:"top"},{default:(0,i.k6)((function(){return[(0,i.bF)(T,{class:"timeLineCard"},{default:(0,i.k6)((function(){return[y,h]})),_:1})]})),_:1}),(0,i.bF)(X,{timestamp:"2018/4/3",placement:"top"},{default:(0,i.k6)((function(){return[(0,i.bF)(T,{class:"timeLineCard"},{default:(0,i.k6)((function(){return[F,L]})),_:1})]})),_:1}),(0,i.bF)(X,{timestamp:"2018/4/2",placement:"top"},{default:(0,i.k6)((function(){return[(0,i.bF)(T,{class:"timeLineCard"},{default:(0,i.k6)((function(){return[g,w]})),_:1})]})),_:1})]})),_:1})])]})),_:1}),(0,i.bF)(K,{class:"test",style:{color:"red"}},{default:(0,i.k6)((function(){return[(0,i.bF)(V,{title:"查看代码",name:"2"},{default:(0,i.k6)((function(){return[(0,i.Lk)("div",x,(0,l.v_)(z.placement),1)]})),_:1})]})),_:1})]})),_:1})])])}var C={name:"",components:{},data:function(){return{base:'<div class="block">\n <div class="radio">\n 排序：\n <el-radio-group v-model="reverse">\n <el-radio :label="true">倒序</el-radio>\n <el-radio :label="false">正序</el-radio>\n </el-radio-group>\n </div>\n\n <el-timeline :reverse="reverse">\n <el-timeline-item\n v-for="(activity, index) in activities"\n :key="index"\n :timestamp="activity.timestamp">\n {{activity.content}}\n </el-timeline-item>\n </el-timeline>\n</div>\n\n<script>\n export default {\n data() {\n return {\n reverse: true,\n activities: [{\n content: \'活动按期开始\',\n timestamp: \'2018-04-15\'\n }, {\n content: \'通过审核\',\n timestamp: \'2018-04-13\'\n }, {\n content: \'创建成功\',\n timestamp: \'2018-04-11\'\n }]\n };\n }\n };\n<\/script>\n ',diy:"\n <div class=\"block\">\n <el-timeline>\n <el-timeline-item\n v-for=\"(activity, index) in activities\"\n :key=\"index\"\n :icon=\"activity.icon\"\n :type=\"activity.type\"\n :color=\"activity.color\"\n :size=\"activity.size\"\n :timestamp=\"activity.timestamp\">\n {{activity.content}}\n </el-timeline-item>\n </el-timeline>\n</div>\n\n<script>\n export default {\n data() {\n return {\n activities: [{\n content: '支持使用图标',\n timestamp: '2018-04-12 20:46',\n size: 'large',\n type: 'primary',\n icon: 'el-icon-more'\n }, {\n content: '支持自定义颜色',\n timestamp: '2018-04-03 20:46',\n color: '#3963bc'\n }, {\n content: '支持自定义尺寸',\n timestamp: '2018-04-03 20:46',\n size: 'large'\n }, {\n content: '默认样式的节点',\n timestamp: '2018-04-03 20:46'\n }]\n };\n }\n };\n<\/script>",placement:'<div class="block">\n <el-timeline>\n <el-timeline-item timestamp="2018/4/12" placement="top">\n <el-card>\n <h4>更新 Github 模板</h4>\n <p>王小虎 提交于 2018/4/12 20:46</p>\n </el-card>\n </el-timeline-item>\n <el-timeline-item timestamp="2018/4/3" placement="top">\n <el-card>\n <h4>更新 Github 模板</h4>\n <p>王小虎 提交于 2018/4/3 20:46</p>\n </el-card>\n </el-timeline-item>\n <el-timeline-item timestamp="2018/4/2" placement="top">\n <el-card>\n <h4>更新 Github 模板</h4>\n <p>王小虎 提交于 2018/4/2 20:46</p>\n </el-card>\n </el-timeline-item>\n </el-timeline>\n</div>',reverse:!0,activities:[{content:"活动按期开始",timestamp:"2018-04-15"},{content:"通过审核",timestamp:"2018-04-13"},{content:"创建成功",timestamp:"2018-04-11"}],activities1:[{content:"支持使用图标",timestamp:"2018-04-12 20:46",size:"large",type:"primary",icon:"el-icon-more"},{content:"支持自定义颜色",timestamp:"2018-04-03 20:46",color:"#3963bc"},{content:"支持自定义尺寸",timestamp:"2018-04-03 20:46",size:"large"},{content:"默认样式的节点",timestamp:"2018-04-03 20:46"}]}},computed:{},watch:{},mounted:function(){this.init()},methods:{init:function(){}}},W=t(66262);const G=(0,W.A)(C,[["render",z],["__scopeId","data-v-680b70a1"]]);var X=G}}]);
|
