// 子组件 searchInput.vue
<template>
<input
class="search-input__input"
:value="value"
type="text"
:placeholder="placeholder"
placeholder-class="search-input__placeholder"
@input="onInputEvent"
@confirm="onConfirm"
@focus="onFocus"
:disabled="disabled"
:maxlength="maxlength"
confirm-type="search"
/>
</template>
<script>
export default {
props: {
value: {
type: [String],
default: ''
},
disabled: {
type: [Boolean, String],
default: false
},
maxlength: {
type: [Number],
default: 140
},
placeholder: {
type: [String],
default: '请输入'
}
},
methods: {
onClick() {
this.$emit('onClick');
},
// 获取焦点
onFocus() {
this.$emit('onFocus');
},
// 输入赋值
onInputEvent(e) {
this.$emit('update:value', e.detail.value);
},
// 清空输入框
onClear() {
this.$emit('onClear');
},
// 点击确认
onConfirm(e) {
this.$emit('onConfirm', e.detail.value);
}
}
}
</script>
// 页面引入子组件
<template>
<search-input
:placeholder="placeholder"
:value.sync="inputVal"
@onConfirm="startSearch"
@onClear="onClear"
/>
</template>
<script>
import SearchInput from '@/wxcomponents/searchInput';
export default {
components: {
SearchInput
},
methods:{
onInputEvent(val) {
console.log(val, 'onInput');
this.inputVal = val;
},
}
}
</script>
a***@sina.cn (作者)
使用原生不存在这个问题的
2021-03-03 17:17
a***@sina.cn (作者)
https://ask.dcloud.net.cn/question/71442 类似这种情况,估计是同一个原因
2021-03-03 17:29
DCloud_UNI_GSQ
回复 a***@sina.cn: 应该不是同一个
2021-03-11 16:05
DCloud_UNI_GSQ
回复 DCloud_UNI_GSQ: 你确认不使用 uni-app 就正常吗?
2021-03-11 16:06