【Uni-App】uview 开发多端应用,密码显示隐藏功能不生效问题

这篇具有很好参考价值的文章主要介绍了【Uni-App】uview 开发多端应用,密码显示隐藏功能不生效问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

出现的问题:

使用uview组件u-input框密码绑定时会出现右侧密码显隐图标不显示的问题

思路:

1.看了下uview源码,发现这有一段注释,我们需要把源码修改一下,问题出在这里

【Uni-App】uview 开发多端应用,密码显示隐藏功能不生效问题,uni-app

 【Uni-App】uview 开发多端应用,密码显示隐藏功能不生效问题,uni-app

 这行代码修改为 :password="password || type === 'password' || false"

2.其次发现uview源码里面并没有密码显隐的图标,这就需要我们在使用的页面自己去添加

Input 输入框 | uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架 (uviewui.com)

这就需要在u-input框里面使用到后置插槽了

代码

demo样式

【Uni-App】uview 开发多端应用,密码显示隐藏功能不生效问题,uni-app

1.修改视图层代码,来动态改变icon的样式

	<u-input confirmType="done" v-model="accountForm.userPassword"
									:password="password" :clearable="true" placeholder="请输入您的登录密码"
									:placeholder-style="placeholderStyle" border="none">
									<template slot="suffix">
										<u-icon :name="password ? 'eye': 'eye-fill'" size="24"
											@click="handleShowPass"></u-icon>
									</template></u-input> 

2.逻辑层代码控制密码的显隐

	handleShowPass() {
				this.password = ! this.password
			}

实现效果图如下:

【Uni-App】uview 开发多端应用,密码显示隐藏功能不生效问题,uni-app

【Uni-App】uview 开发多端应用,密码显示隐藏功能不生效问题,uni-app文章来源地址https://www.toymoban.com/news/detail-649312.html

到了这里,关于【Uni-App】uview 开发多端应用,密码显示隐藏功能不生效问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • WebStorm开发uni-app ,用vue2实现手机APP(apk) + 微信小程序多端项目开发方案 webstorm开发的uniapp + hbuilderx进行app 小程序打包

    我们主要分析了如下小程序开发框架,主要包括: 框架 技术栈 案例 微信小程序 支付宝小程序 百度小程序 头条小程序 H5 App uni-app Vue 丰富 ⭕ ⭕️ ⭕️ ⭕ ⭕️ ⭕ Taro React 丰富 ⭕ ⭕ ⭕ ⭕ ⭕ ⭕ wepy Vue 丰富 ⭕ ❌ ❌ ❌ ❌ ❌ mpvue Vue 丰富 ⭕ ❌ ❌ ❌ ⭕️ ❌  首先,就要排

    2024年02月11日
    浏览(75)
  • uView 在 uni-app 中的使用

    提示:正文内容: uView 官网: https://www.uviewui.com uView 是 uni-app 生态专用的 UI 框架 关于uView的取名来由,首字母u来自于uni-app首字母,uni-app是基于Vue.js,Vue和View(延伸为UI、视图之意)同音,同时view组件是uni-app中 最基础,最重要的组件,故取名uView,表达源于uni-app和Vue之意,

    2024年02月15日
    浏览(53)
  • 【uni-app项目如何引入 uView组件库】

    uView官方文档 第一步: 在公司创建完成uniapp项目后引入uView 第二步: 您如果是使用HBuilder X创建的uniapp项目,使用uView组件库的话需要在HBuilder X下载插件库 下载 uni_modules ,(如果这个看不懂可以看官方文档) (1) HBuilder X插件库中下载 uni_modules 现在是已经将 uView导入到项目中了

    2024年02月05日
    浏览(59)
  • uni-app uView自定义底部导航栏

    因项目需要自定义底部导航栏,我把它写在了组件里,基于uView2框架写的(vue2);   在components下创建tabbar.vue文件,代码如下:  app.vue (有没有大佬知道为什么这个样式加载app.vue里才生效)  pages.json配置 页面使用: ( mine.vue ) 注: current是底部导航栏的下标,你在tabb

    2024年02月14日
    浏览(83)
  • 【uni-app】安装uView-ui组件步骤

    uView是uni-app生态专用的UI框架,uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码, 可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台(引言自uni-app网)。但目前除微信小程序,其它小程序平台的兼容可能存在一些问题,后

    2024年02月14日
    浏览(45)
  • uni-app+uView实现点击查看大图片的效果

    参数说明

    2024年02月10日
    浏览(49)
  • uni-app 之 安装uView,安装scss/sass编译

    uni-app 之 安装uView,安装scss/sass编译 image.png image.png image.png 点击HBuilder X 顶部,工具,插件安装,安装新插件 image.png image.png 安装成功! 注意,一定要先登录才可以安装 image.png 1. 引入uView主JS库 在项目根目录中的 main.js 中,引入并使用uView的JS库,注意这两行要放在 import Vu

    2024年02月10日
    浏览(53)
  • uni-app使用uview-ui实现动态更改底部tabbar

    需求:根据不同的权限(用户 0, 物业 1)展示不同的tabbar 这里使用的是uview-ui@1.8.4 tabbar 在utils文件夹下新建一个tabbar.js文件,来存储不同权限下的底部导航数据 在page.json文件里,把tabbar里的几个页面去重放进去tabBar。 使用vuex 新建store 文件夹存储相关数据 在入口文件 mai

    2024年02月12日
    浏览(55)
  • 使用uni-app+uview创建小程序工程并支持请求后端接口

    一、使用工具:     1.hubilderx   下载地址:HBuilderX-高效极客技巧     2.微信开发者工具   下载地址:微信开发者工具下载地址与更新日志 | 微信开放文档     3.uview组件库API:Color 色彩 | uView 2.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架 二、使用hubuilderx创建uni-app项目

    2024年02月11日
    浏览(62)
  • uni-app使用uView打开弹出层后输入框聚焦时placeholder错位问题

    这里就不放效果了,大概意思就是在使用uView的popus时,在底部弹出后,如果弹窗中的输入框会造成一瞬间的placeholder文字错位,这个问题的主要是因为uView安全区适配导致 uView相关文档 popus源码 它会自动判断在并且在IPhone X等机型的时候,给元素加上一个适当底部内边距,从

    2024年02月19日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包