新增排版组件

README.md

@@ -36,6 +36,7 @@ const example = {
         aspectRatio: false, //禁止等比例缩放
         fixedWidth: true, //false固定宽度
         fixedHeight: true, //false固定高度
+        dataBinding:false, //数据绑定false不需要绑定
     },
     css: {
         top: 0, //初始top
@@ -46,6 +47,12 @@ const example = {
         fontWeight: 500, //字体粗细
         textAlign: 'center', //对齐方式
         color: "rgba(61, 61, 61, 1)", //字体颜色
+        directionFlag:true, //方向true为横向false为纵向
+        distributeFlag:'center', //分布自左向右leftRight、居中center、自右向左rightLeft、平均分布hypodispersion、两端对齐justify
+        aligningFlag: 'left',//对齐left、center、right
+        intervalFlag: 0, //间隔number类型
+        padding: 0, //内间距number类型
+        selfAdaption: false,//自适应true开启false关闭
     },
 },
 ```

src/assets/icons/iconfont/demo_index.html

@@ -55,6 +55,78 @@
           <ul class="icon_lists dib-box">
           
             <li class="dib">
+              <span class="icon iconfont">&#xe627;</span>
+                <div class="name">上对齐</div>
+                <div class="code-name">&amp;#xe627;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe629;</span>
+                <div class="name">下对齐</div>
+                <div class="code-name">&amp;#xe629;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe719;</span>
+                <div class="name">位置-上</div>
+                <div class="code-name">&amp;#xe719;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe71a;</span>
+                <div class="name">位置-下</div>
+                <div class="code-name">&amp;#xe71a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe718;</span>
+                <div class="name">右对齐</div>
+                <div class="code-name">&amp;#xe718;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe601;</span>
+                <div class="name">左对齐</div>
+                <div class="code-name">&amp;#xe601;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe67a;</span>
+                <div class="name">左右居中-01</div>
+                <div class="code-name">&amp;#xe67a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6a9;</span>
+                <div class="name">内边距</div>
+                <div class="code-name">&amp;#xe6a9;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6aa;</span>
+                <div class="name">四周内边距</div>
+                <div class="code-name">&amp;#xe6aa;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe67b;</span>
+                <div class="name">左右排序</div>
+                <div class="code-name">&amp;#xe67b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe9cd;</span>
+                <div class="name">上下切换</div>
+                <div class="code-name">&amp;#xe9cd;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xec88;</span>
+                <div class="name">左右居中-01</div>
+                <div class="code-name">&amp;#xec88;</div>
+              </li>
+          
+            <li class="dib">
               <span class="icon iconfont">&#xe600;</span>
                 <div class="name">首页</div>
                 <div class="code-name">&amp;#xe600;</div>
@@ -175,12 +247,6 @@
               </li>
           
             <li class="dib">
-              <span class="icon iconfont">&#xe867;</span>
-                <div class="name">重做</div>
-                <div class="code-name">&amp;#xe867;</div>
-              </li>
-          
-            <li class="dib">
               <span class="icon iconfont">&#xe603;</span>
                 <div class="name">清除</div>
                 <div class="code-name">&amp;#xe603;</div>
@@ -204,12 +270,6 @@
                 <div class="code-name">&amp;#xe71c;</div>
               </li>
           
-            <li class="dib">
-              <span class="icon iconfont">&#xe6e1;</span>
-                <div class="name">撤销</div>
-                <div class="code-name">&amp;#xe6e1;</div>
-              </li>
-          
           </ul>
           <div class="article markdown">
           <h2 id="unicode-">Unicode 引用</h2>
@@ -228,9 +288,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1722304783786') format('woff2'),
-       url('iconfont.woff?t=1722304783786') format('woff'),
-       url('iconfont.ttf?t=1722304783786') format('truetype');
+  src: url('iconfont.woff2?t=1735113764661') format('woff2'),
+       url('iconfont.woff?t=1735113764661') format('woff'),
+       url('iconfont.ttf?t=1735113764661') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -257,6 +317,114 @@
         <ul class="icon_lists dib-box">
           
           <li class="dib">
+            <span class="icon iconfont icon-top"></span>
+            <div class="name">
+              上对齐
+            </div>
+            <div class="code-name">.icon-top
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-bottom"></span>
+            <div class="name">
+              下对齐
+            </div>
+            <div class="code-name">.icon-bottom
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-siteTop"></span>
+            <div class="name">
+              位置-上
+            </div>
+            <div class="code-name">.icon-siteTop
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-siteBottom"></span>
+            <div class="name">
+              位置-下
+            </div>
+            <div class="code-name">.icon-siteBottom
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-right"></span>
+            <div class="name">
+              右对齐
+            </div>
+            <div class="code-name">.icon-right
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-left"></span>
+            <div class="name">
+              左对齐
+            </div>
+            <div class="code-name">.icon-left
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-centerLeft"></span>
+            <div class="name">
+              左右居中-01
+            </div>
+            <div class="code-name">.icon-centerLeft
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-padding"></span>
+            <div class="name">
+              内边距
+            </div>
+            <div class="code-name">.icon-padding
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-paddingAll"></span>
+            <div class="name">
+              四周内边距
+            </div>
+            <div class="code-name">.icon-paddingAll
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-around"></span>
+            <div class="name">
+              左右排序
+            </div>
+            <div class="code-name">.icon-around
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-fluctuate"></span>
+            <div class="name">
+              上下切换
+            </div>
+            <div class="code-name">.icon-fluctuate
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-center"></span>
+            <div class="name">
+              左右居中-01
+            </div>
+            <div class="code-name">.icon-center
+            </div>
+          </li>
+          
+          <li class="dib">
             <span class="icon iconfont icon-shouye"></span>
             <div class="name">
               首页
@@ -437,15 +605,6 @@
           </li>
           
           <li class="dib">
-            <span class="icon iconfont icon-zhongzuo1"></span>
-            <div class="name">
-              重做
-            </div>
-            <div class="code-name">.icon-zhongzuo1
-            </div>
-          </li>
-          
-          <li class="dib">
             <span class="icon iconfont icon-qingchu"></span>
             <div class="name">
               清除
@@ -481,15 +640,6 @@
             </div>
           </li>
           
-          <li class="dib">
-            <span class="icon iconfont icon-chexiao1"></span>
-            <div class="name">
-              撤销
-            </div>
-            <div class="code-name">.icon-chexiao1
-            </div>
-          </li>
-          
         </ul>
         <div class="article markdown">
         <h2 id="font-class-">font-class 引用</h2>
@@ -519,6 +669,102 @@
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-top"></use>
+                </svg>
+                <div class="name">上对齐</div>
+                <div class="code-name">#icon-top</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-bottom"></use>
+                </svg>
+                <div class="name">下对齐</div>
+                <div class="code-name">#icon-bottom</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-siteTop"></use>
+                </svg>
+                <div class="name">位置-上</div>
+                <div class="code-name">#icon-siteTop</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-siteBottom"></use>
+                </svg>
+                <div class="name">位置-下</div>
+                <div class="code-name">#icon-siteBottom</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-right"></use>
+                </svg>
+                <div class="name">右对齐</div>
+                <div class="code-name">#icon-right</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-left"></use>
+                </svg>
+                <div class="name">左对齐</div>
+                <div class="code-name">#icon-left</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-centerLeft"></use>
+                </svg>
+                <div class="name">左右居中-01</div>
+                <div class="code-name">#icon-centerLeft</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-padding"></use>
+                </svg>
+                <div class="name">内边距</div>
+                <div class="code-name">#icon-padding</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-paddingAll"></use>
+                </svg>
+                <div class="name">四周内边距</div>
+                <div class="code-name">#icon-paddingAll</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-around"></use>
+                </svg>
+                <div class="name">左右排序</div>
+                <div class="code-name">#icon-around</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-fluctuate"></use>
+                </svg>
+                <div class="name">上下切换</div>
+                <div class="code-name">#icon-fluctuate</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-center"></use>
+                </svg>
+                <div class="name">左右居中-01</div>
+                <div class="code-name">#icon-center</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-shouye"></use>
                 </svg>
                 <div class="name">首页</div>
@@ -679,14 +925,6 @@
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-zhongzuo1"></use>
-                </svg>
-                <div class="name">重做</div>
-                <div class="code-name">#icon-zhongzuo1</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-qingchu"></use>
                 </svg>
                 <div class="name">清除</div>
@@ -717,14 +955,6 @@
                 <div class="code-name">#icon-chexiao</div>
             </li>
           
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-chexiao1"></use>
-                </svg>
-                <div class="name">撤销</div>
-                <div class="code-name">#icon-chexiao1</div>
-            </li>
-          
           </ul>
           <div class="article markdown">
           <h2 id="symbol-">Symbol 引用</h2>

src/assets/icons/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4583886 */
-  src: url('iconfont.woff2?t=1722304783786') format('woff2'),
-       url('iconfont.woff?t=1722304783786') format('woff'),
-       url('iconfont.ttf?t=1722304783786') format('truetype');
+  src: url('iconfont.woff2?t=1735113764661') format('woff2'),
+       url('iconfont.woff?t=1735113764661') format('woff'),
+       url('iconfont.ttf?t=1735113764661') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,54 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-top:before {
+  content: "\e627";
+}
+
+.icon-bottom:before {
+  content: "\e629";
+}
+
+.icon-siteTop:before {
+  content: "\e719";
+}
+
+.icon-siteBottom:before {
+  content: "\e71a";
+}
+
+.icon-right:before {
+  content: "\e718";
+}
+
+.icon-left:before {
+  content: "\e601";
+}
+
+.icon-centerLeft:before {
+  content: "\e67a";
+}
+
+.icon-padding:before {
+  content: "\e6a9";
+}
+
+.icon-paddingAll:before {
+  content: "\e6aa";
+}
+
+.icon-around:before {
+  content: "\e67b";
+}
+
+.icon-fluctuate:before {
+  content: "\e9cd";
+}
+
+.icon-center:before {
+  content: "\ec88";
+}
+
 .icon-shouye:before {
   content: "\e600";
 }
@@ -93,10 +141,6 @@
   content: "\e6c2";
 }
 
-.icon-zhongzuo1:before {
-  content: "\e867";
-}
-
 .icon-qingchu:before {
   content: "\e603";
 }
@@ -113,7 +157,3 @@
   content: "\e71c";
 }
 
-.icon-chexiao1:before {
-  content: "\e6e1";
-}
-

src/assets/icons/iconfont/iconfont.json

@@ -6,6 +6,90 @@
   "description": "",
   "glyphs": [
     {
+      "icon_id": "18448236",
+      "name": "上对齐",
+      "font_class": "top",
+      "unicode": "e627",
+      "unicode_decimal": 58919
+    },
+    {
+      "icon_id": "18450537",
+      "name": "下对齐",
+      "font_class": "bottom",
+      "unicode": "e629",
+      "unicode_decimal": 58921
+    },
+    {
+      "icon_id": "33091984",
+      "name": "位置-上",
+      "font_class": "siteTop",
+      "unicode": "e719",
+      "unicode_decimal": 59161
+    },
+    {
+      "icon_id": "33091986",
+      "name": "位置-下",
+      "font_class": "siteBottom",
+      "unicode": "e71a",
+      "unicode_decimal": 59162
+    },
+    {
+      "icon_id": "8990454",
+      "name": "右对齐",
+      "font_class": "right",
+      "unicode": "e718",
+      "unicode_decimal": 59160
+    },
+    {
+      "icon_id": "10682505",
+      "name": "左对齐",
+      "font_class": "left",
+      "unicode": "e601",
+      "unicode_decimal": 58881
+    },
+    {
+      "icon_id": "12820668",
+      "name": "左右居中-01",
+      "font_class": "centerLeft",
+      "unicode": "e67a",
+      "unicode_decimal": 59002
+    },
+    {
+      "icon_id": "18344572",
+      "name": "内边距",
+      "font_class": "padding",
+      "unicode": "e6a9",
+      "unicode_decimal": 59049
+    },
+    {
+      "icon_id": "18344574",
+      "name": "四周内边距",
+      "font_class": "paddingAll",
+      "unicode": "e6aa",
+      "unicode_decimal": 59050
+    },
+    {
+      "icon_id": "28167844",
+      "name": "左右排序",
+      "font_class": "around",
+      "unicode": "e67b",
+      "unicode_decimal": 59003
+    },
+    {
+      "icon_id": "32538022",
+      "name": "上下切换",
+      "font_class": "fluctuate",
+      "unicode": "e9cd",
+      "unicode_decimal": 59853
+    },
+    {
+      "icon_id": "42939594",
+      "name": "左右居中-01",
+      "font_class": "center",
+      "unicode": "ec88",
+      "unicode_decimal": 60552
+    },
+    {
       "icon_id": "39033012",
       "name": "首页",
       "font_class": "shouye",
@@ -146,13 +230,6 @@
       "unicode_decimal": 59074
     },
     {
-      "icon_id": "10894809",
-      "name": "重做",
-      "font_class": "zhongzuo1",
-      "unicode": "e867",
-      "unicode_decimal": 59495
-    },
-    {
       "icon_id": "11321310",
       "name": "清除",
       "font_class": "qingchu",
@@ -179,13 +256,6 @@
       "font_class": "chexiao",
       "unicode": "e71c",
       "unicode_decimal": 59164
-    },
-    {
-      "icon_id": "34472888",
-      "name": "撤销",
-      "font_class": "chexiao1",
-      "unicode": "e6e1",
-      "unicode_decimal": 59105
     }
   ]
 }

src/components/colorPicker.vue

@@ -131,7 +131,6 @@ onMounted(() => {
 
 watch(() => props.color, (newValue) => {
     if (newValue) {
-        console.log(newValue,1)
         let { r, g, b, a }: any = parseColor(newValue)
         red.value = r
         green.value = g
@@ -141,9 +140,7 @@ watch(() => props.color, (newValue) => {
 }, { immediate: true, deep: true })
 
 watch([red, green, blue], () => {
-    console.log(red, green, blue,2)
     let { h, s, v } = rgb2hsv(red.value, green.value, blue.value)
-
     hue.value = h
     saturation.value = s
     value.value = v
@@ -152,7 +149,7 @@ watch([red, green, blue], () => {
     pointStyle.value = `top: ${100 - v * 100}%;left: ${s * 100}%;`
     // 移动色调滑块
     hueSliderStyle.value = `left: ${(hue.value / 360) * 100}%;`
-})
+}, { immediate: true, deep: true })
 
 watch(alpha, () => {
     // 移动透明度滑块

src/components/maskedbox/alignment.vue

@@ -0,0 +1,125 @@
+<template>
+    <div class="same_row_in upAndDown_padding">
+        <span class="title_12 w_60 default_size" style="flex: none;">{{ title }}</span>
+        <div class="card_alignment">
+            <div class="card_item_text" :class="item.flag ? 'activate_text' : ''" v-for="(item, index) in aligningData"
+                :key="index" @click="selectAlignment(item.id)">
+                <span class="img_icon_text iconfont" :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({
+    mode: {
+        type: String,
+        required: true
+    },
+    type: {
+        type: Boolean,
+        required: true
+    },
+    title: {
+        type: String,
+        required: true
+    },
+})
+
+const aligningData = ref([])
+const arrList: any = ref([{
+    id: 'top',
+    flag: false,
+    title: 'icon-left',
+}, {
+    id: 'center',
+    flag: false,
+    title: 'icon-center',
+}, {
+    id: 'right',
+    flag: false,
+    title: 'icon-right',
+}])
+const arrListil: any = ref([{
+    id: 'top',
+    flag: false,
+    title: 'icon-top',
+}, {
+    id: 'center',
+    flag: false,
+    title: 'icon-centerLeft',
+}, {
+    id: 'bottom',
+    flag: false,
+    title: 'icon-bottom',
+}])
+
+watch(() => [props.type], (newValue) => {
+    if (newValue) {
+        if (newValue[0]) {
+            aligningData.value = arrList.value
+        } else {
+            aligningData.value = arrListil.value
+        }
+        selectAlignment(props.mode)
+    }
+}, { immediate: true, deep: true })
+onMounted(() => {
+    selectAlignment(props.mode)
+})
+
+function selectAlignment(event: any) {
+    aligningData.value.forEach(item => {
+        if (item.id == event) {
+            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: 12px;
+}
+
+.w_60_index {
+    width: 60px !important;
+    margin-right: 5px;
+}
+</style>

src/components/maskedbox/direction.vue

@@ -0,0 +1,94 @@
+<template>
+    <div class="same_row_in upAndDown_padding">
+        <span class="title_12 w_60 default_size" style="flex: none;">{{title}}</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.id)">
+                <span class="img_icon_text iconfont"
+                    :class="[item.flag ? 'activate_text' : '', item.title]"></span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+const props = defineProps({
+    mode: {
+        type: Boolean,
+        required: true
+    },
+    title: {
+        type: String,
+        required: true
+    },
+})
+const arrList: any = ref([{
+    id: true,
+    flag: false,
+    title: 'icon-around',
+}, {
+    id: false,
+    flag: false,
+    title: 'icon-fluctuate',
+}])
+onMounted(() => {
+    selectAlignment(props.mode)
+})
+
+const emit = defineEmits(['update:mode']);
+function selectAlignment(event: any) {
+    arrList.value.forEach(item => {
+        if (item.id == event) {
+            item.flag = true
+        } else {
+            item.flag = false
+        }
+    })
+    emit('update:mode', event);
+}
+</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/distribution.vue

@@ -0,0 +1,132 @@
+<template>
+    <div class="same_row_in upAndDown_padding">
+        <span class="title_12 w_60 default_size" style="flex: none;">{{ title }}</span>
+        <div class="card_alignment" @mousedown.stop>
+            <el-select v-model="distributionValue" placeholder="Select" size="small" @mousedown.stop>
+                <el-option v-for="item in optionsData" :key="item.value" :label="item.label" :value="item.value"
+                    @mousedown.stop />
+            </el-select>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch } from "vue";
+const props = defineProps({
+    mode: {
+        type: String,
+        required: true
+    },
+    type: {
+        type: Boolean,
+        required: true
+    },
+    title: {
+        type: String,
+        required: true
+    },
+})
+const distributionValue = ref('')
+const optionsData = ref([])
+const arrList: any = ref([{
+    value: 'leftRight',
+    label: '自左向右',
+}, {
+    value: 'center',
+    label: '居中',
+}, {
+    value: 'rightLeft',
+    label: '自右向左',
+}, {
+    value: 'hypodispersion',
+    label: '平均分布',
+}, {
+    value: 'justify',
+    label: '两端对齐',
+}])
+const arrListil: any = ref([{
+    value: 'topDown',
+    label: '自顶向下',
+}, {
+    value: 'center',
+    label: '居中',
+}, {
+    value: 'downTop',
+    label: '自底向上',
+}, {
+    value: 'hypodispersion',
+    label: '平均分布',
+}, {
+    value: 'justify',
+    label: '两端对齐',
+}])
+watch(() => [props.type], (newValue) => {
+    if (newValue) {
+        distributionValue.value = props.mode
+        if (newValue[0]) {
+            optionsData.value = arrList.value
+        } else {
+            optionsData.value = arrListil.value
+        }
+    }
+}, { immediate: true, deep: true })
+onMounted(() => {
+    selectAlignment(props.mode)
+})
+
+const emit = defineEmits(['update:mode']);
+function selectAlignment(mode: any) {
+    arrList.value.forEach(item => {
+        if (item.id == mode) {
+            item.flag = true
+        } else {
+            item.flag = false
+        }
+    })
+    emit('update:mode', mode);
+}
+</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/paddingChoice.vue

@@ -0,0 +1,222 @@
+<template>
+    <div class="card_padding_choice">
+        <div class="same_row_in upAndDown_padding">
+            <span class="title_12 w_60 default_size" style="flex: none;">{{ title }}</span>
+            <div class="grey_input_bgc w_60_index">
+                <el-input-number class="card_number" v-model="lineNum" :disabled="paddingFlag" :min="min" :max="max"
+                    :step="step" size="small" controls-position="right" @input="numberChange" />
+            </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 iconfont" :class="[item.flag ? 'activate_text' : '', item.title]"></span>
+                </div>
+            </div>
+        </div>
+        <div class="same_row_in" style="justify-content: flex-end;" v-if="paddingFlag">
+            <div class="item_padding_num" v-for="(item, index) in paddingData" :key="index">
+                <div class="grey_input_bgc w_60_item">
+                    <el-input-number class="card_number" v-model="item.num" :step="step" size="small"
+                        controls-position="right" @input="editPadding(item)" />
+                </div>
+                <span>{{ item.title }}</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch } from "vue";
+const props = defineProps({
+    title: {
+        type: String,
+        required: true
+    },
+    numArr: {
+        type: Array,
+        required: true
+    },
+    min: {
+        type: Number,
+        default: 0
+    },
+    max: {
+        type: Number,
+        default: 200
+    },
+    step: {
+        type: Number,
+        default: 1
+    }
+})
+const arrList: any = ref([{
+    id: true,
+    flag: false,
+    title: 'icon-padding',
+}, {
+    id: false,
+    flag: false,
+    title: 'icon-paddingAll',
+}])
+const paddingData = ref([{
+    title: '上',
+    num: null,
+}, {
+    title: '右',
+    num: null,
+}, {
+    title: '下',
+    num: null,
+}, {
+    title: '左',
+    num: null,
+}])
+const paddingFlag = ref(false)
+const lineNum = ref(null)
+watch(() => props.numArr, (newValue) => {
+    if (newValue) {
+        if (areAllNumbersEqual(newValue)) {
+            paddingFlag.value = false
+            lineNum.value = newValue[0];
+            arrList.value[0].flag = true
+            arrList.value[1].flag = false
+        } else {
+            paddingFlag.value = true
+            paddingData.value[0].num = newValue[0]
+            paddingData.value[1].num = newValue[1]
+            paddingData.value[2].num = newValue[2]
+            paddingData.value[3].num = newValue[3]
+            arrList.value[0].flag = false
+            arrList.value[1].flag = true
+        }
+    }
+
+    function areAllNumbersEqual(arr) {
+        return arr.every(function (value) {
+            return value === arr[0];
+        });
+    }
+}, { immediate: true, deep: true })
+onMounted(() => {
+    // selectAlignment(props.mode)
+})
+
+const emit = defineEmits(['update:mode', 'update:numArr']);
+function numberChange(params: any) {
+    const arr = params
+    const arrData = []
+    arrData[0] = arr
+    arrData[1] = arr
+    arrData[2] = arr
+    arrData[3] = arr
+    emit('update:numArr', arrData);
+}
+// 修改内边距padding、item
+function editPadding(event: any) {
+    const numArr = paddingData.value
+    const ids = numArr.map(obj => obj.num);
+    emit('update:numArr', ids);
+}
+function selectAlignment(mode: any) {
+    arrList.value.forEach(item => {
+        if (item.id == mode) {
+            item.flag = true
+        } else {
+            item.flag = false
+        }
+    })
+    if (mode) {
+        const newValue = props.numArr
+        console.log(newValue,887);
+        
+        if (newValue) {
+            paddingFlag.value = false
+            lineNum.value = newValue[0];
+            arrList.value[0].flag = true
+            arrList.value[1].flag = false
+        }
+    } else {
+        const newValue = props.numArr
+        if (newValue) {
+            paddingFlag.value = true
+            lineNum.value = null;
+            paddingData.value[0].num = newValue[0]
+            paddingData.value[1].num = newValue[1]
+            paddingData.value[2].num = newValue[2]
+            paddingData.value[3].num = newValue[3]
+            arrList.value[0].flag = false
+            arrList.value[1].flag = true
+        }
+    }
+    // emit('update:mode', mode);
+}
+</script>
+
+<style lang="scss" scoped>
+.card_padding_choice {
+    display: flex;
+    flex-direction: column;
+}
+
+.w_60_item {
+    width: 50px;
+    margin-left: 6px;
+}
+
+.item_padding_num {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: center;
+
+    span {
+        font-size: 10px;
+        font-weight: 500;
+        margin-top: 2px;
+        color: rgb(155, 155, 155);
+        line-height: 14px;
+    }
+}
+
+.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/selfAdaption.vue

@@ -0,0 +1,93 @@
+<template>
+    <div class="same_row_in upAndDown_padding">
+        <span class="title_12 w_60 default_size" style="flex: none;">{{title}}</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.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 } from "vue";
+const props = defineProps({
+    title: {
+        type: String,
+        required: true
+    },
+    mode: {
+        type: Boolean,
+        required: true
+    },
+})
+const arrList: any = ref([{
+    id: true,
+    flag: false,
+    title: '开启',
+}, {
+    id: false,
+    flag: false,
+    title: '关闭',
+}])
+onMounted(() => {
+    selectAlignment(props.mode)
+})
+
+const emit = defineEmits(['update:mode']);
+function selectAlignment(mode: any) {
+    arrList.value.forEach(item => {
+        if (item.id == mode) {
+            item.flag = true
+        } else {
+            item.flag = false
+        }
+    })
+    emit('update:mode', mode);
+}
+</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/widgets/boxs.vue

@@ -22,7 +22,7 @@ watch(() => props.config, (newValue) => {
         borderRadius.value = newValue.css.borderRadius
         borderWidth.value = newValue.css.borderWidth
         borderColor.value = newValue.css.borderColor
-        console.log(borderWidth.value, borderColor.value, 24);
+        // console.log(borderWidth.value, borderColor.value, 24);
 
     }
 }, { immediate: true, deep: true })

src/components/widgets/typeSetting.vue

@@ -0,0 +1,55 @@
+<template>
+    <div class="center_in"
+        :style="{ width: width + 'px', height: height + 'px', backgroundColor: backgroundColor, borderRadius: borderRadius + 'px', border: borderWidth + 'px solid ' + borderColor, }">
+        <div class="card_setting" :style="{}">
+            <div class="item_arrange"></div>
+            <div class="item_arrange center_in" :style="{ margin: settingCss.directionFlag ? '10px 0px' : '0px 10px' }">拖入组件
+            </div>
+            <div class="item_arrange"></div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { watch, ref } from "vue";
+const props = defineProps(["config"])
+const width = ref('')
+const height = ref('')
+const backgroundColor = ref('')
+const borderRadius = ref('')
+
+const borderWidth = ref('')
+const borderColor = ref('')
+
+const settingCss = ref({})
+watch(() => props.config, (newValue) => {
+    if (newValue) {
+        width.value = newValue.css.width
+        height.value = newValue.css.height
+        backgroundColor.value = newValue.css.backgroundColor
+        borderRadius.value = newValue.css.borderRadius
+        borderWidth.value = newValue.css.borderWidth
+        borderColor.value = newValue.css.borderColor
+        settingCss.value = newValue.css
+        console.log(settingCss.value, 24);
+
+    }
+}, { immediate: true, deep: true })
+</script>
+
+<style lang="scss" scoped>
+.card_setting {
+    display: flex;
+    width: 100%;
+    height: 100%;
+}
+
+.item_arrange {
+    margin: 10px;
+    background: rgba(158, 219, 255, 0.2);
+    border-radius: 8px;
+    flex: 1 0 0px;
+    font-size: 12px;
+    color: rgb(35, 125, 229);
+}
+</style>

src/module/config/arrange.ts

@@ -0,0 +1,27 @@
+const arrangeConfig = {
+    isActive: false,
+    aspectRatio: false, //禁止等比例缩放
+    fixedWidth: true, //固定宽度
+    fixedHeight: true, //固定高度
+    resizable: true, //禁止调整大小
+    dataBinding: false, //数据绑定false不需要绑定
+}
+
+const arrangeCss = {
+    top: 0,
+    left: 0,
+    width: 375,
+    height: 200,
+    borderRadius: 0,
+    backgroundColor: 'rgba(255, 255, 255, 0)',
+    borderWidth: 0,
+    borderColor: 'rgba(255, 255, 255, 1)',
+    directionFlag: true, //方向true为横向false为纵向
+    distributeFlag: 'center', //分布自左向右leftRight、自顶向下topDown、居中center、自右向左rightLeft、自底向上downTop、平均分布hypodispersion、两端对齐justify
+    aligningFlag: 'center',//对齐left、center、right，top、bottom
+    intervalFlag: 0, //间隔number类型
+    padding: [0, 0, 0, 0], //内间距number类型
+    selfAdaption: false,//自适应true开启false关闭
+}
+
+export { arrangeConfig, arrangeCss }

src/module/index.ts

@@ -8,6 +8,7 @@ import { sceneConfig, sceneCss } from "./config/sceneButton";
 import { configList1, cssList1 } from "./config/input";
 // 布局
 import { rectConfig, rectCss } from "./config/rectangle";
+import { arrangeConfig, arrangeCss } from "./config/arrange";
 
 const baseComponent = [{
     id: 1, type: 'Text', name: "文字", active: false,
@@ -92,9 +93,9 @@ const layoutValue = [{
     id: 2, type: 'typeSetting', name: "排列", active: false,
     displayPicture: true,
     popoverTip: true,
-    popoverTipTitle:'往矩形内添加元素等内容以创建更多样式的组件、卡片、界面等',
-    config: rectConfig,
-    css: rectCss,
+    popoverTipTitle:'将组件拖入排列区域，组件根据分布配置自动实现区域内的对齐',
+    config: arrangeConfig,
+    css: arrangeCss,
 }, {
     id: 3, type: 'tumble', name: "滚动", active: false,
     displayPicture: true,

src/views/HomeView.vue

@@ -1223,6 +1223,19 @@ function getIconSelection(params: any) {
   overflow: hidden overlay;
 }
 
+.card_maskedbox::-webkit-scrollbar {
+  width: 3px;
+}
+
+.card_maskedbox::-webkit-scrollbar-thumb {
+  border-radius: 3px;
+  background-color: #616161;
+}
+
+.card_maskedbox::-webkit-scrollbar-track {
+  border-radius: 8px;
+}
+
 .card_alignment {
   max-height: calc(-50px + 100vh);
   position: absolute;

src/views/maskedbox.vue

@@ -33,7 +33,8 @@
             <colorSelection v-if="config.css.backgroundColor" v-model:iconColor="config.css.backgroundColor"
                 title="背景颜色">
             </colorSelection>
-            <digitalSlider v-if="'borderWidth' in config.css" v-model:num="config.css.borderWidth" title="描边宽度">
+            <digitalSlider v-if="'borderWidth' in config.css" v-model:num="config.css.borderWidth" :max="40"
+                title="描边宽度">
             </digitalSlider>
             <colorSelection v-if="config.css.borderColor" v-model:iconColor="config.css.borderColor" title="描边颜色">
             </colorSelection>
@@ -69,11 +70,31 @@
     <div class="box_padding" v-if="'picture' in config.config">
         <div class="same_row_in">
             <span class="default_size title_5">图库</span>
+            <el-icon style="cursor: pointer;" :class="galleryFlag ? '' : 'putAway'" @click="getbasicSetting('gallery')">
+                <ArrowDown />
+            </el-icon>
         </div>
-        <div style="padding: 18px 0px 13px;">
+        <div style="padding: 18px 0px 13px;" v-if="galleryFlag">
             <photoGallery></photoGallery>
         </div>
     </div>
+    <div class="box_padding" v-if="'directionFlag' in config.css">
+        <div class="same_row_in">
+            <span class="default_size title_5">排版</span>
+            <el-icon style="cursor: pointer;" :class="composeFlag ? '' : 'putAway'" @click="getbasicSetting('compose')">
+                <ArrowDown />
+            </el-icon>
+        </div>
+        <div style="padding: 18px 0px 13px;" v-if="composeFlag">
+            <direction v-model:mode="config.css.directionFlag" title="方向"></direction>
+            <distribution :mode="config.css.distributeFlag" :type="config.css.directionFlag" title="分布"></distribution>
+            <alignment :mode="config.css.aligningFlag" :type="config.css.directionFlag" title="对齐"></alignment>
+            <digitalSlider v-if="'intervalFlag' in config.css" v-model:num="config.css.intervalFlag" title="间隔">
+            </digitalSlider>
+            <paddingChoice :numArr="config.css.padding" title="内边距"></paddingChoice>
+            <selfAdaption :mode="config.css.selfAdaption" title="自适应"></selfAdaption>
+        </div>
+    </div>
 </template>
 
 <script setup lang="ts">
@@ -91,6 +112,11 @@ import lineNumber from '../components/maskedbox/lineNumber.vue';
 import digitalSlider from '../components/maskedbox/digitalSlider.vue';
 import photoGallery from '../components/maskedbox/photoGallery.vue';
 import displayValue from '../components/maskedbox/displayValue.vue';
+import direction from '../components/maskedbox/direction.vue';
+import distribution from '../components/maskedbox/distribution.vue';
+import alignment from '../components/maskedbox/alignment.vue';
+import paddingChoice from '../components/maskedbox/paddingChoice.vue';
+import selfAdaption from '../components/maskedbox/selfAdaption.vue';
 
 const props = defineProps({
     config: {
@@ -101,6 +127,8 @@ const props = defineProps({
 const bindingFlag = ref(true)
 const basicFlag = ref(true)
 const imgFlag = ref(true)
+const galleryFlag = ref(true)
+const composeFlag = ref(true)
 function getbasicSetting(params: any) {
     if (params == 'basic') {
         if (basicFlag.value) {
@@ -120,6 +148,18 @@ function getbasicSetting(params: any) {
         } else {
             bindingFlag.value = true
         }
+    } else if (params == 'gallery') {
+        if (galleryFlag.value) {
+            galleryFlag.value = false
+        } else {
+            galleryFlag.value = true
+        }
+    } else if (params == 'compose') {
+        if (composeFlag.value) {
+            composeFlag.value = false
+        } else {
+            composeFlag.value = true
+        }
     }
 }