vue中一个标题过多,选中时自动滚动到中间

最新推荐文章于 2024-07-18 18:12:43 发布

樵得樵眼笑眉舒

最新推荐文章于 2024-07-18 18:12:43 发布

阅读量1k

点赞数 1

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45496202/article/details/121280976

版权

Vue.js 信息列表动态切换低碳主题高亮显示

关键词由CSDN通过智能技术生成

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

废话少说,先看效果

效果图

下面放代码

<template>
  <div>
    <div class="info">
      <div class="info-list">
        <div class="info-list-box" id="infomationTitleBox">
          <ul class="info-list-ul" id="infomationTitleUl">
            <li :class="item.isHighlight ? 'info-list-li highlight' : 'info-list-li'" v-for="item,index in titleList" :key="item.title + index" :id="'infomation' + index" @click="clickTitle(item, index)">
              {{ item.title }}
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        titleList:[
          { title: '最新', isHighlight: true, },
          { title: '电影推荐', isHighlight: false, },
          { title: '濒危动物', isHighlight: false, },
          { title: '爱豆说环保', isHighlight: false, },
          { title: '环保书籍', isHighlight: false, },
          { title: '在线咨询', isHighlight: false, },
          { title: '政策文件', isHighlight: false, },
          { title: '低碳视频', isHighlight: false, },
          { title: '低碳艺术', isHighlight: false, },
          { title: '低碳标讯', isHighlight: false, },
          { title: '低碳福建', isHighlight: false, },
          { title: '低碳上海', isHighlight: false, },
          { title: '低碳北京', isHighlight: false, },
          { title: '低碳深圳', isHighlight: false, },
          { title: '低碳广州', isHighlight: false, },
          { title: '低碳天津', isHighlight: false, },
          { title: '低碳杭州', isHighlight: false, },
          { title: '低碳南京', isHighlight: false, },
          { title: '低碳湖北', isHighlight: false, },
          { title: '低碳四川', isHighlight: false, },
        ],
      }
    },
    computed: {
      width () {
        let domWidth = (document.getElementById('infomationTitleBox').offsetWidth) / 2
        return domWidth
      }
    },
    mounted() {},
    methods: {
      clickTitle(item, index) {
        // console.log(item)
        this.titleList.forEach((i) => {
          i.isHighlight = false
        });
        item.isHighlight = true
        let domId = 'infomation' + index
        let domLeft = document.getElementById(domId).offsetLeft
        let ulDom = document.getElementById('infomationTitleUl')
        // console.log(ulDom)
        if(domLeft > this.width) {
          ulDom.style.left = (this.width - domLeft) + 'px'
        } else {
          ulDom.style.left = 0
        }
      }
    }
  }
</script>
<style lang='scss' scoped>
.info {
  width: 60%;
  margin: 50px auto;
  .info-list {
    width: 100%;
    .info-list-box {
      width: 100%;
      position: relative;
      overflow: hidden;
      height: 40px;
      .info-list-ul {
        display: flex;
        position: absolute;
        transition: all .3s;
        .info-list-li {
          padding: 4px 12px;
          white-space: nowrap;
          cursor: pointer;
        }
        .info-list-li:hover {
          color: #409EFF;
        }
        .highlight {
          position: relative;
          background-color: #409EFF;
          color: #fff;
        }
        .highlight:hover {
          color: #fff;
        }
        .highlight::after {
          content: '';
          position: absolute;
          bottom: -5px;
          left: 50%;
          transform: translateX(-50%);
          width:0;
          height:0;
          border-left: 5px solid transparent;
          border-right: 5px solid transparent;
          border-top: 5px solid #409EFF;
        }
      }
    }

  }
}
</style>