wx-vue

# Sidebar 侧边导航栏

提供 wx-sidebar 和 wx-sidebar-item 两个组件。

# 基本用法

<wx-sidebar v-model="s1" style="height: 312px;">
  <wx-sidebar-item :label="`标签${i}`" v-for="i in 11" :key="i">内容{{i}}</wx-sidebar-item>
</wx-sidebar>

<script>
export default {
  data() {
    return {
      s1: 1
    };
  }
};
</script>

# 禁用

<wx-sidebar v-model="s2" style="height: 260px;">
  <wx-sidebar-item :label="`标签${i}`" v-for="i in 2" :key="i">内容{{i}}</wx-sidebar-item>
  <wx-sidebar-item label="标签3" disabled>内容3</wx-sidebar-item>
  <wx-sidebar-item label="标签4">内容4</wx-sidebar-item>
</wx-sidebar>

<script>
export default {
  data() {
    return {
      s2: 0
    };
  }
};
</script>

# Line 设置

<wx-sidebar v-model="s3" style="height: 260px;" :line-width="3" line-color="#ff0000">
  <wx-sidebar-item :label="`标签${i}`" v-for="i in 4" :key="i">内容{{i}}</wx-sidebar-item>
</wx-sidebar>

<script>
export default {
  data() {
    return {
      s3: 0
    };
  }
};
</script>

# 事件

<wx-sidebar v-model="s4" style="height: 260px;" @change="handleChange">
  <wx-sidebar-item :label="`标签${i}`" v-for="i in 4" :key="i">内容{{i}}</wx-sidebar-item>
</wx-sidebar>

<script>
export default {
  data() {
    return {
      s4: 0
    };
  },
  methods: {
    handleChange(index) {
      this.$toast(`标签页${index}`);
    }
  }
};
</script>
参数 说明 类型 可选值 默认值
v-model/value 绑定值 String/Number - -
lineWidth 选中时，侧边Border框度，默认单位px Number - -
lineColor 选中时，侧边Border颜色 String - -
事件名称 说明 回调参数
change 点击侧边标签项时触发 index: String/Number，绑定值
参数 说明 类型 可选值 默认值
label 侧边标签项标题 String - -
name 侧边标签项名称，用于侧边标签页绑定 String - -
disabled 禁用状态 Boolean - false
back
侧边导航栏

← Tab 标签页 →