基于vue 的 layui 下拉选择组件

css 因为layui select 在class 上绑定了事件，就改了一下class 名称

.layui-form-selected-vue .layui-edge {
    margin-top: -9px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.layui-form-selected-vue .layui-edge {
    margin-top: -3px \0;
}

:root .layui-form-selected-vue .layui-edge {
    margin-top: -9px \0/ IE9;
}

.layui-form-selected-vue dl {
    display: block;
}

一同引入页面中就可以使用，虽然有点low但也是能用的

Vue.component('lay-select', {
    props: ['item_key','options','item','lay_verify_vue','option_value','option_name'],
    data: function(){
        var item_key=this.item_key;
        var item=this.item;
        var option_value=this.option_value;
        var option_name=this.option_name;
        var options=this.options;
        var obj={
            isShow:false,
            code:"",
            name:""
          };

          if(item_key && item){
            if(options && options.length>0){
                var o=options.First("item."+option_value+"=='"+ item[item_key] +"'");
                if(o){
                    obj['name']=o[option_name];
                    obj['code']=o[option_value];
                }
            }
          }
        return obj;
    },
      methods: {
        setCode:function(i){
          var option_value=this.option_value;
          var option_name=this.option_name;
          this.code=i[option_value];
          this.isShow=false;
          this.name=i[option_name];
          var itemKey=this.item_key;
          var item=this.item;
          item[itemKey]=i[option_value];
          this.$emit('select', i,item);
        },
        clearCode:function(){
          this.code="";
          this.name="";
          this.isShow=false;
          var itemKey=this.item_key;
            var item=this.item;
            item[itemKey]="";
          this.$emit('select', null,item);
        },        
        show :function() {
            this.isShow?this.isShow=false:this.isShow=true;
            document.addEventListener('click', this.hidePanel, false)
        },

        hide :function() {
          this.isShow=false;
            document.removeEventListener('click', this.hidePanel, false)
        },

        hidePanel :function(e) {
            if (!this.$el.contains(e.target)) {//点击除弹出层外的空白区域
                this.hide()
            }
        }
      },
      watch:{
        item:function(newVal,oldVal,a){
          var item = this.item;
          var item_key = this.item_key;
          var options=this.options;
            var option_value=this.option_value;
            var option_name=this.option_name;
          if(item_key && item){
              if(options && options.length>0){
                  var o=options.First("item."+option_value+"=='"+ item[item_key] +"'");
                  if(o){
                      this['name']=o[option_name];
                      this['code']=o[option_value];
                  }
              }
          }
        },
          options:function(newVal,oldVal,a){
              var item = this.item;
              var item_key = this.item_key;
              var options=this.options;
              var option_value=this.option_value;
              var option_name=this.option_name;
              if(item_key && item){
                  if(options && options.length>0){
                      var o=options.First("item."+option_value+"=='"+ item[item_key] +"'");
                      if(o){
                          this['name']=o[option_name];
                          this['code']=o[option_value];
                      }
                  }
              }
          },
       /* 'item.checkContent':function(newVal,oldVal,a){
            var item = this.item;
            var item_key = this.item_key;
            var options=this.options;
            var option_value=this.option_value;
            var option_name=this.option_name;
            if(item_key && item){
                if(item[item_key]==''){
                    this.name='';
                    this.code='';
                }else{
                    if(options && options.length>0){
                        var o=options.First("item."+option_value+"=='"+ item[item_key] +"'");
                        if(o){
                            this['name']=o[option_name];
                            this['code']=o[option_value];
                        }
                    }
                }
            }
        }*/
        },
    template: "<div>\n" +
        "                <div class=\"layui-unselect layui-form-select\" v-bind:class=\"{'layui-form-selected-vue': isShow }\">\n" +
        "                    <div class=\"layui-select-title\" v-on:click=\"show()\">\n" +
        "                        <input type=\"text\" placeholder=\"==请选择==\" value=\"\" readonly v-model=\"name\" v-bind:lay-verify=\"lay_verify_vue\" class=\"layui-input layui-unselect\">\n" +
        "                        <i class=\"layui-edge\"></i></div>\n" +
        "                    <dl class=\"layui-anim layui-anim-upbit\">\n" +
        "                        <dd lay-value=\"\" class=\"layui-select-tips\" v-bind:class=\"{'layui-this':code==''}\"\n" +
        "                            v-on:click=\"clearCode()\">==请选择==\n" +
        "                        </dd>\n" +
        "                        <dd v-bind:lay-value=\"i[option_value]\" v-for=\"i in options\" v-bind:class=\"{'layui-this':code==i[option_value]}\"\n" +
        "                            v-text=\"i[option_name]\" v-on:click=\"setCode(i)\"></dd>\n" +
        "\n" +
        "                    </dl>\n" +
        "                </div>\n" +
        "            </div>"
  })

使用方法

options 下拉对象数组

option_value,option_name 对象数组中的属性名称

item_key 选择的值绑定到父组件的那个属性

v-on:select 级联下拉时的选择事件 回调两个参数1，选择值的对象2，父组件对象

<lay-select item_key="checkType" option_value="qualificationDicId" option_name="name" v-bind="{'options':checkType,'item':item}" v-on:select="selectCheckType"></lay-select>

第一次写vue组件大家多多指(T ^ T)