ljs-s-timeline 1.0.0
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 +52 -0
- package/favicon.ico +0 -0
- package/index.css +1 -0
- package/index.js +192 -0
- package/index.umd.cjs +1 -0
- package/package.json +18 -0
package/README.md
ADDED
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
# 简介
|
|
2
|
+
ljs-s-timeline。
|
|
3
|
+
|
|
4
|
+
<!--  -->
|
|
5
|
+
|
|
6
|
+
# 快速开始
|
|
7
|
+
```
|
|
8
|
+
npm i ljs-s-timeline -S
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
### 快速应用
|
|
12
|
+
###### 全局注入
|
|
13
|
+
```
|
|
14
|
+
import LjsTimelineS from 'ljs-s-timeline'
|
|
15
|
+
app.use(LjsTimelineS);
|
|
16
|
+
```
|
|
17
|
+
###### 局部注入
|
|
18
|
+
```
|
|
19
|
+
import { LjsTimelineS } from 'ljs-s-timeline';
|
|
20
|
+
export default {
|
|
21
|
+
name: 'App',
|
|
22
|
+
components: {
|
|
23
|
+
LjsTimelineS
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
### 主参数
|
|
29
|
+
|
|
30
|
+
参数 | 类型 | 必填项 | 默认值 | 参考值 | 说明
|
|
31
|
+
---- | ----- | ------ | ------ | ------ | :------
|
|
32
|
+
data | Array | √ | | | 数据。
|
|
33
|
+
rowNum | Number | × | 4 | | 每行显示几项。单位：px。
|
|
34
|
+
pointHeight | Number | × | 10 | | 点高度（宽高一致）。单位：px。
|
|
35
|
+
pointColor | String | × | #999 | | 点颜色。
|
|
36
|
+
lineColor | String | × | #CCC | | 线颜色。
|
|
37
|
+
curveHeight | String | × | 100 | | 弯角宽度。
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
#### 示例
|
|
41
|
+
|
|
42
|
+
###### 常规
|
|
43
|
+
```
|
|
44
|
+
<LjsTimelineS
|
|
45
|
+
:data="data">
|
|
46
|
+
<template #default="scope">
|
|
47
|
+
<div class="name">{{ scope.row.label }}</div>
|
|
48
|
+
<div class="date">{{ scope.row.date }}</div>
|
|
49
|
+
<div class="content">{{ scope.row.content }}</div>
|
|
50
|
+
</template>
|
|
51
|
+
</LjsTimelineS>
|
|
52
|
+
```
|
package/favicon.ico
ADDED
|
Binary file
|
package/index.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@charset "UTF-8";.ljs-s-timeline[data-v-50876faa]{--pointHeight: var(--pointHeight);--curveHeight: var(--curveHeight);--faultTolerance: 2px;width:100%;position:relative}.ljs-s-timeline *[data-v-50876faa]{-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-50876faa]{width:100%;height:100%;position:relative;display:flex;flex-wrap:wrap;align-items:stretch}.ljs-s-timeline .row .item[data-v-50876faa]{height:100%;padding:20px 20px 40px 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-50876faa]{width:100%;display:flex;align-items:center;position:absolute;top:0;left:0}.ljs-s-timeline .row .item .lineBox .point[data-v-50876faa]{width:var(--pointHeight);height:var(--pointHeight);border-radius:50%}.ljs-s-timeline .row .item .lineBox .line[data-v-50876faa]{width:100%;border-top:4px solid #ccc}.ljs-s-timeline .row .curveBox[data-v-50876faa]{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-50876faa]{width:100%;height:100%;border-radius:var(--curveHeight);position:absolute;top:0}.ljs-s-timeline .row .curveBox.right .curve[data-v-50876faa]{border:4px solid;border-color:#ccc;border-left:0;left:-50%}.ljs-s-timeline .row .curveBox.left .curve[data-v-50876faa]{border:4px solid;border-color:#ccc;border-right:0;right:-50%}.ljs-s-timeline .row .curvePatch[data-v-50876faa]{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-50876faa]{width:100%;height:100%;border-radius:var(--curveHeight);position:absolute;top:-50%}.ljs-s-timeline .row .curvePatch.right[data-v-50876faa]{right:0}.ljs-s-timeline .row .curvePatch.right .patch[data-v-50876faa]{border:4px solid;border-color:#ccc;border-left:0;left:-50%}.ljs-s-timeline .row .curvePatch.left[data-v-50876faa]{left:0}.ljs-s-timeline .row .curvePatch.left .patch[data-v-50876faa]{border:4px solid;border-color:#ccc;border-right:0;right:-50%}
|
package/index.js
ADDED
|
@@ -0,0 +1,192 @@
|
|
|
1
|
+
import { openBlock, createElementBlock, normalizeStyle, Fragment, renderList, createElementVNode, createCommentVNode, renderSlot } from "vue";
|
|
2
|
+
const index = {
|
|
3
|
+
name: "LjsTimelineS",
|
|
4
|
+
props: {
|
|
5
|
+
// 数据
|
|
6
|
+
data: Array,
|
|
7
|
+
// 每行显示几项
|
|
8
|
+
rowNum: {
|
|
9
|
+
type: Number,
|
|
10
|
+
default: 4
|
|
11
|
+
},
|
|
12
|
+
// 点高度（宽高一致）
|
|
13
|
+
pointHeight: {
|
|
14
|
+
type: Number,
|
|
15
|
+
default: 10
|
|
16
|
+
},
|
|
17
|
+
// 点颜色
|
|
18
|
+
pointColor: {
|
|
19
|
+
type: String,
|
|
20
|
+
default: "#999"
|
|
21
|
+
},
|
|
22
|
+
// 线颜色
|
|
23
|
+
lineColor: {
|
|
24
|
+
type: String,
|
|
25
|
+
default: "#CCC"
|
|
26
|
+
},
|
|
27
|
+
// 弯角宽度
|
|
28
|
+
curveHeight: {
|
|
29
|
+
type: Number,
|
|
30
|
+
default: 100
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
data() {
|
|
34
|
+
return {
|
|
35
|
+
useData: [],
|
|
36
|
+
row: 0
|
|
37
|
+
};
|
|
38
|
+
},
|
|
39
|
+
watch: {
|
|
40
|
+
data: {
|
|
41
|
+
handler(val) {
|
|
42
|
+
if (this.data.length > 0) {
|
|
43
|
+
this.initData();
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
deep: true
|
|
47
|
+
}
|
|
48
|
+
},
|
|
49
|
+
mounted() {
|
|
50
|
+
},
|
|
51
|
+
methods: {
|
|
52
|
+
initData() {
|
|
53
|
+
this.useData = [];
|
|
54
|
+
this.row = Math.ceil(this.data.length / this.rowNum);
|
|
55
|
+
let runRow = 0;
|
|
56
|
+
let tempRowData = [];
|
|
57
|
+
this.data.forEach((item, i) => {
|
|
58
|
+
if (Math.floor(i / this.rowNum) === runRow) {
|
|
59
|
+
if (runRow % 2 === 0) {
|
|
60
|
+
tempRowData.push(item);
|
|
61
|
+
} else {
|
|
62
|
+
tempRowData.push(item);
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
if (i % this.rowNum === this.rowNum - 1) {
|
|
66
|
+
if (runRow % 2 === 0) {
|
|
67
|
+
this.useData.push({
|
|
68
|
+
direction: 1,
|
|
69
|
+
children: tempRowData
|
|
70
|
+
});
|
|
71
|
+
} else {
|
|
72
|
+
this.useData.push({
|
|
73
|
+
direction: -1,
|
|
74
|
+
children: tempRowData.reverse()
|
|
75
|
+
});
|
|
76
|
+
}
|
|
77
|
+
tempRowData = [];
|
|
78
|
+
runRow++;
|
|
79
|
+
}
|
|
80
|
+
});
|
|
81
|
+
console.log(this.useData);
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
};
|
|
85
|
+
const index_vue_vue_type_style_index_0_scoped_50876faa_lang = "";
|
|
86
|
+
const _export_sfc = (sfc, props) => {
|
|
87
|
+
const target = sfc.__vccOpts || sfc;
|
|
88
|
+
for (const [key, val] of props) {
|
|
89
|
+
target[key] = val;
|
|
90
|
+
}
|
|
91
|
+
return target;
|
|
92
|
+
};
|
|
93
|
+
const _sfc_main = index;
|
|
94
|
+
const _hoisted_1 = { class: "curveBox left" };
|
|
95
|
+
const _hoisted_2 = { class: "curvePatch left" };
|
|
96
|
+
const _hoisted_3 = { class: "lineBox" };
|
|
97
|
+
const _hoisted_4 = { class: "curveBox right" };
|
|
98
|
+
const _hoisted_5 = { class: "curvePatch right" };
|
|
99
|
+
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
100
|
+
return openBlock(), createElementBlock("div", {
|
|
101
|
+
class: "ljs-s-timeline",
|
|
102
|
+
style: normalizeStyle({
|
|
103
|
+
"--pointHeight": `${_ctx.pointHeight}px`,
|
|
104
|
+
"--curveHeight": `${_ctx.curveHeight}px`
|
|
105
|
+
})
|
|
106
|
+
}, [
|
|
107
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.useData, (row, i) => {
|
|
108
|
+
return openBlock(), createElementBlock("div", {
|
|
109
|
+
key: i,
|
|
110
|
+
class: "row"
|
|
111
|
+
}, [
|
|
112
|
+
createElementVNode("div", _hoisted_1, [
|
|
113
|
+
row.direction === -1 ? (openBlock(), createElementBlock("div", {
|
|
114
|
+
key: 0,
|
|
115
|
+
class: "curve",
|
|
116
|
+
style: normalizeStyle({
|
|
117
|
+
"border-color": `${_ctx.lineColor} !important`
|
|
118
|
+
})
|
|
119
|
+
}, null, 4)) : createCommentVNode("", true)
|
|
120
|
+
]),
|
|
121
|
+
createElementVNode("div", _hoisted_2, [
|
|
122
|
+
row.direction === -1 ? (openBlock(), createElementBlock("div", {
|
|
123
|
+
key: 0,
|
|
124
|
+
class: "patch",
|
|
125
|
+
style: normalizeStyle({
|
|
126
|
+
"border-color": `${_ctx.lineColor} !important`
|
|
127
|
+
})
|
|
128
|
+
}, null, 4)) : createCommentVNode("", true)
|
|
129
|
+
]),
|
|
130
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(row.children, (item, j) => {
|
|
131
|
+
return openBlock(), createElementBlock("div", {
|
|
132
|
+
class: "item",
|
|
133
|
+
key: j,
|
|
134
|
+
style: normalizeStyle({
|
|
135
|
+
width: `calc((100% - ${_ctx.curveHeight}px) / ${_ctx.rowNum})`
|
|
136
|
+
})
|
|
137
|
+
}, [
|
|
138
|
+
createElementVNode("div", _hoisted_3, [
|
|
139
|
+
createElementVNode("div", {
|
|
140
|
+
class: "point",
|
|
141
|
+
style: normalizeStyle({
|
|
142
|
+
"background": _ctx.pointColor
|
|
143
|
+
})
|
|
144
|
+
}, null, 4),
|
|
145
|
+
createElementVNode("div", {
|
|
146
|
+
class: "line",
|
|
147
|
+
style: normalizeStyle({
|
|
148
|
+
"border-color": _ctx.lineColor
|
|
149
|
+
})
|
|
150
|
+
}, null, 4)
|
|
151
|
+
]),
|
|
152
|
+
renderSlot(_ctx.$slots, "default", { row: item }, void 0, true)
|
|
153
|
+
], 4);
|
|
154
|
+
}), 128)),
|
|
155
|
+
createElementVNode("div", _hoisted_4, [
|
|
156
|
+
i < _ctx.useData.length - 1 && row.direction === 1 ? (openBlock(), createElementBlock("div", {
|
|
157
|
+
key: 0,
|
|
158
|
+
class: "curve",
|
|
159
|
+
style: normalizeStyle({
|
|
160
|
+
"border-color": `${_ctx.lineColor} !important`
|
|
161
|
+
})
|
|
162
|
+
}, null, 4)) : createCommentVNode("", true)
|
|
163
|
+
]),
|
|
164
|
+
createElementVNode("div", _hoisted_5, [
|
|
165
|
+
i < _ctx.useData.length - 1 && row.direction === 1 ? (openBlock(), createElementBlock("div", {
|
|
166
|
+
key: 0,
|
|
167
|
+
class: "patch",
|
|
168
|
+
style: normalizeStyle({
|
|
169
|
+
"border-color": `${_ctx.lineColor} !important`
|
|
170
|
+
})
|
|
171
|
+
}, null, 4)) : createCommentVNode("", true)
|
|
172
|
+
])
|
|
173
|
+
]);
|
|
174
|
+
}), 128))
|
|
175
|
+
], 4);
|
|
176
|
+
}
|
|
177
|
+
const LjsTimelineS = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-50876faa"]]);
|
|
178
|
+
const components = [
|
|
179
|
+
LjsTimelineS
|
|
180
|
+
];
|
|
181
|
+
const globals = {
|
|
182
|
+
install: function(app) {
|
|
183
|
+
components.map((item) => {
|
|
184
|
+
app.component(item.name, item);
|
|
185
|
+
});
|
|
186
|
+
},
|
|
187
|
+
// 局部引入时使用
|
|
188
|
+
LjsTimelineS
|
|
189
|
+
};
|
|
190
|
+
export {
|
|
191
|
+
globals as default
|
|
192
|
+
};
|
package/index.umd.cjs
ADDED
|
@@ -0,0 +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-50876faa]{--pointHeight: var(--pointHeight);--curveHeight: var(--curveHeight);--faultTolerance: 2px;width:100%;position:relative}.ljs-s-timeline *[data-v-50876faa]{-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-50876faa]{width:100%;height:100%;position:relative;display:flex;flex-wrap:wrap;align-items:stretch}.ljs-s-timeline .row .item[data-v-50876faa]{height:100%;padding:20px 20px 40px 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-50876faa]{width:100%;display:flex;align-items:center;position:absolute;top:0;left:0}.ljs-s-timeline .row .item .lineBox .point[data-v-50876faa]{width:var(--pointHeight);height:var(--pointHeight);border-radius:50%}.ljs-s-timeline .row .item .lineBox .line[data-v-50876faa]{width:100%;border-top:4px solid #ccc}.ljs-s-timeline .row .curveBox[data-v-50876faa]{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-50876faa]{width:100%;height:100%;border-radius:var(--curveHeight);position:absolute;top:0}.ljs-s-timeline .row .curveBox.right .curve[data-v-50876faa]{border:4px solid;border-color:#ccc;border-left:0;left:-50%}.ljs-s-timeline .row .curveBox.left .curve[data-v-50876faa]{border:4px solid;border-color:#ccc;border-right:0;right:-50%}.ljs-s-timeline .row .curvePatch[data-v-50876faa]{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-50876faa]{width:100%;height:100%;border-radius:var(--curveHeight);position:absolute;top:-50%}.ljs-s-timeline .row .curvePatch.right[data-v-50876faa]{right:0}.ljs-s-timeline .row .curvePatch.right .patch[data-v-50876faa]{border:4px solid;border-color:#ccc;border-left:0;left:-50%}.ljs-s-timeline .row .curvePatch.left[data-v-50876faa]{left:0}.ljs-s-timeline .row .curvePatch.left .patch[data-v-50876faa]{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"},a={class:"curvePatch right"};const n=((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},pointColor:{type:String,default:"#999"},lineColor:{type:String,default:"#CCC"},curveHeight:{type:Number,default:100}},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,n,c,s,d,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,((n,c)=>(e.openBlock(),e.createElementBlock("div",{key:c,class:"row"},[e.createElementVNode("div",o,[-1===n.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===n.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(n.children,((o,i)=>(e.openBlock(),e.createElementBlock("div",{class:"item",key:i,style:e.normalizeStyle({width:`calc((100% - ${t.curveHeight}px) / ${t.rowNum})`})},[e.createElementVNode("div",r,[e.createElementVNode("div",{class:"point",style:e.normalizeStyle({background:t.pointColor})},null,4),e.createElementVNode("div",{class:"line",style:e.normalizeStyle({"border-color":t.lineColor})},null,4)]),e.renderSlot(t.$slots,"default",{row:o},void 0,!0)],4)))),128)),e.createElementVNode("div",l,[c<t.useData.length-1&&1===n.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",a,[c<t.useData.length-1&&1===n.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-50876faa"]]),c=[n];return{install:function(e){c.map((t=>{e.component(t.name,t)}))},LjsTimelineS:n}}));
|
package/package.json
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "ljs-s-timeline",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"private": false,
|
|
5
|
+
"description": "S形时间线",
|
|
6
|
+
"main": "./index.umd.cjs",
|
|
7
|
+
"keywords": [
|
|
8
|
+
"时间线",
|
|
9
|
+
"时间",
|
|
10
|
+
"S",
|
|
11
|
+
"蛇形",
|
|
12
|
+
"time",
|
|
13
|
+
"timeline"
|
|
14
|
+
],
|
|
15
|
+
"license": "MIT",
|
|
16
|
+
"author": "龙九山",
|
|
17
|
+
"type": "module"
|
|
18
|
+
}
|