产品分类:
uniapp/小程序/微信
PC开发环境操作系统:
Windows
PC开发环境操作系统版本号:
Windows 10 企业版
HBuilderX类型:
正式
HBuilderX版本号:
3.1.2
第三方开发者工具版本号:
1.03
基础库版本号:
2.14.4
项目创建方式:
HBuilderX
示例代码:
// 子组件 searchInput.vue
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"
/>
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);
}
}
}
// 页面引入子组件
:placeholder="placeholder"
:value.sync="inputVal"
@onConfirm="startSearch"
@onClear="onClear"
/>
import SearchInput from '@/wxcomponents/searchInput';
export default {
components: {
SearchInput
},
methods:{
onInputEvent(val) {
console.log(val, 'onInput');
this.inputVal = val;
},
}
}
操作步骤:
引入包含input的组件,安卓真机调试微信小程序时。先输入随机内容点击搜索后,再次聚焦输入框,此时不输入内容,直接取消聚焦会触发@input事件,并且触发@input事件是触发页面传入组件的input事件,而不是组件内的input事件
预期结果:
输入内容确定,再次聚焦不输入内容直接取消聚焦,不触发@input事件。
实际结果:
安卓真机调试微信小程序时。先输入随机内容点击搜索后,再次聚焦输入框,此时不输入内容,直接取消聚焦会触发@input事件,并且触发@input事件是触发页面传入组件的input事件,而不是组件内的input事件。