File size: 2,010 Bytes
89ce340 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
<template>
<textarea
class="textarea"
:class="{
'disabled': disabled,
'resizable': resizable,
}"
ref="textareaRef"
:disabled="disabled"
:value="value"
:rows="rows"
:placeholder="placeholder"
:style="{
padding: padding ? `${padding}px` : '10px',
}"
@input="$event => handleInput($event)"
@focus="$event => emit('focus', $event)"
@blur="$event => emit('blur', $event)"
@keydown.enter="$event => emit('enter', $event)"
></textarea>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
withDefaults(defineProps<{
value: string
rows?: number
padding?: number
disabled?: boolean
resizable?: boolean
placeholder?: string
}>(), {
rows: 4,
disabled: false,
resizable: false,
placeholder: '',
})
const emit = defineEmits<{
(event: 'update:value', payload: string): void
(event: 'focus', payload: FocusEvent): void
(event: 'blur', payload: FocusEvent): void
(event: 'enter', payload: KeyboardEvent): void
}>()
const handleInput = (e: Event) => {
emit('update:value', (e.target as HTMLInputElement).value)
}
const textareaRef = ref<HTMLTextAreaElement>()
const focus = () => {
if (textareaRef.value) textareaRef.value.focus()
}
defineExpose({
focus,
})
</script>
<style lang="scss" scoped>
.textarea {
outline: 0;
width: 100%;
background-color: #fff;
border: 1px solid #d9d9d9;
border-radius: $borderRadius;
padding: 10px;
transition: border-color .25s;
box-sizing: border-box;
line-height: 1.675;
resize: none;
font-family: -apple-system,BlinkMacSystemFont, 'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';
&:focus {
border-color: $themeColor;
background-color: #fff;
}
&.resizable {
resize: vertical;
}
&.disabled {
background-color: #f5f5f5;
border-color: #dcdcdc;
color: #b7b7b7;
}
&::placeholder {
color: #bfbfbf;
}
}
</style> |