|
@@ -1,244 +1,220 @@
|
|
|
<!-- 基本图形的属性框 -->
|
|
|
<template>
|
|
|
- <div class="base-graphy">
|
|
|
- <div class="title">属性</div>
|
|
|
- <ul>
|
|
|
- <li>
|
|
|
- <div class="small-title">尺寸大小</div>
|
|
|
- <div class="property">
|
|
|
- <div>
|
|
|
- <span>W</span>
|
|
|
- <el-input
|
|
|
- style="width:74px;margin-left:6px"
|
|
|
- size="mini"
|
|
|
- v-model="width"
|
|
|
- placeholder="请输入内容"
|
|
|
- ></el-input>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <span>H</span>
|
|
|
- <el-input
|
|
|
- style="width:74px;margin-left:6px"
|
|
|
- size="mini"
|
|
|
- v-model="height"
|
|
|
- placeholder="请输入内容"
|
|
|
- ></el-input>
|
|
|
- </div>
|
|
|
- <i class="el-icon-link"></i>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <div class="small-title">边框</div>
|
|
|
- <div class="property">
|
|
|
- <div class="color-box">
|
|
|
- <div class="cololorSelect">
|
|
|
- <el-color-picker @change="changeColor" show-alpha class="fix-box-1" v-model="color"></el-color-picker>
|
|
|
- </div>
|
|
|
- <span>颜色</span>
|
|
|
- </div>
|
|
|
- <div class="line-width">
|
|
|
- <el-input-number
|
|
|
- style="width:80px"
|
|
|
- v-model="linewidth"
|
|
|
- controls-position="right"
|
|
|
- @change="changeLinewidth"
|
|
|
- size="mini"
|
|
|
- :min="1"
|
|
|
- :max="20"
|
|
|
- :maxlength="100"
|
|
|
- ></el-input-number>
|
|
|
- <span>线宽</span>
|
|
|
- </div>
|
|
|
- <div class="line-width">
|
|
|
- <a-select
|
|
|
- style="width: 80px"
|
|
|
- v-model="linestyle"
|
|
|
- :default-value="borderLineOption[0].id"
|
|
|
- @change="changeLineStyle"
|
|
|
- >
|
|
|
- <a-select-option
|
|
|
- v-for="item in borderLineOption"
|
|
|
- :key="item.id"
|
|
|
- :label="item.src"
|
|
|
- :value="item.id"
|
|
|
- >
|
|
|
- <img :src="item.src" alt width="60" />
|
|
|
- </a-select-option>
|
|
|
- </a-select>
|
|
|
- <span>线形</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <div class="small-title">填充</div>
|
|
|
- <div class="property property-push">
|
|
|
- <div class="color-box">
|
|
|
- <div class="cololorSelect">
|
|
|
- <el-color-picker
|
|
|
- show-alpha
|
|
|
- @change="changeFillcolor"
|
|
|
- class="fix-box-1"
|
|
|
- v-model="fillColor"
|
|
|
- ></el-color-picker>
|
|
|
- </div>
|
|
|
- <span>颜色</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
+ <div class="base-graphy">
|
|
|
+ <div class="title">属性</div>
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <div class="small-title">尺寸大小</div>
|
|
|
+ <div class="property">
|
|
|
+ <div>
|
|
|
+ <span>W</span>
|
|
|
+ <el-input style="width: 74px; margin-left: 6px" size="mini" v-model="width" placeholder="请输入内容"></el-input>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span>H</span>
|
|
|
+ <el-input style="width: 74px; margin-left: 6px" size="mini" v-model="height" placeholder="请输入内容"></el-input>
|
|
|
+ </div>
|
|
|
+ <i class="el-icon-link"></i>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li class="graphy-fill">
|
|
|
+ <div class="small-title">填充</div>
|
|
|
+ <div class="property property-push">
|
|
|
+ <div class="color-box">
|
|
|
+ <div class="cololorSelect">
|
|
|
+ <el-color-picker show-alpha @change="changeFillcolor" class="fix-box-1" v-model="fillColor"></el-color-picker>
|
|
|
+ </div>
|
|
|
+ <span>颜色</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="small-title">边框</div>
|
|
|
+ <div class="property">
|
|
|
+ <div class="color-box">
|
|
|
+ <div class="cololorSelect">
|
|
|
+ <el-color-picker @change="changeColor" show-alpha class="fix-box-1" v-model="color"></el-color-picker>
|
|
|
+ </div>
|
|
|
+ <span>颜色</span>
|
|
|
+ </div>
|
|
|
+ <div class="line-width">
|
|
|
+ <el-input-number
|
|
|
+ style="width: 80px"
|
|
|
+ v-model="linewidth"
|
|
|
+ controls-position="right"
|
|
|
+ @change="changeLinewidth"
|
|
|
+ size="mini"
|
|
|
+ :min="1"
|
|
|
+ :max="20"
|
|
|
+ :maxlength="100"
|
|
|
+ ></el-input-number>
|
|
|
+ <span>线宽</span>
|
|
|
+ </div>
|
|
|
+ <div class="line-width">
|
|
|
+ <a-select style="width: 80px" v-model="linestyle" :default-value="borderLineOption[0].id" @change="changeLineStyle">
|
|
|
+ <a-select-option v-for="item in borderLineOption" :key="item.id" :label="item.src" :value="item.id">
|
|
|
+ <img :src="item.src" alt width="60" />
|
|
|
+ </a-select-option>
|
|
|
+ </a-select>
|
|
|
+ <span>线形</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import bus from "@/bus/bus";
|
|
|
export default {
|
|
|
- props: [
|
|
|
- "strokeColor",
|
|
|
- "lineStyle",
|
|
|
- "lineWidth",
|
|
|
- "Width",
|
|
|
- "Height",
|
|
|
- "fillColor",
|
|
|
- ],
|
|
|
- data() {
|
|
|
- return {
|
|
|
- width: 0,
|
|
|
- height: 0,
|
|
|
- color: "#cccccc", //颜色
|
|
|
- linewidth: 1,
|
|
|
- borderLineOption: [
|
|
|
- {
|
|
|
- id: "Solid",
|
|
|
- src: require("@/assets/images/solidLine.png"),
|
|
|
+ props: ["strokeColor", "lineStyle", "lineWidth", "Width", "Height", "fillColor"],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ width: 0,
|
|
|
+ height: 0,
|
|
|
+ color: "#cccccc", //颜色
|
|
|
+ linewidth: 1,
|
|
|
+ borderLineOption: [
|
|
|
+ {
|
|
|
+ id: "Solid",
|
|
|
+ src: require("@/assets/images/solidLine.png"),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: "Dashed",
|
|
|
+ src: require("@/assets/images/dashedLine.png"),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: "Dotted",
|
|
|
+ src: require("@/assets/images/dotLine.png"),
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ linestyle: "Solid",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {},
|
|
|
+ methods: {
|
|
|
+ changeHeight(val) {
|
|
|
+ bus.$emit("updateStyle", "height", val);
|
|
|
},
|
|
|
- {
|
|
|
- id: "Dashed",
|
|
|
- src: require("@/assets/images/dashedLine.png"),
|
|
|
+ changeWidth(val) {
|
|
|
+ bus.$emit("updateStyle", "width", val);
|
|
|
},
|
|
|
- {
|
|
|
- id: "Dotted",
|
|
|
- src: require("@/assets/images/dotLine.png"),
|
|
|
+ changeLinewidth(val) {
|
|
|
+ bus.$emit("updateStyle", "lineWidth", val);
|
|
|
+ },
|
|
|
+ changeFillcolor(val) {
|
|
|
+ bus.$emit("updateStyle", "fillColor", val);
|
|
|
+ },
|
|
|
+ changeColor(val) {
|
|
|
+ bus.$emit("updateStyle", "strokeColor", val);
|
|
|
+ },
|
|
|
+ // 改变线样式
|
|
|
+ changeLineStyle(val) {
|
|
|
+ bus.$emit("updateStyle", "lineStyle", val);
|
|
|
},
|
|
|
- ],
|
|
|
- linestyle: "Solid",
|
|
|
- };
|
|
|
- },
|
|
|
- methods: {
|
|
|
- changeHeight(val) {
|
|
|
- bus.$emit("updateStyle", "height", val);
|
|
|
- },
|
|
|
- changeWidth(val) {
|
|
|
- bus.$emit("updateStyle", "width", val);
|
|
|
- },
|
|
|
- changeLinewidth(val) {
|
|
|
- bus.$emit("updateStyle", "lineWidth", val);
|
|
|
- },
|
|
|
- changeFillcolor(val) {
|
|
|
- bus.$emit("updateStyle", "fillColor", val);
|
|
|
- },
|
|
|
- changeColor(val) {
|
|
|
- bus.$emit("updateStyle", "strokeColor", val);
|
|
|
- },
|
|
|
- // 改变线样式
|
|
|
- changeLineStyle(val) {
|
|
|
- bus.$emit("updateStyle", "lineStyle", val);
|
|
|
- },
|
|
|
- },
|
|
|
- watch: {
|
|
|
- strokeColor(val) {
|
|
|
- this.color = val;
|
|
|
- },
|
|
|
- lineWidth(val) {
|
|
|
- this.linewidth = val;
|
|
|
- },
|
|
|
- lineStyle(val) {
|
|
|
- this.linestyle = val;
|
|
|
- },
|
|
|
- Width(val) {
|
|
|
- this.width = val;
|
|
|
},
|
|
|
- Height(val) {
|
|
|
- this.height = val;
|
|
|
+ watch: {
|
|
|
+ strokeColor(val) {
|
|
|
+ this.color = val;
|
|
|
+ },
|
|
|
+ lineWidth(val) {
|
|
|
+ this.linewidth = val;
|
|
|
+ },
|
|
|
+ lineStyle(val) {
|
|
|
+ this.linestyle = val;
|
|
|
+ },
|
|
|
+ Width(val) {
|
|
|
+ this.width = val;
|
|
|
+ },
|
|
|
+ Height(val) {
|
|
|
+ this.height = val;
|
|
|
+ },
|
|
|
+ fillColor(val) {
|
|
|
+ this.fillcolor = val;
|
|
|
+ },
|
|
|
},
|
|
|
- fillColor(val) {
|
|
|
- this.fillcolor = val;
|
|
|
+ mounted() {
|
|
|
+ // console.log(Select)
|
|
|
},
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- // console.log(Select)
|
|
|
- },
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
ul,
|
|
|
li {
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
- list-style-type: none;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ list-style-type: none;
|
|
|
}
|
|
|
.base-graphy {
|
|
|
- .title {
|
|
|
- height: 47px;
|
|
|
- border-bottom: 1px solid #979797;
|
|
|
- color: #646c73;
|
|
|
- font-size: 16px;
|
|
|
- padding-left: 12px;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
- ul {
|
|
|
- width: calc(~"100% - 24px");
|
|
|
- margin: -1px 12px 0 12px;
|
|
|
- li {
|
|
|
- border-top: 1px solid #979797;
|
|
|
- margin-bottom: 16px;
|
|
|
- .small-title {
|
|
|
- font-size: 12px;
|
|
|
- color: #8d9399;
|
|
|
- margin: 12px 0;
|
|
|
- }
|
|
|
- .property {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-around;
|
|
|
- .color-box {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- flex-direction: column;
|
|
|
- .cololorSelect {
|
|
|
- width: 32px;
|
|
|
- height: 20px;
|
|
|
- overflow: hidden;
|
|
|
- position: relative;
|
|
|
- margin: 4px 0;
|
|
|
- .fix-box-1 {
|
|
|
- margin-top: -8px;
|
|
|
- margin-left: -8px;
|
|
|
- /deep/ .el-color-picker__trigger {
|
|
|
- width: 200px;
|
|
|
- height: 200px;
|
|
|
- }
|
|
|
+ & > .title {
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ color: #000000;
|
|
|
+ background: #f8f9fa;
|
|
|
+ font-size: 14px;
|
|
|
+ padding-left: 12px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ ul {
|
|
|
+ width: 100%;
|
|
|
+ li {
|
|
|
+ padding: 0 12px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ .small-title {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #8d9399;
|
|
|
+ margin: 12px 0;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ .property {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ .color-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ .cololorSelect {
|
|
|
+ width: 32px;
|
|
|
+ height: 20px;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ margin: 4px 0;
|
|
|
+ .fix-box-1 {
|
|
|
+ margin-top: -8px;
|
|
|
+ margin-left: -8px;
|
|
|
+ /deep/ .el-color-picker__trigger {
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .line-width {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ margin-left: 8px;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #1f2429;
|
|
|
+ margin-top: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .property-push {
|
|
|
+ justify-content: start;
|
|
|
+ .color-box {
|
|
|
+ margin-left: 8px;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
- .line-width {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- flex-direction: column;
|
|
|
- margin-left: 8px;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
- span {
|
|
|
- font-size: 12px;
|
|
|
- color: #1f2429;
|
|
|
- margin-top: 4px;
|
|
|
- }
|
|
|
- }
|
|
|
- .property-push {
|
|
|
- justify-content: start;
|
|
|
- .color-box {
|
|
|
- margin-left: 8px;
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
- }
|
|
|
+ .graphy-fill {
|
|
|
+ padding: 4px 12px 12px 12px;
|
|
|
+ border-top: 1px solid #e4e5e7;
|
|
|
+ border-bottom: 1px solid #e4e5e7;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|