vue-halfday-datepicker
vue-halfday-datepicker
一个基于vue的带上、下午的移动端日期选择器
Demo
特点
- 移动端
- 带上、下午
- vue插件
安装
npm i vue-halfday-datepicker -D
cnpm i vue-halfday-datepicker -D
yarn add vue-halfday-datepicker -D
引入和注册
在单页面应用的入口文件里引入和注册
import VueHalfdayDatepicker from 'vue-halfday-datepicker'
Vue.use(VueHalfdayDatepicker)
使用
<template>
<div id="app">
<h2>一个基于vue的日期选择器Demo</h2>
<div class="pickerSelect" @click="onOpenPicker">{{ pickerValue }}</div>
<vue-halfday-datepicker :show="isShow" @onConfirm="onConfirmHandle" @onCancel="onCancelHandle"/>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
isShow: false,
pickerValue: '测试一下:请选择'
}
},
methods: {
onOpenPicker(e) {
this.isShow = true
},
onConfirmHandle(v) {
this.value = v
this.pickerValue = v
this.isShow = false
},
onCancelHandle(e) {
this.isShow = false
}
},
}
</script>
<style>
</style>
Dependencies
babel-core: ^6.26.0babel-loader: ^7.1.2babel-plugin-component: ^1.1.1babel-preset-env: ^1.6.0babel-preset-stage-3: ^6.24.1cross-env: ^5.0.5css-loader: ^0.28.7file-loader: ^1.1.4mint-ui: ^2.2.13vue: ^2.5.11vue-loader: ^13.0.5vue-template-compiler: ^2.4.4webpack: ^3.6.0webpack-bundle-analyzer: ^3.8.0webpack-bundle-tracker: ^1.0.0-alpha.1webpack-dev-server: ^2.9.1