perf(input): 新增 input 组件 input 事件

This commit is contained in:
就眠仪式 2021-10-13 13:44:22 +08:00
parent 05c9518405
commit d823e9a9b8
6 changed files with 85 additions and 4 deletions

View File

@ -0,0 +1,69 @@
::: demo
<template>
<lay-input v-model="data1"></lay-input>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const data1 = ref("内容");
return {
data1
}
}
}
</script>
:::
::: demo
<template>
<lay-input placeholder="提示信息"></lay-input>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
return {
}
}
}
</script>
:::
::: demo
<template>
<lay-input v-model="data2" @input="input"></lay-input>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const data2 = ref("Input 事件");
const input = function( val ) {
console.log("当前值:" + val)
}
return {
data2,
input
}
}
}
</script>
:::

View File

@ -107,6 +107,8 @@ export default {
:::
<lay-button></lay-button>
::: field page attributes
:::

View File

@ -283,7 +283,12 @@ export default {
title: '单选框',
subTitle: 'radio',
path: '/zh-CN/components/radio',
},
},{
id: 34,
title: '输入框',
subTitle: 'input',
path: '/zh-CN/components/input',
}
]
const selected = ref(1)

View File

@ -6,7 +6,6 @@ import snippet from './snippet'
import demo from './demo'
import createContainer from './create-container'
import preWrapper from './pre-wrapper'
import type Token from 'markdown-it/lib/token'
const plugins = [
vue({

View File

@ -182,6 +182,10 @@ const zhCN = [
path: '/zh-CN/components/radio',
component: () => import('../../docs/zh-CN/components/radio.md'),
meta: { title: '单选框' },
},{
path: '/zh-CN/components/input',
component: () => import('../../docs/zh-CN/components/input.md'),
meta: { title: '输入框' },
},
],
},

View File

@ -19,9 +19,11 @@ const props = defineProps<{
placeholder?: string
}>()
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>