V-switcher NPM | npm.io

3.0.5 • Published 3 years ago

Install

Weekly downloads

-

License

MIT

Repository

Last release

3 years ago

v-switcher

usage

yarn add v-switcher
// or
npm i v-switcher

import Vue from 'vue'
import VSwitcher from 'v-switcher'
import 'v-switcher/dist/v-switcher.css'

Vue.component(VSwitcher.name, VSwitcher)

props

name	type	default	required	description
headers	Array	[]	Y	tab-header 的数组，支持 icon
default-index	Number	0	N	默认选中的 tab index
routable	Boolean	false	N	设为 true 则为路由模式
animated	Boolean	false	N	是否支持切换动画
duration	Number	300	N	切换动画的时长，ms
align	String	start	N	tab 的展示模式 'around', 'start', 'center', 'end', 'vertical'
swipe	Boolean	false	N	是否支持左右手势滑动
headerTrigger	String	click	N	头部动画触发的方式 'click', 'hover'
anchorTrigger	String	click	N	锚点动画触发的方式 'click', 'hover'
anchorPadding	Number	0	N	锚点元素的 padding 值
autoplay	Number	0	N	自动切换的时长（ms）默认不自动切换
contentWidth	String	100%	N	每个 content 的宽度，默认 100%
headerHeight	Number	40	N	每个 item 的高度(px)，默认 40
fixedTop	Number	undefined	N	如果设值，就为 headers fixed 时距离顶部的高度
sticky	Boolean	false	N	是否使用 100% 高度布局
disabledSwipe	Boolean	false	N	是否禁止 swipe 的 touch 事件
continuousSwipe	Boolean	false	N	当使用 swipe 的时候，是否是无限滚动模式，如果 autoplay > 0 则强制为 true

example

用例比较多，比较复杂，等之后有时间了补在线 demo，现在先把项目 clone 到本地 npm run dev 查看吧

vue switcher carousel tab

@infinitebrahmanuniverse/nolb-v-s @everything-registry/sub-chunk-3037

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago