番禺响应式网站开发,wordpress 如何编辑页面,无锡有什么网站,免费论坛网站大全接着上次的进度#xff0c;我们已经实现了一个todo-list。它已经具备了基本的功能#xff0c;可以新建、编辑、删除任务。但是美中不足的是#xff0c;它的时间设定上只能通过输入一段字符串来设定#xff0c;很不社会。我们应该完成的效果是一个time-picker#xff0c;日… 接着上次的进度我们已经实现了一个todo-list。它已经具备了基本的功能可以新建、编辑、删除任务。但是美中不足的是它的时间设定上只能通过输入一段字符串来设定很不社会。我们应该完成的效果是一个time-picker日期选择器。本来打算自己造轮子无奈公司最近一段时间项目赶得紧加上生活上遇到了一点挫折直到7月初才有空闲下来想想代码造轮子时间可能不够也只能利用别人的现成插件了。google了几个vue的时间选择器插件不是代码修改量太大就是看不太懂要不就是UI和我的整体风格不符。于是另选思路找到了现在的这个bootstrap的插件代码量不大也在自己可以理解的范围。于是开工。不过中间还是有一些曲折尝试几次还是没办法实现数据的双向绑定。我曾经试过想要把时间的数据换成键值对的形式结果引发了诡异的bug故作罢最后还是使用了字符串使用这个bootstrap插件也有一部分的原因是因为这个的输出结果也是字符串代码的修改量会很少。好了废话说了一箩筐看代码吧。 github地址地址 相关资源 首先需要下载插件http://www.bootcss.com/p/boot... 度娘即可sb都能找到。 解压打开我们打开sample的V3版本。用编辑器打开index.html先找到需要配置的文件可以看到是下面这几个 bootstrap-datetimepicker.min.cssbootstrap-datetimepicker.jsbootstrap-datetimepicker.fr.js本来在需要的插件里还有JQ、bootstrap但是这两个我们之前加载过了这里就不用另外加载了。 第三个是文字插件默认的是法语可以在相应的文件夹换成中文的。我们要把这三个文件放到我们的文件夹里放哪里随便只要你找得到但还是建议放在src文件夹里。 代码内容 放好了之后就需要导入了。和导入bootstrap一样只要在main.js里注册即可代码如下 import ./bootstrap-datetimepicker/bootstrap-datetimepicker.min.css
import ./bootstrap-datetimepicker/bootstrap-datetimepicker.min.js
import ./bootstrap-datetimepicker/bootstrap-datetimepicker.zh-CN.js 接着打开编辑器组件editor.vue我们首先要去掉时间输入的input。接着修改为 div classinput-group date form_date data-date data-date-formatdd MM yyyy data-link-fielddtp_input2 data-link-formatyyyy-mm-ddinput classform-control settime-input typetext v-bind:valuesetTimespan classinput-group-addonspan classglyphicon glyphicon-calendar/span/span/div 删掉的input为了保留双向绑定的功能v-bind:valuesetTime被我转移到了对应的input上而v-on:inputsaveSettime则被我去掉了。 为什么呢因为这个方法是为了在input输入值时获取并保存对应的值而当我们用这个插件时是没办法触发这个v-oninput事件的需要另外设置事件。具体的设置下面会说这里替换掉就可以了。 对应的下面script的内容也需要替换。 saveSettime(e)自然去掉那么这个触发事件放到哪里去呢答案是放在事件选择器这个框消失的时候。 在methods里添加代码如下 dateDefind(){var selfthis;$(.form_date).datetimepicker({language: zh-CN,format:yyyy-mm-dd,weekStart: 1,todayBtn: 1,autoclose: 1,todayHighlight: 1,startView: 2,minView: 2,forceParse: 0}),$(.form_date).datetimepicker().on(hide,function(e){self.settimeInput$(.settime-input).val();})} 可以看到上面的代码前一部分是插件的一些配置信息可以设置语言、日期格式等等...... 第二部分则是我在前面说的事件触发会在日期选择框消失的时候触发一个赋值事件赋值的内容和上面的v-oninput一样。当然这里我会在最开始的时候var selfthis这是闭包的知识如果直接用this的话是没办法取到正确的值的。 好了到这一步还不能实现这个插件。 我们还需要添加一个mounted方法因为dateDefind()并没有被执行所以我们需要添加如下代码 mounted:function(){this.dateDefind();
} 好了这里事件选择插件就能顺利使用了。那么这个todolist的基本功能就全部实现了。我的叙述可能有些不清楚的地方所以需要你看看我的github上面有我的源码对照着写一遍吧。 最后还要感谢下面这篇文章给我的启发欢迎大家点进去查看原文。 vue2.0 与 bootstrap datetimepicker的结合使用实例
