字体对齐方式、选择颜色、字体行数、布局

src/assets/icons/iconfont/demo_index.html

@@ -55,6 +55,24 @@
           <ul class="icon_lists dib-box">
           
             <li class="dib">
+              <span class="icon iconfont">&#xe689;</span>
+                <div class="name">09左对齐</div>
+                <div class="code-name">&amp;#xe689;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe68a;</span>
+                <div class="name">10右对齐</div>
+                <div class="code-name">&amp;#xe68a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe68b;</span>
+                <div class="name">11居中对齐</div>
+                <div class="code-name">&amp;#xe68b;</div>
+              </li>
+          
+            <li class="dib">
               <span class="icon iconfont">&#xec7c;</span>
                 <div class="name">等高</div>
                 <div class="code-name">&amp;#xec7c;</div>
@@ -186,9 +204,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1718259148823') format('woff2'),
-       url('iconfont.woff?t=1718259148823') format('woff'),
-       url('iconfont.ttf?t=1718259148823') format('truetype');
+  src: url('iconfont.woff2?t=1720751173867') format('woff2'),
+       url('iconfont.woff?t=1720751173867') format('woff'),
+       url('iconfont.ttf?t=1720751173867') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -215,6 +233,33 @@
         <ul class="icon_lists dib-box">
           
           <li class="dib">
+            <span class="icon iconfont icon-textLeft"></span>
+            <div class="name">
+              09左对齐
+            </div>
+            <div class="code-name">.icon-textLeft
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-textRight"></span>
+            <div class="name">
+              10右对齐
+            </div>
+            <div class="code-name">.icon-textRight
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-textCenter"></span>
+            <div class="name">
+              11居中对齐
+            </div>
+            <div class="code-name">.icon-textCenter
+            </div>
+          </li>
+          
+          <li class="dib">
             <span class="icon iconfont icon-denggao"></span>
             <div class="name">
               等高
@@ -414,6 +459,30 @@
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-textLeft"></use>
+                </svg>
+                <div class="name">09左对齐</div>
+                <div class="code-name">#icon-textLeft</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-textRight"></use>
+                </svg>
+                <div class="name">10右对齐</div>
+                <div class="code-name">#icon-textRight</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-textCenter"></use>
+                </svg>
+                <div class="name">11居中对齐</div>
+                <div class="code-name">#icon-textCenter</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-denggao"></use>
                 </svg>
                 <div class="name">等高</div>

src/assets/icons/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4583886 */
-  src: url('iconfont.woff2?t=1718259148823') format('woff2'),
-       url('iconfont.woff?t=1718259148823') format('woff'),
-       url('iconfont.ttf?t=1718259148823') format('truetype');
+  src: url('iconfont.woff2?t=1720751173867') format('woff2'),
+       url('iconfont.woff?t=1720751173867') format('woff'),
+       url('iconfont.ttf?t=1720751173867') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,18 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-textLeft:before {
+  content: "\e689";
+}
+
+.icon-textRight:before {
+  content: "\e68a";
+}
+
+.icon-textCenter:before {
+  content: "\e68b";
+}
+
 .icon-denggao:before {
   content: "\ec7c";
 }

src/assets/icons/iconfont/iconfont.json

