|
@@ -8,29 +8,37 @@
|
|
|
<div class="property">
|
|
|
<div class="color-box">
|
|
|
<div class="cololorSelect">
|
|
|
- <el-color-picker show-alpha @change="changeColor" class="fix-box-1" v-model="color"></el-color-picker>
|
|
|
+ <el-color-picker show-alpha popper-class="line-color-picker" class="fix-box-1" v-model="strokeColor"></el-color-picker>
|
|
|
</div>
|
|
|
<span class="text">颜色</span>
|
|
|
</div>
|
|
|
<div class="line-width">
|
|
|
- <el-input-number
|
|
|
+ <!-- <el-input-number
|
|
|
style="width: 80px"
|
|
|
v-model="linewidth"
|
|
|
controls-position="right"
|
|
|
- @change="changeWidth"
|
|
|
size="mini"
|
|
|
:min="1"
|
|
|
:max="20"
|
|
|
:maxlength="100"
|
|
|
- ></el-input-number>
|
|
|
+ ></el-input-number> -->
|
|
|
+ <el-input style="width: 80px" v-model="lineWidth" type="number" size="mini" placeholder="输入线宽" />
|
|
|
<span class="text">线宽</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">
|
|
|
+ <el-select
|
|
|
+ v-model="lineStyle"
|
|
|
+ popper-class="line-select"
|
|
|
+ :default-value="borderLineOption[0].id"
|
|
|
+ size="mini"
|
|
|
+ style="width: 80px"
|
|
|
+ placeholder="请选择"
|
|
|
+ ref="selectLine"
|
|
|
+ >
|
|
|
+ <el-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>
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
<span class="text">线型</span>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -39,7 +47,7 @@
|
|
|
<div class="property">
|
|
|
<div class="line-style">
|
|
|
<div class="line-arrow">
|
|
|
- <a-select
|
|
|
+ <!-- <a-select
|
|
|
style="width: 80px; margin-right: 8px"
|
|
|
v-model="begin"
|
|
|
:default-value="arrowType[0].id"
|
|
@@ -48,15 +56,43 @@
|
|
|
<a-select-option v-for="item in arrowType" :key="item.id" :label="item.src" :value="item.id">
|
|
|
{{ item.src }}
|
|
|
</a-select-option>
|
|
|
- </a-select>
|
|
|
+ </a-select> -->
|
|
|
+ <el-select
|
|
|
+ v-model="begin"
|
|
|
+ class="line-begin"
|
|
|
+ popper-class="line-select"
|
|
|
+ :default-value="arrowType[0].id"
|
|
|
+ size="mini"
|
|
|
+ style="width: 90px"
|
|
|
+ placeholder="请选择"
|
|
|
+ >
|
|
|
+ <el-option v-for="item in arrowType" :key="item.id" :label="item.src" :value="item.id">
|
|
|
+ <!-- <img :src="item.src" alt width="60" /> -->
|
|
|
+ {{ item.src }}
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
<span class="text">左箭头</span>
|
|
|
</div>
|
|
|
<div class="line-arrow">
|
|
|
- <a-select style="width: 80px" v-model="end" :default-value="arrowType[0].id" @change="changeArrowType('end')">
|
|
|
+ <!-- <a-select style="width: 90px" v-model="end" :default-value="arrowType[0].id" @change="changeArrowType('end')">
|
|
|
<a-select-option v-for="item in arrowType" :key="item.id" :label="item.src" :value="item.id">
|
|
|
{{ item.src }}
|
|
|
</a-select-option>
|
|
|
- </a-select>
|
|
|
+ </a-select> -->
|
|
|
+ <el-select
|
|
|
+ v-model="end"
|
|
|
+ class="line-end"
|
|
|
+ popper-class="line-select"
|
|
|
+ :default-value="arrowType[0].id"
|
|
|
+ size="mini"
|
|
|
+ style="width: 90px"
|
|
|
+ placeholder="请选择"
|
|
|
+ >
|
|
|
+ <el-option v-for="item in arrowType" :key="item.id" :label="item.src" :value="item.id">
|
|
|
+ <!-- <img :src="item.src" alt width="60" /> -->
|
|
|
+ {{ item.src }}
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
<span class="text">右箭头</span>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -67,16 +103,14 @@
|
|
|
</template>
|
|
|
<script>
|
|
|
import bus from "@/bus/bus";
|
|
|
+import { rgbaNum } from "@persagy-web/big-edit/lib/until";
|
|
|
+import { findIndex } from "lodash";
|
|
|
+import { SColor } from "@persagy-web/draw";
|
|
|
+
|
|
|
export default {
|
|
|
- // props: ["strokeColor", "lineStyle", "lineWidth", "Begin", "End",],
|
|
|
- props: ["strokeColor", "lineStyle", "lineWidth", "Begin", "End", "TextItem"],
|
|
|
+ props: ["LineItem"],
|
|
|
data() {
|
|
|
return {
|
|
|
- color: "",
|
|
|
- linewidth: "",
|
|
|
- linestyle: "",
|
|
|
- begin: "None",
|
|
|
- end: "None",
|
|
|
borderLineOption: [
|
|
|
{
|
|
|
id: "Solid",
|
|
@@ -116,48 +150,136 @@ export default {
|
|
|
],
|
|
|
};
|
|
|
},
|
|
|
- methods: {
|
|
|
- // 改变线宽
|
|
|
- changeWidth(val) {
|
|
|
- bus.$emit("updateStyle", "lineWidth", val);
|
|
|
+ computed: {
|
|
|
+ /**
|
|
|
+ * 边框颜色
|
|
|
+ */
|
|
|
+ strokeColor: {
|
|
|
+ get: function () {
|
|
|
+ return this.LineItem.strokeColor.toRgba();
|
|
|
+ },
|
|
|
+ set: function (val) {
|
|
|
+ const colorList = rgbaNum(val);
|
|
|
+ const oldV = this.LineItem.strokeColor;
|
|
|
+ const newV = new SColor(Number(colorList[0]), Number(colorList[1]), Number(colorList[2]), colorList[3] * 255);
|
|
|
+ this.LineItem.strokeColor = newV;
|
|
|
+ bus.$emit("undoAttr", this.LineItem, "strokeColor", oldV, newV);
|
|
|
+ },
|
|
|
},
|
|
|
- // 改变颜色
|
|
|
- changeColor(val) {
|
|
|
- bus.$emit("updateStyle", "strokeColor", val);
|
|
|
+ /**
|
|
|
+ * 边框线宽
|
|
|
+ */
|
|
|
+ lineWidth: {
|
|
|
+ get: function () {
|
|
|
+ const size = this.LineItem.lineWidth;
|
|
|
+ if (size > 20) {
|
|
|
+ return 20;
|
|
|
+ }
|
|
|
+ return size;
|
|
|
+ },
|
|
|
+ set: function (newV) {
|
|
|
+ const oldV = this.LineItem.lineWidth;
|
|
|
+ this.LineItem.lineWidth = newV;
|
|
|
+ bus.$emit("undoAttr", this.LineItem, "font", oldV, newV);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 边框线型
|
|
|
+ */
|
|
|
+ lineStyle: {
|
|
|
+ get: function () {
|
|
|
+ const id = this.borderLineOption[this.LineItem.lineStyle].id;
|
|
|
+ // 修改线型下啦菜单样式
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.setLineStyle("selectLine", id);
|
|
|
+ });
|
|
|
+ return id;
|
|
|
+ },
|
|
|
+ set: function (newV) {
|
|
|
+ newV = findIndex(this.borderLineOption, ["id", newV]);
|
|
|
+ const oldV = this.LineItem.lineStyle;
|
|
|
+ this.LineItem.lineStyle = newV;
|
|
|
+ bus.$emit("undoAttr", this.LineItem, "lineStyle", oldV, newV);
|
|
|
+ },
|
|
|
},
|
|
|
- // 改变线样式
|
|
|
- changeLineStyle(val) {
|
|
|
- bus.$emit("updateStyle", "lineStyle", val);
|
|
|
+ /**
|
|
|
+ * 开始箭头
|
|
|
+ */
|
|
|
+ begin: {
|
|
|
+ get: function () {
|
|
|
+ const id = this.arrowType[this.LineItem.begin].id;
|
|
|
+ return id;
|
|
|
+ },
|
|
|
+ set: function (newV) {
|
|
|
+ newV = findIndex(this.arrowType, ["id", newV]);
|
|
|
+ const oldV = this.LineItem.begin;
|
|
|
+ this.LineItem.begin = newV;
|
|
|
+ bus.$emit("undoAttr", this.LineItem, "begin", oldV, newV);
|
|
|
+ },
|
|
|
},
|
|
|
- // 改变箭头样式
|
|
|
- changeArrowType(dir) {
|
|
|
- bus.$emit("updateStyle", dir, this[dir]);
|
|
|
+ /**
|
|
|
+ * 结束箭头
|
|
|
+ */
|
|
|
+ end: {
|
|
|
+ get: function () {
|
|
|
+ const id = this.arrowType[this.LineItem.end].id;
|
|
|
+ return id;
|
|
|
+ },
|
|
|
+ set: function (newV) {
|
|
|
+ newV = findIndex(this.arrowType, ["id", newV]);
|
|
|
+ const oldV = this.LineItem.end;
|
|
|
+ this.LineItem.end = newV;
|
|
|
+ bus.$emit("undoAttr", this.LineItem, "end", oldV, newV);
|
|
|
+ },
|
|
|
},
|
|
|
},
|
|
|
mounted() {
|
|
|
- // console.log(Select)
|
|
|
- // console.log(this.TextItem);
|
|
|
+ console.log(this.LineItem);
|
|
|
},
|
|
|
- watch: {
|
|
|
- strokeColor(val) {
|
|
|
- this.color = val;
|
|
|
- },
|
|
|
- lineWidth(val) {
|
|
|
- this.linewidth = val;
|
|
|
- },
|
|
|
- lineStyle(val) {
|
|
|
- console.log("lineStyle::::");
|
|
|
- this.linestyle = val;
|
|
|
- },
|
|
|
- Begin(val) {
|
|
|
- this.begin = val;
|
|
|
- },
|
|
|
- End(val) {
|
|
|
- this.end = val;
|
|
|
+ methods: {
|
|
|
+ /**
|
|
|
+ * 修改线型下啦菜单样式
|
|
|
+ * @param {String} ref refs名称
|
|
|
+ * @param {String} id 选中的线型id
|
|
|
+ */
|
|
|
+ setLineStyle(ref, id) {
|
|
|
+ const img = this.borderLineOption.filter((v) => v.id === id)[0]?.src;
|
|
|
+ if (img) {
|
|
|
+ this.$refs[ref]?.$el?.children[0].children[0].setAttribute(
|
|
|
+ "style",
|
|
|
+ `
|
|
|
+ background: url(${img}) no-repeat;
|
|
|
+ color: rgba(0,0,0,0);
|
|
|
+ text-indent: -9999px;
|
|
|
+ background-position: 15px center;
|
|
|
+ background-size: 40px 1px;
|
|
|
+ `
|
|
|
+ );
|
|
|
+ } else {
|
|
|
+ this.$refs[ref]?.$el?.children[0].children[0].setAttribute(
|
|
|
+ "style",
|
|
|
+ `
|
|
|
+ background: inherit;
|
|
|
+ color:inherit;
|
|
|
+ text-indent: 0;
|
|
|
+ `
|
|
|
+ );
|
|
|
+ }
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
+
|
|
|
+<style lang="less" >
|
|
|
+.line-color-picker {
|
|
|
+ /deep/.el-input__inner {
|
|
|
+ padding-right: 0 !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+.line-select {
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+</style>
|
|
|
<style lang="less" scoped>
|
|
|
ul,
|
|
|
li {
|
|
@@ -229,6 +351,19 @@ li {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
text-align: center;
|
|
|
+ .line-end {
|
|
|
+ margin-left: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .line-begin,
|
|
|
+ .line-end {
|
|
|
+ /deep/ .el-input__inner {
|
|
|
+ padding-left: 5px;
|
|
|
+ padding-right: 10px;
|
|
|
+ }
|
|
|
+ /deep/ .el-input__suffix {
|
|
|
+ right: 0;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.text {
|
|
@@ -240,5 +375,8 @@ li {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ /deep/ .el-input-number .el-input__inner {
|
|
|
+ padding-right: 40px !important;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|