Index 索引

介绍

索引列表，可由右侧索引导航快速定位到相应的内容。

引入

import { Index, IndexItem } from 'mind-ui-vue';
Vue.use(Index);
Vue.use(IndexItem);

用法

<m-index @change="onChange">
  <m-index-item name="A">
    <div>文本</div>
    <div>文本</div>
    <div>文本</div>
    <div>文本</div>
    <div>文本</div>
  </m-index-item>

  <m-index-item name="B">
    <div>文本</div>
    <div>文本</div>
    <div>文本</div>
    <div>文本</div>
    <div>文本</div>
  </m-index-item>

  <m-index-item name="C">
    <div>文本</div>
    <div>文本</div>
    <div>文本</div>
    <div>文本</div>
    <div>文本</div>
  </m-index-item>
</m-index>

export default {
  methods: {
    onChange(value) {
      // 当前选中值
      console.log(value);
    }
  }
}

Api

Index Events

事件名称	说明	返回值
change	选中索引值发生变化时的回调函数	value: 新选中的值

Index Props

参数	说明	类型	可选值	默认值
name	索引的名称，会转化到索引列中	String	—	—

Index Slots

名称	说明
-	索引对应的内容

IndexItem Slots

名称	说明
-	索引对应的内容