详解Vue.js 可拖放文本框组件的使用

目录

• 注册组件
• 添加组件
• 源代码

可拖放文本框允许用户通过拖动备选项至文本框来确定输入，其实也可以说是 combobox 的一种变形。 与 combobox 相比，这种组件能让用户更加直观的看到所有备选项，并且可以是多个输入共用一组备选项。 类似的组件也曾用在 3D Windrose App，Graph Maker App 等多个 app 里。

注册组件

注册可拖放文本框组件（其实就是将封装好的这部分代码 Ctrl+C and Ctrl+V）。

script tyPE="text/x-template" id="Drag-and-drop-text-box-template">
    …/script>
    script>
Vue.component("drag-and-drop-text-box", {
     template: "#drag-and-drop-text-box-template",…/script>
    

添加组件

直接使用自定义的标签 drag-and-drop-text-box> /drag-and-drop-text-box> 添加可拖放文本框组件。

drag-and-drop-text-box :columns="columns“ :input="input">
    /drag-and-drop-text-box>
    

源代码

Github

以上就是详解Vue.js 可拖放文本框组件的详细内容，更多关于vue 可拖放文本框组件的资料请关注其它相关文章！

• Vue.js实现拖放效果的实例
• 如何利用vue.js实现拖放功能

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！