Initial commit of akmon project
This commit is contained in:
43
uni_modules/lime-svg/changelog.md
Normal file
43
uni_modules/lime-svg/changelog.md
Normal file
@@ -0,0 +1,43 @@
|
||||
## 0.2.2(2025-07-15)
|
||||
-fix:修复vue2报错问题
|
||||
## 0.2.0(2025-07-08)
|
||||
- fix:修复uniapp支付宝小程序报错问题
|
||||
## 0.1.9(2025-05-23)
|
||||
- fix:修复安卓部分base64不显示的问题
|
||||
## 0.1.8(2025-05-13)
|
||||
- fix:删除ios config多余代码
|
||||
## 0.1.7(2025-04-21)
|
||||
- feat:兼容uniappx 鸿蒙next
|
||||
## 0.1.6(2025-04-04)
|
||||
- fix:修复安卓color不支持rgba的问题
|
||||
## 0.1.5(2025-03-12)
|
||||
- fix:修复安卓src变化没有重新渲染的问题
|
||||
## 0.1.4(2025-02-14)
|
||||
- fix:更新事件
|
||||
## 0.1.3(2025-01-23)
|
||||
- fix:网图改用downloadFile方式实现
|
||||
## 0.1.2(2025-01-04)
|
||||
- chore:更新文档
|
||||
## 0.1.1(2024-12-09)
|
||||
- chore:更新文档
|
||||
## 0.1.0(2024-12-09)
|
||||
- fix:修复因正则问题导致其它节点不显示(-width)
|
||||
- feat: 兼容uniappx 微信小程序
|
||||
## 0.0.9(2024-08-06)
|
||||
- fix:修复因正则问题导致不显示(-width)
|
||||
## 0.0.8(2024-08-05)
|
||||
- fix:修复安卓本地不显示问题
|
||||
## 0.0.7(2024-07-22)
|
||||
- chore:更新文档
|
||||
## 0.0.6(2024-07-22)
|
||||
- chore:更新文档
|
||||
## 0.0.5(2024-07-21)
|
||||
- chore:更新文档
|
||||
## 0.0.3(2024-07-12)
|
||||
- fix:修复 缺少 svgDataURLPrefix
|
||||
## 0.0.2(2024-07-12)
|
||||
- chore:更新文档
|
||||
## 0.0.1(2024-06-03)
|
||||
- init
|
||||
## 0.01(2023-12-06)
|
||||
测试
|
||||
319
uni_modules/lime-svg/components/l-svg/l-svg.uvue
Normal file
319
uni_modules/lime-svg/components/l-svg/l-svg.uvue
Normal file
@@ -0,0 +1,319 @@
|
||||
<template>
|
||||
<!-- #ifdef APP-IOS || APP-ANDROID -->
|
||||
<web-view class="l-svg" ref="webRef" v-if="web" @error="error" @load="loaded" @message="message"
|
||||
src="/uni_modules/lime-svg/hybrid/html/index.html?v=21"></web-view>
|
||||
<!-- <l-svg-x class="l-svg" v-else :src="path" :color="color" @error="onError" @load="onLoad"
|
||||
@click="$emit('click')"></l-svg-x> -->
|
||||
<native-view class="l-svg" v-else v-bind="$attrs" @init="onviewinit" @error="onError" @load="onLoad"></native-view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef WEB -->
|
||||
<view class="l-svg" v-if="src.startsWith('<svg')" v-html="src" :style="styles"></view>
|
||||
<view class="l-svg" :class="{'is-inherit': isInherit}" v-else :style="styles">
|
||||
<image class="l-svg-img" :src="src" @error="onError" @load="onLoad" />
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-HARMONY -->
|
||||
<native-view class="l-svg" v-bind="$attrs" @init="onviewinit" @error="onError" @load="onLoad"></native-view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-IOS || APP-ANDROID || APP-HARMONY || WEB -->
|
||||
<view class="l-svg" :class="{'is-inherit': isInherit}" :style="styles">
|
||||
<image class="l-svg-img" :src="path" @error="onError" @load="onLoad"></image>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
/**
|
||||
* Svg SVG组件
|
||||
* @description 用于渲染SVG路径元素,支持动态颜色和继承属性
|
||||
* <br>插件类型:LSvpComponentPublicInstance
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?name=lime-svg
|
||||
*
|
||||
* @property {string} src SVG路径
|
||||
* @property {string} color 路径颜色(默认:"currentColor")
|
||||
* @property {boolean} web 是否启用Web优化模式(默认:false)
|
||||
* @property {boolean} inherit 是否继承父级SVG属性(默认:true)
|
||||
* @event {Function} load SVG路径加载完成时触发
|
||||
* @event {Function} error SVG路径加载失败时触发
|
||||
*/
|
||||
|
||||
import { LSvpProps } from './type'
|
||||
// #ifndef APP-ANDROID || APP-IOS || APP-HARMONY || WEB
|
||||
import { pathToDataUrl, svgToDataUrl } from './utils'
|
||||
// #endif
|
||||
// #ifdef APP-ANDROID || APP-IOS
|
||||
import { pathToDataUrl, svgToDataUrl } from './utils'
|
||||
// #endif
|
||||
// #ifdef APP
|
||||
import { NativeImage } from "@/uni_modules/lime-svg";
|
||||
let nativeImage : NativeImage | null = null
|
||||
// #endif
|
||||
|
||||
|
||||
const props = withDefaults(defineProps<LSvpProps>(), {
|
||||
src: '',
|
||||
color: '',
|
||||
web: false,
|
||||
inherit: false
|
||||
})
|
||||
|
||||
const emit = defineEmits(['load', 'error'])
|
||||
const path = ref(props.src)
|
||||
const svgRef = ref<UniElement | null>(null)
|
||||
// #ifndef APP-ANDROID || APP-IOS
|
||||
const isInherit = computed(() : boolean => {
|
||||
return props.color != ''
|
||||
})
|
||||
// #endif
|
||||
|
||||
|
||||
const imageURL = ref('')
|
||||
const formatUrl = (url : string, action : string) : string => {
|
||||
if (url.indexOf(`'`) > 0) return `${action}("${url}")`
|
||||
return `${action}('${url}')`
|
||||
}
|
||||
const styles = computed(() : Map<string, string> => {
|
||||
const style = new Map<string, string>()
|
||||
// #ifdef WEB
|
||||
if (props.src != '' && !props.src.startsWith('<svg')) {
|
||||
// style.set('--svg', formatUrl(props.src, 'url'))
|
||||
style.set('--svg', formatUrl(imageURL.value ?? props.src, 'url'))
|
||||
}
|
||||
// #endif
|
||||
// #ifndef APP || WEB
|
||||
if (path.value != '') {
|
||||
// style.set('--svg', formatUrl(props.src, 'url'))
|
||||
style.set('--svg', formatUrl(path.value, 'url'))
|
||||
}
|
||||
// #endif
|
||||
if (props.color != '') {
|
||||
style.set('color', props.color)
|
||||
}
|
||||
return style
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// #ifdef APP-ANDROID
|
||||
const errorDetaill = new UniImageErrorEventDetail('加载失败')
|
||||
const errorEvent = new UniImageErrorEvent('error', errorDetaill)
|
||||
// #endif
|
||||
// #ifndef APP-ANDROID
|
||||
const errorDetaill = {
|
||||
errMsg: '加载失败'
|
||||
}
|
||||
const errorEvent = {
|
||||
type: 'error',
|
||||
detaill: errorDetaill
|
||||
}
|
||||
// #endif
|
||||
|
||||
const onError = () => {
|
||||
emit('error', errorEvent)
|
||||
}
|
||||
const onLoad = (e : UniNativeViewEvent) => {
|
||||
// #ifdef WEB
|
||||
// @ts-ignore
|
||||
imageURL.value = e.target.src
|
||||
// #endif
|
||||
// #ifdef APP-ANDROID
|
||||
const detail = new ImageLoadEventDetail(512, 512)
|
||||
const loadEvent = new UniImageLoadEvent('load', detail)
|
||||
// #endif
|
||||
// #ifndef APP-ANDROID
|
||||
const detail = {
|
||||
width: 512,
|
||||
height: 512
|
||||
}
|
||||
const loadEvent = {
|
||||
type: 'load',
|
||||
detail
|
||||
}
|
||||
// #endif
|
||||
emit('load', loadEvent)
|
||||
}
|
||||
// app
|
||||
// #ifdef APP-ANDROID || APP-IOS
|
||||
const webRef = ref<UniWebViewElement | null>(null)
|
||||
const setSvgSrc = () => {
|
||||
if (path.value != '') {
|
||||
webRef.value?.evalJS(formatUrl(path.value, 'setSrc'));
|
||||
}
|
||||
}
|
||||
const setSvgColor = () => {
|
||||
if (props.color != '' && path.value != '') {
|
||||
webRef.value?.evalJS(`setStyle({"--color": "${props.color}"})`);
|
||||
}
|
||||
}
|
||||
const error = (_ : UniWebViewErrorEvent) => {
|
||||
emit('error', errorEvent)
|
||||
}
|
||||
const loaded = (_ : UniWebViewLoadEvent) => {
|
||||
watchEffect(() => {
|
||||
if (props.src == '' || !props.web) return
|
||||
if (props.src.startsWith('<svg')) {
|
||||
path.value = svgToDataUrl(props.src)
|
||||
setSvgSrc()
|
||||
setSvgColor()
|
||||
} else if (props.src.startsWith('/static')) {
|
||||
pathToDataUrl(props.src).then(res => {
|
||||
path.value = res;
|
||||
setSvgSrc()
|
||||
setSvgColor()
|
||||
}).catch(err => {
|
||||
emit('error', errorEvent)
|
||||
console.warn("[lime-svg]" + props.src + JSON.stringify(err))
|
||||
})
|
||||
} else {
|
||||
path.value = props.src
|
||||
setSvgSrc()
|
||||
setSvgColor()
|
||||
}
|
||||
})
|
||||
}
|
||||
const message = (event : UniWebViewMessageEvent) => {
|
||||
const data = UTSJSONObject.assign({}, event.detail.data[0] as UTSJSONObject); //event.detail.data[0] as UTSJSONObject
|
||||
const type = data.getString('event')
|
||||
// #ifdef APP-ANDROID
|
||||
const detail = data.getJSON('data')?.getJSON('detail')
|
||||
// #endif
|
||||
// #ifndef APP-ANDROID
|
||||
const detail = UTSJSONObject.assign({}, data?.data?.detail ?? {})
|
||||
// #endif
|
||||
if (type == 'click') {
|
||||
emit('click')
|
||||
} else if (type == 'load') {
|
||||
const width = detail?.getNumber('width') ?? 512
|
||||
const height = detail?.getNumber('height') ?? 512
|
||||
// #ifdef APP-ANDROID
|
||||
const loadDetail = new ImageLoadEventDetail(width, height)
|
||||
const loadEvent = new UniImageLoadEvent('load', loadDetail)
|
||||
// #endif
|
||||
// #ifndef APP-ANDROID
|
||||
const loadDetail = {
|
||||
width,
|
||||
height
|
||||
}
|
||||
const loadEvent = {
|
||||
type: 'error',
|
||||
detail: loadDetail
|
||||
}
|
||||
// #endif
|
||||
emit(type, loadEvent)
|
||||
} else if (type == 'error') {
|
||||
emit(type, errorEvent)
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
|
||||
|
||||
// #ifdef APP
|
||||
function onviewinit(e : UniNativeViewInitEvent) {
|
||||
nativeImage = new NativeImage(e.detail.element);
|
||||
nativeImage?.updateSrc(path.value)
|
||||
nativeImage?.updateColor(props.color)
|
||||
}
|
||||
const map = new Map<string, string>()
|
||||
watchEffect(() => {
|
||||
// #ifdef APP-ANDROID || APP-IOS
|
||||
// ios uts组件使用uni.request会报错,故在这里使用
|
||||
if (!props.web && props.src.startsWith('http')) {
|
||||
if(map.has(props.src)) {
|
||||
nativeImage?.updateSrc(map.get(props.src)!)
|
||||
return
|
||||
}
|
||||
uni.downloadFile({
|
||||
url: props.src,
|
||||
success(res) {
|
||||
path.value = res.tempFilePath
|
||||
map.set(props.src, res.tempFilePath)
|
||||
nativeImage?.updateSrc(res.tempFilePath)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
// const a = UTSAndroid.convert2AbsFullPath(props.src)
|
||||
path.value = props.src;
|
||||
nativeImage?.updateSrc(props.src)
|
||||
}
|
||||
// #endif
|
||||
// #ifdef APP-HARMONY
|
||||
path.value = props.src;
|
||||
nativeImage?.updateSrc(props.src)
|
||||
// #endif
|
||||
})
|
||||
watchEffect(() => {
|
||||
nativeImage?.updateColor(props.color)
|
||||
})
|
||||
// #endif
|
||||
|
||||
|
||||
|
||||
// 小程序
|
||||
// #ifndef APP || WEB
|
||||
watchEffect(() => {
|
||||
if (props.src == '') return
|
||||
if (props.src.startsWith('<svg')) {
|
||||
path.value = svgToDataUrl(props.src)
|
||||
} else if (props.src.startsWith('/static')) {
|
||||
pathToDataUrl(props.src).then(res => {
|
||||
path.value = res;
|
||||
}).catch(err => {
|
||||
emit('error', errorEvent)
|
||||
console.warn("[lime-svg]" + props.src + JSON.stringify(err))
|
||||
})
|
||||
} else {
|
||||
path.value = props.src
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.l-svg {
|
||||
// align-self: flex-start;
|
||||
/* #ifdef APP */
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
/* #endif */
|
||||
/* #ifndef APP */
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
/* #endif */
|
||||
/* #ifndef APP */
|
||||
:deep(svg) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&-img {
|
||||
mix-blend-mode: lighten;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&.is-inherit {
|
||||
-webkit-mask-image: var(--svg);
|
||||
mask-image: var(--svg);
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-repeat: no-repeat;
|
||||
-webkit-mask-size: 100% 100%;
|
||||
mask-size: 100% 100%;
|
||||
background-color: currentColor;
|
||||
}
|
||||
|
||||
&:not(.is-inherit) {
|
||||
background: var(--svg) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-color: transparent;
|
||||
|
||||
image {
|
||||
mix-blend-mode: inherit;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
}
|
||||
</style>
|
||||
244
uni_modules/lime-svg/components/l-svg/l-svg.vue
Normal file
244
uni_modules/lime-svg/components/l-svg/l-svg.vue
Normal file
@@ -0,0 +1,244 @@
|
||||
<template>
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<web-view class="l-svg" ref="webRef" @error="error" @pagefinish="loaded" @onPostMessage="message"
|
||||
src="/uni_modules/lime-svg/hybrid/html/index.html"></web-view>
|
||||
<!-- <l-svg-x v-else :src="src" :color="color" @load="onLoad" @error="onError"></l-svg-x> -->
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<view class="l-svg" :class="{'is-inherit': isInherit}" :style="[styles]" @click="$emit('click')">
|
||||
<image class="l-svg-img" :src="path" @load="onLoad" @error="onError"></image>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
// @ts-nocheck
|
||||
/**
|
||||
* Svg SVG组件
|
||||
* @description 用于渲染SVG路径元素,支持动态颜色和继承属性
|
||||
* <br>插件类型:LSvpComponentPublicInstance
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?name=lime-svg
|
||||
*
|
||||
* @property {string} src SVG路径
|
||||
* @property {string} color 路径颜色(默认:"currentColor")
|
||||
* @property {boolean} web 是否启用Web优化模式(默认:false)
|
||||
* @property {boolean} inherit 是否继承父级SVG属性(默认:true)
|
||||
* @event {Function} load SVG路径加载完成时触发
|
||||
* @event {Function} error SVG路径加载失败时触发
|
||||
*/
|
||||
import svpProps from './props'
|
||||
import { defineComponent, ref, computed, watchEffect, getCurrentInstance } from '@/uni_modules/lime-shared/vue'
|
||||
import { pathToDataUrl, svgToDataUrl } from './utils'
|
||||
|
||||
export default defineComponent({
|
||||
// name: 'l-svg',
|
||||
props: svpProps,
|
||||
emits: ['load', 'error', 'click'],
|
||||
setup(props, { emit }) {
|
||||
const path = ref('')
|
||||
// #ifndef APP-NVUE
|
||||
const isInherit = computed(() : boolean => {
|
||||
return props.color != ''
|
||||
})
|
||||
// #endif
|
||||
const formatUrl = (url: string, action:string):string => {
|
||||
if(url.indexOf(`'`) > 0) return `${action}("${url}")`
|
||||
return `${action}('${url}')`
|
||||
}
|
||||
const instance = getCurrentInstance()!.proxy!
|
||||
const imageURL = ref(null)
|
||||
const styles = computed(() => {
|
||||
const style: Record<string, any> = {}
|
||||
// #ifndef APP-NVUE
|
||||
if (path.value != '') {
|
||||
const image = formatUrl(imageURL.value || path.value, 'url')// + ';'
|
||||
if (isInherit.value) {
|
||||
style['-webkit-mask-image'] = image
|
||||
style['mask-image'] = image
|
||||
} else {
|
||||
style['background-image'] = image
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
if (props.color != '') {
|
||||
style['color'] = props.color
|
||||
}
|
||||
//#ifdef VUE2
|
||||
// VUE2小程序最后一个值莫名的出现undefined
|
||||
style['undefined'] = ''
|
||||
// #endif
|
||||
return style
|
||||
})
|
||||
|
||||
const onLoad = (e) => {
|
||||
// #ifdef WEB
|
||||
imageURL.value = instance.$el.querySelector('img').src
|
||||
// #endif
|
||||
emit('load')
|
||||
}
|
||||
|
||||
const onError = () => {
|
||||
emit('error')
|
||||
}
|
||||
|
||||
// APP
|
||||
// #ifdef APP-NVUE
|
||||
const webRef = ref(null)
|
||||
const setSvgSrc = () => {
|
||||
if (path.value != '') {
|
||||
webRef.value?.evalJS(formatUrl(path.value, 'setSrc'));
|
||||
}
|
||||
}
|
||||
const setSvgColor = () => {
|
||||
if (props.color != '' && path.value != '') {
|
||||
webRef.value?.evalJS(`setStyle({"--color": "${props.color}"})`);
|
||||
}
|
||||
}
|
||||
const error = () => {
|
||||
emit('error')
|
||||
}
|
||||
const loaded = () => {
|
||||
watchEffect(() => {
|
||||
if (props.src == '') return
|
||||
if (props.src.startsWith('<')) {
|
||||
path.value = props.src
|
||||
} else if (props.src.startsWith('/static')) {
|
||||
pathToDataUrl(props.src).then(res => {
|
||||
path.value = res;
|
||||
setSvgSrc()
|
||||
setSvgColor()
|
||||
}).catch(err => {
|
||||
emit('error')
|
||||
console.warn("[lime-svg]" + props.src + JSON.stringify(err))
|
||||
})
|
||||
} else {
|
||||
path.value = props.src
|
||||
}
|
||||
setSvgSrc()
|
||||
setSvgColor()
|
||||
})
|
||||
}
|
||||
const message = (e) => {
|
||||
const data = e.detail.data[0]
|
||||
const event = data?.event
|
||||
const eventDetaill = data?.data
|
||||
if (event == 'click') {
|
||||
emit('click', eventDetaill)
|
||||
} else if (event == 'load') {
|
||||
emit('load', eventDetaill)
|
||||
} else if (event == 'error') {
|
||||
emit('error', eventDetaill)
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
|
||||
// 小程序 WEB
|
||||
// #ifndef APP-NVUE
|
||||
watchEffect(() => {
|
||||
if (props.src == '') return
|
||||
if (props.src.startsWith('<svg')) {
|
||||
path.value = svgToDataUrl(props.src)
|
||||
} else if (props.src.startsWith('/static')) {
|
||||
// #ifdef WEB
|
||||
path.value = props.src
|
||||
// #endif
|
||||
// #ifdef APP-VUE
|
||||
path.value = props.src.slice(1)
|
||||
// #endif
|
||||
// #ifndef WEB || APP-VUE
|
||||
pathToDataUrl(props.src).then(res => {
|
||||
path.value = res;
|
||||
}).catch(err => {
|
||||
emit('error')
|
||||
console.warn("[lime-svg]" + props.src + JSON.stringify(err))
|
||||
})
|
||||
// #endif
|
||||
} else {
|
||||
path.value = props.src
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
|
||||
|
||||
return {
|
||||
path,
|
||||
onLoad,
|
||||
onError,
|
||||
// #ifdef APP-NVUE
|
||||
webRef,
|
||||
error,
|
||||
loaded,
|
||||
message,
|
||||
// #endif
|
||||
// #ifndef APP-NVUE
|
||||
isInherit,
|
||||
styles
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/* #ifndef APP-NVUE */
|
||||
:host {
|
||||
display: inline-flex;
|
||||
}
|
||||
/* #endif */
|
||||
.l-svg {
|
||||
/* #ifdef APP-NVUE */
|
||||
flex: 1;
|
||||
/* #endif */
|
||||
/* #ifndef APP-NVUE */
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
/* #endif */
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
:deep(svg) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&-img {
|
||||
mix-blend-mode: lighten;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&.is-inherit {
|
||||
// background-image: var(--svg);//linear-gradient(#f09, #09f, #f0f);
|
||||
// background-blend-mode: lighten;
|
||||
// background-size: cover;
|
||||
|
||||
// background-size: 100% 100%;
|
||||
// background-repeat: no-repeat;
|
||||
// -webkit-mask-image: var(--svg);
|
||||
// mask-image: var(--svg);
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-repeat: no-repeat;
|
||||
-webkit-mask-size: 100% 100%;
|
||||
mask-size: 100% 100%;
|
||||
// -webkit-mask-mode: alpha;
|
||||
// mask-mode: alpha;
|
||||
background-color: currentColor; //var(currentColor, transparent);
|
||||
// background-blend-mode: multiply;
|
||||
}
|
||||
|
||||
&:not(.is-inherit) {
|
||||
// background: var(--svg) no-repeat;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-color: transparent;
|
||||
image {
|
||||
mix-blend-mode: inherit;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
/* #endif */
|
||||
|
||||
}
|
||||
</style>
|
||||
18
uni_modules/lime-svg/components/l-svg/props.ts
Normal file
18
uni_modules/lime-svg/components/l-svg/props.ts
Normal file
@@ -0,0 +1,18 @@
|
||||
export default {
|
||||
src: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
web: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
inherit: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
}
|
||||
6
uni_modules/lime-svg/components/l-svg/type.ts
Normal file
6
uni_modules/lime-svg/components/l-svg/type.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
export interface LSvpProps {
|
||||
src: string;
|
||||
color: string;
|
||||
web: boolean;
|
||||
inherit: boolean;
|
||||
}
|
||||
69
uni_modules/lime-svg/components/l-svg/utils.ts
Normal file
69
uni_modules/lime-svg/components/l-svg/utils.ts
Normal file
@@ -0,0 +1,69 @@
|
||||
// @ts-nocheck
|
||||
// #ifdef APP-ANDROID || APP-IOS
|
||||
import { fileToDataURL } from '@/uni_modules/lime-file-utils'
|
||||
// #endif
|
||||
|
||||
|
||||
/**
|
||||
* 小程序把路径转成base64
|
||||
* @param {string} path
|
||||
* @return 表示 SVG 的 Data URL。
|
||||
*/
|
||||
export function pathToDataUrl(path : string) : Promise<string> {
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
// #ifdef MP
|
||||
uni.getFileSystemManager().readFile({
|
||||
filePath: path,
|
||||
encoding: 'base64',
|
||||
success: (res) => {
|
||||
resolve(`data:image/svg+xml;base64,${res.data}`)
|
||||
},
|
||||
fail: (error) => {
|
||||
console.error({ error, path })
|
||||
reject(error)
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
// #ifdef APP-ANDROID || APP-IOS
|
||||
const url = fileToDataURL(path)
|
||||
if(url == null) {
|
||||
reject('路径错误')
|
||||
}
|
||||
resolve(url!.replace(/\s+/g,''))
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
let localFilePath = plus.io.convertAbsoluteFileSystem(path)
|
||||
if (localFilePath == path) {
|
||||
localFilePath = '_www/' + path.slice(1)
|
||||
}
|
||||
plus.io.resolveLocalFileSystemURL(localFilePath, (entry) => {
|
||||
entry.file((file : any) => {
|
||||
const fileReader = new plus.io.FileReader()
|
||||
fileReader.onload = (data) => {
|
||||
resolve(data.target.result)
|
||||
}
|
||||
fileReader.onerror = (error) => {
|
||||
console.error({ error, path })
|
||||
reject(error)
|
||||
}
|
||||
fileReader.readAsDataURL(file)
|
||||
}, reject)
|
||||
}, reject)
|
||||
// #endif
|
||||
// #ifndef APP-ANDROID || APP-IOS || MP || APP-NVUE
|
||||
reject('不支持')
|
||||
// #endif
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* 将 SVG 字符串转换为 Data URL。
|
||||
* @param {string} svg - 要转换的 SVG 字符串。
|
||||
* @returns {string} 表示 SVG 的 Data URL。
|
||||
*/
|
||||
export function svgToDataUrl(svgString : string) : string {
|
||||
const encodedSvg = encodeURIComponent(svgString)!.replace(/\+/g, '%20');
|
||||
return `data:image/svg+xml,${encodedSvg}`
|
||||
}
|
||||
124
uni_modules/lime-svg/components/lime-svg/lime-svg.uvue
Normal file
124
uni_modules/lime-svg/components/lime-svg/lime-svg.uvue
Normal file
File diff suppressed because one or more lines are too long
44
uni_modules/lime-svg/components/lime-svg/lime-svg.vue
Normal file
44
uni_modules/lime-svg/components/lime-svg/lime-svg.vue
Normal file
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<view style="padding: 100rpx;">
|
||||
<text>lime-svg uniapp 1</text>
|
||||
<!-- <l-svg style="width: 50rpx; height: 50rpx;" src="/static/logo.svg" @click="onClick"></l-svg> -->
|
||||
<!-- <l-svg style="width: 150rpx;height: 150rpx;" src="/static/svg/a.svg" @click="onClick"></l-svg> -->
|
||||
<l-svg style="width: 150rpx;height: 150rpx;" src="/static/svg/a.svg" color="red" @click="onClick"></l-svg>
|
||||
<l-svg style="width: 150rpx;height: 150rpx;" color="blue" src="https://api.iconify.design/material-symbols/backpack-sharp.svg"></l-svg>
|
||||
<l-svg style="width: 150rpx;height: 150rpx;" src="https://www.xmplus.cn/uploads/images/20221228/b9e9d45054ab5795992a1e92584a278b.svg"></l-svg>
|
||||
<l-svg style="width: 150rpx;height: 150rpx;font-size: none;" color="red" src='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M6 15h1.5V9H5v1.5h1zm2.5 0H13V9H8.5zm1.5-1.5v-3h1.5v3zm4 1.5h1.5v-2.25L17.25 15H19l-2.25-3L19 9h-1.75l-1.75 2.25V9H14zM3 21V3h18v18z"/></svg>'></l-svg>
|
||||
<l-svg style="width: 150rpx;height: 150rpx;" color="blue" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTYgMTVoMS41VjlINXYxLjVoMXptMi41IDBIMTNWOUg4LjV6bTEuNS0xLjV2LTNoMS41djN6bTQgMS41aDEuNXYtMi4yNUwxNy4yNSAxNUgxOWwtMi4yNS0zTDE5IDloLTEuNzVsLTEuNzUgMi4yNVY5SDE0ek0zIDIxVjNoMTh2MTh6Ii8+PC9zdmc+"></l-svg>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
let t = Date.now()
|
||||
uni.request({
|
||||
url: 'https://api.iconify.design/material-symbols/backpack-sharp.svg?v=1',
|
||||
dataType: 'text',
|
||||
success: (res) => {
|
||||
console.log('end:::', Date.now() - t)
|
||||
},
|
||||
fail: () => {
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
onClick() {
|
||||
console.log('click')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
1
uni_modules/lime-svg/encrypt
Normal file
1
uni_modules/lime-svg/encrypt
Normal file
@@ -0,0 +1 @@
|
||||
śŹhMÍNé‘–rď´ą'jă”Ě7žlim‹vjˇŘ5p¬b”âöŢ€0uËĚ|—ĽtÝŤkŘ$n“%6ŕďh•˙KżG‰\Ś&śaczô°_q6”űíŕ2űh…Őę?<3F>ň”^‚¦gRŇDgÍ$‡=cwu‹řď Ůabwj–Š“ňÓł÷*đ<1E>`«9CúÜ’
|
||||
178
uni_modules/lime-svg/hybrid/html/index.html
Normal file
178
uni_modules/lime-svg/hybrid/html/index.html
Normal file
@@ -0,0 +1,178 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>lime-svg</title>
|
||||
<style>
|
||||
html,
|
||||
body,
|
||||
img,
|
||||
div {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
#lime-icon {
|
||||
transition: all 100ms;
|
||||
}
|
||||
|
||||
#lime-icon.is-inherit {
|
||||
-webkit-mask-image: var(--svg);
|
||||
mask-image: var(--svg);
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-repeat: no-repeat;
|
||||
-webkit-mask-size: 100% 100%;
|
||||
mask-size: 100% 100%;
|
||||
background-color: var(--color, transparent);
|
||||
/* 设置背景颜色为--color的值,默认为透明 */
|
||||
/* background-blend-mode: multiply; */
|
||||
}
|
||||
|
||||
#lime-icon:not(.is-inherit) {
|
||||
background: var(--svg) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
#lime-image {
|
||||
mix-blend-mode: lighten;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="lime-icon">
|
||||
<img id="lime-image" />
|
||||
</div>
|
||||
<script type="text/javascript" src="uni.webview.1.5.5.js"></script>
|
||||
<script>
|
||||
const image = document.getElementById('lime-image');
|
||||
const icon = document.getElementById('lime-icon');
|
||||
let lastSrc = ''
|
||||
|
||||
function setSrc(src) {
|
||||
if (lastSrc == src) return
|
||||
lastSrc = src;
|
||||
const _src = src.split('<svg')
|
||||
if (_src.length > 1) {
|
||||
src = (_src[0] == '' ? 'data:image/svg+xml,' : _src[0]) + encodeURIComponent('<svg' + _src[1])
|
||||
}
|
||||
// src = src.replace(/#/g, '%23').replace(/"/g, `'`)
|
||||
|
||||
|
||||
image.src = src
|
||||
// icon.style.setProperty('--svg', `url('${src}')`);
|
||||
icon.style.setProperty('--svg', `url("${src}")`);
|
||||
// icon.style.setProperty('--svg', `url(${src})`);
|
||||
image.onload = (e) => {
|
||||
emit('load', {
|
||||
type: "load",
|
||||
timeStamp: e.timeStamp,
|
||||
detail: {
|
||||
width: image.naturalWidth,
|
||||
height: image.naturalHeight,
|
||||
}
|
||||
})
|
||||
}
|
||||
image.onerror = (e) => {
|
||||
emit('error', {
|
||||
type: "error",
|
||||
timeStamp: e.timeStamp,
|
||||
detail: {
|
||||
width: image.naturalWidth,
|
||||
height: image.naturalHeight,
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function setStyle(style) {
|
||||
if (typeof style === 'object') {
|
||||
for (let [key, value] of Object.entries(style)) {
|
||||
if (key == '--color') {
|
||||
if (value) {
|
||||
icon.classList.add('is-inherit')
|
||||
} else {
|
||||
value = 'black'
|
||||
}
|
||||
}
|
||||
icon.style.setProperty(key, value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function emit(event, data = {}) {
|
||||
postMessage({
|
||||
event,
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
function postMessage(data) {
|
||||
uni.webView.postMessage({data})
|
||||
|
||||
// if (window.__uniapp_x_) {
|
||||
// window.__uniapp_x_.postMessage(JSON.stringify(data))
|
||||
// } else if (uni.webView.postMessage) {
|
||||
// uni.webView.postMessage({
|
||||
// data
|
||||
// })
|
||||
// }
|
||||
};
|
||||
|
||||
// setStyle({
|
||||
// color: 'red',
|
||||
// })
|
||||
// setSrc('https://api.iconify.design/bi/bell-fill.svg')
|
||||
|
||||
// 禁用所有事件
|
||||
document.addEventListener('mousedown', function(event) {
|
||||
event.stopImmediatePropagation();
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
});
|
||||
|
||||
document.addEventListener('mouseup', function(event) {
|
||||
event.stopImmediatePropagation();
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
});
|
||||
|
||||
document.addEventListener('click', function(event) {
|
||||
event.stopImmediatePropagation();
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
emit('click')
|
||||
});
|
||||
|
||||
document.addEventListener('keydown', function(event) {
|
||||
event.stopImmediatePropagation();
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
});
|
||||
|
||||
document.addEventListener('keyup', function(event) {
|
||||
event.stopImmediatePropagation();
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
});
|
||||
|
||||
document.addEventListener('keypress', function(event) {
|
||||
event.stopImmediatePropagation();
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
1
uni_modules/lime-svg/hybrid/html/uni.webview.1.5.5.js
Normal file
1
uni_modules/lime-svg/hybrid/html/uni.webview.1.5.5.js
Normal file
File diff suppressed because one or more lines are too long
108
uni_modules/lime-svg/package.json
Normal file
108
uni_modules/lime-svg/package.json
Normal file
@@ -0,0 +1,108 @@
|
||||
{
|
||||
"id": "lime-svg",
|
||||
"displayName": "lime-svg",
|
||||
"version": "0.2.2",
|
||||
"description": "lime-svg 是一款UTS原生图标插件,支持修改单色svg的颜色,支持本地、base64、网络等路径。支持uniapp/uniappx",
|
||||
"keywords": [
|
||||
"lime-svg",
|
||||
"svg",
|
||||
"uvue",
|
||||
"vue"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^4.17",
|
||||
"uni-app": "^4.45",
|
||||
"uni-app-x": "^4.61"
|
||||
},
|
||||
"dcloudext": {
|
||||
"type": "uts-vue-component",
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "5.99"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "6.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "",
|
||||
"darkmode": "x",
|
||||
"i18n": "x",
|
||||
"widescreen": "x"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [
|
||||
"lime-file-utils"
|
||||
],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "√",
|
||||
"aliyun": "√",
|
||||
"alipay": "x"
|
||||
},
|
||||
"client": {
|
||||
"uni-app": {
|
||||
"vue": {
|
||||
"vue2": "√",
|
||||
"vue3": "√"
|
||||
},
|
||||
"web": {
|
||||
"safari": "√",
|
||||
"chrome": "√"
|
||||
},
|
||||
"app": {
|
||||
"vue": "√",
|
||||
"nvue": "-",
|
||||
"android": {
|
||||
"extVersion": "",
|
||||
"minVersion": "21"
|
||||
},
|
||||
"ios": "√",
|
||||
"harmony": "√"
|
||||
},
|
||||
"mp": {
|
||||
"weixin": "√",
|
||||
"alipay": "√",
|
||||
"toutiao": "-",
|
||||
"baidu": "-",
|
||||
"kuaishou": "-",
|
||||
"jd": "-",
|
||||
"harmony": "-",
|
||||
"qq": "-",
|
||||
"lark": "-"
|
||||
},
|
||||
"quickapp": {
|
||||
"huawei": "-",
|
||||
"union": "-"
|
||||
}
|
||||
},
|
||||
"uni-app-x": {
|
||||
"web": {
|
||||
"safari": "√",
|
||||
"chrome": "√"
|
||||
},
|
||||
"app": {
|
||||
"android": {
|
||||
"extVersion": "",
|
||||
"minVersion": "21"
|
||||
},
|
||||
"ios": "√",
|
||||
"harmony": "√"
|
||||
},
|
||||
"mp": {
|
||||
"weixin": "√"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
127
uni_modules/lime-svg/readme.md
Normal file
127
uni_modules/lime-svg/readme.md
Normal file
@@ -0,0 +1,127 @@
|
||||
# lime-svg 矢量图标
|
||||
一款基于UTS实现的原生矢量图标插件,支持uniapp和uniappx。该插件提供了两种渲染机制:原生插件和webview,可以根据需求选择合适的渲染方式。支持加载本地、网络、源文本和base64格式的SVG图标,并且可以自定义图标颜色。
|
||||
|
||||
## 文档链接
|
||||
📚 组件详细文档请访问以下站点:
|
||||
- [矢量图标文档 - 站点1](https://limex.qcoon.cn/components/svg.html)
|
||||
- [矢量图标文档 - 站点2](https://limeui.netlify.app/components/svg.html)
|
||||
- [矢量图标文档 - 站点3](https://limeui.familyzone.top/components/svg.html)
|
||||
|
||||
## 安装方法
|
||||
1. 在uni-app插件市场中搜索并导入`lime-svg`
|
||||
2. 由于普通授权版无法自定义基座,如需使用请购买源码版
|
||||
3. 在页面中使用`l-svg`组件
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 渲染机制说明
|
||||
安卓和iOS提供基于`原生插件`和`webview`两种渲染机制:
|
||||
- 使用`原生插件`需要`自定义基座`
|
||||
- 原生插件实现不支持动画,如果需要动画请选择`webview`
|
||||
|
||||
### 路径加载方式
|
||||
通过设置`src`来加载svg图标,支持多种加载方式:
|
||||
|
||||
```html
|
||||
<!-- 本地文件加载 -->
|
||||
<l-svg style="width: 150rpx;height: 150rpx;" src="/static/svg/a.svg"></l-svg>
|
||||
|
||||
<!-- 网络文件加载 -->
|
||||
<l-svg style="width: 150rpx;height: 150rpx;" src="https://www.xmplus.cn/uploads/images/20221228/b9e9d45054ab5795992a1e92584a278b.svg"></l-svg>
|
||||
|
||||
<!-- SVG源文本加载 -->
|
||||
<l-svg style="width: 150rpx;height: 150rpx;" src='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M6 15h1.5V9H5v1.5h1zm2.5 0H13V9H8.5zm1.5-1.5v-3h1.5v3zm4 1.5h1.5v-2.25L17.25 15H19l-2.25-3L19 9h-1.75l-1.75 2.25V9H14zM3 21V3h18v18z"/></svg>'></l-svg>
|
||||
|
||||
<!-- Base64编码加载 -->
|
||||
<l-svg style="width: 150rpx;height: 150rpx;" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTYgMTVoMS41VjlINXYxLjVoMXptMi41IDBIMTNWOUg4LjV6bTEuNS0xLjV2LTNoMS41djN6bTQgMS41aDEuNXYtMi4yNUwxNy4yNSAxNUgxOWwtMi4yNS0zTDE5IDloLTEuNzVsLTEuNzUgMi4yNVY5SDE0ek0zIDIxVjNoMTh2MTh6Ii8+PC9zdmc+"></l-svg>
|
||||
```
|
||||
|
||||
### 颜色设置
|
||||
通过设置`color`来改变svg图标颜色,注意:只支持纯色图标,多色图标无效。
|
||||
|
||||
```html
|
||||
<!-- 设置红色 -->
|
||||
<l-svg
|
||||
style="width: 150rpx;height: 150rpx;"
|
||||
color="red"
|
||||
src='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M6 15h1.5V9H5v1.5h1zm2.5 0H13V9H8.5zm1.5-1.5v-3h1.5v3zm4 1.5h1.5v-2.25L17.25 15H19l-2.25-3L19 9h-1.75l-1.75 2.25V9H14zM3 21V3h18v18z"/></svg>'
|
||||
></l-svg>
|
||||
|
||||
<!-- 设置红色(Base64) -->
|
||||
<l-svg
|
||||
style="width: 150rpx;height: 150rpx;"
|
||||
color="red"
|
||||
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTYgMTVoMS41VjlINXYxLjVoMXptMi41IDBIMTNWOUg4LjV6bTEuNS0xLjV2LTNoMS41djN6bTQgMS41aDEuNXYtMi4yNUwxNy4yNSAxNUgxOWwtMi4yNS0zTDE5IDloLTEuNzVsLTEuNzUgMi4yNVY5SDE0ek0zIDIxVjNoMTh2MTh6Ii8+PC9zdmc+"
|
||||
></l-svg>
|
||||
```
|
||||
|
||||
### WebView渲染
|
||||
通过设置`:web="true"`使用`webview`渲染,支持动画效果。
|
||||
|
||||
```html
|
||||
<!-- WebView渲染SVG源文本 -->
|
||||
<l-svg
|
||||
style="width: 150rpx;height: 150rpx;"
|
||||
:web="true"
|
||||
src='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M6 15h1.5V9H5v1.5h1zm2.5 0H13V9H8.5zm1.5-1.5v-3h1.5v3zm4 1.5h1.5v-2.25L17.25 15H19l-2.25-3L19 9h-1.75l-1.75 2.25V9H14zM3 21V3h18v18z"/></svg>'
|
||||
></l-svg>
|
||||
|
||||
<!-- WebView渲染Base64 -->
|
||||
<l-svg
|
||||
style="width: 150rpx;height: 150rpx;"
|
||||
:web="true"
|
||||
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTYgMTVoMS41VjlINXYxLjVoMXptMi41IDBIMTNWOUg4LjV6bTEuNS0xLjV2LTNoMS41djN6bTQgMS41aDEuNXYtMi4yNUwxNy4yNSAxNUgxOWwtMi4yNS0zTDE5IDloLTEuNzVsLTEuNzUgMi4yNVY5SDE0ek0zIDIxVjNoMTh2MTh6Ii8+PC9zdmc+"
|
||||
></l-svg>
|
||||
```
|
||||
|
||||
## 快速预览
|
||||
导入插件后,可以直接使用以下标签查看演示效果:
|
||||
|
||||
```html
|
||||
<!-- 代码位于 uni_modules/lime-svg/components/lime-svg -->
|
||||
<lime-svg />
|
||||
```
|
||||
|
||||
## 插件标签说明
|
||||
- 默认 `l-svg` 为组件标签
|
||||
- 默认 `lime-svg` 为演示标签
|
||||
|
||||
## Vue2使用说明
|
||||
插件使用了`composition-api`,如果你希望在Vue2中使用,请按官方教程[vue-composition-api](https://uniapp.dcloud.net.cn/tutorial/vue-composition-api.html)配置。
|
||||
|
||||
关键代码是在main.js中的Vue2部分添加以下代码:
|
||||
|
||||
```js
|
||||
// vue2
|
||||
import Vue from 'vue'
|
||||
import VueCompositionAPI from '@vue/composition-api'
|
||||
Vue.use(VueCompositionAPI)
|
||||
```
|
||||
|
||||
## API文档
|
||||
|
||||
### Props
|
||||
|
||||
| 属性名 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| src | SVG图标的源,支持本地路径、网络URL、SVG源文本和Base64 | <em>string</em> | - |
|
||||
| color | 图标颜色,仅对纯色图标有效 | <em>string</em> | - |
|
||||
| web | 是否使用WebView渲染,支持动画效果 | <em>boolean</em> | `false` |
|
||||
| width | 图标宽度 | <em>string \| number</em> | - |
|
||||
| height | 图标高度 | <em>string \| number</em> | - |
|
||||
|
||||
### Events
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
| --- | --- | --- |
|
||||
| click | 点击图标时触发 | event: Event |
|
||||
| load | 图标加载完成时触发 | - |
|
||||
| error | 图标加载失败时触发 | error: Error |
|
||||
|
||||
## 支持与赞赏
|
||||
|
||||
如果你觉得本插件解决了你的问题,可以考虑支持作者:
|
||||
|
||||
| 支付宝赞助 | 微信赞助 |
|
||||
|------------|------------|
|
||||
|  |  |
|
||||
68
uni_modules/lime-svg/readme_old.md
Normal file
68
uni_modules/lime-svg/readme_old.md
Normal file
@@ -0,0 +1,68 @@
|
||||
# lime-svg 矢量图标
|
||||
一款UTS实现的原生图标插件,支持uniapp/uniappx
|
||||
|
||||
## 文档
|
||||
🚀 [svg【站点1】](https://limex.qcoon.cn/components/svg.html)
|
||||
🌍 [svg【站点2】](https://limeui.netlify.app/components/svg.html)
|
||||
🔥 [svg【站点3】](https://limeui.familyzone.top/components/svg.html)
|
||||
|
||||
|
||||
|
||||
## 安装
|
||||
插件市场导入,由于普通授权版无法自定义基座。请如需使用请购买源码版。
|
||||
|
||||
## 代码演示
|
||||
安卓和ios提供基于`原生插件`和`webview`两渲染机制,如果使用`原生插件`则需要`自定义基座`再使用.
|
||||
原生插件实现的不支持动画,如果需要动画请选择`webview`
|
||||
|
||||
### 路径
|
||||
通过设置`src`来加载svg图标,支持本地\网络\源文本\base64等方式
|
||||
|
||||
```html
|
||||
<l-svg style="width: 150rpx;height: 150rpx;" src="/static/svg/a.svg"></l-svg>
|
||||
<l-svg style="width: 150rpx;height: 150rpx;" src="https://www.xmplus.cn/uploads/images/20221228/b9e9d45054ab5795992a1e92584a278b.svg"></l-svg>
|
||||
<l-svg style="width: 150rpx;height: 150rpx;" src='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M6 15h1.5V9H5v1.5h1zm2.5 0H13V9H8.5zm1.5-1.5v-3h1.5v3zm4 1.5h1.5v-2.25L17.25 15H19l-2.25-3L19 9h-1.75l-1.75 2.25V9H14zM3 21V3h18v18z"/></svg>'></l-svg>
|
||||
<l-svg style="width: 150rpx;height: 150rpx;" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTYgMTVoMS41VjlINXYxLjVoMXptMi41IDBIMTNWOUg4LjV6bTEuNS0xLjV2LTNoMS41djN6bTQgMS41aDEuNXYtMi4yNUwxNy4yNSAxNUgxOWwtMi4yNS0zTDE5IDloLTEuNzVsLTEuNzUgMi4yNVY5SDE0ek0zIDIxVjNoMTh2MTh6Ii8+PC9zdmc+"></l-svg>
|
||||
```
|
||||
|
||||
|
||||
### 颜色
|
||||
通过设置`color`来改变svg图标颜色,只支持svg是纯色图标,多色无效.
|
||||
|
||||
```html
|
||||
<l-svg style="width: 150rpx;height: 150rpx;" color="red" src='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M6 15h1.5V9H5v1.5h1zm2.5 0H13V9H8.5zm1.5-1.5v-3h1.5v3zm4 1.5h1.5v-2.25L17.25 15H19l-2.25-3L19 9h-1.75l-1.75 2.25V9H14zM3 21V3h18v18z"/></svg>'></l-svg>
|
||||
<l-svg style="width: 150rpx;height: 150rpx;" color="red" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTYgMTVoMS41VjlINXYxLjVoMXptMi41IDBIMTNWOUg4LjV6bTEuNS0xLjV2LTNoMS41djN6bTQgMS41aDEuNXYtMi4yNUwxNy4yNSAxNUgxOWwtMi4yNS0zTDE5IDloLTEuNzVsLTEuNzUgMi4yNVY5SDE0ek0zIDIxVjNoMTh2MTh6Ii8+PC9zdmc+"></l-svg>
|
||||
```
|
||||
|
||||
### webview
|
||||
通过设置`:web="true"`使用`webview`渲染
|
||||
|
||||
```html
|
||||
<l-svg style="width: 150rpx;height: 150rpx;" :web="true" src='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M6 15h1.5V9H5v1.5h1zm2.5 0H13V9H8.5zm1.5-1.5v-3h1.5v3zm4 1.5h1.5v-2.25L17.25 15H19l-2.25-3L19 9h-1.75l-1.75 2.25V9H14zM3 21V3h18v18z"/></svg>'></l-svg>
|
||||
<l-svg style="width: 150rpx;height: 150rpx;" :web="true" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTYgMTVoMS41VjlINXYxLjVoMXptMi41IDBIMTNWOUg4LjV6bTEuNS0xLjV2LTNoMS41djN6bTQgMS41aDEuNXYtMi4yNUwxNy4yNSAxNUgxOWwtMi4yNS0zTDE5IDloLTEuNzVsLTEuNzUgMi4yNVY5SDE0ek0zIDIxVjNoMTh2MTh6Ii8+PC9zdmc+"></l-svg>
|
||||
```
|
||||
|
||||
|
||||
|
||||
### 插件标签
|
||||
默认 l-svg 为 component
|
||||
默认 lime-svg 为 demo
|
||||
|
||||
### Vue2使用
|
||||
插件使用了`composition-api`, 如果你希望在vue2中使用请按官方的教程[vue-composition-api](https://uniapp.dcloud.net.cn/tutorial/vue-composition-api.html)配置
|
||||
关键代码是: 在main.js中 在vue2部分加上这一段即可.
|
||||
|
||||
```js
|
||||
// vue2
|
||||
import Vue from 'vue'
|
||||
import VueCompositionAPI from '@vue/composition-api'
|
||||
Vue.use(VueCompositionAPI)
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 打赏
|
||||
|
||||
如果你觉得本插件,解决了你的问题,赠人玫瑰,手留余香。
|
||||

|
||||

|
||||
@@ -0,0 +1,7 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"
|
||||
package="cn.limeui.svg">
|
||||
|
||||
<uses-permission android:name="android.permission.INTERNET" />
|
||||
|
||||
</manifest>
|
||||
6
uni_modules/lime-svg/utssdk/app-android/config.json
Normal file
6
uni_modules/lime-svg/utssdk/app-android/config.json
Normal file
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"minSdkVersion": "21",
|
||||
"dependencies": [
|
||||
"com.caverock:androidsvg-aar:1.4"
|
||||
]
|
||||
}
|
||||
BIN
uni_modules/lime-svg/utssdk/app-android/fileUtils.uts
Normal file
BIN
uni_modules/lime-svg/utssdk/app-android/fileUtils.uts
Normal file
Binary file not shown.
BIN
uni_modules/lime-svg/utssdk/app-android/index.uts
Normal file
BIN
uni_modules/lime-svg/utssdk/app-android/index.uts
Normal file
Binary file not shown.
BIN
uni_modules/lime-svg/utssdk/app-android/utils.uts
Normal file
BIN
uni_modules/lime-svg/utssdk/app-android/utils.uts
Normal file
Binary file not shown.
33
uni_modules/lime-svg/utssdk/app-harmony/builder.ets
Normal file
33
uni_modules/lime-svg/utssdk/app-harmony/builder.ets
Normal file
@@ -0,0 +1,33 @@
|
||||
@Builder
|
||||
export function buildImage(params: ESObject) {
|
||||
if(params.color) {
|
||||
Image(params.src)
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
.objectFit(ImageFit.Contain)
|
||||
.fillColor(params.color)
|
||||
// colorFilter只对位图生效
|
||||
// .colorFilter(
|
||||
// [1, 0, 0, 0, 1,
|
||||
// 0, 1, 0, 0, 1,
|
||||
// 0, 0, 1, 0, 0,
|
||||
// 0, 0, 0, 1, 0])
|
||||
.onComplete((event)=>{
|
||||
params.onComplete(event)
|
||||
})
|
||||
.onError((error) =>{
|
||||
params.onError(error.message)
|
||||
})
|
||||
} else {
|
||||
Image(params.src)
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
.objectFit(ImageFit.Contain)
|
||||
.onComplete((event)=>{
|
||||
params.onComplete(event)
|
||||
})
|
||||
.onError((error) =>{
|
||||
params.onError(error.message)
|
||||
})
|
||||
}
|
||||
}
|
||||
BIN
uni_modules/lime-svg/utssdk/app-harmony/index.uts
Normal file
BIN
uni_modules/lime-svg/utssdk/app-harmony/index.uts
Normal file
Binary file not shown.
@@ -0,0 +1,212 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
|
||||
<plist version="1.0">
|
||||
<dict>
|
||||
<key>files</key>
|
||||
<dict>
|
||||
<key>Headers/unimoduleLimeSvg-Swift.h</key>
|
||||
<data>
|
||||
ZAFtq3SpJcrTktt5ty6bKx5SjbE=
|
||||
</data>
|
||||
<key>Headers/unimoduleLimeSvg.h</key>
|
||||
<data>
|
||||
FH2SRnQAHIO8AbDZPa5/Bz/CcdA=
|
||||
</data>
|
||||
<key>Info.plist</key>
|
||||
<data>
|
||||
SECVeyxZywH2skYEys8lD82L9ic=
|
||||
</data>
|
||||
<key>Modules/module.modulemap</key>
|
||||
<data>
|
||||
IhA8PKd525VdS98DEH+6b9Clqhc=
|
||||
</data>
|
||||
<key>Modules/unimoduleLimeSvg.swiftmodule/Project/x86_64-apple-ios-simulator.swiftsourceinfo</key>
|
||||
<data>
|
||||
9Jl3lvV8eus/w+PhfpwuRB5aPWg=
|
||||
</data>
|
||||
<key>Modules/unimoduleLimeSvg.swiftmodule/x86_64-apple-ios-simulator.abi.json</key>
|
||||
<data>
|
||||
7+rVgNvBGQmcD7+gEA3uN26z3qw=
|
||||
</data>
|
||||
<key>Modules/unimoduleLimeSvg.swiftmodule/x86_64-apple-ios-simulator.private.swiftinterface</key>
|
||||
<data>
|
||||
xX0K3FhLkkWFdXcCvT26ocOD9VM=
|
||||
</data>
|
||||
<key>Modules/unimoduleLimeSvg.swiftmodule/x86_64-apple-ios-simulator.swiftdoc</key>
|
||||
<data>
|
||||
5P+FoAZLOwzDALC1B7KcS2N9OCU=
|
||||
</data>
|
||||
<key>Modules/unimoduleLimeSvg.swiftmodule/x86_64-apple-ios-simulator.swiftinterface</key>
|
||||
<data>
|
||||
xX0K3FhLkkWFdXcCvT26ocOD9VM=
|
||||
</data>
|
||||
<key>Modules/unimoduleLimeSvg.swiftmodule/x86_64-apple-ios-simulator.swiftmodule</key>
|
||||
<data>
|
||||
zMybHpH5GBztWvkx8rVDF38chOM=
|
||||
</data>
|
||||
<key>config.json</key>
|
||||
<data>
|
||||
jo/qJhWkc5CQPkmEfWKkUS9c85Q=
|
||||
</data>
|
||||
</dict>
|
||||
<key>files2</key>
|
||||
<dict>
|
||||
<key>Headers/unimoduleLimeSvg-Swift.h</key>
|
||||
<dict>
|
||||
<key>hash2</key>
|
||||
<data>
|
||||
Chw0MoUhe/BIGhvhiOOhZARBTWfalvswZXAeTn3tCWU=
|
||||
</data>
|
||||
</dict>
|
||||
<key>Headers/unimoduleLimeSvg.h</key>
|
||||
<dict>
|
||||
<key>hash2</key>
|
||||
<data>
|
||||
XAsze1m7Z4PhyI2gj+RafZVS4xyqWjgvqraTawdVPMY=
|
||||
</data>
|
||||
</dict>
|
||||
<key>Modules/module.modulemap</key>
|
||||
<dict>
|
||||
<key>hash2</key>
|
||||
<data>
|
||||
yItRRdWTDBHEqWXkBQ66ykO15PDNTn29XmtZY5MeesA=
|
||||
</data>
|
||||
</dict>
|
||||
<key>Modules/unimoduleLimeSvg.swiftmodule/Project/x86_64-apple-ios-simulator.swiftsourceinfo</key>
|
||||
<dict>
|
||||
<key>hash2</key>
|
||||
<data>
|
||||
WpgLzGIun9mQZX3GXNQQF/wmAv0n/qzfMUe2Ac8rJno=
|
||||
</data>
|
||||
</dict>
|
||||
<key>Modules/unimoduleLimeSvg.swiftmodule/x86_64-apple-ios-simulator.abi.json</key>
|
||||
<dict>
|
||||
<key>hash2</key>
|
||||
<data>
|
||||
UKJzsijDj8RUY3ZNrJvm0x8i27BkTuvAH2Uw1AlwG8Y=
|
||||
</data>
|
||||
</dict>
|
||||
<key>Modules/unimoduleLimeSvg.swiftmodule/x86_64-apple-ios-simulator.private.swiftinterface</key>
|
||||
<dict>
|
||||
<key>hash2</key>
|
||||
<data>
|
||||
WpeX9z6CL/3MC/eIryWdQPudnYw3zcAsfE5ITMzxodc=
|
||||
</data>
|
||||
</dict>
|
||||
<key>Modules/unimoduleLimeSvg.swiftmodule/x86_64-apple-ios-simulator.swiftdoc</key>
|
||||
<dict>
|
||||
<key>hash2</key>
|
||||
<data>
|
||||
X+5lpMhExxBrexdeBfZ+LaDMBrqAOgDKlXQ0vxQ3waI=
|
||||
</data>
|
||||
</dict>
|
||||
<key>Modules/unimoduleLimeSvg.swiftmodule/x86_64-apple-ios-simulator.swiftinterface</key>
|
||||
<dict>
|
||||
<key>hash2</key>
|
||||
<data>
|
||||
WpeX9z6CL/3MC/eIryWdQPudnYw3zcAsfE5ITMzxodc=
|
||||
</data>
|
||||
</dict>
|
||||
<key>Modules/unimoduleLimeSvg.swiftmodule/x86_64-apple-ios-simulator.swiftmodule</key>
|
||||
<dict>
|
||||
<key>hash2</key>
|
||||
<data>
|
||||
yS8gsF8Zn4y85boJM0ctR2VPZ9Y/EEK/agE0HHQj+s0=
|
||||
</data>
|
||||
</dict>
|
||||
<key>config.json</key>
|
||||
<dict>
|
||||
<key>hash2</key>
|
||||
<data>
|
||||
Fo/X5AmNDDUqJ4o8kFF60K9pTDiQEafR9Rzvsmrg4Mk=
|
||||
</data>
|
||||
</dict>
|
||||
</dict>
|
||||
<key>rules</key>
|
||||
<dict>
|
||||
<key>^.*</key>
|
||||
<true/>
|
||||
<key>^.*\.lproj/</key>
|
||||
<dict>
|
||||
<key>optional</key>
|
||||
<true/>
|
||||
<key>weight</key>
|
||||
<real>1000</real>
|
||||
</dict>
|
||||
<key>^.*\.lproj/locversion.plist$</key>
|
||||
<dict>
|
||||
<key>omit</key>
|
||||
<true/>
|
||||
<key>weight</key>
|
||||
<real>1100</real>
|
||||
</dict>
|
||||
<key>^Base\.lproj/</key>
|
||||
<dict>
|
||||
<key>weight</key>
|
||||
<real>1010</real>
|
||||
</dict>
|
||||
<key>^version.plist$</key>
|
||||
<true/>
|
||||
</dict>
|
||||
<key>rules2</key>
|
||||
<dict>
|
||||
<key>.*\.dSYM($|/)</key>
|
||||
<dict>
|
||||
<key>weight</key>
|
||||
<real>11</real>
|
||||
</dict>
|
||||
<key>^(.*/)?\.DS_Store$</key>
|
||||
<dict>
|
||||
<key>omit</key>
|
||||
<true/>
|
||||
<key>weight</key>
|
||||
<real>2000</real>
|
||||
</dict>
|
||||
<key>^.*</key>
|
||||
<true/>
|
||||
<key>^.*\.lproj/</key>
|
||||
<dict>
|
||||
<key>optional</key>
|
||||
<true/>
|
||||
<key>weight</key>
|
||||
<real>1000</real>
|
||||
</dict>
|
||||
<key>^.*\.lproj/locversion.plist$</key>
|
||||
<dict>
|
||||
<key>omit</key>
|
||||
<true/>
|
||||
<key>weight</key>
|
||||
<real>1100</real>
|
||||
</dict>
|
||||
<key>^Base\.lproj/</key>
|
||||
<dict>
|
||||
<key>weight</key>
|
||||
<real>1010</real>
|
||||
</dict>
|
||||
<key>^Info\.plist$</key>
|
||||
<dict>
|
||||
<key>omit</key>
|
||||
<true/>
|
||||
<key>weight</key>
|
||||
<real>20</real>
|
||||
</dict>
|
||||
<key>^PkgInfo$</key>
|
||||
<dict>
|
||||
<key>omit</key>
|
||||
<true/>
|
||||
<key>weight</key>
|
||||
<real>20</real>
|
||||
</dict>
|
||||
<key>^embedded\.provisionprofile$</key>
|
||||
<dict>
|
||||
<key>weight</key>
|
||||
<real>20</real>
|
||||
</dict>
|
||||
<key>^version\.plist$</key>
|
||||
<dict>
|
||||
<key>weight</key>
|
||||
<real>20</real>
|
||||
</dict>
|
||||
</dict>
|
||||
</dict>
|
||||
</plist>
|
||||
7
uni_modules/lime-svg/utssdk/app-ios/config.json
Normal file
7
uni_modules/lime-svg/utssdk/app-ios/config.json
Normal file
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"deploymentTarget": "11",
|
||||
"dependencies-pods": [{
|
||||
"name": "SVGKit",
|
||||
"version": "3.0.0"
|
||||
}]
|
||||
}
|
||||
BIN
uni_modules/lime-svg/utssdk/app-ios/fileUtils.uts
Normal file
BIN
uni_modules/lime-svg/utssdk/app-ios/fileUtils.uts
Normal file
Binary file not shown.
BIN
uni_modules/lime-svg/utssdk/app-ios/index.uts
Normal file
BIN
uni_modules/lime-svg/utssdk/app-ios/index.uts
Normal file
Binary file not shown.
BIN
uni_modules/lime-svg/utssdk/app-ios/utils.uts
Normal file
BIN
uni_modules/lime-svg/utssdk/app-ios/utils.uts
Normal file
Binary file not shown.
Reference in New Issue
Block a user