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>