2021-09-28 04:41:16 +00:00
|
|
|
<template>
|
2021-10-12 03:30:07 +00:00
|
|
|
<textarea
|
|
|
|
:value="modelValue"
|
|
|
|
:placeholder="placeholder"
|
|
|
|
:name="name"
|
2021-10-13 07:11:32 +00:00
|
|
|
:disabled="disabled"
|
2021-10-12 03:30:07 +00:00
|
|
|
class="layui-textarea"
|
2021-10-13 07:11:32 +00:00
|
|
|
:class="{ 'layui-disabled': disabled }"
|
2021-10-31 17:02:21 +00:00
|
|
|
@input="onInput"
|
|
|
|
@focus="onFocus"
|
|
|
|
@blur="onBlur"
|
2021-10-12 03:30:07 +00:00
|
|
|
/>
|
2021-09-28 04:41:16 +00:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script setup name="LayTextarea" lang="ts">
|
2021-09-29 09:22:33 +00:00
|
|
|
import { defineProps, defineEmits } from 'vue'
|
2021-09-28 04:41:16 +00:00
|
|
|
|
2021-10-12 03:30:07 +00:00
|
|
|
const props = defineProps<{
|
|
|
|
name?: string
|
|
|
|
modelValue?: string
|
|
|
|
placeholder?: string
|
2021-10-13 08:42:28 +00:00
|
|
|
disabled?: boolean
|
2021-10-12 03:30:07 +00:00
|
|
|
}>()
|
2021-09-28 04:41:16 +00:00
|
|
|
|
2021-10-31 17:02:21 +00:00
|
|
|
const emit = defineEmits(['update:modelValue', 'input', 'focus', 'blur'])
|
2021-09-28 04:41:16 +00:00
|
|
|
|
2021-10-31 17:02:21 +00:00
|
|
|
const onInput = function (event: InputEvent) {
|
2021-10-13 07:11:32 +00:00
|
|
|
const inputElement = event.target as HTMLInputElement
|
|
|
|
emit('update:modelValue', inputElement.value)
|
|
|
|
emit('input', inputElement.value)
|
2021-09-28 04:41:16 +00:00
|
|
|
}
|
2021-10-31 17:02:21 +00:00
|
|
|
|
|
|
|
const onFocus = function (event: FocusEvent) {
|
|
|
|
emit('focus', event)
|
|
|
|
}
|
|
|
|
|
|
|
|
const onBlur = function () {
|
|
|
|
emit('blur')
|
|
|
|
}
|
2021-09-28 04:41:16 +00:00
|
|
|
</script>
|