middle_img_v2_aa43bb12-f878-40e1-a5c3-bb518a62a86g.jpg
给大家 安利一个插件
npm i @lijixuan/timer
export { Timer, format }; // 导出了组件,还有格式化日期函数
import { Timer, format } from '@lijixuan/timer';
demo
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| value | String | '' | 回显的数据 |
| color | String | #50aad8 | 选择颜色 |
| disabled | Boolean | false | 是否禁用 |
| type | String | week | 类型 星期:week 日期: date |
| days | Number String | 7 | 往后天数 只有type=date 时生效 |
<template>
<div class="">
{{ aaaaa }}-
<Timer v-model="aaaaa" :date.sync="week" color="pink"></Timer>
<template v-for="(list, index) in timeList('aaaaa')">
<div class="flex flex-aic">
<span class="mr10">
<span>{{ week[index] }}</span>
</span>
<div class="item-text p10 flex" v-for="(item, key) in list" :key="`${index}-${key}`">
<span>
<span>{{ item.start }}</span>
<span>-</span>
<span>{{ item.end }}</span>
</span>
</div>
</div>
</template>
<hr />
<Timer v-model="bbbbb" type="date" :date.sync="date" :days="7" color="green"></Timer>
<template v-for="(list, index) in timeList('bbbbb')">
<div class="flex flex-aic">
<span class="mr10">
<span>{{ date[index] }}</span>
</span>
<div class="item-text p10 flex" v-for="(item, key) in list" :key="`${index}-${key}`">
<span>
<span>{{ item.start }}</span>
<span>-</span>
<span>{{ item.end }}</span>
</span>
</div>
</div>
</template>
</div>
</template>
<script>
//例如：import 《组件名称》 from '《组件路径》';
import {Timer. format} from '@lijixuan/timer';
export default {
name: '', // Pascal命名
mixins: [],
components: { Timer:Timer },
props: {},
data() {
return {
aaaaa:
'000000000000000000000000000000000000000000000000000000011000000000000000000000000000000000000000000000011111111111000000000000000000000000000000000000011111111111111111100000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000',
bbbbb: '',
week: [], // 星期
date: [] // 天数
};
},
methods: {
timeList(val) {
return format(this[val]);
}
},
};
</script>
