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.
79 lines
1.5 KiB
79 lines
1.5 KiB
<template>
|
|
<div class="">
|
|
<van-overlay :show="show" @touchstart="handelTouchstart" @touchmove="handelTouchmove" @touchend="handelTouchend"/>
|
|
<img src="@/assets/images/share/tip.png" alt="" class="tip" v-if="show" @click="$emit('closeShare')">
|
|
<img src="@/assets/images/share/ai.gif" alt="" class="ai" v-if="show">
|
|
<img src="@/assets/images/share/shadow.png" alt="" class="shadow">
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
name: 'SvgIcon',
|
|
data() {
|
|
return {
|
|
time: null,
|
|
flag:false
|
|
}
|
|
},
|
|
props: {
|
|
show: {
|
|
type: Boolean,
|
|
required: false
|
|
},
|
|
},
|
|
computed: {
|
|
|
|
},
|
|
methods: {
|
|
handelTouchstart() {
|
|
this.flag = true;
|
|
clearTimeout(this.time)
|
|
this.time = setTimeout(()=>{
|
|
if(this.flag){
|
|
this.$emit('closeShare')
|
|
}
|
|
},1500)
|
|
},
|
|
handelTouchmove(){
|
|
this.flag = false;
|
|
},
|
|
handelTouchend(){
|
|
this.flag = false;
|
|
}
|
|
},
|
|
destroyed(){
|
|
clearInterval(this.time)
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.tip {
|
|
position: absolute;
|
|
top: 30px;
|
|
left: 90px;
|
|
z-index: 2;
|
|
width: 270px;
|
|
height: 206px;
|
|
}
|
|
|
|
.ai {
|
|
position: absolute;
|
|
top: 50px;
|
|
left: 70px;
|
|
z-index: 2;
|
|
width: 106px;
|
|
height: 92px;
|
|
}
|
|
|
|
.shadow {
|
|
position: absolute;
|
|
top: 125px;
|
|
left: 95px;
|
|
z-index: 2;
|
|
width: 60px;
|
|
height: 25px;
|
|
}
|
|
</style>
|