85 lines
1.7 KiB
Vue
85 lines
1.7 KiB
Vue
<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>
|