vue3 setup代码 --使用betterscroll封装后台面包屑导航

后台管理项目面包屑导航

官网地址betterscroll

https://better-scroll.github.io/docs-v1/doc/zh-hans/

引用

npm install better-scroll --save

使用

<template>
  <div class="common_tabs">
    <div class="button pointer " @click="scrollLeft">
      <lay-icon type="layui-icon-left"></lay-icon>
    </div>
    <div class="scroll_wrapper" ref="scroll_wrapper">
      <ul class="scroll_content">
        <li class="scroll_item" v-for="item,index in list" :key="index" @click="tabsItem(item,index)">
          <span>
            <lay-icon type="layui-icon-circle-dot" :color="activeIndex == index ?'#1e9fff': '#d3d3d3' " size="12px"></lay-icon>
          </span>
          <span class="padx5 scroll_text">{{ item.label }}</span>
          <span v-if="item.path !== '/home'" @click="deleteItem(index)">
            <lay-icon type="layui-icon-close" size="12px"></lay-icon>
          </span>
        </li>
      </ul>
    </div>
    <div class="button pointer" @click="scrollRight">
      <lay-icon type="layui-icon-right"></lay-icon>
    </div>
  </div>
  <lay-button @click="addItem">新增</lay-button>
</template>

<script setup>
import BScroll from 'better-scroll'
import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue'
import { useRouter, useRoute, } from 'vue-router'
const route = useRoute()
const router = useRouter()
let bs;
// 数据列表
const list = ref([
  {
    path: '/home',
    label: '首页',
    is_delete: false
  },
])
// 选中项
const activeIndex = ref(0)
// 滚动框模型
const scroll_wrapper = ref(null)

// 向右滚动
const scrollRight = () => {
  bs.scrollBy(-100, 0)
  bs.refresh();
}
// 向左滚动
const scrollLeft = () => {
  bs.scrollBy(100, 0)
  bs.refresh();
}
let sum = ref(0)
// 新增项
const addItem = () => {
  sum.value++
  const item = {
    label: '测试' + sum.value,
    is_delete: false
  }
  list.value.push(item)
  let index = list.value.length - 1
  activeIndex.value = index

}
// 监听选中值的变化
watch(activeIndex, newVal => {
  nextTick().then(() => {
    bs.refresh()
    const selectedItemElement = document.querySelectorAll('.scroll_item')[newVal]
    console.log(selectedItemElement);
    if (selectedItemElement) {
      // 使用 scrollToElement 方法将选中项滚动到可视范围内
      bs.scrollToElement(selectedItemElement, 300);  // 300ms 是滚动动画的时间
    }
  })
})
// 删除项
const deleteItem = index => {
  list.value.splice(index, 1)
}
// 切换导航项
const tabsItem = async (val, index) => {
  activeIndex.value = index
}
onMounted(() => {
  // 实例滚动框
  bs = new BScroll(scroll_wrapper.value, {
    scrollX: true,
    click: true,
  })
})
onUnmounted(() => {
  bs.destroy()
})
</script>

<style lang="scss">
.common_tabs{
  display: flex;
  border: 1px solid #e6e6e6;
}
.scroll_wrapper{
  width:calc(100% - 80px);
  // height: 36px;
  white-space: nowrap;
  overflow:hidden;
  background-color: #fff;
  .scroll_content{
    display: inline-block;
    .scroll_item{
      display: inline-block;
      height: 36px;
      padding: 0 15px;
      border-right: 1px solid #e6e6e6;
      line-height: 36px;
      text-align: center;
      font-size: 14px;
      cursor: pointer;
    }
  }
}
.button{
  width: 40px;
  height: 36px;
  text-align: center;
  line-height: 36px;
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
  background-color: #fff;
}
</style>

选中项发生变化时会自动将选中项展示在展示区域内