perf(input): foucs blur 原生事件绑定

This commit is contained in:
就眠仪式 2021-10-27 14:02:54 +08:00
parent da8c0c190f
commit 55fc38ac49
6 changed files with 24 additions and 9 deletions

View File

@ -52,6 +52,9 @@ export default {
::: :::
::: title 使用插槽
:::
::: demo ::: demo
<template> <template>

View File

@ -112,4 +112,6 @@ export default {
| placeholder | 提示信息 | -- | | placeholder | 提示信息 | -- |
| disabled | 禁用 | `true` `false` | | disabled | 禁用 | `true` `false` |
| v-model | 值 | -- | | v-model | 值 | -- |
| input | 原生 input 事件 | val : 当前值 | | input | 原生 input 事件 | event : 事件对象 |
| foucs | 原生 foucs 事件 | event : 事件对象 |
| blur | 原生 blur 事件 | -- |

View File

@ -17,7 +17,8 @@
[新增] rate 评分 theme 属性, 支持自定义主题。<br> [新增] rate 评分 theme 属性, 支持自定义主题。<br>
[新增] progress 文档, 区分 theme 与 size 使用案例。<br> [新增] progress 文档, 区分 theme 与 size 使用案例。<br>
[新增] dropdown 下拉组件 dropdown-item 点击监听, 隐藏 content 内容。<br> [新增] dropdown 下拉组件 dropdown-item 点击监听, 隐藏 content 内容。<br>
[修复] rate 评分 modelValue 属性, 双绑逻辑。<br> [新增] input 输入框 foucs blur 原生事件绑定。<br>
[修复] rate 评分 modelValue 属性, 支持双向数据绑定。<br>
</lay-timeline-item> </lay-timeline-item>
<lay-timeline-item title="0.2.0"> <lay-timeline-item title="0.2.0">
[新增] carousel 轮播 anim 属性, 支持 default updown 不同方向轮播。<br> [新增] carousel 轮播 anim 属性, 支持 default updown 不同方向轮播。<br>

View File

@ -16,4 +16,4 @@ layui - vue谐音类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库 ,
<lay-timeline-item title="2017年layui 里程碑版本 2.0 发布" simple></lay-timeline-item> <lay-timeline-item title="2017年layui 里程碑版本 2.0 发布" simple></lay-timeline-item>
<lay-timeline-item title="2016年layui 首个版本发布" simple></lay-timeline-item> <lay-timeline-item title="2016年layui 首个版本发布" simple></lay-timeline-item>
<lay-timeline-item title="2015年layui 孵化" simple></lay-timeline-item> <lay-timeline-item title="2015年layui 孵化" simple></lay-timeline-item>
</lay-timeline> </lay-timeline>

View File

@ -1,8 +1,7 @@
<template> <template>
<div class="layui-colla-item"> <div class="layui-colla-item">
<h2 class="layui-colla-title" @click="showHandle"> <h2 class="layui-colla-title" @click="showHandle">
{{ title {{ title }}<i class="layui-icon layui-colla-icon">{{ isShow ? '' : '' }}</i>
}}<i class="layui-icon layui-colla-icon">{{ isShow ? '' : '' }}</i>
</h2> </h2>
<div class="layui-colla-content" :class="isShow ? 'layui-show' : ''"> <div class="layui-colla-content" :class="isShow ? 'layui-show' : ''">
<p> <p>

View File

@ -7,7 +7,9 @@
:disabled="disabled" :disabled="disabled"
class="layui-input" class="layui-input"
:class="{ 'layui-disabled': disabled }" :class="{ 'layui-disabled': disabled }"
@input="updateValue" @input="onInput"
@focus="onFocus"
@blur="onBlur"
/> />
</template> </template>
@ -23,11 +25,19 @@ const props =
disabled?: boolean disabled?: boolean
}>() }>()
const emit = defineEmits(['update:modelValue', 'input']) const emit = defineEmits(['update:modelValue', 'input', 'focus', 'blur'])
const updateValue = function (event: InputEvent) { const onInput = function (event: InputEvent) {
const inputElement = event.target as HTMLInputElement const inputElement = event.target as HTMLInputElement
emit('update:modelValue', inputElement.value) emit('update:modelValue', inputElement.value)
emit('input', inputElement.value) emit('input', event)
}
const onFocus = function (event: FocusEvent) {
emit('focus', event)
}
const onBlur = function () {
emit('blur')
} }
</script> </script>