vue-simple-search-dropdown是一款带搜索的vue下拉选择框插件-BFW插件库

vue-simple-search-dropdown是一款带搜索的vue下拉选择框插件

vue-simple-search-dropdown是一款带搜索的vue下拉选择框插件。

使用方式：

第一步引入vue

 <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script>

第二步引入插件

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue-simple-search-dropdown.min.js"></script>

第三步配置参数

 Vue.use(Dropdown);//声明

        var app = new Vue({
          el: '#app',
          data: {
             options: [
                              { name: '中国', id: '1' },
                              { name: '美国', id: '2' },
                              { name: '俄罗斯', id: '3' },
                              { name: '法国', id: '4' },
                                                     
                     ],  },//数据 name为显示的，id为实际值
        
           });

完整代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

</head>

<body>
    <div id="app">
        <Dropdown  name="cityss" :options="options" placeholder="请选择国际" v-model="city">
        </Dropdown>
    </div>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue-simple-search-dropdown.min.js"></script>
    <script>
        Vue.use(Dropdown);

        var app = new Vue({
          el: '#app',
          data: {
             options: [
                              { name: '中国', id: '1' },
                              { name: '美国', id: '2' },
                              { name: '俄罗斯', id: '3' },
                              { name: '法国', id: '4' },
                                                     
                     ],  },
        
           });
    </script>



</body>

</html>