perf(input): input 组件新增 disabled 属性, 支持禁用

This commit is contained in:
就眠仪式 2021-10-13 14:29:34 +08:00
parent 3268d522bb
commit 5e1e09eac3
2 changed files with 36 additions and 7 deletions

View File

@ -69,9 +69,34 @@ export default {
:::
::: demo
<template>
<lay-input placeholder="禁止输入" :disabled="disabled"></lay-input>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const disabled = ref(true)
return {
disabled
}
}
}
</script>
:::
| Name | Description | Accepted Values |
| -------- | ---- | ----------------------- |
| name | 原始属性 name | -- |
| placeholder | 提示信息 | -- |
| disabled | 禁用 | `true` `false` |
| v-model | 值 | -- |
| input | 原生 input 事件 | val : 当前值 |

View File

@ -4,7 +4,9 @@
:value="modelValue"
:placeholder="placeholder"
:name="name"
:disabled="disabled"
class="layui-input"
:class="{ 'layui-disabled': disabled }"
@input="updateValue"
/>
</template>
@ -12,14 +14,16 @@
<script setup name="LayInput" lang="ts">
import { defineProps, defineEmits } from 'vue'
const props = defineProps<{
name?: string
type?: string
modelValue?: string
placeholder?: string
}>()
const props =
defineProps<{
name?: string
type?: string
modelValue?: string
placeholder?: string
disabled?: Boolean
}>()
const emit = defineEmits(['update:modelValue','input'])
const emit = defineEmits(['update:modelValue', 'input'])
const updateValue = function (event: InputEvent) {
const inputElement = event.target as HTMLInputElement