Canvas 介绍

Appearance

v-sidebar ​

介绍

垂直展示的导航栏，用于在不同的内容区域之间进行切换。

预览

sidebar

引入

方式请参考组件用法 。

代码演示 ​

基础用法

js
<v-sidebar v-model="active">
  <v-sidebar-item text="标签名称1" :config="sidebarItemConfig"/>
  <v-sidebar-item text="标签名称2" :config="sidebarItemConfig"/>
  <v-sidebar-item text="标签名称3" :config="sidebarItemConfig"/>
</v-sidebar>

js
export default {
  setup() {
    const active= ref(3);
    const sidebarItemConfig = {
            width: 120,
            height: 80,
            name: 'focusable',
            class: 'sidebar-item',
            fill: '#fff',
            focusFill: '#000', // 落焦字体颜色
            activeFill: '#F66239', // 激活字体颜色
            focusBackground: '', // 落焦背景颜色
            activeBackground: '#0f0', // 激活背景颜色
            focusStyle: 'normal ', // 落焦字体样式
            activeStyle: 'bold' // 激活字体样式
          };
    return { sidebarItemConfig, active};
  },
};

监听切换事件

设置 change 方法来监听切换导航项时的事件。

js
<v-sidebar v-model="active" @change="onChange">
  <v-sidebar-item text="标签名称" :config="sidebarItemConfig"/>
  <v-sidebar-item text="标签名称" :config="sidebarItemConfig"/>
  <v-sidebar-item text="标签名称" :config="sidebarItemConfig"/>
</v-sidebar>

js
export default {
    setup() {
        const active= ref(3);
        const onChange = (index) => {
            console.log(`标签名 ${index + 1}`)
        }
        const sidebarItemConfig = {
            width: 120,
            height: 80,
            name: 'focusable',
            class: 'sidebar-item',
            fill: '#fff',
            focusFill: '#000', // 落焦字体颜色
            activeFill: '#F66239', // 激活字体颜色
            focusBackground: '', // 落焦背景颜色
            activeBackground: '#0f0', // 激活背景颜色
            focusStyle: 'normal ', // 落焦字体样式
            activeStyle: 'bold' // 激活字体样式
          };
        return {
            active,
            onChange,
            sidebarItemConfig
        };
    },
};

API ​

Sidebar Props）

参数说明类型默认值
active当前导航项的索引number0
config支持全部v-group属性object--

Sidebar Events

事件名说明回调参数
change切换导航项时触发index: number

SidebarItem Props）

参数说明类型默认值
text内容numberstring
config支持全部v-rect属性object--
  L fill默认字体颜色string#000000
  L focusFill落焦字体颜色string#FFFFFF
  L activeFill激活字体颜色string#F66239
  L focusBackground落焦背景颜色string#000000
  L activeBackground激活背景颜色string#F5A28E
  L focusStyle落焦字体样式normal bold italicnormal
  L activeStyle激活字体样式normal bold italicbold