vue multiselect

vue-multiselect

版本3的文檔

v3.0.0的文檔幾乎與v2.x相同，與v2.x相同。對於V3和以前版本的完整文檔，請查看：Vue-Multiselect.js.org

特徵和特徵：

• 沒有依賴性

• 單個選擇

• 多個選擇

• 標記

• 下拉

• 過濾

• 搜索建議

• 邏輯分為混合物

• 基本組件和對自定義組件的支持

• V模型支持

• Vuex支持

• 異步選項支持

• 完全可配置（請參見下面的道具列表）

安裝和基本用法

npm install install vue-multiselect@next

 <模板>
  <div>
    <vuemultiselect v-model =“ selected”：options =“ options”>
    </vuemultiselect>
  </div>
</template> <cripct> import import vuemultiselect從'vue-multiselect'export default {組件：{vuemultiselect}，data（）{retage（retage {selected：null：null，options：['list''，'of' of'，'options'，'options']}} }} </script> <style src =“ vue-multiselect/dist/vue-multiselect.css”> </style>

JSFIDDLE

示例JSFIDDLE - 將其用於發行複制。

例子

單個選擇 /下拉

<vuemultiselect
  ：model-value =“ value”
  ：options =“源”
  ：搜索=“ false”
  ：接近選擇=“ false”
  ：ally-empty =“ false”
  @update：model-value =“更新”
  標籤=“名稱”
  佔位符=“選擇一個”
  track-by =“ name”/>

搜索單一選擇

<vuemultiselect
  V-Model =“ value”
  ：options =“源”
  ：關閉選擇=“ true”
  ：clear-on-select =“ false”
  佔位符=“選擇一個”
  標籤=“名稱”
  track-by =“ name”/>

多次選擇與搜索

<vuemultiselect
  V-Model =“ Multivalue”
  ：options =“源”
  ：多=“ true”
  ：關閉選擇=“ true”
  佔位符=“選擇一些”
  標籤=“名稱”
  track-by =“ name”/>

標記

與@tag事件

<vuemultiselect
  V-Model =“ TaggingSelected”
  ：options =“ taggingOptions”
  ：多=“ true”
  ：taggable =“ true”
  @tag =“ addtag”
  tag-placeholder =“添加為新標籤”
  佔位符=“打字搜索或添加標籤”
  標籤=“名稱”
  track-by =“代碼”/>

 addtag（newtag）{
  const tag = {名稱：newtag，代碼：newtag.substring（0，2） + Math.floor（（Math.random（） * 10000000））
  }
  this.taggingOptions.push（tag）
  this.taggingselected.push（tag）}，

異步下拉

<vuemultiselect
  V-Model =“ SelectedCountries”
  ：options =“國家”
  ：多=“多重”
  ：可搜索=“可搜索”
  @search-change =“ asyncfind”
  佔位符=“搜索類型”
  標籤=“名稱”
  track-by =“代碼”>
  <模板#noresult>
    哎呀！找不到元素。考慮更改搜索查詢。
  </template>
</vuemultiselect>

方法： {
  asyncfind（query）{this.countries = findService（query）
  }}}

特別感謝

感謝Matt Elen貢獻了此版本！

@Shentao的Vue-Mulitselect組件的VUE 3升級。這個想法是，當您升級到VUE 3時，您可以將兩個組件交換出來，一切都應該簡單地工作。隨時查看我們如何將產品升級到vue 3的故事

貢獻

＃用Minificationnpm運行捆綁包＃運行單元testsnpm運行測試的分配構建