vue-ladder-list v0.0.4

test only

仅供测试, 学习使用, 请勿用于生产环境

vue-ladder-list

一个梯纵列表

Install

$ npm install vue-ladder-list --save

Usage

<template>
  <vue-ladder-list :visible="visible" :benchmark="benchmark">
    <ul>
      <li>11</li>
      <li>22</li>
      <li>33</li>
      <li>...</li>
    </ul>
  </vue-ladder-list>
</template>

<script>
import VueLadderList from 'vue-ladder-list'

export default {
  components: {
    VueLadderList
  },
  data () {
    return {
      // 控制是否显示, 默认true
      visible: false,
      // transform基准, 默认20
      benchmark: 20
    }
  },
  methods: {
    toggleVisible () {
      // 通过改变visible的值通知组件 显示/隐藏
      this.visible = !this.visible
    }
  }
}
</script>

Props

• visible 列表是否可见, 默认为 true

• benchmark 列表的trnasform基准值(font-size), 每个li标签设置的的css translateX(*em) 由此决定

Notice

• 格式必须是 vue-ladder-list > ul > li, 因为是以 .ladder-list > ul > li 作为选择器来设置li的样式

<vue-ladder-list>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>...</li>
  </ul>
</vue-ladder-list>

• 在控制 :visible 属性时, 如果希望第一次填充数据后出现效果, 可以这样:

data () {
  return {
    // 控制是否显示, 默认true
    visible: false,
    // translate基准, 默认20
    benchmark: 20
  }
},
methods: {
  loadData () {
    // 填充数据
    this.list = [...]
    // 延时0秒设置visible为可见
    setTimeout (() => {
      this.visible = true
    }, 0)
  },
  toggleVisible () {
    // 通过改变visible的值通知组件 显示/隐藏
    this.visible = !this.visible
  }
}

• visible 为false时, 仅仅是将组件的opacity设置为0而已, 所以列表节点还是存在

• :benchmark 会被设置为 vue-ladder-list 的font-size, 所以不能再在li标签上单独设置font-size

• 只有列表的前15个元素有效果