B VUE系列 四:引用第三方组件(续)
ydui 是第一次使用vue相关的插件,引入的时候,废了一点劲,总算出来了效果~~简单记录
就按 官网说的 按需引入 放在 mian.js中
注意;官网提示的 按需引入 --另需导入重置基础样式 没有必要 ,就是几个重置css属性!!
感觉时间组件不友好,还是换个其他的插件吧!!
用的最多也是最熟悉的也就是 jquery-weui
那就引用jquery-weui 来实现效果!!!
注意; jquery-weui 也出版了 vue版本--vum https://github.com/vum-team/vum,但我们用的是1.x版本,百度一下,竟然有相关的博客!!!
按照相关的 说明操作一遍。
呵呵~~能出现效果才怪!!!,网上还竟然很多一样的此文章!!
既然不能出现效果:那就自己动手解决问题!~~
通过上面截图中的代码,不难发现,其实就是从 node_modules 中静态的引入,既然是静态引入 那还缺少css的 !!!
所以 我们再把相关的css引入一遍 即可:::::
到此时 。想要的效果就可以实现了~~~
但是 遇到一个问题:
像之前那样在 mounted 中放入代码,不起作用!
mounted(){ $("#start").datetimePicker({ title: '请选择时间', min: "1990-12-12", max: "2222-12-12 12:12", monthNames:"", times:function(){ }, parse: function(date) { return date.split(/\D/).filter(function(t) { return !!date }); }, onOpen:function (values) { $("#state").val(values.value[0]+'-'+values.value[1]+'-'+values.value[2]) } }); } //放在 mounted中不起作用, 那么尝试用 点击事件 触发 //点击 事件 可以触发。但是 页面刷新后,第一次点击没出效果,第2次以后的才正常
然后 尝试 给 input 加 点击事件------出现一个问题
页面刷新后,第一次点击没出效果,第2次以后的才正常
来重点了。为什么第一次点击没效果~~~~
应该是在 初始化插件!!!!
那就 初始化试试!!
初始化方法一: 在method中 初始化方法,在created钩子 中调用!!!不起作用
初始化方法二:在method中 初始化方法,将调用代码放在 this.$nextTick(() => { /* code */}) 好用了
至此:jquery-weui 的jquery版本已经可以使用了。(注意这玩意的css 对之前的初始化css样式有影响!!!)
后续 添加 记录其他插件 遇到的问题!!!
666