可拖放文本框允許用戶通過拖動備選項至文本框來確定輸入,其實也可以說是 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