info

uni_modules/uni-cms/components/editor/tools/background.vue

@@ -0,0 +1,65 @@
+<template>
+	<toolbarTool type="dropdown" split :active="active" :disabled="disabled" popup-style="width: 250px;" :tooltip="{content: '背景颜色'}" @change="change">
+		<view class="icon-group">
+			<uni-icons custom-prefix="editor-icon" type="icon-background" size="20px"></uni-icons>
+			<span class="active-color" :style="{background: lastColor ? lastColor: '#fff'}"></span>
+		</view>
+
+		<template v-slot:popup="{change}">
+			<color-picker @change="change"></color-picker>
+		</template>
+	</toolbarTool>
+</template>
+
+<script>
+import ToolbarTool from "./base.vue";
+import ColorPicker from "./color-picker.vue";
+
+export default {
+	name: "background",
+	emits: ['change'],
+	props: {
+		active: [Boolean, String, Array],
+    disabled: Boolean
+	},
+	data () {
+		return {
+			lastColor: undefined
+		}
+	},
+	components: {
+		ColorPicker,
+		ToolbarTool
+	},
+	methods: {
+		change (e) {
+			if (e && e.hasOwnProperty('color')) {
+				this.lastColor = e.color
+			}
+
+			this.$emit('change', {
+				type: 'background',
+				value: e && e.color ? e.color: this.lastColor
+			})
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss">
+// #ifdef H5
+@import '@/uni_modules/uni-cms/common/style/editor-icon.css';
+// #endif
+.icon-group {
+	position: relative;
+	padding: 2px;
+	.active-color {
+		content: '';
+		width: 14px;
+		height: 2px;
+		position: absolute;
+		bottom: 4px;
+		left: 5px;
+	}
+}
+</style>