|
|
@@ -1,125 +1,4 @@
|
|
|
-
|
|
|
-## uniapp timeline时间轴提示
|
|
|
-> **组件名：uaTimeline**
|
|
|
-> 代码块： `<ua-timeline>` `ua-timeline-item`
|
|
|
-
|
|
|
-uaTimeline一款基于uniapp vue3自定义多功能时间线组件。支持自定义节点类型/样式、时间戳、节点图标及分割线样式。
|
|
|
-
|
|
|
-> **注意事项**
|
|
|
-> 如果想自定义图标，需要自己引入iconfont图标
|
|
|
-
|
|
|
-
|
|
|
-### 引入方式
|
|
|
-
|
|
|
-本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，只需将本组件放在components目录，在页面`template`中即可直接使用。
|
|
|
-
|
|
|
-
|
|
|
-### 基本用法
|
|
|
-
|
|
|
-**示例**
|
|
|
-
|
|
|
-- 基础用法
|
|
|
-
|
|
|
-```html
|
|
|
-<ua-timeline>
|
|
|
- <ua-timeline-item timestamp="2021-12-28">创建成功</ua-timeline-item>
|
|
|
- <ua-timeline-item timestamp="2021-12-15" lineType="dotted">审核通过</ua-timeline-item>
|
|
|
- <ua-timeline-item>提交信息</ua-timeline-item>
|
|
|
-</ua-timeline>
|
|
|
-```
|
|
|
-
|
|
|
-- 自定义节点及字体大小
|
|
|
-
|
|
|
-```html
|
|
|
-<ua-timeline>
|
|
|
- <ua-timeline-item timestamp="2021-12-12" size="18" icon="ve-icon-check" color="#f60" style="font-size: 16px;">自定义字体大小</ua-timeline-item>
|
|
|
- <ua-timeline-item timestamp="2021-12-15" size="24px" placement="top" hideTimestamp>bbbb</ua-timeline-item>
|
|
|
- <ua-timeline-item size="12px">cccc</ua-timeline-item>
|
|
|
-</ua-timeline>
|
|
|
-```
|
|
|
-
|
|
|
-- 自定义设置type、size、icon、color属性自定义节点样式
|
|
|
-
|
|
|
-```js
|
|
|
-<script setup>
|
|
|
- import { ref } from 'vue'
|
|
|
- const timelineList = ref([
|
|
|
- { content: '支持使用图标', timestamp: '2018-04-12 20:46', size: 18, type: 'primary', icon: 've-icon-favor' },
|
|
|
- { content: '支持自定义颜色', timestamp: '2018-04-03 20:46', type: 'warning', lineColor: '#ff22cf' },
|
|
|
- { content: '支持自定义颜色', timestamp: '2018-04-03 20:46', color: '#0ddaa1', lineType: 'dotted' },
|
|
|
- { content: '支持自定义尺寸',timestamp: '2018-04-03 20:46',size: '21px' },
|
|
|
- { content: '默认样式的节点',timestamp: '2018-04-03 20:46' }
|
|
|
- ])
|
|
|
-</script>
|
|
|
-```
|
|
|
-
|
|
|
-```html
|
|
|
-<ua-timeline>
|
|
|
- <ua-timeline-item
|
|
|
- v-for="(item,index) in timelineList"
|
|
|
- :key="index"
|
|
|
- :timestamp="item.timestamp"
|
|
|
- :type="item.type"
|
|
|
- :size="item.size"
|
|
|
- :icon="item.icon"
|
|
|
- :color="item.color"
|
|
|
- :lineColor="item.lineColor"
|
|
|
- :lineType="item.lineType"
|
|
|
- >
|
|
|
- {{item.content}}
|
|
|
- </ua-timeline-item>
|
|
|
-</ua-timeline>
|
|
|
-```
|
|
|
-
|
|
|
-- 自定义type=card卡片时间轴
|
|
|
-
|
|
|
-```html
|
|
|
-<ua-timeline type="card">
|
|
|
- <ua-timeline-item timestamp="2021-12-12" type="danger">
|
|
|
- <div>Create a services site 2015-09-01</div>
|
|
|
- </ua-timeline-item>
|
|
|
- <ua-timeline-item timestamp="2021-12-15" placement="top">
|
|
|
- <div>Technical testing 1</div>
|
|
|
- <div>Technical testing 2</div>
|
|
|
- <div>Technical testing 3</div>
|
|
|
- </ua-timeline-item>
|
|
|
- <ua-timeline-item size="12px" type="success">
|
|
|
- <template #dot><i class="ve-icon-edit"></i></template>
|
|
|
- <h4>更新 Github 模板</h4>
|
|
|
- <p>王小虎 提交于 2018/4/12 20:46</p>
|
|
|
- </ua-timeline-item>
|
|
|
-</ua-timeline>
|
|
|
-```
|
|
|
-
|
|
|
-
|
|
|
-### API
|
|
|
-
|
|
|
-### uaTimeline Props
|
|
|
-
|
|
|
-|属性名|类型|默认值|说明|
|
|
|
-|:-:|:-:|:-:|:-:|
|
|
|
-|type|String|-|类型(card)|
|
|
|
-
|
|
|
-### uaTimelineItem Props
|
|
|
-
|
|
|
-|属性名|类型|默认值|说明|
|
|
|
-|:-:|:-:|:-:|:-:|
|
|
|
-|type|String|-|节点类型(primary / success / warning / danger / info)|
|
|
|
-|timestamp |String|-|时间戳|
|
|
|
-|hideTimestamp |Boolean|-|是否隐藏时间戳|
|
|
|
-|placement |String|bottom|时间戳位置(top / bottom)|
|
|
|
-|color |String|-|节点颜色|
|
|
|
-|icon |String|-|节点图标|
|
|
|
-|size |Number|12|节点尺寸|
|
|
|
-|lineType |String|solid|分割线类型(solid / dashed / dotted)|
|
|
|
-|lineColor |String|-|分割线颜色|
|
|
|
-
|
|
|
-#### 事件
|
|
|
-
|
|
|
-- @click 触发点击
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-### 💝最后
|
|
|
-
|
|
|
-开发不易，希望各位小伙伴们多多支持下哈~~ ☕️☕️
|
|
|
+证书库密码 aimill666
|
|
|
+证书别名 aimillApp
|
|
|
+证书私钥密码 aimill666
|
|
|
+包名 com.zhongying.aimill
|
