1.1.5 • Published 12 months ago
vue-shortcut-time v1.1.5
vue-shortcut-time
A Vue.js project
Build Setup
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
For a detailed explanation on how things work, check out the guide and docs for vue-loader.
使用说明:
1. 安装
npm install vue-shortcut-time --save
import MyPlugin from 'vue-shortcut-time/src/plugin/main';
Vue.use(MyPlugin);
2. 页面使用
<sel-time :options = "options"
v-model="defaultTime"
ref="selTime"
v-on:receiveTimeInfo="receiveTimeInfo">
</sel-time>
data() {
return {
options: {
isCustom: false, // false: 显示默认快捷选项; true: 自定义自己的快捷时间
color: #2e89ea, // 按钮背景颜色;
},
defaultTime: '前15分钟', // 初始化快捷时间
// isCustom为true是才起作用
list: [{
name: '前15分钟',
start: [15, 'm'],
type: 'currentEnd',
}, {
name: '前30分钟',
start: [30, 'm'],
type: 'currentEnd',
}],
}
},
methods: {
// 接收时间范围、时间间隔、时间显示文本;
receiveTimeInfo(info) {
console.log('0-0-0-0-');
console.log(info);
// 时间范围: info.range;
// 时间间隔: info.interval;
// 时间文本: info.textTime;
},
// 点击图表改变时间范围时重新获取全局时间,改变插件时间
changeTime() {
// start 、 end 为时间戳
this.$refs.selTime.clickTime([start, end], 'precise');
},
},