/vue_sliding_tab

vue

Primary LanguageVue

vue_sliding_tab

vue 的滑块标签

版本

1.0.4

使用说明

npm install vue_slideing_tab

<template>
    ...
    <slider :sliderProperty="probj"></slider>
    ...
</template>

<script>
    import slider from 'vue_sliding_tab'

    ...
    data () {
        return {
            probj: {
                // 算了，还是必须吧，没名字怪可怜的。
                name: string,
                // 标签页的内容，缺省为[1,2,3,4]
                tabList: array,
                // 滑动动画的时间，缺省为500，单位毫秒
                TransTime: number
                // 滑动动画的类型，缺省为 'ease-in'
                TransType: string
                // 激活的标签的样式，缺省为 'background: #000'
                TransActiver: string
            }
        }
    }
    ...
</script>

<style>
    ...
    .slider_flexbox_child {
        // 每个tab的样式
    }
    .slider_wrapper_${name} .slider_flex_child {
        // 名为name的组件下，每个tab的样式
    }
    ...
</style>

注意事项

  1. 最多可以支持12个滑块;

  2. 父组件需要改写 slider_tab 的样式时，css不可以使用 scoped;

  3. tabList 中可以插入html标签块;

  4. name 滑块的名称，非必须,但单组件中若引入多个slider则必须，否则会引起样式覆盖，1.0.4版本改为必须。

样式调整

在引用 slider_tab 的组件 <css> 中写入样式即可;

整个标签页包在 slider_wrapper 下;

每一个标签的类为 slider_flexbox_chlid;

每一个滑块的通道的类为 slider_road, 每个滑块类为 slider_road > div

todo

  1. 复杂的动画。