vue select组件封装后用v-model

封装好的组件

<style type="text/css" scoped>
.ipt-select-title {
  color: #6D89AF;
  flex-shrink: 0;
  font-weight: 500;
}

.ipt-holder {

  display: flex;
  flex: 1 1;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.ipt-select {
  height: 100%;
  width: 100%;
  background: transparent;
  border: 0;
  color: #113260;
  padding-right: 0.05rem;
  font-size: 0.15rem;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  height: 0.5rem;
  direction: ltr;
  margin-top: 0.0rem;
  font-weight: 400;
}

.ipt-arrow {
  display: flex;
  width: 0.08rem;
  height: 0.13rem;
  background-size: 100% 100%;

}

</style>
<template>
  <div class="ipt-wrap">
    <div class="ipt-select-title" :style="{width:labelWidth}">{{title}}</div>
    <div class="ipt-holder">
      <select :value="checked" class="ipt-select" @change='selectedchange' v-bind="{disabled:readonly}">
        <option v-bind="{value:item.selectcode }" v-for="(item,index) in selects" :key="index">
          {{item.selectdisplayName}}
        </option>
      </select>
      <div>
      <img class="ipt-arrow" src="@/assets/images/arrow.png" />
      </div>
    </div>
    
  </div>
</template>
<script>
export default {
  props: ['title', 'label-width', 'checked', 'selects', 'readonly'],
  model: {
    prop: 'checked',
    event: 'change'
  },
  methods: {
    selectedchange(e) {
      this.$emit('change',e.target.value)
    }
  }
}

</script>

页面引用

<template>
  <div class="com-wrap flex-space-between">
 
      <com-select title="XX类型" label-width="1rem" :selects="customTypes" v-model="userinfo.customtype"></com-select>
    
  </div>
</template>
<script>
import comselect from '@/components/select.vue'
export default {
  components: {'com-select': comselect
  },
  data() {
    return {
 
      userinfo: {
        customtype: '1',
      },
      customTypes: [{
          selectcode: '-1',
          selectdisplayName: "请选择"
        },
        {
          selectcode: '0',
          selectdisplayName: "XXX"
        },
        {
          selectcode: '1',
          selectdisplayName: "XXX"
        }
      ]
    }
  },
  methods: {
   
    goback: function() {
      this.$router.back(0)
    }
  },
  mounted: function() {
   
  },
}

</script>