fix: *

wya-team · Sep 2, 2022 · 97cea35 · 97cea35
1 parent 6932c54
commit 97cea35
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 6 deletions.
diff --git a/packages/assist/examples/sortable-modules/tpl/editor.vue b/packages/assist/examples/sortable-modules/tpl/editor.vue
@@ -32,6 +32,30 @@
 				@change="v => handleChange(v, 'content')"
 			/>
 		</EditorCell>
+		<EditorCell :label-width="100" label="卡片背景：" multiple>
+			<EditorRadio
+				:model-value="$attrs.backgroundType"
+				:data-source="radios"
+				@change="v => handleChange(v, 'backgroundType')"
+			/>
+			<div style="margin-top: 10px;">
+				<div v-show="$attrs.backgroundType == 1">
+					<EditorColor
+						:color="$attrs.backgroundColor"
+						default="#fff"
+						alpha
+						@change="v => handleChange(v, 'backgroundColor')"
+					/>
+				</div>
+				<div v-show="$attrs.backgroundType == 2">
+					<EditorUploadPicker
+						:model-value="$attrs.backgroundImage ? [$attrs.backgroundImage] : []"
+						tips="建议宽度750像素"
+						@change="v => handleChange(v[0], 'backgroundImage')"
+					/>
+				</div>
+			</div>
+		</EditorCell>
 	</EditorLayout>
 </template>
 
@@ -41,7 +65,9 @@ import {
 	EditorCell,
 	EditorLayout,
 	EditorSlider,
-	EditorInput
+	EditorInput,
+	EditorColor,
+	EditorUploadPicker
 } from "../../../src/editor";
 
 const emit = defineEmits(['change']);
@@ -56,15 +82,27 @@ const paddingRadios = [
 		value: 1,
 	}
 ];
+const radios = [
+	{
+		label: '纯色背景',
+		value: 1,
+
+	},
+	{
+		label: '自定义背景图',
+		value: 2,
+	}
+];
 
 const handleChange = (value, key) => {
 	emit('change', { [key]: value });
 };
 </script>
 
 <style lang="scss">
-$block: vm-basic-TPL-editor;
+$block: vm-basic-tpl-editor;
+
 @include block($block) {
-	
+	// any
 }
 </style>
diff --git a/packages/assist/examples/sortable-modules/tpl/root.js b/packages/assist/examples/sortable-modules/tpl/root.js
@@ -15,12 +15,14 @@ export const tpl = {
 
 		inner: 0,
 		backgroundColor: '#fff',
+		backgroundImage: 'https://oss.ruishan666.com/image/xcx/180313/942996157518/10053669,2880,1800.jpg',
+		backgroundType: 1,
 		paddingVertical: 0,
 		paddingHorizontal: 0,
 		borderRadius: 0,
 		content: ''
 	},
-	dataValidity: (res = {}) => {
+	dataValidity: () => {
 		return null;
 	}
 };
diff --git a/packages/assist/src/viewer/layout.vue b/packages/assist/src/viewer/layout.vue
@@ -62,7 +62,7 @@ const wrapperStyle = computed(() => {
 
 const contentStyle = computed(() => {
 	if (props.content) return props.content;
-	let { backgroundColor, backgroundImage, backgroundSize, borderRadius } = selfAttrs.value;
+	let { backgroundType, backgroundColor, backgroundImage, backgroundSize, borderRadius } = selfAttrs.value;
 	let { 
 		backgroundColor: $backgroundColor, 
 		backgroundImage: $backgroundImage, 
@@ -77,9 +77,12 @@ const contentStyle = computed(() => {
 	backgroundSize = backgroundSize || $backgroundSize || 'cover';
 	borderRadius = borderRadius || $borderRadius || 0;
 	
+	// 注意，如果有值，1表示纯色背景
+	const allowBackgroundImage = (typeof backgroundType === 'undefined' || backgroundType !== 1) 
+		&& backgroundImage;
 	return {
 		background: `${backgroundColor}`,
-		backgroundImage: backgroundImage 
+		backgroundImage: allowBackgroundImage 
 			? `url(${backgroundImage})`
 			: undefined,
 		backgroundSize,