starport-vue
v1.0.5
Published
Vue Share Element
Downloads
9
Maintainers
Readme
用法
想要体验的小伙伴可以试一试
写了一个十分简单的动画,有兴趣的伙伴可以重写动画 ,他们分别是ThroughGo
和ThroughBack
,代表着进入路由的动画和离开路由的动画
npm install starport-vue
- 在入口文件中引入
如果有小伙伴使用了
ts
,需要新建一个.d.ts
声明一下
import StarPort from "starport-vue"
import "starport-vue/style.css"
app.use(StarPort)
- 在组件中使用
- 建议您为元素绑定好选择器,内部在工作的时候需要知道起点和落点,这能确保它正确的工作
<div>
<div v-for="(item, index) in data" :class="'homeWrapper' + index">
<StarPort
start="/home"
:startEl="'.homeWrapper' + index"
end="/about"
:key="index"
endEl=".aboutWrapper"
:id="index + 'asd'"
>
<img :src="item" />
</StarPort>
</div>
</div>
| 参数 | 说明 | 类型 | | ----- | --------------------------------------------------- | ------ | | end | 到达的路由 | string | | endEl | 到达的元素,是一个选择器,标签、类、id 选择器都可以 | string | | start | 开始的路由 | string |