新增组件

README.md

@@ -2,8 +2,63 @@
 
 This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
 
+**pnpm install 安装** 
+**运行项目：pnpm dev** 
+
 ## Recommended Setup
 
 - [VS Code](https://code.visualstudio.com/) + [Vue - Official](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (previously Volar) and disable Vetur
 
 - Use [vue-tsc](https://github.com/vuejs/language-tools/tree/master/packages/tsc) for performing the same type checking from the command line, or for generating d.ts files for SFCs.
+
+## 组件库分类列表ts文件路径
+- baozhida-hardware-development\src\module\classification.ts
+## 组件存放路径
+- baozhida-hardware-development\src\components\widgets
+## 组件默认样式及布局样式控件基础参数
+- ts文件存放路径：baozhida-hardware-development\src\module\index.ts
+- 组件基本组成部分
+```javascript
+const example = {
+    id: 1, //组件id
+    type: 'Text', //组件类型同组件文件名
+    name: "文字", //组件名称
+    active: false, //拖动组件激活状态默认true
+    displayPicture: true, //组件展示是否已图片展示,配合type使用`/src/assets/componentIcon/${type}.png` 否已组件展示
+    config: {
+        name: '文字', //组件文本
+        isActive: false, //组件id
+        type: 1, //组件id
+        lineNum: null, //行数
+        isResizable: true, //禁止缩放
+        sticks: ['mr', 'ml'], //可拖动的边界['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl','ml']
+        resizable: true, //false禁止调整大小
+        aspectRatio: false, //禁止等比例缩放
+        fixedWidth: true, //false固定宽度
+        fixedHeight: true, //false固定高度
+    },
+    css: {
+        top: 0, //初始top
+        left: 0, //初始left
+        width: 100, //组件宽度
+        height: 'auto', //组件高度
+        fontSize: 14, //字体大小
+        fontWeight: 500, //字体粗细
+        textAlign: 'center', //对齐方式
+        color: "rgba(61, 61, 61, 1)", //字体颜色
+    },
+},
+```
+- 面板布局功能控制
+```javascript
+const btnConfig = {
+    isActive: false,
+    name: '功能名称',
+    isResizable: true, //禁止缩放
+    aspectRatio: false, //禁止等比例缩放
+    resizable: true, //禁止调整大小
+    fixedWidth: true, //固定宽度
+    fixedHeight: true, //固定高度
+}
+```
+

src/App.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 </script>
 <template>
+  <!-- 面板工作台 -->
   <router-view></router-view>
 </template>
 

src/components/colorPicker.vue

@@ -131,6 +131,7 @@ 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
@@ -140,6 +141,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

src/components/maskedbox/colorSelection.vue

@@ -5,10 +5,13 @@
         <el-popover v-model:visible="colorPickerVisible" popper-class="down-popover" placement="right" :width="300"
             trigger="click" @mousedown.stop>
             <template #reference>
-                <div :style="{ backgroundColor: iconColoril }" class="card_color_picker"></div>
+                <div class="under_card">
+                    <div :style="{ backgroundColor: iconColoril }" class="card_color_picker"></div>
+                </div>
             </template>
             <colorPicker :color="colorPickerColor" mode="rgba" @mousedown.stop @close="closePicker"
-                @handleConfirm="handleConfirm"></colorPicker>
+                @handleConfirm="handleConfirm">
+            </colorPicker>
         </el-popover>
         <div class="leftmargin_8">
             <el-input v-model="hexColor" size="small">
@@ -121,6 +124,14 @@ watch(() => props.iconColor, (newValue) => {
 }
 </style>
 <style lang="scss" scoped>
+.under_card {
+    width: 40px;
+    height: 24px;
+    background-image: url(../../assets/iconData/underpainting.png);
+    background-size: 35%;
+    border-radius: 3px;
+}
+
 .card_color_picker {
     flex: none;
     box-sizing: border-box;

src/components/maskedbox/digitalSlider.vue

@@ -25,9 +25,13 @@ const props = defineProps({
 const lineNum: any = ref()
 
 watch(() => props.num, (newValue) => {
-    if (newValue) {
+    if (isNumber(newValue)) {
         lineNum.value = newValue;
     }
+
+    function isNumber(value) {
+        return typeof value === "number";
+    }
 }, { immediate: true, deep: true })
 
 const emit = defineEmits(['update:num']);

src/components/maskedbox/lineNumber.vue

@@ -2,7 +2,7 @@
     <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" min="0" size="small" controls-position="right"
+            <el-input-number class="card_number" v-model="lineNum" :min="0" size="small" controls-position="right"
                 @change="bindingChange" />
         </div>
         <div class="card_alignment">
@@ -35,6 +35,8 @@ const lineNum: any = ref()
 
 watch(() => props.num, (newValue) => {
     if (newValue) {
+        console.log(newValue,776);
+        
         lineNum.value = newValue;
     }
 }, { immediate: true, deep: true })

src/components/moduleLibrary.vue

@@ -37,7 +37,6 @@ const handleNodeClick = (data: Tree) => {
 watch(() => props.componentData, (newValue) => {
     if (newValue) {
         libraryData.value = newValue
-        console.log(libraryData.value, 678)
     }
 }, { immediate: true, deep: true })
 </script>
@@ -66,10 +65,6 @@ watch(() => props.componentData, (newValue) => {
     background-color: #e7f1fc !important;
 }
 
-.card_tree :deep(.is-current .title_tree) {
-    color: #0F73E6 !important;
-}
-
 .title_tree {
     font-size: 12px;
     flex: 1 1 0%;

src/components/widgets/SceneButton.vue

@@ -1,6 +1,7 @@
 <template>
     <div class="center_in">
-        <div class="card_btn center_in" :style="{ width: btndata.css.width + 'px', height: btndata.css.height + 'px' }">
+        <div class="card_btn center_in"
+            :style="{ width: btndata.css.width + 'px', height: btndata.css.height + 'px', backgroundColor: btndata.css.backgroundColor, borderRadius: btndata.css.borderRadius + 'px', }">
             <div class="bg_item_btn center_in">
                 <div class="icon_card_btn"
                     :style="{ width: btndata.config.size + 'px', height: btndata.config.size + 'px', }">
@@ -9,16 +10,18 @@
                         :src="getAssetsImages(btndata.config.img)" fit="contain" />
                 </div>
             </div>
-            <div>{{ btndata.name }}</div>
+            <div class="centent-box" :style="styleObject">{{ btndata.config.name }}</div>
         </div>
     </div>
 </template>
-  
+
 <script lang="ts" setup>
-import { watch, ref } from "vue";
+import { watch, ref, reactive } from "vue";
 const props = defineProps(["config"])
 
 const btndata: any = ref({})
+const styleObject: any = ref({})
+
 function getAssetsImages(name) {
     var arr = '../../assets/iconData/' + name + '.png'
     return new URL(`${arr}`, import.meta.url).href;
@@ -27,15 +30,21 @@ function getAssetsImages(name) {
 watch(() => props.config, (newValue) => {
     if (newValue) {
         btndata.value = newValue
+        const arr = {
+            'color': btndata.value.css.color,
+            'textAlign': btndata.value.css.textAlign,
+            '-webkit-line-clamp': btndata.value.css.lineNum
+        }
+        styleObject.value = arr
     }
 }, { immediate: true, deep: true })
 </script>
- 
+
 <style lang="scss" scoped>
 .card_btn {
     flex-direction: column;
-    background-color: #fff;
-    border-radius: 8px;
+    // background-color: #fff;
+    // border-radius: 8px;
     overflow: hidden;
     user-select: none;
 }
@@ -44,7 +53,8 @@ watch(() => props.config, (newValue) => {
     width: 60px;
     height: 60px;
     border-radius: 50%;
-    background-color: rgba(21, 140, 251, 0.1);
+    flex: none;
+    background-color: #e7f3ff;
 }
 
 .icon_card_btn {
@@ -59,4 +69,13 @@ watch(() => props.config, (newValue) => {
     // -webkit-filter: drop-shadow(30px 0 0 rgba(21, 140, 251, 1));
     // filter: drop-shadow(30px 0 0 rgba(21, 140, 251, 1));
 }
+
+/* 字体内容容器 */
+.centent-box {
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+}
 </style>

src/components/widgets/boxs.vue

@@ -0,0 +1,31 @@
+<template>
+    <div class="center_in"
+        :style="{ width: width + 'px', height: height + 'px', backgroundColor: backgroundColor, borderRadius: borderRadius + 'px', border: borderWidth + 'px solid ' + borderColor, }">
+    </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('')
+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
+        console.log(borderWidth.value, borderColor.value, 24);
+
+    }
+}, { immediate: true, deep: true })
+</script>
+
+<style lang="scss" scoped></style>

src/module/config/input.ts

@@ -1,8 +1,7 @@
 const configList1 = {
     isActive: false,
-    type: 1,
+    // type: 1,
     size: 30,
-    color: "#158cfb",
     isResizable: true, //禁止缩放
     draggable: true, //组件是否可拖动
     // sticks:['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml'],
@@ -16,7 +15,7 @@ const cssList1 = {
     width: 300,
     height: 32,
     borderRadius: 8,
-    backgroundColor: '#fff',
+    backgroundColor: 'rgba(255, 255, 255, 1)',
 }
 
 export { configList1, cssList1 }

src/module/config/rectangle.ts

@@ -0,0 +1,21 @@
+const rectConfig = {
+    isActive: false,
+    aspectRatio: false, //禁止等比例缩放
+    fixedWidth: true, //固定宽度
+    fixedHeight: true, //固定高度
+    resizable: true, //禁止调整大小
+    dataBinding:false, //数据绑定false不需要绑定
+}
+
+const rectCss = {
+    top: 0,
+    left: 0,
+    width: 375,
+    height: 200,
+    borderRadius: 0,
+    backgroundColor: 'rgba(255, 255, 255, 1)',
+    borderWidth: 0,
+    borderColor: 'rgba(255, 255, 255, 1)',
+}
+
+export { rectConfig, rectCss }

src/module/config/sceneButton.ts

@@ -3,7 +3,6 @@ const sceneConfig = {
     name: '场景',
     size: 30,
     img: 'set',
-    lineNum: null,
     isResizable: true, //禁止缩放
     // sticks:['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml'],
     aspectRatio: false, //禁止等比例缩放
@@ -19,8 +18,10 @@ const sceneCss = {
     iconSize: 27,
     borderRadius: 8,
     zIndex: 0,
+    lineNum: null, //行数
     iconColor: "rgba(21, 140, 251, 1)",
     backgroundColor: 'rgba(255, 255, 255, 1)',
+    color: 'rgba(0, 0, 0, 1)',
     fontWeight: 500,
     textAlign: 'center',
 }

src/module/config/text.ts

@@ -2,7 +2,7 @@ const TextConfig = {
     name: '文字',
     isActive: false,
     type: 1,
-    lineNum: null,
+    lineNum: 0, //行数
     isResizable: true, //禁止缩放
     sticks: ['mr', 'ml'],
     resizable: true, //禁止调整大小
@@ -15,7 +15,7 @@ const TextCss = {
     top: 0,
     left: 0,
     width: 100,
-    height: 'auto',
+    // height: 'auto',
     fontSize: 14,
     fontWeight: 500,
     textAlign: 'center',

src/module/index.ts

@@ -6,6 +6,8 @@ import { iconConfig, iconCss } from "./config/icon";
 import { pictureConfig, pictureCss } from "./config/picture";
 import { sceneConfig, sceneCss } from "./config/sceneButton";
 import { configList1, cssList1 } from "./config/input";
+// 布局
+import { rectConfig, rectCss } from "./config/rectangle";
 
 const baseComponent = [{
     id: 1, type: 'Text', name: "文字", active: false,
@@ -79,14 +81,34 @@ const baseComponent = [{
     css: pictureCss,
 }]
 
-const attributeValue = [{
-    id: 1, type: 'Input', name: "输入框3", active: false,
-    config: configList1,
-    css: cssList1,
+const layoutValue = [{
+    id: 1, type: 'boxs', name: "矩形", active: false,
+    displayPicture: true,
+    popoverTip: true,
+    popoverTipTitle:'往矩形内添加元素等内容以创建更多样式的组件、卡片、界面等',
+    config: rectConfig,
+    css: rectCss,
 }, {
-    id: 2, type: 'SceneButton', name: "场景", active: false,
-    config: sceneConfig,
-    css: sceneCss,
+    id: 2, type: 'typeSetting', name: "排列", active: false,
+    displayPicture: true,
+    popoverTip: true,
+    popoverTipTitle:'往矩形内添加元素等内容以创建更多样式的组件、卡片、界面等',
+    config: rectConfig,
+    css: rectCss,
+}, {
+    id: 3, type: 'tumble', name: "滚动", active: false,
+    displayPicture: true,
+    popoverTip: true,
+    popoverTipTitle:'往矩形内添加元素等内容以创建更多样式的组件、卡片、界面等',
+    config: rectConfig,
+    css: rectCss,
+}, {
+    id: 4, type: 'tabs', name: "标签", active: false,
+    displayPicture: true,
+    popoverTip: true,
+    popoverTipTitle:'往矩形内添加元素等内容以创建更多样式的组件、卡片、界面等',
+    config: rectConfig,
+    css: rectCss,
 }]
 
 const layout = [{
@@ -99,4 +121,13 @@ const layout = [{
     css: sceneCss,
 }]
 
-export { baseComponent, attributeValue, layout };
+const general = [{
+    id: 1, type: 'Input', name: "输入框3", active: false,
+    config: configList1,
+    css: cssList1,
+}, {
+    id: 2, type: 'SceneButton', name: "场景", active: false,
+    config: sceneConfig,
+    css: sceneCss,
+}]
+export { baseComponent, layoutValue, layout, general };

src/views/HomeView.vue

@@ -86,8 +86,26 @@
               :touch-start-threshold="50" :fallback-tolerance="50" :sort="false">
               <template #item="{ element }">
                 <div class="card_Base_component" v-if="element.displayPicture">
-                  <el-image class="images_Base_component" :src="getComponentPicture(element.type)" fit="contain" />
-                  <span>{{ element.name }}</span>
+                  <div class="pict_base" v-if="!element.popoverTip">
+                    <el-image class="images_Base_component" :src="getComponentPicture(element.type)" fit="contain" />
+                    <span>{{ element.name }}</span>
+                  </div>
+                  <div v-if="element.popoverTip">
+                    <el-popover placement="right" :width="230" trigger="hover">
+                      <template #reference>
+                        <div class="card_Base_componentil">
+                          <el-image class="images_Base_component" :src="getComponentPicture(element.type)"
+                            fit="contain" />
+                          <span>{{ element.name }}</span>
+                        </div>
+                      </template>
+                      <div class="card_rectangle">
+                        <el-image style="width: 60px;height: 60px" :src="motionGraph(element.type)" fit="contain" />
+                        <span>{{ element.name }}</span>
+                        <div class="tipTitle">{{ element.popoverTipTitle }}</div>
+                      </div>
+                    </el-popover>
+                  </div>
                 </div>
                 <div class="item_module_left move" v-else>
                   <component :is="getWidget(element.type)" :config="element"></component>
@@ -121,14 +139,16 @@
           </div>
         </div>
         <div class="card_home" :style="{ width: (viewName == '卡片' ? cardWidth + 'px' : '375px') }">
-          <img class="head_image_url" :src="imageUrl" v-if="viewName != '卡片'" />
-          <div class="card_title_bar" v-if="viewName != '卡片'">
-            <div class="left_back">
-              <el-icon size="24">
-                <ArrowLeft />
-              </el-icon>
+          <div style="background-color: #fff;">
+            <img class="head_image_url" :src="imageUrl" v-if="viewName != '卡片'" />
+            <div class="card_title_bar" v-if="viewName != '卡片'">
+              <div class="left_back">
+                <el-icon size="24">
+                  <ArrowLeft />
+                </el-icon>
+              </div>
+              <span class="title_headline_head">头部栏标题</span>
             </div>
-            <span class="title_headline_head">头部栏标题</span>
           </div>
           <div class="Bzu"
             :style="{ width: (viewName == '卡片' ? cardWidth + 'px' : '375px'), height: (viewName == '卡片' ? cardHeight + 'px' : '603px') }">
@@ -210,7 +230,7 @@ import VueDrag from '../components/drag/resizable.vue'
 import iconLibrary from '../components/iconLibrary.vue'
 import maskedbox from './maskedbox.vue'
 import additionPage from './additionPage.vue'
-import { baseComponent, attributeValue, layout } from '../module/index';
+import { baseComponent, layoutValue, layout, general } from '../module/index';
 import { classify } from '../module/classification';
 import { ref, watch, computed } from "vue";
 import { useRouter } from 'vue-router'
@@ -407,6 +427,10 @@ function getAssetsImages(name) {
 function getComponentPicture(name) {
   return new URL(`/src/assets/componentIcon/${name}.png`, import.meta.url).href;
 }
+// 组件图片
+function motionGraph(name) {
+  return new URL(`/src/assets/componentIcon/${name}.gif`, import.meta.url).href;
+}
 
 //拖拽开始的事件
 const onStart = () => {
@@ -457,11 +481,13 @@ const handleReceivedData = (num: any) => {
   if (num == 1) {
     extraImgs.value = baseComponent
   } else if (num == 2) {
-    extraImgs.value = attributeValue
+    extraImgs.value = layoutValue
   } else if (num == 4) {
     extraImgs.value = layout
   } else if (num == 5) {
     extraImgs.value = layout
+  } else if (num == 7) {
+    extraImgs.value = general
   }
   componentLibrary.value = JSON.parse(JSON.stringify(extraImgs.value))
 }
@@ -907,11 +933,45 @@ function getIconSelection(params: any) {
   flex-direction: column;
 }
 
+.pict_base {
+  display: flex;
+  flex-direction: column;
+}
+
+.card_Base_componentil {
+  cursor: grab;
+  width: calc(100%);
+  display: flex;
+  flex-direction: column;
+}
+
 .images_Base_component {
   width: 100%;
   height: 100%;
 }
 
+.card_rectangle {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 185px;
+
+  span {
+    font-size: 15px;
+    font-weight: bold;
+    margin-top: 15px;
+  }
+}
+
+.tipTitle {
+  margin-top: 10px;
+  text-align: center;
+  width: 96%;
+  font-size: 12px;
+}
+
 .card_Base_component span {
   width: 100%;
   display: block;
@@ -1007,8 +1067,7 @@ function getIconSelection(params: any) {
   align-items: center;
   justify-content: center;
   height: 44px;
-  margin-right: 6px;
-  margin-left: 6px;
+  padding: 0px 6px;
 }
 
 .left_back {

src/views/maskedbox.vue

@@ -3,13 +3,13 @@
     <layout v-if="'fixedWidth' in config.config && 'fixedHeight' in config.config" v-model:configData="config.config"
         v-model:cssData="config.css"></layout>
     <div class="box_padding" v-if="config.css">
-        <div class="same_row_in">
+        <div class="same_row_in" v-if="config.config.dataBinding != false">
             <span class="default_size title_5">数据绑定</span>
             <el-icon style="cursor: pointer;" :class="bindingFlag ? '' : 'putAway'" @click="getbasicSetting('bin')">
                 <ArrowDown />
             </el-icon>
         </div>
-        <div v-if="bindingFlag" class="card_second_level">
+        <div v-if="bindingFlag && config.config.dataBinding != false" class="card_second_level">
             <displayValue></displayValue>
         </div>
         <div class="same_row_in">
@@ -22,25 +22,32 @@
             <digitalSlider v-if="'zIndex' in config.css" v-model:num="config.css.zIndex" title="层级"></digitalSlider>
             <patternMode v-if="config.config.pictureMode" v-model:mode="config.config.pictureMode"></patternMode>
             <literalName v-if="'name' in config.config" v-model:name="config.config.name"></literalName>
-            <boxSize v-if="config.css.width && config.css.height != 'auto' && config.css.height && config.config.resizable"
+            <boxSize
+                v-if="config.css.width && config.css.height != 'auto' && config.css.height && config.config.resizable"
                 v-model:width="config.css.width" v-model:height="config.css.height"></boxSize>
-            <colorSelection v-if="config.css.color" v-model:iconColor="config.css.color" title="颜色"></colorSelection>
+            <colorSelection v-if="config.css.color" v-model:iconColor="config.css.color" title="文字颜色"></colorSelection>
             <colorSelection v-if="config.css.colorOpen" v-model:iconColor="config.css.colorOpen" title="颜色(开)">
             </colorSelection>
             <colorSelection v-if="config.css.colorClose" v-model:iconColor="config.css.colorClose" title="颜色(关)">
             </colorSelection>
-            <colorSelection v-if="config.css.backgroundColor" v-model:iconColor="config.css.backgroundColor" title="颜色">
+            <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>
+            <colorSelection v-if="config.css.borderColor" v-model:iconColor="config.css.borderColor" title="描边颜色">
             </colorSelection>
             <digitalSlider v-if="'borderRadius' in config.css" v-model:num="config.css.borderRadius" title="圆角">
             </digitalSlider>
             <fontSize v-if="config.css.fontSize && config.css.fontWeight" v-model:fontSize="config.css.fontSize"
                 v-model:fontWeight="config.css.fontWeight"></fontSize>
             <textAlignment v-if="config.css.textAlign" v-model:align="config.css.textAlign"></textAlignment>
-            <lineNumber v-if="'lineNum' in config.config" v-model:num="config.config.lineNum"></lineNumber>
+            <lineNumber v-if="'lineNum' in config.config" v-model:num="config.css.lineNum"></lineNumber>
             <digitalSlider v-if="'opacity' in config.css" v-model:num="config.css.opacity" :min="0" :max="1" :step="0.1"
                 title="透明度">
             </digitalSlider>
-            <digitalSlider v-if="'textWidth' in config.css" v-model:num="config.css.textWidth" title="宽度"></digitalSlider>
+            <digitalSlider v-if="'textWidth' in config.css" v-model:num="config.css.textWidth" title="宽度">
+            </digitalSlider>
         </div>
     </div>
     <div class="box_padding" v-if="config.config.img">
@@ -51,8 +58,8 @@
             </el-icon>
         </div>
         <div v-if="imgFlag" class="card_second_level">
-            <fontSize v-if="'fontSize' in config.css && 'fontWeight' in config.css" v-model:fontSize="config.css.fontSize"
-                v-model:fontWeight="config.css.fontWeight"></fontSize>
+            <fontSize v-if="'fontSize' in config.css && 'fontWeight' in config.css"
+                v-model:fontSize="config.css.fontSize" v-model:fontWeight="config.css.fontWeight"></fontSize>
             <iconSize v-if="'iconSize' in config.css && 'img' in config.config" v-model:num="config.css.iconSize"
                 v-model:iconName="config.config.img" @mousedown.stop @childEvent="childEvent"></iconSize>
             <colorSelection v-if="'iconColor' in config.css" v-model:iconColor="config.css.iconColor" title="选择颜色">