<template> <div class="edit-line"> <el-form ref="modalFormComp" :model="modalForm" :key="modalForm.id" label-width="100px" > <el-form-item label="线条颜色:"> <color-select v-model="modalForm.color"></color-select> </el-form-item> <el-form-item label="线条粗细:"> <line-width-select v-model="modalForm.bold"></line-width-select> </el-form-item> <el-form-item label="线条形状:"> <line-style-select v-model="modalForm.style"></line-style-select> </el-form-item> </el-form> </div> </template> <script> import ColorSelect from "../../components/common/ColorSelect"; import LineStyleSelect from "../../components/common/LineStyleSelect"; import LineWidthSelect from "../../components/common/LineWidthSelect"; const initModalForm = { id: "", bold: "1px", color: "#000000", style: "solid", }; export default { name: "edit-line", components: { ColorSelect, LineStyleSelect, LineWidthSelect }, props: { instance: { type: Object, default() { return {}; }, }, }, data() { return { modalForm: { ...initModalForm }, }; }, mounted() { this.initData(this.instance); }, methods: { initData(val) { this.modalForm = { ...val }; }, submit() { this.$emit("modified", this.modalForm); }, }, }; </script>