<ul v-selectable > <li> item1 </li> <li> item2 </li> <li> item3 </li> <li> item4 </li> <li> item5 </li> <li> item6 </li> </ul>
注意ul的这个v-selectable就是我们自定义的指令，但是使用之前必须 Vue.use
import Vue from 'vue' import Selectable from '@/components/vue-selectable/vue-selectable.js' //这个修改为你的js路径 Vue.use(Selectable);
再给我们的ul li 加点样式，注意我们的被选择项会被添加一个active的class，通过这个来改变选中项样式
<style scoped> ul{ margin: 40px 40px 40px 40px; border: 1px solid red; width: 300px; padding-bottom: 20px; } ul li { width: 200px; height: 30px; list-style: none; border: 1px solid black; margin-left: 10px; margin-top: 30px; text-align: center; line-height: 30px; user-select:none; } ul li.active{ background-color: red; } </style>
这样就可以达到开头的效果了。实际上代码运行过程中还是有许多小bug的，本文只是提供了一个简单的思路和代码，更多功能可以自己修改代码进行添加。如果不明白这个自定义指令为什么是这样的写法，可以参考我的另一篇文章自定义懒加载图片插件v-lazyload。
https://www.jb51.net/article/112355.htm
总结
以上所述是小编给大家介绍的自定义类似于jQuery UI Selectable 的Vue指令v-selectable，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: