fix

src/views/canvas1/components/tools/my-textarea.vue

@@ -0,0 +1,84 @@
+<template>
+	<div class="my-textarea">
+		<textarea
+			:placeholder="placeholder"
+			:value="modelValue"
+			@input="onInput"
+			@change="onChange"
+		></textarea>
+		<div class="bths">
+			<button><svg-icon name="mobang" size="10" /></button>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { computed, ref, markRaw, onMounted } from 'vue'
+	const emit = defineEmits(['update:modelValue', 'input', 'change'])
+	const props = defineProps({
+		modelValue: { type: String },
+		placeholder: {
+			type: String,
+			default: 'Enter the scene you want to describe...'
+		}
+	})
+	const onInput = (e) => {
+		const value = e.target.value
+		emit('update:modelValue', value)
+		emit('input', value)
+	}
+	const onChange = (e) => {
+		emit('change', e.target.value)
+	}
+</script>
+
+<style lang="less" scoped>
+	.my-textarea {
+		width: 100%;
+		height: 11.5rem;
+		border: 0.1rem solid #e4e4e7;
+		border-radius: 1rem;
+		padding: 1rem 0.5rem;
+		display: flex;
+		flex-direction: column;
+		> textarea {
+			padding: 0 0.5rem;
+			width: 100%;
+			flex: 1;
+			border: none;
+			outline: none;
+			resize: none;
+			font-family: Medium;
+			font-size: 1rem;
+			color: #333;
+			&::placeholder {
+				color: #c9c9c9;
+			}
+			&::-webkit-scrollbar {
+				width: 0.4rem;
+			}
+			&::-webkit-scrollbar-thumb {
+				border-radius: 0.4rem;
+				background: rgba(0, 0, 0, 0.2);
+			}
+			&::-webkit-scrollbar-track {
+				border-radius: 0.4rem;
+				background: rgba(0, 0, 0, 0.1);
+			}
+		}
+		> .bths {
+			padding: 0.5rem 0.5rem 0;
+			> button {
+				width: 2rem;
+				height: 2rem;
+				padding: 0;
+				border-radius: 0.4rem;
+				background-color: #f0f0f0;
+				border: 1px solid #e4e4e7;
+				&:active {
+					opacity: 0.5;
+				}
+			}
+		}
+	}
+</style>