uView2.0扩展自定义图标库、密码在安卓端显示隐藏等问题解决方案

前提:
用vuecli创建 uniapp项目 主要适配安卓端,兼容h5;
项目依赖版本:
“uview-ui”: “^2.0.34”,
“vue”: “^2.6.11”,

1. 扩展自定义图标库解决方案

官方文档解决方案按照文档去操作
结果:图标显示不正确;
前期图标导入操作还是按照官方文档来操作,我说一下大家需要注意的点;

1. 图标引入

注意 1. 图标库项目设置——选择Base64
一定要选base64
2~7的操作步骤都和官方说的一样,请移步到官方说明;
icon样式可以在iconfont.css中进行更改,这里我选用了官网图标的颜色;
在这里插入图片描述
在这里插入图片描述

2. 图标引入

核心代码: <i slot="icon" class="custom-icon custom-icon-eye-off" ></i>
其中 custom-icon-eye-off是你实际图标的名字;

  • input后置图标应用
 <u-input :adjust-position="false" type="password" class="input" shape="circle" clearable  placeholder="请输入密码" maxlength="20"suffixIconStyle="color: #909399">
    <template slot="suffix">
        <i slot="icon" class="custom-icon custom-icon-eye-off" @click="isOpen = !isOpen"></i>
    </template>
 </u-input>

效果展示:
在这里插入图片描述

  • cell单元格中应用
 <u-cell-group>
   <u-cell icon="man-add-fill" title="角色" value="测绘人员">
      <i slot="icon" class="custom-icon custom-icon-role"></i>
   </u-cell>
</u-cell-group>

在这里插入图片描述

2. 密码在安卓端显示隐藏失效

动态去更改type 在H5端是可行的 但是在安卓端就失效;

解决方案写两个input 用v-show去展示

核心就是用v-show去控制显示和隐藏;
这种方式虽然能解决但是不理想;如果有好的解决方案欢迎来戳!!!
社区里也有改源码的方案,但是不推荐!

     <view class="form-item">
        <view v-show="isOpen">
          <u-input :adjust-position="false" v-model="loginForm.password" type="password" class="input" shape="circle"
            clearable prefixIcon="lock" :prefixIconStyle="prefixIconStyle" placeholder="请输入密码" maxlength="20"
            suffixIconStyle="color: #909399">
            <template slot="suffix">
              <i slot="icon" class="custom-icon custom-icon-eye-off" @click="isOpen = !isOpen"></i>
            </template>
          </u-input>
        </view>
        <view v-show="!isOpen">
          <u-input :adjust-position="false" v-model="loginForm.password" class="input" type="text" shape="circle"
            clearable prefixIcon="lock" :prefixIconStyle="prefixIconStyle" placeholder="请输入密码" maxlength="20"
            suffixIconStyle="color: #909399">
            <template slot="suffix">
              <u-icon name="eye" @click="isOpen = !isOpen"></u-icon>
            </template>
          </u-input>
        </view>
      </view>

3. 折叠面板Collapse在安卓中设置value值之后,渲染未实现展开效果;

value值中有4个值;
h5中,value绑定多少都正常显示;
安卓中,运用排除法发现如果value值中超过3个的话,展开失效,暂未找到好的方法,可能换组件不想造轮子;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值