Breadcrumbs 面包屑路径 APP

该方法或组件支持移动端小程序调用

PC

该方法或组件支持桌面端小程序调用

<template>
  <div>
    <div class="demoName">
      <a class="icon" @click="$router.push({path:'/'})"></a>
      <div class="comp-title">button</div>
    </div>
    <h3>使用方法</h3>
    <p>基本用法</p>
    <Breadcrumbs :pathes="pathes" @pathClick="pathClick" />
    <WhiteSpace />
    <p>自定义面包屑分隔符号</p>
    <Breadcrumbs :pathes="pathes" devideIcon="❭" @pathClick="pathClick" />
    <WhiteSpace />
    <p>路径超出可左右滑动</p>
    <Breadcrumbs :pathes="pathes2" @pathClick="pathClick" />
    <WhiteSpace />
    <p>取消自动滑动到最后</p>
    <Breadcrumbs :pathes="pathes2" :scrollToEnd="false" @pathClick="pathClick" />
    <p>深色模式</p>
    <Breadcrumbs :pathes="pathes2" :scrollToEnd="false" @pathClick="pathClick" mode='dark' />
  </div>
</template>
<script>
  export default {
    name: 'breadcrumbsExample',
    data () {
      return {
        pathes: [
          {name: 'Folder 1', id: '0'},
          {name: 'Folder 2', id: '1'},
          {name: 'Folder 3', id: '2'},
          {name: 'Folder 4', id: '3'}
        ],
        pathes2: [
          {name: 'Department 1', id: '0'},
          {name: 'Department 2', id: '1'},
          {name: 'Department 3', id: '2'},
          {name: 'Department 4', id: '3'},
          {name: 'Department 5555555555555', id: '5'},
          {name: 'Department 6666666666666', id: '6'}
        ]
      }
    },
    methods: {
      pathClick(path) {
        alert(path.name)
      }
    }
  }
</script>