ljs-s-timeline 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -1
- package/index.css +1 -1
- package/index.js +23 -5
- package/index.umd.cjs +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
# 简介
|
|
2
2
|
ljs-s-timeline。
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
|
|
5
5
|
|
|
6
6
|
# 快速开始
|
|
7
7
|
```
|
|
@@ -32,9 +32,11 @@ export default {
|
|
|
32
32
|
data | Array | √ | | | 数据。
|
|
33
33
|
rowNum | Number | × | 4 | | 每行显示几项。单位：px。
|
|
34
34
|
pointHeight | Number | × | 10 | | 点高度（宽高一致）。单位：px。
|
|
35
|
+
pointRadius | String | × | 50% | | 点圆角。
|
|
35
36
|
pointColor | String | × | #999 | | 点颜色。
|
|
36
37
|
lineColor | String | × | #CCC | | 线颜色。
|
|
37
38
|
curveHeight | String | × | 100 | | 弯角宽度。
|
|
39
|
+
itemMarginLeft | String | × | 0 | | 项偏移。
|
|
38
40
|
|
|
39
41
|
|
|
40
42
|
#### 示例
|
package/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@charset "UTF-8";.ljs-s-timeline[data-v-
|
|
1
|
+
@charset "UTF-8";.ljs-s-timeline[data-v-c6f1216d]{--pointHeight: var(--pointHeight);--curveHeight: var(--curveHeight);--faultTolerance: 2px;width:100%;position:relative}.ljs-s-timeline *[data-v-c6f1216d]{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ljs-s-timeline .row[data-v-c6f1216d]{width:100%;height:100%;position:relative;display:flex;flex-wrap:wrap;align-items:stretch}.ljs-s-timeline .row .item[data-v-c6f1216d]{height:100%;padding:20px 20px 0 0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;outline:none;position:relative}.ljs-s-timeline .row .item .lineBox[data-v-c6f1216d]{width:100%;display:flex;align-items:center;position:absolute;top:0;left:0}.ljs-s-timeline .row .item .lineBox .point[data-v-c6f1216d]{width:var(--pointHeight);height:var(--pointHeight);position:relative;z-index:2}.ljs-s-timeline .row .item .lineBox .line[data-v-c6f1216d]{width:100%;border-top:4px solid #ccc;position:relative;z-index:1}.ljs-s-timeline .row .curveBox[data-v-c6f1216d]{flex:1;display:flex;flex-direction:column;justify-content:stretch;overflow:hidden;margin-top:calc(var(--pointHeight) / 2 - var(--faultTolerance));position:relative}.ljs-s-timeline .row .curveBox .curve[data-v-c6f1216d]{width:100%;height:100%;border-radius:var(--curveHeight);position:absolute;top:0}.ljs-s-timeline .row .curveBox.right .curve[data-v-c6f1216d]{border:4px solid;border-color:#ccc;border-left:0;left:-50%}.ljs-s-timeline .row .curveBox.left .curve[data-v-c6f1216d]{border:4px solid;border-color:#ccc;border-right:0;right:-50%}.ljs-s-timeline .row .curvePatch[data-v-c6f1216d]{width:calc(var(--curveHeight) / 2);height:calc(var(--curveHeight) / 2 + var(--faultTolerance));position:absolute;bottom:calc(-1 * var(--curveHeight) / 4);overflow:hidden}.ljs-s-timeline .row .curvePatch .patch[data-v-c6f1216d]{width:100%;height:100%;border-radius:var(--curveHeight);position:absolute;top:-50%}.ljs-s-timeline .row .curvePatch.right[data-v-c6f1216d]{right:0}.ljs-s-timeline .row .curvePatch.right .patch[data-v-c6f1216d]{border:4px solid;border-color:#ccc;border-left:0;left:-50%}.ljs-s-timeline .row .curvePatch.left[data-v-c6f1216d]{left:0}.ljs-s-timeline .row .curvePatch.left .patch[data-v-c6f1216d]{border:4px solid;border-color:#ccc;border-right:0;right:-50%}
|
package/index.js
CHANGED
|
@@ -14,6 +14,11 @@ const index = {
|
|
|
14
14
|
type: Number,
|
|
15
15
|
default: 10
|
|
16
16
|
},
|
|
17
|
+
// 点圆角
|
|
18
|
+
pointRadius: {
|
|
19
|
+
type: String,
|
|
20
|
+
default: "50%"
|
|
21
|
+
},
|
|
17
22
|
// 点颜色
|
|
18
23
|
pointColor: {
|
|
19
24
|
type: String,
|
|
@@ -28,6 +33,11 @@ const index = {
|
|
|
28
33
|
curveHeight: {
|
|
29
34
|
type: Number,
|
|
30
35
|
default: 100
|
|
36
|
+
},
|
|
37
|
+
// 项偏移。距左侧的偏移。如-10px，向左偏移10像素。
|
|
38
|
+
itemMarginLeft: {
|
|
39
|
+
type: String,
|
|
40
|
+
default: "0"
|
|
31
41
|
}
|
|
32
42
|
},
|
|
33
43
|
data() {
|
|
@@ -82,7 +92,7 @@ const index = {
|
|
|
82
92
|
}
|
|
83
93
|
}
|
|
84
94
|
};
|
|
85
|
-
const
|
|
95
|
+
const index_vue_vue_type_style_index_0_scoped_c6f1216d_lang = "";
|
|
86
96
|
const _export_sfc = (sfc, props) => {
|
|
87
97
|
const target = sfc.__vccOpts || sfc;
|
|
88
98
|
for (const [key, val] of props) {
|
|
@@ -132,14 +142,16 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
132
142
|
class: "item",
|
|
133
143
|
key: j,
|
|
134
144
|
style: normalizeStyle({
|
|
135
|
-
width: `calc((100% - ${_ctx.curveHeight}px) / ${_ctx.rowNum})
|
|
145
|
+
width: `calc((100% - ${_ctx.curveHeight}px) / ${_ctx.rowNum})`,
|
|
146
|
+
"padding-bottom": i === _ctx.useData.length - 1 ? "0px" : "20px"
|
|
136
147
|
})
|
|
137
148
|
}, [
|
|
138
149
|
createElementVNode("div", _hoisted_3, [
|
|
139
150
|
createElementVNode("div", {
|
|
140
151
|
class: "point",
|
|
141
152
|
style: normalizeStyle({
|
|
142
|
-
"background": _ctx.pointColor
|
|
153
|
+
"background": _ctx.pointColor,
|
|
154
|
+
"border-radius": _ctx.pointRadius
|
|
143
155
|
})
|
|
144
156
|
}, null, 4),
|
|
145
157
|
createElementVNode("div", {
|
|
@@ -149,7 +161,13 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
149
161
|
})
|
|
150
162
|
}, null, 4)
|
|
151
163
|
]),
|
|
152
|
-
|
|
164
|
+
createElementVNode("div", {
|
|
165
|
+
style: normalizeStyle({
|
|
166
|
+
"margin-left": _ctx.itemMarginLeft
|
|
167
|
+
})
|
|
168
|
+
}, [
|
|
169
|
+
renderSlot(_ctx.$slots, "default", { row: item }, void 0, true)
|
|
170
|
+
], 4)
|
|
153
171
|
], 4);
|
|
154
172
|
}), 128)),
|
|
155
173
|
createElementVNode("div", _hoisted_4, [
|
|
@@ -174,7 +192,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
174
192
|
}), 128))
|
|
175
193
|
], 4);
|
|
176
194
|
}
|
|
177
|
-
const LjsTimelineS = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-
|
|
195
|
+
const LjsTimelineS = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-c6f1216d"]]);
|
|
178
196
|
const components = [
|
|
179
197
|
LjsTimelineS
|
|
180
198
|
];
|
package/index.umd.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define(["vue"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).index=t(e.Vue)}(this,(function(e){"use strict";var t=document.createElement("style");t.textContent='@charset "UTF-8";.ljs-s-timeline[data-v-
|
|
1
|
+
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define(["vue"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).index=t(e.Vue)}(this,(function(e){"use strict";var t=document.createElement("style");t.textContent='@charset "UTF-8";.ljs-s-timeline[data-v-c6f1216d]{--pointHeight: var(--pointHeight);--curveHeight: var(--curveHeight);--faultTolerance: 2px;width:100%;position:relative}.ljs-s-timeline *[data-v-c6f1216d]{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ljs-s-timeline .row[data-v-c6f1216d]{width:100%;height:100%;position:relative;display:flex;flex-wrap:wrap;align-items:stretch}.ljs-s-timeline .row .item[data-v-c6f1216d]{height:100%;padding:20px 20px 0 0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;outline:none;position:relative}.ljs-s-timeline .row .item .lineBox[data-v-c6f1216d]{width:100%;display:flex;align-items:center;position:absolute;top:0;left:0}.ljs-s-timeline .row .item .lineBox .point[data-v-c6f1216d]{width:var(--pointHeight);height:var(--pointHeight);position:relative;z-index:2}.ljs-s-timeline .row .item .lineBox .line[data-v-c6f1216d]{width:100%;border-top:4px solid #ccc;position:relative;z-index:1}.ljs-s-timeline .row .curveBox[data-v-c6f1216d]{flex:1;display:flex;flex-direction:column;justify-content:stretch;overflow:hidden;margin-top:calc(var(--pointHeight) / 2 - var(--faultTolerance));position:relative}.ljs-s-timeline .row .curveBox .curve[data-v-c6f1216d]{width:100%;height:100%;border-radius:var(--curveHeight);position:absolute;top:0}.ljs-s-timeline .row .curveBox.right .curve[data-v-c6f1216d]{border:4px solid;border-color:#ccc;border-left:0;left:-50%}.ljs-s-timeline .row .curveBox.left .curve[data-v-c6f1216d]{border:4px solid;border-color:#ccc;border-right:0;right:-50%}.ljs-s-timeline .row .curvePatch[data-v-c6f1216d]{width:calc(var(--curveHeight) / 2);height:calc(var(--curveHeight) / 2 + var(--faultTolerance));position:absolute;bottom:calc(-1 * var(--curveHeight) / 4);overflow:hidden}.ljs-s-timeline .row .curvePatch .patch[data-v-c6f1216d]{width:100%;height:100%;border-radius:var(--curveHeight);position:absolute;top:-50%}.ljs-s-timeline .row .curvePatch.right[data-v-c6f1216d]{right:0}.ljs-s-timeline .row .curvePatch.right .patch[data-v-c6f1216d]{border:4px solid;border-color:#ccc;border-left:0;left:-50%}.ljs-s-timeline .row .curvePatch.left[data-v-c6f1216d]{left:0}.ljs-s-timeline .row .curvePatch.left .patch[data-v-c6f1216d]{border:4px solid;border-color:#ccc;border-right:0;right:-50%}\n',document.head.appendChild(t);const o={class:"curveBox left"},i={class:"curvePatch left"},r={class:"lineBox"},l={class:"curveBox right"},n={class:"curvePatch right"};const a=((e,t)=>{const o=e.__vccOpts||e;for(const[i,r]of t)o[i]=r;return o})({name:"LjsTimelineS",props:{data:Array,rowNum:{type:Number,default:4},pointHeight:{type:Number,default:10},pointRadius:{type:String,default:"50%"},pointColor:{type:String,default:"#999"},lineColor:{type:String,default:"#CCC"},curveHeight:{type:Number,default:100},itemMarginLeft:{type:String,default:"0"}},data:()=>({useData:[],row:0}),watch:{data:{handler(e){this.data.length>0&&this.initData()},deep:!0}},mounted(){},methods:{initData(){this.useData=[],this.row=Math.ceil(this.data.length/this.rowNum);let e=0,t=[];this.data.forEach(((o,i)=>{Math.floor(i/this.rowNum)===e&&t.push(o),i%this.rowNum==this.rowNum-1&&(e%2==0?this.useData.push({direction:1,children:t}):this.useData.push({direction:-1,children:t.reverse()}),t=[],e++)}))}}},[["render",function(t,a,c,d,s,u){return e.openBlock(),e.createElementBlock("div",{class:"ljs-s-timeline",style:e.normalizeStyle({"--pointHeight":`${t.pointHeight}px`,"--curveHeight":`${t.curveHeight}px`})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.useData,((a,c)=>(e.openBlock(),e.createElementBlock("div",{key:c,class:"row"},[e.createElementVNode("div",o,[-1===a.direction?(e.openBlock(),e.createElementBlock("div",{key:0,class:"curve",style:e.normalizeStyle({"border-color":`${t.lineColor} !important`})},null,4)):e.createCommentVNode("",!0)]),e.createElementVNode("div",i,[-1===a.direction?(e.openBlock(),e.createElementBlock("div",{key:0,class:"patch",style:e.normalizeStyle({"border-color":`${t.lineColor} !important`})},null,4)):e.createCommentVNode("",!0)]),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.children,((o,i)=>(e.openBlock(),e.createElementBlock("div",{class:"item",key:i,style:e.normalizeStyle({width:`calc((100% - ${t.curveHeight}px) / ${t.rowNum})`,"padding-bottom":c===t.useData.length-1?"0px":"20px"})},[e.createElementVNode("div",r,[e.createElementVNode("div",{class:"point",style:e.normalizeStyle({background:t.pointColor,"border-radius":t.pointRadius})},null,4),e.createElementVNode("div",{class:"line",style:e.normalizeStyle({"border-color":t.lineColor})},null,4)]),e.createElementVNode("div",{style:e.normalizeStyle({"margin-left":t.itemMarginLeft})},[e.renderSlot(t.$slots,"default",{row:o},void 0,!0)],4)],4)))),128)),e.createElementVNode("div",l,[c<t.useData.length-1&&1===a.direction?(e.openBlock(),e.createElementBlock("div",{key:0,class:"curve",style:e.normalizeStyle({"border-color":`${t.lineColor} !important`})},null,4)):e.createCommentVNode("",!0)]),e.createElementVNode("div",n,[c<t.useData.length-1&&1===a.direction?(e.openBlock(),e.createElementBlock("div",{key:0,class:"patch",style:e.normalizeStyle({"border-color":`${t.lineColor} !important`})},null,4)):e.createCommentVNode("",!0)])])))),128))],4)}],["__scopeId","data-v-c6f1216d"]]),c=[a];return{install:function(e){c.map((t=>{e.component(t.name,t)}))},LjsTimelineS:a}}));
|