更新记录

1.0.6（2025-03-14） 下载此版本

去掉默认的背景颜色

1.0.5（2025-03-13） 下载此版本

更新使用文档

1.0.4（2025-03-13） 下载此版本

添加阻止事件冒泡的说明

查看更多

平台兼容性

uni-app

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
√ √ √ √ √ - - - -
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 快应用-华为 快应用-联盟
√ - - - - - - - - - -

其他

多语言 暗黑模式 宽屏模式
× × √

组件名: xt-icon

安装方式

本组件符合 easycom 规范，HBuilderX 3.1.0 起，只需将本组件导入项目，在页面 template 中即可直接使用，无需在页面中 import 和注册 components

注意事项

如何阻止事件冒泡

vue2：在组件上直接使用@click.native.stop，如：<xt-icon @click.native.stop='click'></xt-icon>; vue3：由于 vue3 没有native修饰符,所以不能直接在组件上使用.stop修饰符,只能嵌套一层view标签,在外层view上添加@click.stop阻止冒泡

基本用法

<template>
    <view class="icon">
        <xt-icon></xt-icon>
    </view>
</template>

xt-icon 属性

属性 类型 描述
name String 图标名称
size String |Number 图标大小
color String 图标颜色
top String 图标上边距
bottom String 图标下边距
left String 图标左边距
right String 图标右边距
mode String 图片显示模式(非字体图标)
width String |Number 图片宽度(非字体图标)
height String |Number 图片高度(非字体图标)
radius String |Number 图片圆角(非字体图标)
stop Boolean 是否阻止事件冒泡
click Function 点击图标时触发的事件

说明

  1. 当 name 不为 xt 开头的内容,即当作图片显示
  2. 图标集合在导入项目后的 文件夹中 , 用浏览器打开 图标集.html文件即可,点击对应图标即可复制

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

无

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉
加载更多...
插件问答 我要提问

使用中有什么不明白的地方，就向插件作者提问吧~ 我要提问

加载更多...