cc-element-components
Version:
该项目是基于`element-plus`二次封装组件,使用的技术栈为`vue3` + `typescript` + `element-plus`。在此项目当中,我们会基于`element-plus`的组件库已有组件封装如下组件: - 图标选择器 - 时间选择器 - 城市选择器 - 省市区选择器 - 通知菜单 - 趋势标记 - 评论 - 数据列表 - 数值统计 - 倒计时 - 分割面板 - 时间轴 - 弹框拓展 - 进度条拓展 - 导航菜单拓展 - 可配置项表格 - 可配置项表单 - 日历
2 lines (1 loc) • 2.23 kB
JavaScript
(function(e,c){typeof exports=="object"&&typeof module!="undefined"?module.exports=c(require("vue")):typeof define=="function"&&define.amd?define(["vue"],c):(e=typeof globalThis!="undefined"?globalThis:e||self,e.index=c(e.Vue))})(this,function(e){"use strict";var c="",m=(n,l)=>{for(const[a,d]of l)n[a]=d;return n};const f=["onClick"],g={style:{display:"flex"}},h=["id"];var _=m(e.defineComponent({props:{data:null,toggle:{type:Boolean,default:!1},showArrow:{type:Boolean,default:!0}},setup(n){const l=n,a=e.ref([...l.data]),d=o=>{!o.desc||!l.toggle||(o.flag=!o.flag,o.height=o.flag?0:o.initHeight,o.opacity=o.flag?0:1)};return e.onMounted(()=>{let o=[...l.data];o.map((i,s)=>{if(i.desc&&l.toggle){i.flag=!1;let r=document.getElementById(`cc-timeline-item-desc-${s}`);i.height=Number(window.getComputedStyle(r).height.replace("px","")),i.initHeight=Number(window.getComputedStyle(r).height.replace("px",""))}}),a.value=o}),(o,i)=>{const s=e.resolveComponent("el-icon-arrowdown"),r=e.resolveComponent("el-timeline-item"),w=e.resolveComponent("el-timeline");return e.openBlock(),e.createBlock(w,null,{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.value,(t,p)=>(e.openBlock(),e.createBlock(r,{key:p,color:t.color,icon:t.icon,type:t.type,size:t.size,hollow:t.hollow,"hide-timestamp":t.hideTimestamp},{default:e.withCtx(()=>[e.createElementVNode("div",{class:e.normalizeClass({cursor:t.desc&&n.toggle}),onClick:k=>d(t)},[e.createElementVNode("div",g,[e.createElementVNode("div",null,e.toDisplayString(t.title),1),t.desc&&n.toggle&&n.showArrow?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["cc-timeline-item-arrow",{"cc-timeline-item-arrow-rotate":t.flag&&n.toggle,"cc-timeline-item-arrow-top":t.flag&&n.toggle}])},[e.createVNode(s)],2)):e.createCommentVNode("v-if",!0)]),e.createElementVNode("div",{id:`cc-timeline-item-desc-${p}`,class:"cc-timeline-item-desc",style:e.normalizeStyle({height:t.height+"px",opacity:t.opacity})},[e.renderSlot(o.$slots,t.desc,{},void 0,!0)],12,h)],10,f)]),_:2},1032,["color","icon","type","size","hollow","hide-timestamp"]))),128))]),_:3})}}}),[["__scopeId","data-v-ebb30de4"]]),y={install(n){n.component("cc-timeline",_)}};return y});