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: '输入框',
|
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',
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
|
@ -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: '文本域' },
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user