fix:字体和数字组件添加间距和对齐方式设置

data-room-ui/packages/BasicComponents/Numbers/index.vue

@@ -5,7 +5,7 @@
   >
     <div
       class="content-box"
-      :style="{'font-family': config.customize.fontFamily,'font-size': config.customize.fontSize +'px','font-weight': +config.customize.fontWeight,'background-image': `-webkit-linear-gradient(${config.customize.color})`}"
+      :style="{'text-align': config.customize.align,'letter-spacing': config.customize.letterSpacing +'px','font-family': config.customize.fontFamily,'font-size': config.customize.fontSize +'px','font-weight': +config.customize.fontWeight,'background-image': `-webkit-linear-gradient(${config.customize.color})`}"
     >
       {{ config.customize.title }}
     </div>
@@ -62,10 +62,11 @@ export default {
     width: 100%;
     display: flex;
     align-items: center;
-    justify-content: center;
+    //justify-content: center;
   }
   .content-box{
-    //text-align: center;
+    width: 100%;
+    text-align: center;
     /* 将背景设为渐变 */
     /*background-image: -webkit-linear-gradient(left, #6294F7, #C85D14);*/
     /* 规定背景绘制区域 */

data-room-ui/packages/BasicComponents/Numbers/setting.vue

@@ -74,6 +74,16 @@
             placeholder="请输入数字权重"
           />
         </el-form-item>
+        <el-form-item
+          label="数字间距"
+          label-width="100px"
+        >
+          <el-input-number
+            v-model="config.customize.letterSpacing"
+            class="bs-el-input-number"
+            placeholder="请输入数字间距"
+          />
+        </el-form-item>
         <el-form-item
           label="数字类型"
           label-width="100px"
@@ -91,6 +101,23 @@
             />
           </el-select>
         </el-form-item>
+        <el-form-item
+          label="数字对齐方式"
+          label-width="100px"
+        >
+          <el-select
+            v-model="config.customize.align"
+            popper-class="bs-el-select"
+            class="bs-el-select"
+          >
+            <el-option
+              v-for="item in alignList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
         <TextGradient
           v-model="config.customize.color"
           label="数字"
@@ -119,6 +146,18 @@ export default {
   data () {
     return {
       fontFamilyList: fontList,
+      alignList: [{
+        label: '靠左',
+        value: 'left'
+      },
+      {
+        label: '居中',
+        value: 'center'
+      },
+      {
+        label: '靠右',
+        value: 'right'
+      }],
       rules: {
         title: [
           { required: true, message: '请输入标题', trigger: 'blur' }

data-room-ui/packages/BasicComponents/Numbers/settingConfig.js

@@ -8,7 +8,7 @@ import { commonConfig, displayOption } from 'data-room-ui/js/config'
 
 export const settingConfig = {
   theme: 'dark',
-  data:[],
+  data: [],
   text: '文本标签占位符', // text内容
   // 设置面板属性的显隐
   displayOption: {
@@ -58,7 +58,9 @@ const customConfig = {
     fontSize: 20,
     fontWeight: 700,
     fontFamily: '', // 字体类型
-    color: 'left,#ffffff,#ffffff'
+    color: 'left,#ffffff,#ffffff',
+    align: 'center', // 文字对齐方式
+    letterSpacing: 1// 文字间距
   }
 
 }

data-room-ui/packages/BasicComponents/Texts/index.vue

@@ -5,7 +5,7 @@
   >
     <div
       class="content-box"
-      :style="{'font-family': config.customize.fontFamily,'font-size': config.customize.fontSize +'px','font-weight': +config.customize.fontWeight,'background-image': `-webkit-linear-gradient(${config.customize.color})`}"
+      :style="{'text-align': config.customize.align,'letter-spacing': config.customize.letterSpacing +'px','font-family': config.customize.fontFamily,'font-size': config.customize.fontSize +'px','font-weight': +config.customize.fontWeight,'background-image': `-webkit-linear-gradient(${config.customize.color})`}"
     >
       {{ config.customize.title }}
     </div>
@@ -73,7 +73,8 @@ export default {
     justify-content: center;
   }
   .content-box{
-    //text-align: center;
+    width: 100%;
+    text-align: center;
     /* 将背景设为渐变 */
     /*background-image: -webkit-linear-gradient(left, #6294F7, #C85D14);*/
     /* 规定背景绘制区域 */

data-room-ui/packages/BasicComponents/Texts/setting.vue

@@ -74,6 +74,16 @@
             placeholder="请输入文字权重"
           />
         </el-form-item>
+        <el-form-item
+          label="文字间距"
+          label-width="100px"
+        >
+          <el-input-number
+            v-model="config.customize.letterSpacing"
+            class="bs-el-input-number"
+            placeholder="请输入文字间距"
+          />
+        </el-form-item>
         <el-form-item
           label="文字类型"
           label-width="100px"
@@ -91,6 +101,23 @@
             />
           </el-select>
         </el-form-item>
+        <el-form-item
+          label="文字对齐方式"
+          label-width="100px"
+        >
+          <el-select
+            v-model="config.customize.align"
+            popper-class="bs-el-select"
+            class="bs-el-select"
+          >
+            <el-option
+              v-for="item in alignList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
         <TextGradient v-model="config.customize.color" />
       </div>
     </el-form>
@@ -116,6 +143,18 @@ export default {
   data () {
     return {
       fontFamilyList: fontList,
+      alignList: [{
+        label: '靠左',
+        value: 'left'
+      },
+      {
+        label: '居中',
+        value: 'center'
+      },
+      {
+        label: '靠右',
+        value: 'right'
+      }],
       rules: {
         title: [
           { required: true, message: '请输入标题', trigger: 'blur' }

data-room-ui/packages/BasicComponents/Texts/settingConfig.js

@@ -8,7 +8,7 @@ import { commonConfig, displayOption } from 'data-room-ui/js/config'
 
 export const settingConfig = {
   theme: 'dark',
-  data:[],
+  data: [],
   text: '文本标签占位符', // text内容
   // 设置面板属性的显隐
   displayOption: {
@@ -58,7 +58,9 @@ const customConfig = {
     fontSize: 20,
     fontWeight: 700,
     fontFamily: '', // 字体类型
-    color: 'left,#ffffff,#ffffff'
+    color: 'left,#ffffff,#ffffff',
+    align: 'center', // 文字对齐方式
+    letterSpacing: 1// 文字间距
   }
 
 }