You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
270 lines
6.6 KiB
270 lines
6.6 KiB
<template>
|
|
<!-- #ifdef APP -->
|
|
<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>
|
|
<!-- #endif -->
|
|
<!-- #ifdef WEB -->
|
|
<view class="l-svg" v-if="src.startsWith('<svg')" v-html="src" :style="styles" @click="$emit('click')"></view>
|
|
<view class="l-svg" :class="{'is-inherit': isInherit}" v-else :style="styles" @click="$emit('click')">
|
|
<image class="l-svg-img" :src="src" @error="onError" @load="onLoad"/>
|
|
</view>
|
|
<!-- #endif -->
|
|
<!-- #ifndef APP || WEB -->
|
|
<view class="l-svg" :class="{'is-inherit': isInherit}" :style="styles" @click="$emit('click')">
|
|
<image class="l-svg-img" :src="path" @error="onError" @load="onLoad"></image>
|
|
</view>
|
|
<!-- #endif -->
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import { LSvpProps } from './type'
|
|
// #ifndef APP || WEB
|
|
import { pathToDataUrl, svgToDataUrl } from './utils'
|
|
// #endif
|
|
// #ifdef APP
|
|
import { pathToDataUrl, svgToDataUrl } from './utils'
|
|
// #endif
|
|
|
|
|
|
const props = withDefaults(defineProps<LSvpProps>(), {
|
|
src: '',
|
|
color: '',
|
|
web: false,
|
|
inherit: false
|
|
})
|
|
const emits = defineEmits(['load', 'error', 'click'])
|
|
const path = ref(props.src)
|
|
// #ifndef APP
|
|
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 = () => {
|
|
emits('error', errorEvent)
|
|
}
|
|
const onLoad = (e: UniImageLoadEvent) => {
|
|
// #ifdef WEB
|
|
// @ts-ignore
|
|
imageURL.value = e.target.src
|
|
// #endif
|
|
// #ifdef APP-ANDROID
|
|
// const detail = new ImageLoadEventDetail(512, 512)
|
|
const loadEvent = e;//new UniImageLoadEvent('load', detail)
|
|
// #endif
|
|
// #ifndef APP-ANDROID
|
|
const detail = {
|
|
width: 512,
|
|
height:512
|
|
}
|
|
const loadEvent = {
|
|
type: 'error',
|
|
detail
|
|
}
|
|
// #endif
|
|
|
|
emits('load', loadEvent)
|
|
}
|
|
// app
|
|
// #ifdef APP
|
|
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) => {
|
|
emits('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 => {
|
|
emits('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') {
|
|
emits('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
|
|
emits(type, loadEvent)
|
|
} else if(type == 'error') {
|
|
emits(type, errorEvent)
|
|
}
|
|
}
|
|
// #endif
|
|
|
|
|
|
// #ifdef APP
|
|
// ios uts组件使用uni.request会报错，故在这里使用
|
|
watchEffect(()=>{
|
|
if(!props.web && props.src.startsWith('http')) {
|
|
uni.downloadFile({
|
|
url: props.src,
|
|
success(res) {
|
|
path.value = res.tempFilePath
|
|
}
|
|
})
|
|
// uni.request({
|
|
// url: props.src,
|
|
// dataType: 'text',
|
|
// success(res) {
|
|
// path.value = res.data as string as string | null ?? ''
|
|
// }
|
|
// })
|
|
} else {
|
|
path.value = props.src;
|
|
}
|
|
})
|
|
// #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 => {
|
|
emits('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>
|