vuejs2.0 (select2)插件封装方法 vue+html

这里写图片描述

部分代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title></title>
        <link href="static/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
        <!-- Font Awesome -->
        <link href="static/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
        <!-- Ionicons -->
        <link href="static/plugins/ionicons/css/ionicons.min.css" rel="stylesheet" type="text/css">
        <!-- Theme style -->
        <link href="static/base/css/AdminLTE.min.css" rel="stylesheet" type="text/css">
        <link rel="stylesheet" type="text/css" href="static/base/css/skins/_all-skins.css">
        <!--begin code mirror -->
        <link rel="stylesheet" href="static/codemirror-5.31.0/lib/codemirror.css" />
        <script src="static/codemirror-5.31.0/lib/codemirror.js"></script>
        <!--end Code Mirror -->
        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
    <script src="../static/plugins/html5shiv.min.js"}"></script>
    <script src="../static/plugins/respond.min.js"}"></script>
   <![endif]-->
        <style>
            body {
                font-family: Menlo, Consolas, monospace;
                color: #444;
            }

            .item {
                cursor: pointer;
            }

            .bold {
                font-weight: bold;
            }

            ul {
                padding-left: 1em;
                line-height: 1.5em;
                list-style-type: dot;
            }
        </style>
    </head>

    <body>
        <div id="el">
            <div>
                <p>Selected: {{ select1.selected }}</p>
                <select2 :options="select1.options" v-model="select1.selected">
                    <option disabled value="0">Select one</option>
                </select2>
            </div>

            <div>
                <p>Selected: {{ select2.selected }}</p>
                <select2 :options="select2.options" v-model="select2.selected">
                    <option disabled value="0">Select one</option>
                </select2>
            </div>
        </div>
        <script type="text/javascript" src="static/plugins/jquery/jquery-2.2.3.min.js"></script>
        <script type="text/javascript" src="static/bootstrap/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="static/vue/vue.min.js"></script>
        <script type="text/javascript" src="static/plugins/select2/js/select2.js"></script>
        <script type="text/javascript" src="select2-vue.js"></script>
        <link href="static/plugins/select2/css/select2.css" rel="stylesheet" type="text/css">

        <script>
            var vm = new Vue({
                el: '#el',
                data: {
                    select1: {
                        selected: 2,
                        options: "/project/config/getListForSelect"
//                      options: [{
//                              id: 1,
//                              text: 'Hello'
//                          },
//                          {
//                              id: 2,
//                              text: 'World'
//                          }
//                      ]
                    },
                    select2: {
                        selected: 3,
                        options: "/project/config/getListForSelect"
//                      options: [{
//                              id: 1,
//                              text: '中国'
//                          },
//                          {
//                              id: 2,
//                              text: '美国'
//                          },
//                          {
//                              id: 3,
//                              text: '日本'
//                          }
//                      ]
                    }
                }
            })
        </script>

    </body>

</html>



Vue.component('select2', {
  props: ['options', 'value'],
  template: '<select><slot></slot></select>',
  mounted: function () {
    _this = this;
    var vm = this
    $(this.$el)
      // init select2
      .select2(
        {
            width:"100%",
            placeholder          : "===项目类型===",
            allowClear: true,
            minimumInputLength   : 0,
            ajax: {
                url: _this.options ,
                type : 'post',
                dataType: 'json',
                delay: 50,
                data: function (params) {
                    return {
                        keyword: params.term,
                        configType:"project",
                        limitRow:200
                    };
                },
                processResults: function (data, params) {
                    return {
                        results: data
                    };
                },
                cache: false
            },
            escapeMarkup: function (markup) { return markup; }
        }


      )
      .val(this.value)
      .trigger('change')
      // emit event on change.
      .on('change', function () {
        vm.$emit('input', this.value)
      })
  },
  watch: {
    value: function (value) {
      // update value
      $(this.$el)
        .val(value)
        .trigger('change')
    },
    options: function (options) {
      // update options
      $(this.$el).empty().select2({ data: options })
    }
  },
  destroyed: function () {
    $(this.$el).off().select2('destroy')
  }
});

这里写图片描述

vuejs2.0 (select2)插件封装方法 vue+html

demo下载

猜你喜欢