更新记录
1.0.0(2025-01-21) 下载此版本
提交组件核心代码
平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | - | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
√ | - | - | - | - | - | - | - | - | - | - |
其他
多语言 | 暗黑模式 | 宽屏模式 |
---|---|---|
× | × | √ |
使用
<template>
<sx-svg name="upload" />
<sx-svg name="upload" size="60" color="red" />
<sx-svg name="upload" width="120" height="120" color="#000" />
<sx-svg name="order" />
<sx-svg name="order" size="60" color="red" />
<sx-svg name="order" width="120" height="120" color="#000" />
</template>
Props
参数 | 必填 | 说明 | 类型 | 默认值 |
---|---|---|---|---|
name | 是 | svg 文件名,不含后缀 | Srting | - |
size | 否 | svg 的宽高 设置 number 或 string 类型时相当于宽高一样 设置 array 时候第一位为宽度,第二位为高度 |
Number String Array | - |
width | 否 | svg 的宽度 | Number String | 40 |
height | 否 | svg 的高度 | Number String | 40 |
color | 否 | svg 的颜色,只支持纯色 | String | - |
unit | 否 | 宽度高度的尺寸单位 | String | rpx |
watch | 否 | 是否需要监听参数变化,用于更新组件效果 | Boolean | 开发环境:true 生产环境:false |
说明
svg 文件目录
svg 文件默认存在项目的/static/svg 目录下,目录定义在组件内的 SVG_FILE_PATH 常量,可以根据自己需要修改,但必须是在 static 目录下(其实 assets 目录我没测试过 ~( ´▽ `) )
const SVG_FILE_PATH = "/static/svg";
const path = `${SVG_FILE_PATH}/${name}.svg`;
watch 参数
组件内部使用 $watch 监听 $props 进行更新,但实际应用场景中除了动态 icon(也可以通过 v-if 或 v-show 实现)外,在发布到生产环境时 icon 是很少会改变的。因此在开发环境中默认值为 true,方便开发过程中修改 props 参数后能更新组件,生产环境则默认为 false,以减少不必要的性能消耗(即便是很少的性能消耗...)。