testbookLayout.git

			@@ -1,15 +1,23 @@
			<template>
			<div class="wrap-range">
			<div class="brushSize">
			<!-- 为了不在子组件中变更值，不用v-model -->
			<input
			<div class="wrap-range">
			<input
			type="range"
			:value="brushSize"
			min="1"
			max="30"
			title="调整笔刷粗细"
			class="input-brush"
			@change="(event) => $emit('change-size', +event.target.value)"
			/>
			<el-color-picker v-model="checkColor" @change="onChangeColor"></el-color-picker>
			</div>

			<!-- <el-color-picker v-model="checkColor" @change="onChangeColor"></el-color-picker> -->
			<div>
			<input type="color" v-model="checkColor" @input="onChangeColor">
			</div>

			</div>
			</template>

			@@ -32,8 +40,8 @@
			}
			},
			methods:{
			onChangeColor(color) {
			this.$emit("change-color", color);
			onChangeColor(e) {
			this.$emit("change-color", e.srcElement.value);
			},
			}
			};
			@@ -41,9 +49,13 @@
			// const brushSize = computed(() => props.size);
			</script>
			<style lang="less" scoped>
			.brushSize {
			display: flex;
			}
			.wrap-range {
			display: flex;
			align-items: center;
			margin-right: 10px;
			.el-color-picker {
			margin-left: 20px;
			}