feat: 图片设置高宽度

src/components/customElement/node/index.vue

 <template>
-  <div class="zero-custom-cmp zero-custom-node"></div>
+  <div class="zero-custom-cmp zero-custom-node" v-html="selfText"></div>
 </template>
 
 <style>
@@ -13,6 +13,11 @@ export default {
       type: Object,
       default: () => {}
     }
+  },
+  computed: {
+    selfText() {
+      return this.properties ? this.properties.text || '' : '';
+    }
   }
 };
 </script>

src/store/modules/project.js

@@ -297,8 +297,6 @@ export const projectStore = {
 		 * @param {*} data
 		 */
 		activeComponent({ commit, state }, data) {
-			console.log('actions activeComponent', data);
-
 			let getTopView = node => {
 				if (node.parent && !node.parent.parent) {
 					return node;
@@ -317,7 +315,25 @@ export const projectStore = {
 		/**
 		 * 修改属性
 		 */
-		modifyProperties({ commit }, data) {
+		modifyProperties({ commit, state }, data) {
+			// 如果当前修改的是“来源”属性，节点又没有高度宽度，则取图片的高度宽度
+			if (data.label === 'source') {
+				let _props = state.activeComponent.properties;
+				if (!_props.width || !_props.height) {
+					let _url = data.value;
+					if (_url.indexOf('asset://') === 0) {
+						let uuid = _url.split('//')[1];
+						let asset = state.data.assets.find(a => a.uuid === uuid);
+						_url = asset ? asset.url : _url;
+					}
+					let _img = new Image();
+					_img.src = _url;
+					_img.onload = function () {
+						commit('modifyProperties', { label: 'width', value: _img.width });
+						commit('modifyProperties', { label: 'height', value: _img.height });
+					}
+				}
+			}
 			commit('modifyProperties', data)
 		},
 		/**

src/utils/common.js

@@ -200,21 +200,24 @@ export const styles = {
     // 根据uuid获取节点的所有父节点
     let propsMatrix = getParentCmps(component.uuid, componentList);
     propsMatrix = propsMatrix.map(completeSelfProps);
-    console.log('propsMatrix', propsMatrix);
+    // console.log('propsMatrix', propsMatrix);
     if (propsMatrix.length) {
       propsMatrix.forEach(prop => {
         inheritProps(cmpSelfProps, prop);
       });
     }
 
-    console.log('cmpSelfProps after inherit ', cmpSelfProps);
+    // console.log('cmpSelfProps after inherit ', cmpSelfProps);
     cmpSelfProps = styles.getStylesFromObj(cmpSelfProps, project);
     _.forIn(cmpSelfProps, (value, key) => {
       result += `${key}: ${value.join(' ')};`
+      if (key === 'border-color') {
+        result += 'border-style: solid;'
+      }
     });
     result += `background-position: center;background-size: 100% 100%;`
 
-    console.log('getComponentStyle', result);
+    // console.log('getComponentStyle', result);
     return result;
   }
 }

src/views/Editor/components/dynamicComponent.vue

@@ -94,10 +94,22 @@ export default {
     if (_value === undefined || _value === null) {
       _value = this.item.value;
     }
-    // console.log('dynamic mounted', this.label, _value);
 
     this.cmpValue = _value;
   },
+  watch: {
+    properties: {
+      deep: true,
+      handler: function(val) {
+        let _value = val[this.label];
+        if (_value === undefined || _value === null) {
+          _value = this.item.value;
+        }
+
+        this.cmpValue = _value;
+      }
+    }
+  },
   computed: {
     itemComponent() {
       return componentMapper[this.item.type] || {};

src/views/Editor/components/wrapper.vue

@@ -17,7 +17,8 @@
       @input="handleInput"
       @keyup.delete.prevent="changeEditRange"
       >
-      <component :is="composedComponents[componentData.type].component.default" :is-typing="false" :properties="componentData.properties" />
+      <custom-node :properties="componentData.properties"></custom-node>
+      <!-- <component :is="composedComponents[componentData.type].component.default" :is-typing="false" :properties="componentData.properties" /> -->
     </div>
   </vue-draggable-resizable>
 
@@ -25,11 +26,9 @@
 
 <script>
 import { mapState, mapGetters } from 'vuex';
-import { getComposedComponents } from '../../../utils/getComposedComponents';
 import { styles, getParentCmps } from '../../../utils/common';
 import properties from '../../../utils/properties';
-
-const composedComponents = getComposedComponents();
+import customNode from '../../../components/customElement/node/index.vue'
 
 export default {
   props: {
@@ -42,9 +41,10 @@ export default {
     }
   },
   data() {
-    return {
-      composedComponents
-    };
+    return {};
+  },
+  components: {
+    "custom-node": customNode
   },
   methods: {
     handleEnableInput() {