純粹是將之前公眾號發過的實體搬運到這里，
第一彈是可拖放文本框，
可拖放文本框允許用戶通過拖動備選項至文本框來確定輸入，其實也可以說是 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>
傳遞資料
向組件傳遞資料，如對變數 columns 和 input 兩組陣列直接賦值等，其中變數 columns 對應于所有選項的名稱與屬性，input 對應于每一個專案的標簽和選中值，
columns: [
{"name":"A","longname":"Copper"},
{"name":"B","longname":"Aluminum Aluminum"},
...
],
input: [
{text: "Material A", value: null},
{text: "Material B", value: null},
...
],
源代碼
Github
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/265613.html
標籤：JavaScript
上一篇：使用CSS計數器美化數字有序串列
下一篇：陣列的常用方法之split