3.2.1 • Published 5 months ago
vue-share-element v3.2.1
vue-share-element(已兼容Vue3 + ts)
简介
- 实例
- 效果
vue-share-element基于vue的单界面路由动画跳转插件。
使用 共享元素的方式 给路由跳转增加动画。
安装
npm install vue-share-element
一对一情况
A页面 (pageA)
<template> <VueShareElement> <button @click="$router.push('/user')">pageA</button> </VueShareElement> </template> <script lang="ts" setup> import VueShareElement from "vue-share-element"; </script>
B页面 (pageB)
<template> <VueShareElement> <button @click="$router.go(-1)">pageB</button> </VueShareElement> </template> <script lang="ts" setup> import VueShareElement from "vue-share-element"; </script> <style scoped> /* 为了显示动画效果 */ button { position: absolute; bottom: 10px; } </style>
注意:
一对一代表:push界面只包含一个子元素
接收界面的元素无论什么情况下,只能含一个
多对一情况
A页面 (pageA)
<template> <VueShareElement @click="toPage" class="list" ref="shareElementRef"> <img v-for="item in list" :key="item" :share="item" :data-src="item" :src="item" /> </VueShareElement> </template> <script lang="ts" setup> import { onMounted, ref } from "vue"; import { useRouter } from "vue-router"; import VueShareElement from "vue-share-element"; const router = useRouter(); const shareElementRef = ref<InstanceType<typeof VueShareElementVue>>(); const list = [ "https:xxxx", "https:xxxx", "https:xxxx", "https:xxxx", "https:xxxx", ]; onMounted(() => { // 动画结束钩子 shareElementRef.value?.setHooks(() => { console.log("结束"); }); }); /* 为了更好记录共享元素,多对一情况下需要父容器代理事件 通过 子元素 data- 传递数据 */ function toPage(params: DOMStringMap) { if (params.src) router.push({ path: "/pageB", query: { img: encodeURIComponent(params.src) } }); } </script> <style scoped> .list { display: flex; } .list img { width: 100px; height: 50px; margin: 12px; cursor: pointer; } </style>
B页面 (pageB)
<template> <div class="page-b"> <VueShareElement> <img :src="src" @click="$router.go(-1)" /> </VueShareElement> <span>图片信息</span> </div> </template> <script lang="ts" setup> import { onMounted, ref } from "vue"; import { useRoute } from "vue-router"; import VueShareElement from "vue-share-element"; let src = ref(""); const route = useRoute(); onMounted(() => { let url = route.query.img as string; src.value = decodeURIComponent(url); }); </script> <style scoped> .page-b { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .page-b img { width: 300px; height: 200px; } </style>
注意:
- 接收界面是异步渲染的情况下,需要提前定型(提前设置好元素宽高)
- 注意 share 是唯一的,相当于v-key,进行记录触发共享元素key
- *如果在数据多出现滚动条情况下,滚动条一定在父容器上,如果是body或更上级挤出来的滚动条,位置会计算问题 (解决:限制VueShareElementVue的宽高,让滚动条在VueShareElementVue上,VueShareElementVue会自动计算位置)。
{ width: 100px; height: 300px; overflow: auto; }
props属性
- delay:设置动画延迟时间(默认:0.62秒)
- zIndex: 设置动画层级(默认:2001)
emit函数
- setHooks(end:Function):添加生命周期
附
- 1.x.x:兼容vue2,文档根据版本README
- 2.x.x:兼容vue3,文档根据版本README
- 3.x.x:兼容vue3+ts
3.2.1
5 months ago
3.2.0
5 months ago
3.1.3
10 months ago
3.1.2
10 months ago
3.1.1
10 months ago
3.1.0
10 months ago
3.0.7
11 months ago
3.1.4
10 months ago
2.0.5
1 year ago
2.0.4
1 year ago
3.0.4
1 year ago
3.0.3
1 year ago
3.0.2
1 year ago
3.0.1
1 year ago
3.0.6
1 year ago
3.0.5
1 year ago
3.0.0
1 year ago
1.4.2
2 years ago
1.3.3
2 years ago
1.4.1
2 years ago
1.4.0
2 years ago
2.0.3
2 years ago
2.0.2
2 years ago
2.0.1
2 years ago
2.0.0
2 years ago
1.3.2
2 years ago
1.3.1
2 years ago
1.3.0
2 years ago
1.2.4
2 years ago
1.2.3
2 years ago
1.2.2
2 years ago
1.2.1
2 years ago
1.2.0
2 years ago
1.1.0
2 years ago
1.0.0
2 years ago