feat:"新增自定义属性"

Grnetsky · Jan 17, 2024 · 9c35420 · 9c35420
1 parent 16ce56c
commit 9c35420
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 7 deletions.
diff --git a/src/components/Form.vue b/src/components/Form.vue
@@ -10,11 +10,11 @@ const props = defineProps(['formList'])
           <!--          输入框-->
           <el-input v-model="i.bindProp[i.prop]" :placeholder="i.option?.placeholder || '请输入'" v-if="i.type==='input'" @[i.event]="i.func" :type="i.option?.type||'text'"/>
 <!--          文件框-->
-            <el-button v-else-if="i.type==='file'"><label for="input" >
-              <input id="input" style="display: none" type="file" :accept="i.option?.accept || '*/*'" @[i.event]="i.func" >
-                选择文件
-              </label>
-            </el-button>
+          <el-button v-else-if="i.type==='file'"><label for="input" >
+            <input id="input" style="display: none" type="file" :accept="i.option?.accept || '*/*'" @[i.event]="i.func" >
+              选择文件
+            </label>
+          </el-button>
 <!--          数字框-->
           <el-input-number :placeholder="i.option?.placeholder || '请输入'" :step="i.option?.step || 1" v-model="i.bindProp[i.prop]" :min="i.option?.min ?? -Infinity" :max="i.option?.max ?? Infinity" @[i.event]="i.func" v-else-if="i.type==='number'"/>
 <!--          选择框-->

diff --git a/src/components/PenProps/Appearance.vue b/src/components/PenProps/Appearance.vue
@@ -10,7 +10,7 @@ const multiPen = ref(false)
 const defaultConfig = deepClone(appearanceProps)  //深拷贝保存默认配置
 let m = reactive(appearanceProps) // 响应式数据源
 let activePen = reactive({target:{}})
-
+let otherProps = reactive({props:[]})
 // 更新属性方法
 function updateFunc(prop){
   return (value)=>{
@@ -43,6 +43,25 @@ onMounted(()=>{
         }
       }else{  // 修改一个
         activePen.target=reactive(args[0])
+        otherProps.props = []
+          if(activePen.target.props){
+            let otherProp = {
+              title:"其他",
+              children:[]
+            }
+            activePen.target.props.forEach((prop)=>{
+              otherProp.children.push({
+                title:prop.title,
+                type:prop.type,
+                prop:prop.prop,
+                bindProp:m,
+                event:prop.event,
+                func:updateFunc(prop.prop)
+              }
+              )
+            })
+            otherProps.props.push(otherProp)
+          }
         mergeProps(m,defaultConfig)
         mergeProps(m,activePen.target)
         const penRect = meta2d.getPenRect(toRaw(activePen.target))
@@ -828,8 +847,9 @@ let showMap = computed(()=>{
        i.multiShow?i.children = i.children.filter(item=>item.multiShow):""
       return i.multiShow
     })
+  }else if(!multiPen.value && otherProps){
+    return map.concat(otherProps.props)
   }
-  return map
 })
 
 </script>

diff --git a/src/data/icons.js b/src/data/icons.js
@@ -219,6 +219,13 @@ export const defaultIcons =[
                     height: 100,
                     name: 'image',
                     image: '/img/logo.png',
+                    props:[
+                        {   title:"图片地址",
+                            type:"input",
+                            prop:"image",
+                            event:"change",
+                        },
+                    ]
                 },
             },
             {