Commit 98853578 authored by 张晨辰's avatar 张晨辰

feat: 图片设置高宽度

parent 5fab8f2b
<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>
......@@ -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)
},
/**
......
......@@ -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;
}
}
......
......@@ -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] || {};
......
......@@ -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() {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment