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>

傳遞數據

---

向組件傳遞數據，如對變量 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