<template> <el-select class="direction-select" v-model="selected" placeholder="请选择" @change="select" > <el-option v-for="item in optionList" :key="item.value" :label="item.label" :value="item.value" > </el-option> </el-select> </template> <script> const PREDEFINE_OPTIONS = [ { value: "horizontal", label: "水平" }, { value: "vertical", label: "垂直" } ]; export default { name: "direction-select", props: { value: String, predefine: Array }, data() { return { optionList: [], selected: "" }; }, watch: { value: { immediate: true, handler(val) { this.selected = val; } } }, created() { this.optionList = this.predefine && this.predefine.length ? this.predefine : PREDEFINE_OPTIONS; }, methods: { select() { this.$emit("input", this.selected); this.$emit("change", this.selected); } } }; </script>