"use strict";(self["webpackChunklin_cms_vue"]=self["webpackChunklin_cms_vue"]||[]).push([[7883],{17883:function(e,t,n){n.r(t),n.d(t,{default:function(){return X}});var i=n(20641),l=n(90033);const a=e=>((0,i.Qi)("data-v-680b70a1"),e=e(),(0,i.jt)(),e),s={class:"lin-container"},m=a((()=>(0,i.Lk)("div",{class:"lin-title"},"Timeline 时间线",-1))),c={class:"lin-wrap-ui"},r=a((()=>(0,i.Lk)("div",null,[(0,i.Lk)("span",null,"基础用法")],-1))),o=a((()=>(0,i.Lk)("span",{class:"demonstration"},"Timeline 可拆分成多个按照时间戳正序或倒序排列的 activity，时间戳是其区分于其他控件的重要特征，使⽤时注意与 Steps 步骤条等区分。",-1))),p={class:"block"},d={class:"radio"},u={style:{"white-space":"pre-wrap"}},v=a((()=>(0,i.Lk)("div",null,[(0,i.Lk)("span",null,"⾃定义时间戳")],-1))),k={class:"block"},b={style:{"white-space":"pre-wrap"}},f=a((()=>(0,i.Lk)("div",null,[(0,i.Lk)("span",null,"⾃定义时间戳")],-1))),_={class:"block"},y=a((()=>(0,i.Lk)("h4",null,"更新 Github 模板",-1))),h=a((()=>(0,i.Lk)("p",null,"王小虎 提交于 2018/4/12 20:46",-1))),F=a((()=>(0,i.Lk)("h4",null,"更新 Github 模板",-1))),L=a((()=>(0,i.Lk)("p",null,"王小虎 提交于 2018/4/3 20:46",-1))),g=a((()=>(0,i.Lk)("h4",null,"更新 Github 模板",-1))),w=a((()=>(0,i.Lk)("p",null,"王小虎 提交于 2018/4/2 20:46",-1))),x={style:{"white-space":"pre-wrap"}};function z(e,t,n,a,z,C){const 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",s,[m,(0,i.Lk)("div",c,[(0,i.bF)(T,{style:{"margin-bottom":"50px"}},{header:(0,i.k6)((()=>[r])),default:(0,i.k6)((()=>[(0,i.bF)(I,null,{default:(0,i.k6)((()=>[o,(0,i.Lk)("div",p,[(0,i.eW)(" 排序: "),(0,i.Lk)("div",d,[(0,i.bF)(G,{modelValue:z.reverse,"onUpdate:modelValue":t[0]||(t[0]=e=>z.reverse=e)},{default:(0,i.k6)((()=>[(0,i.bF)(W,{label:!0},{default:(0,i.k6)((()=>[(0,i.eW)("倒序")])),_:1}),(0,i.bF)(W,{label:!1},{default:(0,i.k6)((()=>[(0,i.eW)("正序")])),_:1})])),_:1},8,["modelValue"])]),(0,i.bF)(E,{reverse:z.reverse},{default:(0,i.k6)((()=>[((0,i.uX)(!0),(0,i.CE)(i.FK,null,(0,i.pI)(z.activities,((e,t)=>((0,i.uX)(),(0,i.Wv)(X,{key:t,timestamp:e.timestamp},{default:(0,i.k6)((()=>[(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)((()=>[(0,i.bF)(V,{title:"查看代码",name:"2"},{default:(0,i.k6)((()=>[(0,i.Lk)("div",u,(0,l.v_)(z.base),1)])),_:1})])),_:1})])),_:1}),(0,i.bF)(T,{style:{"margin-bottom":"50px"}},{header:(0,i.k6)((()=>[v])),default:(0,i.k6)((()=>[(0,i.bF)(I,null,{default:(0,i.k6)((()=>[(0,i.Lk)("div",k,[(0,i.bF)(E,null,{default:(0,i.k6)((()=>[((0,i.uX)(!0),(0,i.CE)(i.FK,null,(0,i.pI)(z.activities1,((e,t)=>((0,i.uX)(),(0,i.Wv)(X,{key:t,icon:e.icon,type:e.type,color:e.color,size:e.size,timestamp:e.timestamp},{default:(0,i.k6)((()=>[(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)((()=>[(0,i.bF)(V,{title:"查看代码",name:"2"},{default:(0,i.k6)((()=>[(0,i.Lk)("div",b,(0,l.v_)(z.diy),1)])),_:1})])),_:1})])),_:1}),(0,i.bF)(T,{style:{"margin-bottom":"50px"}},{header:(0,i.k6)((()=>[f])),default:(0,i.k6)((()=>[(0,i.bF)(I,null,{default:(0,i.k6)((()=>[(0,i.Lk)("div",_,[(0,i.bF)(E,null,{default:(0,i.k6)((()=>[(0,i.bF)(X,{timestamp:"2018/4/12",placement:"top"},{default:(0,i.k6)((()=>[(0,i.bF)(T,{class:"timeLineCard"},{default:(0,i.k6)((()=>[y,h])),_:1})])),_:1}),(0,i.bF)(X,{timestamp:"2018/4/3",placement:"top"},{default:(0,i.k6)((()=>[(0,i.bF)(T,{class:"timeLineCard"},{default:(0,i.k6)((()=>[F,L])),_:1})])),_:1}),(0,i.bF)(X,{timestamp:"2018/4/2",placement:"top"},{default:(0,i.k6)((()=>[(0,i.bF)(T,{class:"timeLineCard"},{default:(0,i.k6)((()=>[g,w])),_:1})])),_:1})])),_:1})])])),_:1}),(0,i.bF)(K,{class:"test",style:{color:"red"}},{default:(0,i.k6)((()=>[(0,i.bF)(V,{title:"查看代码",name:"2"},{default:(0,i.k6)((()=>[(0,i.Lk)("div",x,(0,l.v_)(z.placement),1)])),_:1})])),_:1})])),_:1})])])}var C={name:"",components:{},data(){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(){this.init()},methods:{init(){}}},W=n(66262);const G=(0,W.A)(C,[["render",z],["__scopeId","data-v-680b70a1"]]);var X=G}}]);
|
