image、barcode、qrcode element props

src/components/YvanPrintDesignerLeft.vue

@@ -11,7 +11,7 @@
     </el-tab-pane>
     <el-tab-pane label="数据集">
       <template #label>
-        <span class="custom-tabs-label">
+        <span class="yvan-tabs-label">
           <i class="fa fa-database vsm--icon"></i>
           <span>数据集</span>
         </span>
@@ -20,7 +20,7 @@
     </el-tab-pane>
     <el-tab-pane label="页面结构">
       <template #label>
-        <span class="custom-tabs-label">
+        <span class="yvan-tabs-label">
           <i class="fa fa-sitemap vsm--icon"></i>
           <span>页面结构</span>
         </span>

src/components/config/globalConfig.ts

@@ -29,10 +29,10 @@ export const barcodeTypList = [
     {code: 'CODE128B', name: 'Code128B'},
     {code: 'CODE128C', name: 'Code128C'},
     {code: 'CODE39', name: 'Code39'},
-    {code: 'EAN8', name: 'EAN8'},
-    {code: 'EAN13', name: 'EAN13'},
-    {code: 'EAN8', name: 'EAN8'},
-    {code: 'UPC', name: 'UPC'},
+    // {code: 'EAN8', name: 'EAN8'},
+    // {code: 'EAN13', name: 'EAN13'},
+    // {code: 'EAN8', name: 'EAN8'},
+    // {code: 'UPC', name: 'UPC'},
 ]
 
 export const commonStyle = {
@@ -240,7 +240,8 @@ export const elementList = [
             borderWidth: 0,
             borderColor: '#212121',
             borderRadius: 0,
-            size: 100,
+            width: 100,
+            height: 100,
             background: '#fff',
             rotate: 0
         },

src/components/elements/YvanBarcodeProps.vue

@@ -25,7 +25,7 @@
           </el-radio-button>
         </el-radio-group>
       </el-form-item>
-      <el-form-item label="文字尺寸">
+      <el-form-item label="文字大小">
         <el-input-number v-model="activeComponent.config.fontSize" :min="0" controls-position="right"/>
       </el-form-item>
       <el-form-item label="宽度">

src/components/elements/YvanQrcode.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="yvan-qrcode">
     <StyledQrcode v-bind="style">
-      <qrcode-vue :value="element.config.textValue" :size="element.style.size" level="H"/>
+      <qrcode-vue :value="element.config.textValue" :size="element.style.width" level="H"/>
     </StyledQrcode>
   </div>
 </template>

src/components/elements/YvanQrcodeProps.vue

@@ -5,7 +5,7 @@
         <el-input v-model="activeComponent.config.textValue" placeholder="请输入标题"/>
       </el-form-item>
       <el-form-item label="尺寸">
-        <el-input-number v-model="activeComponent.style.size" :min="0" controls-position="right"/>
+        <el-input-number v-model="activeComponent.style.width" :min="0" controls-position="right" @change="changeSize"/>
       </el-form-item>
       <el-form-item label="边框类型">
         <el-select v-model="activeComponent.style.borderType" placeholder="请选择边框类型" filterable>
@@ -47,6 +47,11 @@ export default {
       }
     }),
   },
+  methods: {
+    changeSize(newValue) {
+      this.activeComponent.style.height = newValue
+    }
+  }
 }
 </script>
 

src/components/elements/style.js

@@ -9,10 +9,6 @@ const commonProps = {
         type: [Number, String],
         default: 10
     },
-    size: {
-        type: [Number, String],
-        default: 100
-    },
     color: {
         type: String,
         default: '#212121'
@@ -105,8 +101,6 @@ const qrcodeProps = Object.assign({}, commonProps, {})
 
 const lineProps = Object.assign({}, commonProps, {})
 
-const starProps = Object.assign({}, commonProps, {})
-
 const circleProps = Object.assign({}, commonProps, {})
 
 const rectProps = Object.assign({}, commonProps, {
@@ -329,22 +323,6 @@ export const StyledLine = styled('div', lineProps)`
   border: none;
 `
 
-export const StyledStar = styled('div', starProps)`
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  position: absolute;
-  border: none;
-  padding: 0;
-  margin: 0;
-  color: ${(props) => props.background};
-
-  .roy-star-icon {
-    font-size: ${(props) => `${props.height}px!important`};
-    line-height: ${(props) => `${props.height}px!important`};
-  }
-`
-
 export const StyledSimpleTable = styled('div', simpleTableProps)`
   width: 100%;
   height: auto;

src/components/yvan-editor/Editor.vue

@@ -312,7 +312,6 @@ export default {
     ...mapActions(ruleStore, ['setReDrawRuler', 'setScale']),
     getShapeStyle,
     handleMouseDown(e) {
-      console.log("editor >> handleMouseDown >>> ", e)
       // 如果没有选中组件 在画布上点击时需要调用 e.preventDefault() 防止触发 drop 事件
       if (!this.curComponent || isPreventDrop(this.curComponent.component)) {
         e.preventDefault()
@@ -399,7 +398,7 @@ export default {
         let style = {}
         if (component.component === 'Group') {
           component.propValue.forEach((item) => {
-            const rectInfo = $(`#roy-component-${item.id}`).getBoundingClientRect()
+            const rectInfo = $(`#yvan-component-${item.id}`).getBoundingClientRect()
             style.left = rectInfo.left - this.editorX
             style.top = rectInfo.top - this.editorY
             style.right = rectInfo.right - this.editorX