更新记录

1.0.10（2024-05-07） 下载此版本

• 【结构优化】优化组件
• 【开发版本】HBuilderX - 4.14+

1.0.9（2024-04-26） 下载此版本

• 【开发版本】HBuilderX - ^4.13+
• 【问题修复】抛出事件重复触发的Bug

1.0.8（2024-04-18） 下载此版本

• 【新增】 @click 点击事件 和 @longpress 长按事件

平台兼容性

FLOWER SVG

多平台 uni-app / uni-app-x 生态 SVG 组件，全平台全版本适配

简述

一款适用于 uni-app / uni-app-x 的 SVG 组件。全平台全版本适配。

交流反馈

官方QQ群：654105306

源码

兼容性

Vue 版本

uni-app 版本

uni-app-x 版本

使用方式

<template>
    <view>
        <!-- uuid属性为必填项，全局唯一id值 -->
        <fr-svg uuid="id" :src="svg" :width="100" :height="100" />
    </view>
</template>

<script>
    export default {
        data() {
            return {
                svg: '<?xml version="1.0" encoding="UTF-8"?><svg width="200" height="200" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 6C10 4.89543 10.8954 4 12 4H36C37.1046 4 38 4.89543 38 6V44L31 39L24 44L17 39L10 44V6Z" fill="#2F88FF" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M18 22L30 22" stroke="#FFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M18 30L30 30" stroke="#FFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M18 14L30 14" stroke="#FFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>'
            }
        }
    }
</script>

Props

适用领域

基于 uni-app-x 生态开发的 SVG 组件，uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

版权信息

• 遵循 MIT 开源协议，无需支付任何费用，也无需授权，即可将框架应用到产品中。
• 仅供学习交流，如作它用所承受的法律责任一概与作者无关。

致谢

首先感谢 DCloud 官方，旗下出品的 uni-app 、uniCloud、uni-app 小程序 等多平台、多元化的技术体系。
其次感谢 DCloud 插件市场 开源作品的作者们，"捧着一颗心来，不带半棵草去。" 的开源奉献精神致敬。