|
@@ -0,0 +1,137 @@
|
|
|
+<template>
|
|
|
+ <div class="edit-text">
|
|
|
+ <el-form
|
|
|
+ ref="modalFormComp"
|
|
|
+ :key="modalForm.id"
|
|
|
+ :model="modalForm"
|
|
|
+ :rules="rules"
|
|
|
+ label-width="100px"
|
|
|
+ >
|
|
|
+ <el-form-item label="字号:">
|
|
|
+ <size-select
|
|
|
+ v-model="modalForm.fontSize"
|
|
|
+ style="width: 100%"
|
|
|
+ ></size-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="字体:">
|
|
|
+ <font-family-select
|
|
|
+ v-model="modalForm.fontFamily"
|
|
|
+ style="width: 100%"
|
|
|
+ ></font-family-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="颜色:">
|
|
|
+ <color-select v-model="modalForm.color"></color-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="加粗:">
|
|
|
+ <el-checkbox v-model="isBold" @change="boldChange"
|
|
|
+ >是否加粗</el-checkbox
|
|
|
+ >
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="对齐:">
|
|
|
+ <el-radio-group v-model="modalForm.textAlign">
|
|
|
+ <el-radio-button label="left">左</el-radio-button>
|
|
|
+ <el-radio-button label="center">居中</el-radio-button>
|
|
|
+ <el-radio-button label="right">右</el-radio-button>
|
|
|
+ <el-radio-button label="justify">两端</el-radio-button>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="field" label="字段:"> </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import SizeSelect from "../../components/common/SizeSelect";
|
|
|
+import ColorSelect from "../../components/common/ColorSelect";
|
|
|
+import FontFamilySelect from "../../components/common/FontFamilySelect";
|
|
|
+
|
|
|
+const initModalForm = {
|
|
|
+ id: "",
|
|
|
+ fontSize: "14px",
|
|
|
+ color: "",
|
|
|
+ fontFamily: "",
|
|
|
+ fontWeight: 400,
|
|
|
+ rotation: 0,
|
|
|
+ textAlign: null,
|
|
|
+ content: [],
|
|
|
+ contentStr: "",
|
|
|
+};
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "EditText",
|
|
|
+ components: {
|
|
|
+ SizeSelect,
|
|
|
+ ColorSelect,
|
|
|
+ FontFamilySelect,
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ instance: {
|
|
|
+ type: Object,
|
|
|
+ default() {
|
|
|
+ return {};
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ modalForm: { ...initModalForm },
|
|
|
+ isBold: false,
|
|
|
+ rules: {
|
|
|
+ contentStr: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: "请输入文本内容",
|
|
|
+ trigger: "change",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.initData(this.instance);
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ initData(val) {
|
|
|
+ const contentStr = val.content
|
|
|
+ .map((item) => {
|
|
|
+ return item.type === "text"
|
|
|
+ ? item.content
|
|
|
+ : "${" + item.content + "}";
|
|
|
+ })
|
|
|
+ .join("");
|
|
|
+ this.modalForm = { ...val, contentStr };
|
|
|
+ this.isBold = val.fontWeight > 400;
|
|
|
+ },
|
|
|
+ boldChange(isBold) {
|
|
|
+ this.modalForm.fontWeight = isBold ? 700 : 400;
|
|
|
+ },
|
|
|
+ contentChange() {
|
|
|
+ const constentStr = this.modalForm.contentStr;
|
|
|
+ const rexp = new RegExp(/\$\{.+?\}/, "g");
|
|
|
+ const variates = constentStr.match(rexp);
|
|
|
+ const texts = constentStr.split(rexp);
|
|
|
+ let contents = [];
|
|
|
+
|
|
|
+ texts.forEach((text, index) => {
|
|
|
+ if (text)
|
|
|
+ contents.push({
|
|
|
+ type: "text",
|
|
|
+ content: text,
|
|
|
+ });
|
|
|
+
|
|
|
+ if (variates && variates[index])
|
|
|
+ contents.push({
|
|
|
+ type: "variate",
|
|
|
+ content: variates[index].replace("${", "").replace("}", ""),
|
|
|
+ });
|
|
|
+ });
|
|
|
+ this.modalForm.content = contents;
|
|
|
+ },
|
|
|
+ async submit() {
|
|
|
+ const valid = await this.$refs.modalFormComp.validate().catch(() => {});
|
|
|
+ if (!valid) return;
|
|
|
+ this.$emit("modified", this.modalForm);
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|