vue 内容超出实现展开、收起功能

最新推荐文章于 2025-03-17 11:29:06 发布

盐多碧咸。。

最新推荐文章于 2025-03-17 11:29:06 发布

阅读量1.3k

点赞数 5

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/Z18834071903/article/details/137826251

版权

文章描述了一个Vue组件，用于展示可切换的标签列表，支持单选和多选模式。组件使用了v-for指令遍历数据，通过不同的filterType判断显示单选或多选选项。用户可以通过点击标签进行选择并触发相应的事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html部分（效果图在文章末尾）

<template>
  <div>
    <div
      v-for="(item, index) in allTags"
      :key="index"
      class="tagAll">
      <span class="tagTitle">{{ item.tagName }}</span>
      <div class="tagContent">
        <div 
          class="isToggle"
          :class="item.isToggle ? 'toggle' : ''">
          <template v-if="item.filterType === 'singleChioce'">
            <div
              v-for="(tag, _idx) in item.tagList"
              :key="_idx"
              @click="clickTagSingle(tag,_idx,index,allTags)"
              class="tagItemName" 
              :class="(allTags[index].selectIdx === _idx && allTags[index].isActive) || (tag === '全部' && !allTags[index].isActive) ? 'selectTag' : ''"
              >{{ tag }}
            </div>
          </template>
          <template v-if="item.filterType === 'multipleChioce'">
            <div
              v-for="(tag, _idx) in item.tagList"
              :key="_idx"
              @click="clickTagMultiple(tag,_idx,index,allTags)"
              class="tagItemName" 
              :class="(tag.isChecked) || (tag.name === '全部' && tag.isChecked) ? 'selectTag' : ''"
              >{{ tag.name }}
            </div>
          </template>  
        </div>
      </div>
      <div 
        v-if="item.tagList.length > 16"
        class="more_btn">
        <el-button size="mini" type="text" @click="item.isToggle = !item.isToggle">
          {{ item.isToggle ? '收起' : '更多' }}
          <i :class="item.isToggle ? 'el-icon-caret-top' : 'el-icon-caret-bottom'"></i>
        </el-button>
      </div>
    </div>
  </div>
</template>

js部分

<script>
export default {
  name: 'filterByMore',
  components: {},
  props: {
    // allTags: {
    //   type: Array
    // }
  },
  data () {
    return {
      selectArr: [],
      // 单选和多选的数据格式
      allTags:[
        {
          tagName: '标签1',
          isToggle: false,
          isActive: false,
          selectIdx: null,
          filterType: 'singleChioce', // singleChioce 单选，
          tagList: ['全部','aaa','bbb','ccc','ddd']
        },
        {
          tagName: '标签2',
          isToggle: false,
          isActive: false,
          selectIdx: null,
          filterType: 'multipleChioce', // multipleChioce 多选
          tagList: [
            {
              name: '全部',
              isChecked: true,
            },
            {
              name: 'qqq',
              isChecked: false
            },
            {
              name: 'www',
              isChecked: false
            },
            {
              name: 'eee',
              isChecked: false
            }
          ],
        },
      ],
    }
  },
  created () {},
  mounted () {},
  computed: {},
  watch: {},
  methods: {
    // 单选
    clickTagSingle (tag,_idx,index,allTags) {
      // console.log(tag,_idx,index,'tag,_idx,index');
      // console.log(allTags[index],'allTags[index]');
      if (tag === '全部') {
        tag = ''
      }
      if (allTags[index].selectIdx === _idx) {
        allTags[index].isActive = !allTags[index].isActive
      } else {
        allTags[index].isActive = true
      }
      allTags[index].selectIdx = _idx
      this.$emit('clickTag',tag,_idx,index,allTags[index])
    },

    // 多选
    clickTagMultiple (tag,_idx,index,allTags) {
      // console.log(tag,_idx,index,'tag,_idx,index');
      // console.log(allTags[index],'allTags[index]');
      tag.isChecked = !tag.isChecked

      if (tag.name === '全部') {
        allTags[index].tagList.forEach((item) => {
          item.isChecked = false
        })
        tag.isChecked = true
      } 
      if (tag.name !== '全部' && tag.isChecked) {
        this.$set(allTags[index].tagList,0,{isChecked: false,name: '全部',})
      }
      if (tag.name !== '全部' && !tag.isChecked) {
        let allData = allTags[index].tagList.every((item) => {
          return !item.isChecked
        })
        if (allData) {
          this.$set(allTags[index].tagList,0,{isChecked: true,name: '全部',})
        }
      }
      this.$emit('clickTag',tag,_idx,index,allTags[index])
    },

  },
}
</script>

css部分

<style lang="scss" scoped>
.tagAll {
  display: flex;
  margin-bottom: 8px;
}

.tagTitle {
  font-size: 13px;
  font-weight: 700;
  margin: 3px 10px 5px 0;
  white-space: nowrap;
}
.tagContent {
  display: flex;
  flex-direction: row;
  background: #f2f3f7;
  border-radius: 2px;
}
.tagItemName {
    display: inline-block;
    margin-right: 25px;
    cursor: pointer;
    &:hover {
      background-color: #cfcccc;
    }
  }
.more_btn {
  cursor: pointer;
  white-space: nowrap;
}

.isToggle {
  flex: 1;
  padding: 2px;
  font-size: 12px;
  height: 24px;
  line-height: 18px;
  overflow: hidden;
  transition: all 0.25s ease;
  background: #f2f3f7;
  border-radius: 2px;
}
.toggle {
  height: 40px;
  line-height: 18px;
  overflow-y: hidden;
  transition: all 0.25s ease;
  }
  
  .selectTag{
    border: 1Px solid rgba(250,89,20,.65);
    border-radius: 2px;
    color: #fa5914;
  }
  .starTag {
    cursor: pointer;
    &:hover {
      background-color: #cfcccc;
    }
  }
  
</style>