vue控制滚动条滑动，平滑滑动smooth，隐藏滚动条

最新推荐文章于 2024-07-12 21:40:01 发布

Xu_Lisa

最新推荐文章于 2024-07-12 21:40:01 发布

阅读量1.1k

点赞数

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

本文链接：https://blog.csdn.net/qq_43228135/article/details/125378620

版权

Vue.js 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

前端优化

3 篇文章 0 订阅

订阅专栏

这是一个关于Vue.js组件的实现，名为ChosenTags，用于展示和管理已选择的标签。用户可以左右滑动查看标签，点击关闭图标删除特定标签。组件还提供了滚动功能，允许用户通过点击箭头来滚动标签列表。当标签被删除时，会同步更新父组件的数据并触发'closeTag'事件。

摘要由CSDN通过智能技术生成

<!--
 * @模块组件: 已选择的标签--初步组件
 * @Comp: <chosen-tags>
 * @desc: 已选择的标签，可左右滑动
 * @author: 叶良辰
 * @Date: 2022-06-17 17:01:17
 * @param: {Array} [tags: required] - 选中的标签数组
 * @example: 调用示例
 * <chosen-tags :tags.sync="tags"></chosen-tags>
 * @LastEditors: 叶良辰
 * @LastEditTime: 2022-06-20 14:07:51
-->
<template>
  <div class="search-chosed">
    <div class="copywriting">已选择：</div>
    <div ref="tagsCtn" class="tags-ctn">
      <el-tag ref="tags" v-for="(tag,index) in tags" size="mini" closable :key="tag.key" style="margin-left:10px" @close="closeTag(tag,index)">{{tag.label}}</el-tag>
    </div>
    <div v-if="showMoveIcon" class="move-icons">
      <i class="move-icon el-icon-arrow-left" style="margin-right:12px" @click="roll('left')"></i>
      <i class="move-icon el-icon-arrow-right" @click="roll('right')"></i>
    </div>
  </div>
</template>

<script>

export default {
  name:'ChosenTags',

  components:{},

  props:{
    showMoveIcon:{
      type:Boolean,
      default:true
    },
    tags:{
      type:Array,
      default:()=>[],
    }
  },

  data () {
     return {

     };
  },

  methods: {
    closeTag(tag,index){
      // 删除指定标签，按道理，对tags进行操作时，父组件的数据也同时改变了
      this.tags.splice(index,1)
      // 向父组件传出事件
      this.$emit('closeTag',this.tags)
    },
    roll(direction){
      console.log(direction,this.$refs.tagsCtn.scrollLeft);
      if(direction==='left'){
        console.log('向左');
        this.$refs.tagsCtn.scrollLeft -= 100
      }else{
        console.log('向右');
        this.$refs.tagsCtn.scrollLeft += 100
      }
    }
  },

  watch: {},

  filter: {},

  created() {},

  mounted() {},

  destroyed() {},

  // 路由钩子
}
</script>
<style lang='scss' scoped>
.search-chosed {
  position: relative;
  width: 100%;
  display: flex;
  font-size: 12px;
  margin-bottom: 24px;
  .copywriting {
    color: #666666;
    flex-shrink: 0;
    font-size: 12px;
  }
  .tags-ctn {
    display: flex;
    margin-right: 55px;
    overflow-y: hidden;
    overflow-x: auto;
    &::-webkit-scrollbar {
      display: none; /* Chrome Safari */
    }
    scroll-behavior: smooth;
  }
  .move-icons {
    position: absolute;
    right: 0;
    margin-right: 0;
    .move-icon {
      font-size: 14px;
      &:hover {
        cursor: pointer;
      }
    }
  }
}
</style>