@@ -6,6 +6,27 @@
   "description": "",
   "glyphs": [
     {
+      "icon_id": "19296202",
+      "name": "09左对齐",
+      "font_class": "textLeft",
+      "unicode": "e689",
+      "unicode_decimal": 59017
+    },
+    {
+      "icon_id": "19296207",
+      "name": "10右对齐",
+      "font_class": "textRight",
+      "unicode": "e68a",
+      "unicode_decimal": 59018
+    },
+    {
+      "icon_id": "19296220",
+      "name": "11居中对齐",
+      "font_class": "textCenter",
+      "unicode": "e68b",
+      "unicode_decimal": 59019
+    },
+    {
       "icon_id": "17581839",
       "name": "等高",
       "font_class": "denggao",

src/components/maskedbox/colorSelection.vue

@@ -29,7 +29,7 @@ const props = defineProps({
         type: String,
     }
 })
-const iconColoril = props.iconColor
+const iconColoril: any = ref()
 const alpha = ref(100);
 const hexColor = ref('');
 // rgba hex颜色格式化
@@ -38,19 +38,21 @@ const handleColorChange = (rgbaStr) => {
     const alpha1 = color(rgbaStr).alpha();
 
     const arrColor = removeChar(hex, "#");
-    return arrColor
     alpha.value = alpha1
 
     function removeChar(str: string, charToRemove: string): string {
         return str.replace(new RegExp(charToRemove, 'g'), '');
     }
+    return arrColor
 };
 
+const emit = defineEmits(['update:iconColor']);
 const colorNum = (value: any) => {
     const rgbaStr = props.iconColor;
     const newAlpha = value;
-    props.iconColor = adjustAlpha(rgbaStr, newAlpha);
-
+    const arr = adjustAlpha(rgbaStr, newAlpha);
+    // 更新父组件值
+    emit('update:iconColor', arr);
     function adjustAlpha(rgbaStr: string, alpha: number): string {
         const match = rgbaStr.match(/^rgba\((\d+), (\d+), (\d+), ([^\)]+)\)$/);
         if (!match) {
@@ -63,11 +65,11 @@ const colorNum = (value: any) => {
 
 watch(() => props.iconColor, (newValue) => {
     if (newValue) {
+        iconColoril.value = newValue;
         // 初始化hex颜色
         hexColor.value = handleColorChange(newValue)
     }
 }, { immediate: true, deep: true })
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>

src/components/maskedbox/layout.vue

@@ -1,8 +1,333 @@
 <template>
-    <!-- 布局组件 -->
-  <div>test</div>
+  <!-- 布局组件 -->
+  <div class="box_padding">
+    <div class="same_row_in">
+      <span class="default_size title_5">布局</span>
+      <el-icon>
+        <InfoFilled />
+      </el-icon>
+    </div>
+    <div class="same_row_in" style="padding: 18px 0px 13px;">
+      <div class="center_in_column">
+        <div class="dpjis">
+          <!-- 上 -->
+          <div class="jAgYAh"></div>
+          <!-- 右 -->
+          <div class="bTzFoR"></div>
+          <!-- 下 -->
+          <div class="eIwCFM"></div>
+          <!-- 左 -->
+          <div class="fVBVzi"></div>
+          <!-- 视图盒子 -->
+          <div class="box_view"></div>
+        </div>
+        <div class="iUnNSJ">靠边固定</div>
+      </div>
+      <div class="center_in_column" style="margin-left: 11px;">
+        <div class="kdbebz">
+          <el-tooltip content="固定宽度" placement="top">
+            <div :class="fixedWidth ? 'kEmrUa' : 'hIrtuZ'" @click="getFixedWidth"></div>
+          </el-tooltip>
+          <el-tooltip content="固定高度" placement="top">
+            <div :class="fixedHeight ? 'hXQonZ' : 'tOPsm'" @click="getFixedHeight"></div>
+          </el-tooltip>
+        </div>
+        <div class="iUnNSJ">固定尺寸</div>
+      </div>
+    </div>
+  </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref } from "vue";
 
-<style lang="scss" scoped></style>
+const fixedWidth = ref(true)
+const fixedHeight = ref(true)
+
+// 固定宽度
+function getFixedWidth() {
+  if (fixedWidth.value) {
+    fixedWidth.value = false
+  } else {
+    fixedWidth.value = true
+  }
+}
+// 固定高度
+function getFixedHeight() {
+  if (fixedHeight.value) {
+    fixedHeight.value = false
+  } else {
+    fixedHeight.value = true
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.dpjis {
+  width: 159px;
+  height: 100px;
+  opacity: 0.9;
+  background: rgb(243, 243, 248);
+  border: 1px solid rgb(226, 226, 226);
+  border-radius: 4px;
+  position: relative;
+}
+
+.box_view {
+  width: 52px;
+  height: 28px;
+  background: rgb(255, 255, 255);
+  border: 1px solid rgb(15, 115, 230);
+  border-radius: 3px;
+  box-shadow: rgba(39, 56, 75, 0.1) 0px 2px 4px 0px;
+  position: absolute;
+  left: 53px;
+  top: 36px;
+}
+
+.jAgYAh {
+  position: absolute;
+  height: 21px;
+  width: 10px;
+  cursor: pointer;
+  left: 75px;
+  top: 10px;
+
+  &::before {
+    position: absolute;
+    content: "";
+    width: 9px;
+    height: 2px;
+    background: rgb(199, 199, 208);
+  }
+
+  &::after {
+    position: absolute;
+    content: "";
+    width: 2px;
+    height: 19px;
+    left: 4px;
+    background: rgb(199, 199, 208);
+  }
+}
+
+.bTzFoR {
+  position: absolute;
+  height: 35px;
+  width: 12px;
+  cursor: pointer;
+  right: 20px;
+  top: 35px;
+  transform: rotate(90deg);
+
+  &::before {
+    position: absolute;
+    content: "";
+    width: 9px;
+    height: 2px;
+    background: rgb(199, 199, 208);
+  }
+
+  &::after {
+    position: absolute;
+    content: "";
+    width: 2px;
+    height: 33px;
+    left: 4px;
+    background: rgb(199, 199, 208);
+  }
+}
+
+.eIwCFM {
+  position: absolute;
+  height: 21px;
+  width: 10px;
+  cursor: pointer;
+  left: 75px;
+  bottom: 9px;
+  transform: rotate(180deg);
+
+  &::before {
+    position: absolute;
+    content: "";
+    width: 9px;
+    height: 2px;
+    background: rgb(199, 199, 208);
+  }
+
+  &::after {
+    position: absolute;
+    content: "";
+    width: 2px;
+    height: 19px;
+    left: 4px;
+    background: rgb(199, 199, 208);
+  }
+}
+
+.fVBVzi {
+  position: absolute;
+  height: 35px;
+  width: 12px;
+  cursor: pointer;
+  left: 20px;
+  top: 35px;
+  transform: rotate(-90deg);
+
+  &::before {
+    position: absolute;
+    content: "";
+    width: 9px;
+    height: 2px;
+    background: rgb(199, 199, 208);
+  }
+
+  &::after {
+    position: absolute;
+    content: "";
+    width: 2px;
+    height: 33px;
+    left: 4px;
+    background: rgb(199, 199, 208);
+  }
+}
+
+.kdbebz {
+  width: 100px;
+  height: 100px;
+  opacity: 0.9;
+  background: rgb(255, 255, 255);
+  border: 1px solid rgb(226, 226, 226);
+  border-radius: 4px;
+  position: relative;
+}
+
+.kEmrUa {
+  position: absolute;
+  pointer-events: auto;
+  cursor: pointer;
+  background: rgb(15, 115, 230);
+  width: 86px;
+  height: 2px;
+  left: 6px;
+  top: 49px;
+
+  &::before,
+  &::after {
+    position: absolute;
+    content: "";
+    height: 8px;
+    width: 2px;
+    background: rgb(15, 115, 230);
+  }
+
+  &::before {
+    top: -3px;
+    left: -2px;
+  }
+
+  &::after {
+    top: -3px;
+    right: -2px;
+  }
+}
+
+.hIrtuZ {
+  position: absolute;
+  pointer-events: auto;
+  cursor: pointer;
+  background: rgb(199, 199, 208);
+  width: 86px;
+  height: 2px;
+  left: 6px;
+  top: 49px;
+
+  &::before,
+  &::after {
+    position: absolute;
+    content: "";
+    height: 8px;
+    width: 2px;
+    background: rgb(199, 199, 208);
+  }
+
+  &::before {
+    top: -3px;
+    left: -2px;
+  }
+
+  &::after {
+    top: -3px;
+    right: -2px;
+  }
+}
+
+.hXQonZ {
+  position: absolute;
+  pointer-events: auto;
+  cursor: pointer;
+  background: rgb(15, 115, 230);
+  width: 2px;
+  height: 86px;
+  left: 49px;
+  top: 6px;
+
+  &::before,
+  &::after {
+    position: absolute;
+    content: "";
+    height: 2px;
+    width: 8px;
+    background: rgb(15, 115, 230);
+  }
+
+  &::before {
+    top: -2px;
+    left: -3px;
+  }
+
+  &::after {
+    bottom: -2px;
+    right: -3px;
+  }
+}
+
+.tOPsm {
+  position: absolute;
+  pointer-events: auto;
+  cursor: pointer;
+  background: rgb(199, 199, 208);
+  width: 2px;
+  height: 86px;
+  left: 49px;
+  top: 6px;
+
+  &::before,
+  &::after {
+    position: absolute;
+    content: "";
+    height: 2px;
+    width: 8px;
+    background: rgb(199, 199, 208);
+  }
+
+  &::before {
+    top: -2px;
+    left: -3px;
+  }
+
+  &::after {
+    bottom: -2px;
+    right: -3px;
+  }
+}
+
+.iUnNSJ {
+  opacity: 0.5;
+  font-size: 12px;
+  font-weight: 400;
+  color: rgb(51, 51, 51);
+  margin-top: 8px;
+  text-align: center;
+  transform: scale(0.85);
+}</style>

src/components/maskedbox/lineNumber.vue

@@ -0,0 +1,117 @@
+<template>
+    <div class="same_row_in upAndDown_padding">
+        <span class="title_12 w_60 default_size" style="flex: none;">行数</span>
+        <div class="grey_input_bgc w_60_index">
+            <el-input-number class="card_number" v-model="lineNum" size="small" controls-position="right"
+                @change="bindingChange" />
+        </div>
+        <div class="card_alignment">
+            <div class="card_item_text" :class="item.flag ? 'activate_text' : ''" v-for="(item, index) in arrList"
+                :key="index" @click="selectAlignment(item.id)">
+                <span class="img_icon_text" :class="item.flag ? 'activate_text' : ''">{{ item.title }}</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch } from "vue";
+const props = defineProps({
+    num: {
+        type: Number,
+        required: true
+    },
+})
+const arrList: any = ref([{
+    id: 1,
+    flag: false,
+    title: '自动',
+}, {
+    id: 2,
+    flag: false,
+    title: '手动',
+}])
+const lineNum: any = ref()
+
+watch(() => props.num, (newValue) => {
+    if (newValue) {
+        lineNum.value = newValue;
+    }
+}, { immediate: true, deep: true })
+
+onMounted(() => {
+    selectAlignment(props.num)
+})
+
+const emit = defineEmits(['update:num']);
+function selectAlignment(num: any) {
+    if (num == 2) {
+        lineNum.value = 1
+    } else {
+        lineNum.value = null
+    }
+    arrList.value.forEach(item => {
+        if (item.id == 2 && lineNum.value > 0) {
+            item.flag = true
+        } else if (item.id == 1 && lineNum.value == null || item.id == 1 && lineNum.value == 0) {
+            item.flag = true
+        }
+        if (item.id == 1 && lineNum.value > 0) {
+            item.flag = false
+        } else if (item.id == 2 && lineNum.value == null || item.id == 1 && lineNum.value == 0) {
+            item.flag = false
+        }
+    })
+    emit('update:num', lineNum.value);
+}
+const bindingChange = (val: any) => {
+    if (val == 1) {
+        selectAlignment(2)
+    }
+    emit('update:num', val);
+}
+</script>
+
+<style lang="scss" scoped>
+.card_alignment {
+    width: 100%;
+    background: rgb(243, 243, 248);
+    border-radius: 4px;
+    display: flex;
+    -webkit-box-pack: center;
+    justify-content: center;
+    padding: 2px;
+    height: 24px;
+}
+
+.card_item_text {
+    flex: 1 1 0%;
+    height: 100%;
+    text-align: center;
+    display: flex;
+    flex-direction: row;
+    -webkit-box-pack: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    align-items: center;
+    cursor: pointer;
+}
+
+.activate_text {
+    color: rgb(15, 116, 231) !important;
+    background: rgb(255, 255, 255);
+    border-radius: 3px;
+    font-size: 12px;
+    cursor: pointer;
+}
+
+.img_icon_text {
+    color: rgb(171, 171, 180);
+    font-size: 12px;
+}
+
+.w_60_index {
+    width: 60px !important;
+    margin-right: 5px;
+}
+</style>

src/components/maskedbox/textAlignment.vue

@@ -0,0 +1,85 @@
+<template>
+    <div class="same_row_in upAndDown_padding">
+        <span class="title_12 w_60 default_size" style="flex: none;">对齐</span>
+        <div class="card_alignment">
+            <div class="card_item_text" :class="item.flag ? 'activate_text' : ''" v-for="(item, index) in arrList"
+                :key="index" @click="selectAlignment(item.type)">
+                <span class="img_icon_text iconfont" :class="item.icon"></span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+const props = defineProps({
+    align: {
+        type: String,
+        required: true
+    },
+})
+const arrList: any = ref([{
+    flag: false,
+    icon: 'icon-textLeft',
+    type: 'left',
+}, {
+    flag: false,
+    icon: 'icon-textCenter',
+    type: 'center',
+}, {
+    flag: false,
+    icon: 'icon-textRight',
+    type: 'right',
+}])
+onMounted(() => {
+    selectAlignment(props.align)
+})
+function selectAlignment(type: any) {
+    arrList.value.forEach(item => {
+        if (item.type == type) {
+            item.flag = true
+        } else {
+            item.flag = false
+        }
+    })
+}
+</script>
+
+<style lang="scss" scoped>
+.card_alignment {
+    width: 100%;
+    background: rgb(243, 243, 248);
+    border-radius: 4px;
+    display: flex;
+    -webkit-box-pack: center;
+    justify-content: center;
+    padding: 2px;
+    height: 24px;
+}
+
+.card_item_text {
+    flex: 1 1 0%;
+    height: 100%;
+    text-align: center;
+    display: flex;
+    flex-direction: row;
+    -webkit-box-pack: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    align-items: center;
+    cursor: pointer;
+}
+
+.activate_text {
+    color: rgb(15, 116, 231) !important;
+    background: rgb(255, 255, 255);
+    border-radius: 3px;
+    font-size: 12px;
+    cursor: pointer;
+}
+
+.img_icon_text {
+    color: rgb(171, 171, 180);
+    font-size: 18px;
+}
+</style>

src/module/config/button.ts

@@ -3,13 +3,14 @@ const btnConfig = {
     type: 1,
     name: '文本',
     size: 30,
+    lineNum: null,
     isResizable: true, //禁止缩放
     // sticks:['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml'],
     aspectRatio: false, //禁止等比例缩放
 }
 
 const btnCss = {
-    top:  577,
+    top: 577,
     left: 142.5,
     width: 90,
     height: 90,
@@ -17,6 +18,7 @@ const btnCss = {
     iconColor: "rgba(21, 140, 251, 1)",
     backgroundColor: '#fff',
     fontWeight: 500,
+    textAlign: 'center',
 }
 
 export { btnConfig, btnCss }

src/views/maskedbox.vue

@@ -1,23 +1,6 @@
 <!-- 样式编辑控件 -->
 <template>
-    <div class="box_padding">
-        <div class="same_row_in">
-            <span class="default_size title_5">布局</span>
-            <el-icon>
-                <InfoFilled />
-            </el-icon>
-        </div>
-        <div class="same_row_in" style="padding: 18px 0px 13px;">
-            <div class="center_in_column">
-                <div class="dpjis"></div>
-                <div class="iUnNSJ">靠边固定</div>
-            </div>
-            <div class="center_in_column" style="margin-left: 11px;">
-                <div class="kdbebz"></div>
-                <div class="iUnNSJ">固定尺寸</div>
-            </div>
-        </div>
-    </div>
+    <layout></layout>
     <div class="box_padding" v-if="config.css">
         <div class="same_row_in">
             <span class="default_size title_5">基础设置</span>
@@ -42,7 +25,7 @@
                     </el-icon>
                 </div>
                 <div class="grey_input_bgc">
-                    <el-input-number class="card_number" v-model="config.css.height" :min="1" size="small"
+                    <el-input-number class="card_number" :disabled="true" v-model="config.css.height" :min="1" size="small"
                         controls-position="right" />
                     <span>H</span>
                 </div>
@@ -110,7 +93,9 @@
                     <el-slider v-model="config.config.size" size="small" />
                 </div>
             </div>
-            <colorSelection :iconColor="config.css.iconColor" title="选择颜色"></colorSelection>
+            <colorSelection v-model:iconColor="config.css.iconColor" title="选择颜色"></colorSelection>
+            <textAlignment v-model:align="config.css.textAlign"></textAlignment>
+            <lineNumber v-model:num="config.config.lineNum"></lineNumber>
         </div>
     </div>
 </template>
@@ -118,7 +103,10 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
 import color from 'color';
+import layout from '../components/maskedbox/layout.vue';
 import colorSelection from '../components/maskedbox/colorSelection.vue';
+import textAlignment from '../components/maskedbox/textAlignment.vue';
+import lineNumber from '../components/maskedbox/lineNumber.vue';
 
 const props = defineProps({
     config: {
@@ -211,36 +199,6 @@ watch(() => props.config, (newValue) => {
     padding: 9px 0px 4px 18px;
 }
 
-.dpjis {
-    width: 159px;
-    height: 100px;
-    opacity: 0.9;
-    background: rgb(243, 243, 248);
-    border: 1px solid rgb(226, 226, 226);
-    border-radius: 4px;
-    position: relative;
-}
-
-.kdbebz {
-    width: 100px;
-    height: 100px;
-    opacity: 0.9;
-    background: rgb(255, 255, 255);
-    border: 1px solid rgb(226, 226, 226);
-    border-radius: 4px;
-    position: relative;
-}
-
-.iUnNSJ {
-    opacity: 0.5;
-    font-size: 12px;
-    font-weight: 400;
-    color: rgb(51, 51, 51);
-    margin-top: 8px;
-    text-align: center;
-    transform: scale(0.85);
-}
-
 .putAway {
     transform: rotate(180deg);
 }