前提:
用vuecli创建 uniapp项目 主要适配安卓端,兼容h5;
项目依赖版本:
“uview-ui”: “^2.0.34”,
“vue”: “^2.6.11”,
1. 扩展自定义图标库解决方案
官方文档解决方案按照文档去操作
结果:图标显示不正确;
前期图标导入操作还是按照官方文档来操作,我说一下大家需要注意的点;
1. 图标引入
注意 1. 图标库项目设置——选择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个的话,展开失效,暂未找到好的方法,可能换组件不想造轮子;