更新记录

1.0.0(2024-12-25) 下载此版本

  • 调整为uni_modules目录规范
  • 小程序支持渲染svg格式图片

平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
× × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序 鸿蒙元服务
× × × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

king-svg-render svg格式图片渲染组件

uniapp 更多小程序渲染有颜色图片的方案 查看更多

平台兼容

H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ 小程序 App
x 未测 未测 未测 未测 未测

代码演示

插件demo

  • king-svg-render-demo 为 demo
  • 位于 uni_modules/king-svg-render/components/king-svg-render-demo
  • 导入插件后直接使用可查看demo
    
    <template>
    <view class="svg-render-test">
        <view class="svg-render-title">
            <text class="render-title">颜色:</text>
            <input placeholder="输入颜色" v-model="svgColor"/>
        </view>
        <king-svg-render :imgSrc="imgSrc" :svgColors="[svgColor]"></king-svg-render>
    </view>
    </template>
import { ref } from 'vue'; const svgColor = ref('#eb3941') const imgSrc = ref('/static/images/order.svg') <style scoped> .svg-render-test { width: 120rpx; height: 120rpx; } .svg-render-title { display: flex; width: 400rpx; } .render-title { display: inline-block; flex: 0 0 100rpx; } input { border: 1px solid #aaa; } </style>


## API

### Props

| 参数                       | 说明                                                         | 类型             | 默认值       |
| -------------------------- | ------------------------------------------------------------ | ---------------- | ------------|
| imgSrc                     | 图片地址                                                      | <em>string</em>  | -           |
| isLocalUrl                 | 是否本地资源图片                                               | <em>boolean</em> | true        |
| svgColors                  | 图片颜色                                                      | <em>Array</em>   | -           |

隐私、权限声明

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

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

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

许可协议

MIT协议

暂无用户评论。

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