一个选择日期的vue组件
基于vue2.0
######注:此组件是在jamielhf的基础上进行改造的
this.$picker.show({
theme: 'aaa',
type: 'text',
date: "本月",
dataList: [ // 自定义列表格式
{
name: "今日",
id: 0
},
{
name: "本月",
id: 1
},
{
name: "本年",
id: 2
}
],
onOk: (value) =>{
if(typeof value === 'object') {
this.date = value.name
}
}
});
demo 用vue-cli 的webpack构建的,加了publish的文件,在发布npm的时候
|--dist build生成的目录
|--doc 展示图片
|--lib publish 之后的文件,发布到npm用
|--src
|--assets 资源
|--components
|--Picker 日期组件
|--PickerItem 滚动的子组件
|--modules 插件的js
|--css
|App.vue 入口
|main.js
安装
npm i vue-water-calendar --save
初始化
import Calendar from 'water-vue2-calendar';
Vue.use(Calendar);
使用
<script>
export default {
name: 'App',
data(){
return{
date:'',
date2:'2010-3-2'
}
},
methods:{
setDate(){
this.$picker.show({
type:'datePicker',
onOk: (date) =>{
this.date = date
}
});
},
setDate2(){
this.$picker.show({
type:'datePicker',
date:this.date2, //初始化时间
endTime:'2020-02-11', //截至时间
startTime:'2010-02-11', //开始时间
onOk:(e)=>{
this.date2 = e;
},
})
},
},
}
</script>