更新记录

1.0.0(2021-08-05) 下载此版本

初始化,欢迎交流


平台兼容性

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

uniapp-svg-anim

介绍

uniapp 动态svg,有更好实现方式希望一起沟通,由于render.js特性只支持app-vue与h5

软件架构

软件架构说明

安装教程

  1. git clone https://gitee.com/siycao/uniapp-svg-anim.git
  2. 通过import方式引入组件,如 import liSvgPhoto from '@/components/liUI/li-svg/photo.vue',然后注册:conponents: {liSvgPhoto}, 或使用esaycom规则自动引入,此方法不需要进行注册,仅需在page.json中添加规则, 如: "easycom": { "autoscan": true, //是否自动扫描组件 "custom": { //自定义扫描规则 "^li-svg-(.*)": "@/components/liUI/li-svg/$1.vue" } }
  3. 请在app.vue中引入animate.css动画库与svg.scss(所有svg的动画效果均在这个文件中) /每个页面公共css / @import 'animate.css'; @import 'svg.scss'; 4.由于组件位于视图层中,故一个组件一个页面仅能加载一次,请将他定义为一个全新的组件 5.自定义svg图标: 基础条件: 仅针对了解svg图标朋友,并且了解svg.js与animate.css。额,没办法,uniapp这玩意原本就不支持svg,很难受 原理:通过svg.vue中的initsvg函数创建svg并设置雷鸣,通过传入的show控制action属性,(/svg.scss中)通过id.action选择器分别两种状态的效果 目前一个组件分为两部分构成,1.svg组件相关的vue文件 2.svg.scss中定义的效果。所学较浅暂时还没有发现更好的方法。

    svg.vue部分:建议直接copy一份原有的svg组件代码,在其基础上进行修改,主要需要修改的有两个地方: 1.第二行的id,由于render.js这种加载方式的缺陷。请保证他的唯一                
    性。2.initsvg函数,函数内部使用svg.js动态创建svg图标,并对他添加相关的属性与类名。
    svg.scss部分: 文件位于根目录,主要是通过svg的id与在initsvg中对每个path等元素创建的class,分别控制两种不同状态的显示效果。
    注意事项: 请保证id的唯一性,不然会有问题

使用说明

  1. 本项目基于animate.css svg.js scss render.js构建

  2. 兼容性与性能: 仅支持app-vue, h5,不支持小程序。性能: 写了20个一样的组件进行渲染没有发现卡顿问题。

  3. 组件说明: 所有组件仅接收两个属性: show: 控制活动与非活动,数值类型: Boolean, size: 图标的大小,例: 1.auto: 自适应 2. 20(单位为px)

  4. 引用说明: 推荐使用esaycom规则,

参与贡献

  1. Fork 本仓库
  2. 新建 Feat_xxx 分支
  3. 提交代码
  4. 新建 Pull Request qq: 1819311679,欢迎交流

特技

  1. 使用 Readme_XXX.md 来支持不同的语言,例如 Readme_en.md, Readme_zh.md
  2. Gitee 官方博客 blog.gitee.com
  3. 你可以 https://gitee.com/explore 这个地址来了解 Gitee 上的优秀开源项目
  4. GVP 全称是 Gitee 最有价值开源项目,是综合评定出的优秀开源项目
  5. Gitee 官方提供的使用手册 https://gitee.com/help
  6. Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 https://gitee.com/gitee-stars/

隐私、权限声明

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

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

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

许可协议

MIT协议

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