在vue 项目中使用 mobiscroll calendar

准备

 1. 首先在项目中引入jquery cdn 或静态资源 2. 下载 mobiscroll .js 和 mobiscroll .css    引入js和css

初始化组件

     import Mobiscroll from '.......'  // 从某个文件夹引人入Mobiscroll.calendar('#id', { theme: 'android-holo-light',  // 组件类型lang: 'zh', // 语言// buttons: buttons,display: 'center', // 组件显示位置headerText: '<div style="color: #000;">选择时间</div>{value}', // 头部内容 {value} 为选中日期dateOrder: 'yyyy-mm-dd', dateFormat: 'yyyy-mm-dd',animate: false, controls: ['calendar'], // 控制 这里只使用了 calendar  还有 date 等min: new Date(),  // 最小时间范围  在calendar  中只能用 min 不能使用 minDatemax: new Date(),  // 最大时间范围  在calendar  中只能用 max不能使用 maxDatedefaultValue: new Date(), // 默认显示时间onSet: function (event, inst) {  // 选中后执行  // 有event 和 inst 两个参数console.log(event);console.log(inst);}});

 描述: 1.这里为了展示onSet 方法直接使用了function函数的写法 在实际vue项目使用过程中可以使用的写法进行此时就可以进行之后的操作了  2. 此处的buttons可以进行自定义日历组件按钮 , buttons 是数组类型, 默认是 ['set', 'cancel']; 代表确定和取消可以通过数组对象进行自定义 例如: [{text: '自定义',// cssClass: 'own-color',handler: this.handler}, {text: '确定',handler: 'set'// cssClass: 'own-color'}, 'cancel']其中 "text" 是自定义按钮名称; "handler" 是自定义按钮事件,  可以是字符串(必须是组件自带事件才可以用字符串代替);  cssCalss 是自定义的class名.3. onSet 函数会返回所选中的值:  event 如下图

修改组件样式

可以用过 引入的css文件对组件样式进行修改

vue 项目中使用mobiscroll calendar相关推荐

canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
使用方法项目中引入 npm install html2canvas html代码 //html代码 js代码 // 引入html2canvas import html2canvas from 'ht ...
如何在Vue项目中使用vw实现移动端适配(转)
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
实战：vue项目中导入swiper插件
版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4. 常用的版本是swiper3和swiper4,我选择的是swiper3. 安装安装swiper3的最新版本3.4.2: ...
vue ajax highcharts,在vue项目中引入highcharts图表的方法(详解)
npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个char ...
VUE项目中使用this.$forceUpdate()；解决页面v-for中修改item属性值后页面v-if不改变的问题
VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题参考文章: (1)VUE项目中使用this.$forceUpdate();解决 ...
在vue项目中：统一封装 Axios 接口与异常处理
在vue项目中:统一封装 Axios 接口与异常处理参考文章: (1)在vue项目中:统一封装 Axios 接口与异常处理 (2)https://www.cnblogs.com/itgezhu/p/ ...
vue php跨域,Vue 项目中遇到的跨域问题及解决方法(后台php)
问题描述前端 vue 框架,后台 php,百度跨域问题后台加这段代码 header("Access-Control-Allow-Origin: *"); 加了之后报这个错: Th ...
Typescript在Vue项目中的使用
最近尝试了一下Typescript在Vue项目中的使用,中间遇到了一些问题,把遇到的问题记录一下,以防被忘. 如何让Typescript识别Vue.JSON文件因为Typescript默认不能识别. ...
vue项目中使用echarts实现词云
0.先上效果图 1.安装插件 -- vue项目中 npm install echartsnpm install echarts-wordcloud 2.vue页面中引入组件 <word-clou ...

vue 项目中使用mobiscroll calendar

快速跳转

在vue 项目中使用 mobiscroll calendar

准备

初始化组件

修改组件样式

vue 项目中使用mobiscroll calendar相关推荐

最新文章

热门文章