<template> <el-dropdown trigger="click" class="line-width-select custom-select" placement="bottom-start" @command="select" > <div class="select-preview"> <div class="select-preview-main"> <div class="width-item" v-if="selected"> <!-- <span>{{ selected }}</span> --> <i :style="{ borderBottomWidth: selected }"></i> </div> </div> <div class="select-preview-icon"> <i class="el-icon-arrow-down"></i> </div> </div> <el-dropdown-menu slot="dropdown" class="line-width-menu"> <el-dropdown-item v-for="(option, index) in optionList" :key="index" :command="option" > <div class="width-item"> <!-- <span>{{ option }}</span> --> <i :style="{ borderBottomWidth: option }"></i> </div> </el-dropdown-item> </el-dropdown-menu> </el-dropdown> </template> <script> const PREDEFINE_OPTIONS = ["1px", "2px", "3px"]; export default { name: "line-width-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(option) { this.selected = option; this.$emit("input", this.selected); this.$emit("change", this.selected); }, }, }; </script>