perf(textarea): 新增 disabled name 属性 input 事件
This commit is contained in:
parent
5e1e09eac3
commit
b5b79be4ef
83
docs/docs/zh-CN/components/textarea.md
Normal file
83
docs/docs/zh-CN/components/textarea.md
Normal 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 : 当前值 |
|
@ -288,6 +288,11 @@ export default {
|
||||
title: '输入框',
|
||||
subTitle: 'input',
|
||||
path: '/zh-CN/components/input',
|
||||
},{
|
||||
id: 35,
|
||||
title: '文本域',
|
||||
subTitle: 'textarea',
|
||||
path: '/zh-CN/components/textarea',
|
||||
}
|
||||
]
|
||||
|
||||
|
@ -186,6 +186,10 @@ const zhCN = [
|
||||
path: '/zh-CN/components/input',
|
||||
component: () => import('../../docs/zh-CN/components/input.md'),
|
||||
meta: { title: '输入框' },
|
||||
},{
|
||||
path: '/zh-CN/components/textarea',
|
||||
component: () => import('../../docs/zh-CN/components/textarea.md'),
|
||||
meta: { title: '文本域' },
|
||||
},
|
||||
],
|
||||
},
|
||||
|
@ -3,7 +3,9 @@
|
||||
:value="modelValue"
|
||||
:placeholder="placeholder"
|
||||
:name="name"
|
||||
:disabled="disabled"
|
||||
class="layui-textarea"
|
||||
:class="{ 'layui-disabled': disabled }"
|
||||
@input="updateValue"
|
||||
/>
|
||||
</template>
|
||||
@ -15,11 +17,14 @@ const props = defineProps<{
|
||||
name?: string
|
||||
modelValue?: string
|
||||
placeholder?: string
|
||||
disabled?: Boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
const emit = defineEmits(['update:modelValue', 'input'])
|
||||
|
||||
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>
|
||||
|
Loading…
Reference in New Issue
Block a user