可拖放文本框允许用户通过拖动备选项至文本框来确定输入,其实也可以说是 combobox 的一种变形。 与 combobox 相比,这种组件能让用户更加直观的看到所有备选项,并且可以是多个输入共用一组备选项。 类似的组件也曾用在 3D Windrose App,Graph Maker App 等多个 app 里。
注册组件
注册可拖放文本框组件(其实就是将封装好的这部分代码 Ctrl+C and Ctrl+V)。
1
2
3
4
5
6
7
8
|
< 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>
添加可拖放文本框组件。
1
|
< drag-and-drop-text-box :columns = "columns“ :input=" input"></ drag-and-drop-text-box >
|
源代码
以上就是详解Vue.js 可拖放文本框组件的详细内容,更多关于vue 可拖放文本框组件的资料请关注服务器之家其它相关文章!
原文链接:https://www.cnblogs.com/yukiwu/p/14462271.html