uni-app ＜icon＞标签type不生效问题

uni-app 标签type不生效问题问题场景描述登录页面密码框可见与不可见使用组件时，type为eye-filled和eye-slash-filled的类型时，图标未正常显示。经查阅资料：是由于项目中使用 uni-ui 的 uni-icon 组件与H5 平台新增内置的icon 组件命名冲突问题。代码示例<view v-if="password"><icon v-if="isS

ljw@lq

2613人浏览 · 2022-01-24 09:29:06

ljw@lq · 2022-01-24 09:29:06 发布

uni-app 标签type不生效问题

问题场景描述

登录页面密码框可见与不可见使用组件时，type为eye-filled和eye-slash-filled的类型时，图标未正常显示。经查阅资料：是由于项目中使用 uni-ui 的 uni-icon 组件与H5 平台新增内置的icon 组件命名冲突导致的。

代码示例

<view v-if="password">
	<icon v-if="isShowP" @click="isShowP = false" class="uIconR" type="eye-filled" color="#8a8a8a"
		size="20"></icon>
	<icon v-else class="uIconR" @click="isShowP = true" type="eye-slash-filled" color="#8a8a8a" size="20">
	</icon>
</view>

解决方法

自己重新引入组件，并起别名。
代码如下：

<template>
	<view v-if="password">
	<uniIcons v-if="isShowP" @click="isShowP = false" class="uIconR" type="eye-filled" color="#8a8a8a"
		size="20"></uniIcons>
	<uniIcons v-else class="uIconR" @click="isShowP = true" type="eye-slash-filled" color="#8a8a8a" size="20">
	</uniIcons>
</view>
</template>
<script>
	import uniIcons from '../../components/uni/uni-icons/uni-icons.vue'
	export default {
		components:{uniIcons:uniIcons},
		data() {
			return {
				username: '',
				password: '',
				isShowP: true
			}
		}
	}
</script>