uni-app input组件bug

uni-app input组件bug

项目信息 详情
产品分类 uniapp/小程序/微信
PC开发环境 Windows
操作系统版本 window 10
HBuilderX版本 4.64
第三方开发者工具版本 1.06.2503281
基础库版本 3.8.3
项目创建方式 CLI
CLI版本 不知道

示例代码：

<script>
export default {
options: { styleIsolation: 'shared' }
}
</script>
<script setup>
import { computed } from 'vue';
const props = defineProps({
modelValue: {
type: String,
default: '',
},
placeholder:{
type: String,
default: '',
}
});
const emits = defineEmits(['update:modelValue', 'search']);
const value = computed({
set(val){
emits('update:modelValue', val);
},
get(){
return props.modelValue;
}
});
const serach = (e) => {  
console.log('这里');  
emtis('search', e.detail.value);  
}  
</script>  
<template>
<view class="search-container">
<i class="iconfont icon-sousuo" mr-[16rpx] text="![25rpx] [rgba(0,0,0,0.45)]" />
<input  
class="uni-input"  
v-model="value"  
placeholder="props.placeholder"
  placeholder-style="color: rgba(0,0,0,0.45);"
  type="text"
  [@confirm](/user/confirm)="search"
/>
</view>
</template>  

.search-container{
width: 100%;
display: flex;
align-items: center;
background: rgba(241,242,246,0.65);
border-radius: 36rpx;
border: 1rpx solid rgba(0,0,0,0.15);
height: 72rpx;
padding: 0 24rpx;
.uni-input{
border: 0rpx;
background: transparent;
padding: 0rpx;
height: 100%;
font-weight: 400;
font-size: 24rpx;
color: rgba(0,0,0,0.85);
}
}

操作步骤：

  • 引入这个组件，绑定值，然后输入值回车

预期结果：

实际结果：

bug描述：

  • input的@confirm事件在自定义组件中不触发，在页面里面能触发，示例代码是自定义组件的代码

更多关于uni-app input组件bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

你打错字了
const serach = (e) 应该是 search 而不是 serach

更多关于uni-app input组件bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html


根据您提供的代码和问题描述，input组件的@confirm事件未触发的原因可能有以下几点：

  1. 事件绑定名称不一致： 代码中定义的事件处理函数是serach（拼写错误），但模板中绑定的是[@confirm](/user/confirm)="search"，两者名称不匹配。

  2. emits拼写错误： 在serach函数内部，emtis拼写错误，应该是emits。

  3. 组件事件传递问题： 在小程序自定义组件中，input的confirm事件需要手动触发父组件事件。

建议修改如下：

const search = (e) => {
  console.log('confirm事件触发');
  emits('search', e.detail.value);
}

同时确保模板中事件绑定与函数名一致：

<input
  [@confirm](/user/confirm)="search"
/>

如果是小程序平台，可能需要添加:confirm-type属性：

<input
  confirm-type="search"
  [@confirm](/user/confirm)="search"
/>
回到顶部