perf(textarea): 新增 disabled name 属性 input 事件

This commit is contained in:
就眠仪式 2021-10-13 15:11:32 +08:00
parent 5e1e09eac3
commit b5b79be4ef
4 changed files with 99 additions and 2 deletions

View File

@ -0,0 +1,83 @@
::: demo
<template>
<lay-textarea placeholder="请输入描述" v-model="data1"></lay-textarea>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const data1 = ref("");
return {
data1
}
}
}
</script>
:::
::: demo
<template>
<lay-textarea placeholder="Input 事件" v-model="data2" @input="input"></lay-textarea>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const data2 = ref("");
const input = function( val ) {
console.log(val)
}
return {
data2,
input
}
}
}
</script>
:::
::: demo
<template>
<lay-textarea placeholder="禁止输入" v-model="data3" :disabled="disabled"></lay-textarea>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const data3 = ref("");
const disabled = ref(true)
return {
data3,
disabled
}
}
}
</script>
:::
| Name | Description | Accepted Values |
| -------- | ---- | ----------------------- |
| name | 原始属性 name | -- |
| placeholder | 提示信息 | -- |
| disabled | 禁用 | `true` `false` |
| v-model | 值 | -- |
| input | 原生 input 事件 | val : 当前值 |

View File

@ -288,6 +288,11 @@ export default {
title: '输入框', title: '输入框',
subTitle: 'input', subTitle: 'input',
path: '/zh-CN/components/input', path: '/zh-CN/components/input',
},{
id: 35,
title: '文本域',
subTitle: 'textarea',
path: '/zh-CN/components/textarea',
} }
] ]

View File

@ -186,6 +186,10 @@ const zhCN = [
path: '/zh-CN/components/input', path: '/zh-CN/components/input',
component: () => import('../../docs/zh-CN/components/input.md'), component: () => import('../../docs/zh-CN/components/input.md'),
meta: { title: '输入框' }, meta: { title: '输入框' },
},{
path: '/zh-CN/components/textarea',
component: () => import('../../docs/zh-CN/components/textarea.md'),
meta: { title: '文本域' },
}, },
], ],
}, },

View File

@ -3,7 +3,9 @@
:value="modelValue" :value="modelValue"
:placeholder="placeholder" :placeholder="placeholder"
:name="name" :name="name"
:disabled="disabled"
class="layui-textarea" class="layui-textarea"
:class="{ 'layui-disabled': disabled }"
@input="updateValue" @input="updateValue"
/> />
</template> </template>
@ -15,11 +17,14 @@ const props = defineProps<{
name?: string name?: string
modelValue?: string modelValue?: string
placeholder?: string placeholder?: string
disabled?: Boolean
}>() }>()
const emit = defineEmits(['update:modelValue']) const emit = defineEmits(['update:modelValue', 'input'])
const updateValue = function (event: InputEvent) { const updateValue = function (event: InputEvent) {
emit('update:modelValue', (event.target as HTMLInputElement).value) const inputElement = event.target as HTMLInputElement
emit('update:modelValue', inputElement.value)
emit('input', inputElement.value)
} }
</script> </script>