324 lines
8.8 KiB
Plaintext
324 lines
8.8 KiB
Plaintext
<template>
|
||
<!-- #ifdef APP-IOS || APP-ANDROID || APP-HARMONY-->
|
||
<!-- <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> -->
|
||
<!-- <image class="l-svg-" v-bind="$attrs" v-if="color == '' && src.indexOf('<svg') != 0 && src.indexOf('data:image') != 0" :src="src" @error="onError" @load="onLoadImage" /> -->
|
||
<native-view class="l-svg" 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 UNI-APP-X && APP || 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 onLoadImage = (e: UniImageLoadEvent) => {
|
||
emit('load', e)
|
||
}
|
||
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(() => {
|
||
if(props.color == '') return
|
||
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> |