特殊需求ELDatePicker不要input框怎么处理
Demo预览：
https://sunzsh.github.io/vue-demos/#/label-datepicker-demo
代码：
https://github.com/sunzsh/vue-el-demo/blob/master/src/components/label-datepicker.vue
https://github.com/sunzsh/vue-el-demo/blob/master/src/views/label-datepicker-demo.vue
大家没有碰到过这种需求啊
就是我希望这个el-date-picker
这块展示的不是一个input框
是一个span或者div
所以呢
我前两天就对它进行了一次封装
原来呢是这样用的
封装之后呢直接可以这样
我给它起名叫LabelDatePicker
然后呢
中间写我们想使用的什么元素都可以
然后呢我们看一下效果哈
打开
这样就可以了
那老规矩啊
这个代码呢就是这个文件
大家把这个文件放到项目里就能用了
我还是放在github这个demo里边
那接下来
我简单说一下
我在
实现的过程中碰到一些好玩的问题
开始呢我觉得封装这个挺简单的（按理说）
我直接把这个input框隐藏掉
然后写一个span标签
点span标签
想办法弹出那个Popper层就可以了
后来我发现不是那样的
就是如果我把这个input框（大家看）
如果把这个input框隐藏掉的时候
然后点这个span标签是能弹出来
但是呢
这个popper的弹出层位置就不准了
因为他是基于这个input框计算的
input框你给他隐藏掉呢
它的位置就跑到（浏览器）左上角了
所以呢我们来看一下怎么解决
我们来看一下el-date-picker的源码
它用到了一个mixins源码（混入）
他混入了这个new Popper
new Popper是在这定义的
然后这里边他把Popper的一些methods
都拿进来了
所以呢我们来看popper
popper是在这
然后呢我们点
进去然后呢我们来看一下
他newPopper的时候大家看
他传了三个参数
那至于这三个参数是什么意思
我们可以这样啊
用这copilot的q（问答模式）
然后呢我们问一下PopperJS的官网
大家看
然后呢我们就可以直接点进来
我们来看Popper
new Popper
大家看第一个参数他说这个reference
element是用来定位这个popper的
所以呢它第一个参数很重要
决定了弹出层的位置
那我们看第一个参数怎么来的呢
在这
他呀先去找这个referenceElm
如果没有呢他去找reference
因为这个vue-popper是一个公用组件
所以它支持很多模式
在这里呢
我们这个el-date-picker用的是这个reference
我们可以看一下啊把它复制（去搜索）
这里边它有个reference计算属性
它直接返回当前的
r e f（引用）
这个reference呢它在上面有定义
大家看：也就是说这个元素
所以呢对我们来说
我们破解的方法就是
可以继承自他这个date pick
之后重写他这个reference方法
所以呢我在这里
先是声明了一个新的datePicker
然后呢继承原来的el-date-picker
然后注意
我先声明了一个data属性叫referenceDom
未来呢我就把它作为一个新的参考物
去打开那个Popper
然后呢在computed里边重写这reference
方法去返回这个新的参考物
这样就可以了
然后注意
我没有把这个新写的Datepicker导出
而是呢在它基础上又封装了一层组件
也就是说
这个新写这个datepicker
只有在这个vue页面里能用到（使用）
然后呢
我在这个vue页面里又做了一层封装
首先呢我把我刚才新写的组件放过来
然后在它下边
紧接着写了一个span标签
写一些时间
然后呢写个插槽
注意这个插槽在下边
我就会在mounted的里边
去取到这个插槽的DOM节点
放给刚才的这个referenceDom这个变量
这样的话呢
那popperJS就会基于这个去弹出层了
剩下其他的就好说了
大家可以看一下源码就可以了
最后更新于
这有帮助吗？