simple text props

components.d.ts

@@ -42,6 +42,8 @@ declare module 'vue' {
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSpace: typeof import('element-plus/es')['ElSpace']
+    ElTabPane: typeof import('element-plus/es')['ElTabPane']
+    ElTabs: typeof import('element-plus/es')['ElTabs']
     GlobalSetting: typeof import('./src/components/GlobalSetting.vue')['default']
     Line: typeof import('./src/components/sketch-ruler/line.vue')['default']
     PagePalette: typeof import('./src/components/PagePalette.vue')['default']
@@ -87,6 +89,7 @@ declare module 'vue' {
     YvanPrintDesigner: typeof import('./src/components/YvanPrintDesigner.vue')['default']
     YvanPrintDesignerAside: typeof import('./src/components/yvan-print-designer-left.vue')['default']
     YvanPrintDesignerLeft: typeof import('./src/components/YvanPrintDesignerLeft.vue')['default']
+    YvanPrintDesignerLeft_o: typeof import('./src/components/YvanPrintDesignerLeft_o.vue')['default']
     YvanPrintDesignerLeftElement: typeof import('./src/components/YvanPrintDesignerLeftElement.vue')['default']
     YvanPrintDesignerLeftStructure: typeof import('./src/components/YvanPrintDesignerLeftStructure.vue')['default']
     YvanPrintDesignerMain: typeof import('./src/components/YvanPrintDesignerMain.vue')['default']

src/components/YvanPrintDataSource.vue

@@ -1,16 +1,117 @@
 <template>
-
+  <section :style="asideStyle" class="yvan-print-datasource__main">
+    <div class="yvan-print-datasource__content">
+      <el-collapse v-model="collapseOptions.activeName">
+        <el-collapse-item v-model="collapseOptions.activeName" title="系统数据集" name="function">
+          <div class="yvan-print-datasource__collapse_item">
+            <el-space wrap @dragstart="handleDragStartForFunction">
+              <div
+                  v-for="element in functionList"
+                  :key="element.code"
+                  :data-code="element.code"
+                  draggable="true">
+                <div class="yvan-print-datasource__button">
+                  <i :class="element.icon" v-if="element?.icon"/>
+                  <span> {{ element.name }}</span>
+                </div>
+              </div>
+            </el-space>
+          </div>
+        </el-collapse-item>
+      </el-collapse>
+    </div>
+  </section>
 </template>
 
 <script>
+import {mapState} from "pinia";
+import {globalStore} from "@/store";
+import commonMixin from '@/mixin/commonMixin'
+import {functionList} from "@/components/config/globalConfig";
+
 export default {
-  name: "YvanPrintDataSource",
+  name: 'YvanPrintDataSource',
+  mixins: [commonMixin],
   data() {
-    return {}
-  }
+    return {
+      functionList,
+      collapseOptions: {
+        activeName: 'function'
+      }
+    }
+  },
+  props: {
+    showRight: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    ...mapState(globalStore, {
+      // isNightMode: (state) => state.nightMode.isNightMode
+    }),
+    asideStyle() {
+      return this.showRight ? 'width: 300px' : 'width: 65px'
+    }
+  },
+  methods: {
+    handleDragStartForFunction(e) {
+      console.log("handleDragStartForFunction >>> ", e)
+      e.dataTransfer.setData('datasource-index', e.target.dataset.code)
+    },
+  },
+  mounted() {
+
+  },
+  watch: {}
 }
 </script>
 
-<style scoped lang="less">
+<style lang="less" scoped>
+.yvan-print-datasource__main {
+  height: 100%;
+
+  .yvan-print-datasource__title {
+    width: 100%;
+    height: 45px;
+    text-align: left;
+    line-height: 45px;
+    background: var(--yvan-menu-bar-background);
+    color: #fff;
+    align-items: center;
+
+    i {
+      margin: 0 5px 0 10px;
+    }
+  }
 
-</style>
+  .yvan-print-datasource__content {
+    padding: 0 5px;
+    //margin-bottom: 10px;
+    height: calc(100% - 50px);
+    overflow-y: auto;
+    background: var(--yvan-bg-color-overlay);
+
+    .yvan-print-datasource__collapse_item {
+      margin: 0 10px;
+
+      .yvan-print-datasource__button {
+        width: 105px;
+        border: 1px solid;
+        padding: 5px 10px;
+        border-radius: 5px;
+        cursor: pointer;
+
+        i {
+          margin-right: 5px;
+        }
+      }
+
+      .yvan-print-datasource__button:hover {
+        border-color: var(--yvan-menu-bar-background);
+        background-color: var(--yvan-color-primary-light-9);
+      }
+    }
+  }
+}
+</style>

src/components/YvanPrintDesignerLeft.vue

@@ -1,19 +1,44 @@
 <template>
-  <div class="yvan-print-designer-left-element">
-    <yvan-print-designer-left-element/>
-  </div>
-  <div class="yvan-print-designer-left-structure">
-    <yvan-print-designer-left-structure/>
-  </div>
+  <el-tabs type="border-card" style="height: calc(100% - 2px); width: 300px">
+    <el-tab-pane label="元素组件">
+      <template #label>
+        <span class="yvan-tabs-label">
+          <i class="fa fa-cubes vsm--icon"></i>
+          <span>组件列表</span>
+        </span>
+      </template>
+      <YvanPrintDesignerLeftElement/>
+    </el-tab-pane>
+    <el-tab-pane label="数据集">
+      <template #label>
+        <span class="custom-tabs-label">
+          <i class="fa fa-database vsm--icon"></i>
+          <span>数据集</span>
+        </span>
+      </template>
+      <YvanPrintDatasource/>
+    </el-tab-pane>
+    <el-tab-pane label="页面结构">
+      <template #label>
+        <span class="custom-tabs-label">
+          <i class="fa fa-sitemap vsm--icon"></i>
+          <span>页面结构</span>
+        </span>
+      </template>
+      <YvanPrintDesignerLeftStructure/>
+    </el-tab-pane>
+  </el-tabs>
 </template>
 
 <script>
 import YvanPrintDesignerLeftElement from "@/components/YvanPrintDesignerLeftElement.vue";
 import YvanPrintDesignerLeftStructure from "@/components/YvanPrintDesignerLeftStructure.vue";
+import YvanPrintDatasource from "@/components/YvanPrintDataSource.vue";
 
 export default {
   name: 'yvan-print-designer-left',
   components: {
+    YvanPrintDatasource,
     YvanPrintDesignerLeftElement,
     YvanPrintDesignerLeftStructure
   },
@@ -36,7 +61,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped>
+<style lang="less">
 .yvan-print-designer-left-element {
   height: calc(50% - 10px);
   width: 100%;
@@ -48,4 +73,36 @@ export default {
   margin-top: 10px;
 }
 
+.el-tabs--top.el-tabs--border-card>.el-tabs__header .el-tabs__item:nth-child(2) {
+  padding-left: 5px;
+}
+
+.el-tabs--border-card {
+  .el-tabs__item {
+    padding: 0 5px;
+  }
+
+  .el-tabs__content {
+    padding: 0;
+  }
+}
+
+.el-tabs__item.is-active {
+  background: var(--yvan-menu-bar-background);
+  color: #fff;
+}
+
+.yvan-tabs-label {
+  text-align: left;
+  //line-height: 45px;
+  //background: var(--yvan-menu-bar-background);
+  //color: #fff;
+  align-items: center;
+  margin-right: 5px;
+
+  i {
+    margin: 0 5px 0 5px;
+  }
+}
+
 </style>

src/components/YvanPrintDesignerLeftElement.vue

@@ -1,33 +1,12 @@
 <template>
   <section :style="asideStyle" class="yvan-print-designer-left-element__main">
-    <div class="yvan-print-designer-left-element__title">
-      <i class="fa fa-cubes vsm--icon"></i>
-      <span>组件列表</span>
-    </div>
     <div class="yvan-print-designer-left-element__content">
       <el-collapse v-model="collapseOptions.activeName">
-        <el-collapse-item
-            v-model="collapseOptions.activeName"
-            v-for="component in componentList"
-            :title="component.title"
-            :name="component.code">
+        <el-collapse-item v-model="collapseOptions.activeName" title="元素组件" name="element">
           <div class="yvan-print-designer-left-element__collapse_item">
-            <el-space wrap @dragstart="handleDragStartForElement" v-if="component.type === 'element'">
+            <el-space wrap @dragstart="handleDragStartForElement">
               <div
-                  v-for="element in component.elementList"
-                  :key="element.code"
-                  :data-code="element.code"
-                  draggable="true">
-                <div class="yvan-print-designer-left-element__button">
-                  <i :class="element.icon" v-if="element?.icon"/>
-                  <span> {{ element.name }}</span>
-                </div>
-              </div>
-            </el-space>
-
-            <el-space wrap @dragstart="handleDragStartForFunction" v-if="component.type === 'function'">
-              <div
-                  v-for="element in component.elementList"
+                  v-for="element in elementList"
                   :key="element.code"
                   :data-code="element.code"
                   draggable="true">
@@ -47,8 +26,8 @@
 <script>
 import {mapState} from "pinia";
 import {globalStore} from "@/store";
-import commonMixin from '@/mixin/commonMixin'
-import {componentList, elementList} from "@/components/config/globalConfig";
+import commonMixin from '@/mixin/commonMixin';
+import {elementList} from "@/components/config/globalConfig";
 
 export default {
   name: 'yvan-print-designer-left-element',
@@ -56,9 +35,8 @@ export default {
   data() {
     return {
       elementList,
-      componentList,
       collapseOptions: {
-        activeName: componentList.map(component => component.code)
+        activeName: 'element'
       }
     }
   },
@@ -79,12 +57,7 @@ export default {
   methods: {
     handleDragStartForElement(e) {
       e.dataTransfer.setData('componentCode', e.target.dataset.code)
-    },
-    handleDragStartForFunction(e) {
-      // e.dataTransfer.setData('componentCode', e.target.dataset.code)
-      console.log("handleDragStartForFunction >>> ", e)
-      e.dataTransfer.setData('datasource-index', e.target.dataset.code)
-    },
+    }
   },
   mounted() {
 
@@ -97,23 +70,8 @@ export default {
 .yvan-print-designer-left-element__main {
   height: 100%;
 
-  .yvan-print-designer-left-element__title {
-    width: 100%;
-    height: 45px;
-    text-align: left;
-    line-height: 45px;
-    background: var(--yvan-menu-bar-background);
-    color: #fff;
-    align-items: center;
-
-    i {
-      margin: 0 5px 0 10px;
-    }
-  }
-
   .yvan-print-designer-left-element__content {
     padding: 0 5px;
-    //margin-bottom: 10px;
     height: calc(100% - 50px);
     overflow-y: auto;
     background: var(--yvan-bg-color-overlay);

src/components/YvanPrintDesignerLeftStructure.vue

@@ -1,9 +1,9 @@
 <template>
   <section :style="asideStyle" class="yvan-print-designer-left-structure__main">
-    <div class="yvan-print-designer-left-structure__title">
-      <i class="fa fa-sitemap vsm--icon"></i>
-      <span>页面结构</span>
-    </div>
+<!--    <div class="yvan-print-designer-left-structure__title">-->
+<!--      <i class="fa fa-sitemap vsm&#45;&#45;icon"></i>-->
+<!--      <span>页面结构</span>-->
+<!--    </div>-->
     <div class="yvan-print-designer-left-structure__content">
       <yvan-print-main class="yvan-page-toc">
         <div v-if="componentData.length">

src/components/YvanPrintDesignerLeft_o.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="yvan-print-designer-left-element">
+    <yvan-print-designer-left-element/>
+  </div>
+  <div class="yvan-print-designer-left-structure">
+    <yvan-print-designer-left-structure/>
+  </div>
+</template>
+
+<script>
+import YvanPrintDesignerLeftElement from "@/components/YvanPrintDesignerLeftElement.vue";
+import YvanPrintDesignerLeftStructure from "@/components/YvanPrintDesignerLeftStructure.vue";
+
+export default {
+  name: 'yvan-print-designer-left',
+  components: {
+    YvanPrintDesignerLeftElement,
+    YvanPrintDesignerLeftStructure
+  },
+  data() {
+    return {
+      isNightMode: false,
+    }
+  },
+  props: {
+    showRight: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {},
+  methods: {},
+  mounted() {
+  },
+  watch: {}
+}
+</script>
+
+<style lang="less" scoped>
+.yvan-print-designer-left-element {
+  height: calc(50% - 10px);
+  width: 100%;
+}
+
+.yvan-print-designer-left-structure {
+  height: calc(50% - 10px);
+  width: 100%;
+  margin-top: 10px;
+}
+
+</style>

src/components/YvanPrintDesignerProps.vue

@@ -37,7 +37,7 @@ export default {
   computed: {
     ...mapState(globalStore, {
       activeComponentName: (state) => {
-        console.log("activeComponentName => ", state.curComponent?.component)
+        console.log("activeComponentName => ", state.curComponent)
         if (state.curComponent?.component) {
           return state.curComponent?.component + 'Props'
         }

src/components/YvanPrintPageFormat.vue

@@ -46,7 +46,7 @@
 </template>
 
 <script setup lang="ts">
-import {pageSizeList, pageDirectionList} from '@/components/config/pageFormatConfig'
+import {pageSizeList, pageDirectionList} from '@/components/config/globalConfig'
 import {reactive} from "vue";
 
 const defaultPageSize = pageSizeList[0]

src/components/config/datasourceConfig.ts

@@ -0,0 +1,30 @@
+export const fieldTypeList = [
+    {
+        value: 'String',
+        label: '文本'
+    },
+    {
+        value: 'Array',
+        label: '数组（表格数据）'
+    },
+    {
+        value: 'Money',
+        label: '金额'
+    },
+    {
+        value: 'BigNumber',
+        label: '中文大写数字'
+    },
+    {
+        value: 'BigMoney',
+        label: '中文大写金额'
+    },
+    {
+        value: 'CurDateTime',
+        label: '当前日期(2022.11.28)'
+    },
+    {
+        value: 'BigCurDate',
+        label: '当前中文日期(二零二二年十一月二十八日)'
+    }
+]

src/components/config/globalConfig.ts

@@ -1,3 +1,17 @@
+/**
+ * 纸张大小
+ */
+export const pageSizeList = [
+    {name: "A4", width: 210, height: 297}
+]
+
+/**
+ * 纸张方向
+ */
+export const pageDirectionList = [
+    {label: "垂直方向", value: "vertical"},
+    {label: "水平方向", value: "horizontal"},
+]
 /** 字体 */
 export const fontList = [
     {code: 'black_body', name: '黑体'},
@@ -10,7 +24,7 @@ export const borderStyleList = [
     {code: 'solid', name: '实线', label: '实线'},
     {code: 'dotted', name: '点状', label: '点状'},
     {code: 'dashed', name: '虚线', label: '虚线'},
-    {code: 'double', name: '双线', label: '双线'},
+    // {code: 'double', name: '双线', label: '双线'},
 ]
 
 export const commonStyle = {
@@ -33,26 +47,24 @@ export const elementList = [
         propValue: '单击编辑文本',
         style: {
             color: '#000000',
-            borderRadius: 'inherit',
             padding: '0',
             margin: '0',
-            fontFamily: 'default',
-            lineHeight: '1',
+            fontFamily: 'Microsoft_YaHei',
+            lineHeight: 1,
             letterSpacing: '0',
             borderWidth: 0,
+            borderRadius: 0,
             borderColor: '#212121',
             borderType: 'none',
+            borderPosition: [],
             width: 200,
             height: 50,
             fontSize: 10,
-            background: null,
+            background: '#FFFFFF',
             rotate: 0,
             justifyContent: 'flex-start',
             alignItems: 'flex-start',
-            fontWeight: 'normal',
-            fontStyle: 'normal',
-            isUnderLine: false,
-            isDelLine: false
+            textStyle: [],
         },
         groupStyle: {}
     },
@@ -299,5 +311,5 @@ export const functionList = [
 
 export const componentList = [
     {code: 'element', title: '元素组件', type: 'element', elementList: elementList},
-    {code: 'function', title: '函数组件', type: 'function', elementList: functionList},
-]
+    {code: 'function', title: '系统函数组件', type: 'function', elementList: functionList},
+]

src/components/config/pageFormatConfig.ts

@@ -1,14 +0,0 @@
-/**
- * 纸张大小
- */
-export const pageSizeList = [
-    {name: "A4", width: 210, height: 297}
-]
-
-/**
- * 纸张方向
- */
-export const pageDirectionList = [
-    {label: "垂直方向", value: "vertical"},
-    {label: "水平方向", value: "horizontal"},
-]

src/components/elements/YvanSimpleTextProps.vue

@@ -2,104 +2,110 @@
   <section class="yvan-simple-text-props">
     <el-form ref="form" label-position="top">
       <el-form-item label="宽度">
-        <el-input-number controls-position="right"/>
+        <el-input-number v-model="activeComponent.style.width" :min="0" controls-position="right"/>
       </el-form-item>
       <el-form-item label="高度">
-        <el-input-number controls-position="right"/>
+        <el-input-number v-model="activeComponent.style.height" :min="0" controls-position="right"/>
       </el-form-item>
       <el-form-item label="字体">
-        <el-select placeholder="请选择字体">
+        <el-select v-model="activeComponent.style.fontFamily" placeholder="请选择字体" filterable>
           <el-option v-for="font in fontList" :label="font.name" :value="font.code"/>
         </el-select>
       </el-form-item>
       <el-form-item label="字体颜色">
-        <el-color-picker show-alpha/>
+        <el-color-picker v-model="activeComponent.style.color"/>
       </el-form-item>
       <el-form-item label="字体大小(pt)">
-        <el-input-number controls-position="right"/>
+        <el-input-number v-model="activeComponent.style.fontSize" :min="0" controls-position="right"/>
       </el-form-item>
       <el-form-item label="行高">
-        <el-input-number controls-position="right"/>
+        <el-input-number v-model="activeComponent.style.lineHeight" :min="0" controls-position="right"/>
       </el-form-item>
-      <el-form-item label="排列">
-        <el-radio-group size="small">
-          <el-radio-button>
+      <el-form-item label="水平布局">
+        <el-radio-group v-model="activeComponent.style.justifyContent" size="small">
+          <el-radio-button label="flex-start">
             <component is="align-left-outlined"/>
           </el-radio-button>
-          <el-radio-button>
+          <el-radio-button label="center">
             <component is="align-center-outlined"/>
           </el-radio-button>
-          <el-radio-button>
+          <el-radio-button label="flex-end">
             <component is="align-right-outlined"/>
           </el-radio-button>
-          <el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="垂直布局">
+        <el-radio-group v-model="activeComponent.style.alignItems" size="small">
+          <el-radio-button label="flex-start">
             <component is="vertical-align-top-outlined"/>
           </el-radio-button>
-          <el-radio-button>
+          <el-radio-button label="center">
             <component is="vertical-align-middle-outlined"/>
           </el-radio-button>
-          <el-radio-button>
+          <el-radio-button label="flex-end">
             <component is="vertical-align-bottom-outlined"/>
           </el-radio-button>
         </el-radio-group>
       </el-form-item>
       <el-form-item label="文字样式">
-        <el-radio-group size="small">
-          <el-radio-button>
+        <el-checkbox-group v-model="activeComponent.style.textStyle" size="small">
+          <el-checkbox-button label="bold">
             <i class="fa fa-bold"/>
-          </el-radio-button>
-          <el-radio-button>
+          </el-checkbox-button>
+          <el-checkbox-button label="italic">
             <i class="fa fa-italic"/>
-          </el-radio-button>
-          <el-radio-button>
+          </el-checkbox-button>
+          <el-checkbox-button label="underline">
             <i class="fa fa-underline"/>
-          </el-radio-button>
-          <el-radio-button>
+          </el-checkbox-button>
+          <el-checkbox-button label="strikethrough">
             <i class="fa fa-strikethrough"/>
-          </el-radio-button>
-        </el-radio-group>
+          </el-checkbox-button>
+        </el-checkbox-group>
       </el-form-item>
       <el-form-item label="背景颜色">
-        <el-color-picker show-alpha/>
+        <el-color-picker v-model="activeComponent.style.background"/>
       </el-form-item>
       <el-form-item label="边框样式">
-        <el-checkbox-group size="small">
-          <el-checkbox-button label="全">
-            <component is="border-outer-outlined"/>
-          </el-checkbox-button>
-          <el-checkbox-button label="上">
+        <el-checkbox-group v-model="activeComponent.style.borderPosition" size="small">
+          <el-checkbox-button label="top">
             <component is="border-top-outlined"/>
           </el-checkbox-button>
-          <el-checkbox-button label="右">
+          <el-checkbox-button label="right">
             <component is="border-right-outlined"/>
           </el-checkbox-button>
-          <el-checkbox-button label="下">
+          <el-checkbox-button label="bottom">
             <component is="border-bottom-outlined"/>
           </el-checkbox-button>
-          <el-checkbox-button label="左">
+          <el-checkbox-button label="left">
             <component is="border-left-outlined"/>
           </el-checkbox-button>
         </el-checkbox-group>
       </el-form-item>
       <el-form-item label="边框类型">
-        <el-select placeholder="请选择行高">
+        <el-select v-model="activeComponent.style.borderType" placeholder="请选择边框类型" filterable>
           <el-option v-for="borderStyle in borderStyleList" :label="borderStyle.label" :value="borderStyle.code"/>
         </el-select>
       </el-form-item>
       <el-form-item label="边框颜色">
-        <el-color-picker show-alpha/>
+        <el-color-picker v-model="activeComponent.style.borderColor"/>
       </el-form-item>
       <el-form-item label="边框宽度">
-        <el-input-number controls-position="right"/>
+        <el-input-number v-model="activeComponent.style.borderWidth" :min="0" controls-position="right"/>
+      </el-form-item>
+      <el-form-item label="边框圆角">
+        <el-input-number v-model="activeComponent.style.borderRadius" :min="0" controls-position="right"/>
       </el-form-item>
       <el-form-item label="旋转角度(°)">
-        <el-input-number controls-position="right"/>
+        <el-input-number v-model="activeComponent.style.rotate" controls-position="right"/>
       </el-form-item>
     </el-form>
   </section>
 </template>
 
 <script lang="ts">
+import {mapState} from "pinia";
+import {globalStore} from "@/store";
 import {fontList, borderStyleList} from "@/components/config/globalConfig";
 
 export default {
@@ -109,7 +115,15 @@ export default {
       fontList,
       borderStyleList
     }
-  }
+  },
+  computed: {
+    ...mapState(globalStore, {
+      activeComponent: (state) => {
+        console.log("activeComponent => ", state.curComponent)
+        return state.curComponent
+      }
+    }),
+  },
 }
 
 </script>

src/components/elements/style.js

@@ -173,11 +173,14 @@ export const StyledSimpleText = styled('div', textProps)`
   color: ${(props) => props.color};
   background: ${(props) => props.background};
   border: ${(props) => props.border};
-  border-radius: ${(props) => props.borderRadius};
+  border-radius: ${(props) => `${props.borderRadius}px`};
   margin: ${(props) => props.margin};
   font-size: ${(props) => `${props.fontSize}pt`};
   font-family: ${(props) => (props.fontFamily === 'default' ? 'inherit' : `${props.fontFamily}`)};
-  border: ${(props) => `${props.borderWidth}px ${props.borderType} ${props.borderColor}`};
+  border-top: ${(props) => (props.borderPosition?.includes('top') ? `${props.borderWidth}px ${props.borderType} ${props.borderColor}` : 'none')};
+  border-right: ${(props) => (props.borderPosition?.includes('right') ? `${props.borderWidth}px ${props.borderType} ${props.borderColor}` : 'none')};
+  border-bottom: ${(props) => (props.borderPosition?.includes('bottom') ? `${props.borderWidth}px ${props.borderType} ${props.borderColor}` : 'none')};
+  border-left: ${(props) => (props.borderPosition?.includes('left') ? `${props.borderWidth}px ${props.borderType} ${props.borderColor}` : 'none')};
   z-index: ${(props) => props.zIndex};
 
   .yvan-simple-text-inner {
@@ -190,18 +193,18 @@ export const StyledSimpleText = styled('div', textProps)`
     padding: ${(props) => `${props.padding}px`};
     line-height: ${(props) => props.lineHeight};
     letter-spacing: ${(props) => `${props.letterSpacing}px`};
-    font-weight: ${(props) => `${props.fontWeight}`};
-    font-style: ${(props) => `${props.fontStyle}`};
+    font-weight: ${(props) => (props.textStyle?.includes('bold')? 'bold' : 'normal')};
+    font-style: ${(props) => (props.textStyle?.includes('italic')? 'oblique' : 'normal')};
     text-decoration: ${(props) => {
-      const {isUnderLine, isDelLine} = props
+      const {textStyle} = props
+      const isUnderLine = textStyle.includes('underline')
+      const isStrikethrough = textStyle.includes('strikethrough')
       const propsValue = {
         underline: isUnderLine,
-        'line-through': isDelLine
+        'line-through': isStrikethrough
       }
-      if (isUnderLine || isDelLine) {
-        return Object.keys(propsValue)
-                .filter((item) => propsValue[item])
-                .join(' ')
+      if (isUnderLine || isStrikethrough) {
+        return Object.keys(propsValue).filter((item) => propsValue[item]).join(' ')
       } else {
         return 'none'
       }

src/mixin/commonMixin.js

@@ -21,7 +21,7 @@ export default {
             }
             return false
         },
-        findElementByCode(elementCode: string): any {
+        findElementByCode(elementCode){
             if (!elementList || elementList.length <= 0) {
                 return
             }