select下拉框组件

发现vant-uI是没有select下拉框多选框的所以自己写了一个组件。话不多说上代码。加## 标题粗样式

这是select组件

<template>
  <div >
    <div class="selectInput">
        <div class="title" @click.stop="liShow">
          <input class="icon1" type="text" disabled  placeholder="请选择.." v-model="selectCon" @click.stop="liShow" />
          <div class="icon" @click.stop="liShow"></div>
      </div>
      <ul v-show="isShow" @click.stop="liShow">
        <li v-for="item in liData" :key="item.jobCodeId">
          <label :id="item.jobCodeId" @click="changeBool(item.jobCodeId)">
            <input type="checkbox" v-model="item.Check" />
            {{item.jobName}}
          </label>
        </li>
      </ul>
    </div>
  </div>
</template>

下面是js

<script>
export default {
  data () {
    return {
      checkedData: [], // 选中的数据
      isShow: false, // 下拉列表是否显示
      selectCon: '' // 选中的内容
    };
  },
  mounted () {
    let that = this;
    // 点击页面空白处隐藏下拉列表
    document.addEventListener('click', function () {
      that.isShow = false;
    });
  },
  methods: {
    liShow () {
      this.isShow = true;
    },

    changeBool (data) {
      this.checkedData.forEach((item) => {
        if (item.Id == data) {
          item.Check = !item.Check;
        }
      });
    }
  },
  model: {
    event: 'change'
  },
  props: ['liData', 'value'],
  watch: {
    liData: {
      handler (newVal, oldVal) {
        // 选中数据
        this.checkedData = newVal.filter(function (item) {
          return item.Check == true;
        });
        // 在页面打印出的数据
        this.selectCon = ''; // 点击的当前项的展示
        for (var i = 0; i < this.checkedData.length; i++) {
          this.selectCon += this.checkedData[i].jobName + ';';
        }
        console.log(this.selectCon);
        // 给父组件传值
        this.$emit('change', this.checkedData);
      },
      deep: true
    }
  }
};
</script>

这是样式

<style  scoped>
.icon1{
  padding-left: 62px !important;
}
.icon1{
  background: #FFFFFF !important;
}
.selectInput .title {
  width: 100%;
  border: 1px solid #2F4FE7;
  height: 32px;
  border-radius: 5px;
  position: relative;
}
.selectInput input[type="text"] {
  width: 100%;
  height: 30px;
  padding: 0 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 3px;
  -moz-border-radius: 3px; /* Firefox */
  -webkit-border-radius: 3px; /* Safari 和 Chrome */
  border-radius: 3px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
  position: relative;
}

.icon {
  width: 0px;                 /*  宽高设置为0，很重要，否则达不到效果 */
  height: 0px;
  border: 7px solid rgba(47, 79, 231, 1);
  border-bottom-color: transparent;    /* 设置透明背景色 */
  border-left-color: transparent;
  border-right-color: transparent;
  position: absolute;
  top: 10px;
  right: 10px;

}
.selectInput ul {
  border-radius: 3px;
  -moz-border-radius: 3px; /* Firefox */
  -webkit-border-radius: 3px; /* Safari 和 Chrome */
  border-radius: 3px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2); /* Firefox */
  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2); /* Safari 和 Chrome */
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2); /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
  width: 100%;
  /* border: 1px solid #ccc; */
  padding: 10px 30px;
}
.selectInput li {
  line-height: 30px;
}
</style>

这是父组件：

  <selecMutiltchose ref="selectmethods" :liData='liData'  v-model="selectCon"></selecMutiltchose>
  这是data传入的数据:
  data () {
    return {
      selectCon: '',
      liData: [{
        jobCodeId: 1,
        jobName: '张三1',
        Check: false
      },
      {
        jobCodeId: 2,
        jobName: '张三2',
        Check: false
      }]
    };
  },

这是效果图,不喜勿喷