这里简单讲解下类似于
这种组件的封装,其使用代码如下
Option可用v-for循环即可达到效果
<Select v-model="search">
<Option :label="x" :value="xx" />
</Select>
这里只讲讲值的同步,具体的样式这些自己想办法
**1.**引入select和option组合
<template>
<div class="ul">
<Select v-model="seacher" v-if="isShow">
<Option :value="v" :label="l" />
</Select>
<input
type="text"
readonly
v-model="seacher"
@click="isShow = !isShow"
placeholder="choose"/>
</div>
</template>
<script>
import Select from "./select.vue";
import Option from "./option.vue";
export default {
components: {
Select,
Option
},
provide () {
return {
setShow: this.show
}
},
data() {
return {
v: "1",
isShow: false,
l: "3333333",
seacher: ""
};
},
methods: {
show () {
this.isShow = false
}
}
};
</script>
<style scoped></style>
**2.**select.vue
<template>
<div class="sl">
<slot />
<div>
{{setChooses}}
</div>
</div>
</template>
<script>
export default {
provide() {
return {
setChoos: this.look
};
},
props: {
value: String
},
data() {
return {
setChooses: this.value
};
},
// watch: { 这里的watch没起作用所以我直接下面的look中修改
// setChooses(newVal) {
// this.$emit("input", newVal);
// }
// },
methods: {
look(e) {
this.setChooses = e;
this.$emit("input", e);
}
}
};
</script>
<style scoped></style>
3.option.vue
<template>
<div class="op">
<span @click="change" class="opt">{{ label }}</span>
</div>
</template>
<script>
export default {
inject: ["setChoos", "setShow"],
props: {
label: {
type: String
},
value: String
},
methods: {
change() {
this.setChoos(this.value);
this.setShow()
}
}
};
</script>
<style scoped>
.opt {
cursor: pointer;
}
</style>