uni-app inputs组件 input类型 新增左边自定义图标 一键清除数据功能 控制密码显隐功能 - 取舍 在新版编译器下调整
uni-app inputs组件 input类型 新增左边自定义图标 一键清除数据功能 控制密码显隐功能 - 取舍 在新版编译器下调整
原有的组件等，需要根据其中的注意事项做出一些调整及优化，以确保使用并提升性能。
引用组件时，不支持传入 Date 类型的属性，因此 inputs、pickers-date 组件，需要调整 props 的定义。使用一个 String/Number 类型的属性来接收传入的日期值，根据这个值生成最终的 Date 类型值。
临时解决方案：
如果使用此组件库的开发者运行到微信小程序报错的话，可以临时关闭编译为微信小程序原生组件的配置。详见：manifest.json->mp-weixin 将其设置为 false 即可。
8 回复
https:https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/static/images/ask-footer@2x.png
在 uni-app 中，为 input 组件添加左边自定义图标、一键清除数据功能以及控制密码显隐功能，可以通过结合 uView UI 库或手动编写组件来实现。以下是一个简单的代码示例，展示如何在 uni-app 中实现这些功能，而不依赖第三方库（尽管使用成熟的 UI 库会更简便）。
1. 左边自定义图标
使用 uni-app 的插槽（slot）机制，可以方便地添加自定义图标。
<template>
<view class="input-wrapper">
<image class="left-icon" src="/static/icon.png" @click="handleIconClick"></image>
<input
type="text"
v-model="inputValue"
placeholder="请输入内容"
@input="handleInput"
@focus="handleFocus"
@blur="handleBlur"
/>
<image v-if="hasFocus && inputValue" class="clear-icon" src="/static/clear.png" @click="clearInput"></image>
</view>
</template>
<script>
export default {
data() {
return {
inputValue: '',
hasFocus: false
};
},
methods: {
handleInput(e) {
this.inputValue = e.detail.value;
},
handleFocus() {
this.hasFocus = true;
},
handleBlur() {
this.hasFocus = false;
},
handleIconClick() {
// 图标点击事件处理
console.log('图标被点击');
},
clearInput() {
this.inputValue = '';
this.hasFocus = false; // 如果失去焦点时自动隐藏清除图标，这里也需要重置
}
}
};
</script>
<style scoped>
.input-wrapper {
position: relative;
display: flex;
align-items: center;
}
.left-icon {
position: absolute;
left: 10px;
width: 20px;
height: 20px;
}
.clear-icon {
position: absolute;
right: 10px;
width: 20px;
height: 20px;
}
input {
padding-left: 35px; /* 留出图标的空间 */
}
</style>
2. 控制密码显隐功能
对于密码输入框，可以通过绑定 type 属性来控制显示或隐藏密码。
<template>
<view>
<input
type="{{showPassword ? 'text' : 'password'}}"
v-model="password"
placeholder="请输入密码"
/>
<button @click="togglePassword">{{showPassword ? '隐藏' : '显示'}}密码</button>
</view>
</template>
<script>
export default {
data() {
return {
password: '',
showPassword: false
};
},
methods: {
togglePassword() {
this.showPassword = !this.showPassword;
}
}
};
</script>
以上代码分别展示了如何在新版 uni-app 编译器下实现左边自定义图标、一键清除数据以及控制密码显隐功能。你可以根据实际需求进一步调整样式和功能。
