vue给当前点击的元素添加样式。vue实现tag类型的菜单选中切换效果，vue点击切换样式效果，vue点击选中效果。vue类似tag菜单的样式选中效果

2072人阅读 2020/6/29 17:20 总访问：3943146 评论：0 收藏：0 手机

分类: 前端

[TOC]


## 比较简单的静态Tag选中效果

![](https://img.tnblog.net/arcimg/aojiancc2/c6482fd3756044b693319cc021297f9f.png)

页面：
```
<div class="title-wapper">
  <div class="title " :class="active=='noread'?'cur':''" @click="switchRead(0,'noread')">未读(3)</div>
  <div class="title" :class="active=='all'?'cur':''" @click="switchRead(1,'all')" style="margin-left: 10px;">全部(5)</div>
  <div class="readBut">全部已读</div>
</div>
```
js核心的地方：
```
data() {
      return {
        // 默认是未选中那效果
        active:"noread"
      }
  },
  methods: {
      switchRead(isRead,readTag){
        this.active=readTag
      }
  }
```
vue tag动态生成的菜单样式选中效果，和上面那个静态的逻辑是一样的，参考：
https://www.tnblog.net/xiuxin/article/details/7959



## 绑定样式可以使用方法的形式处理，这样写逻辑更方便了
比如`:class="dealChoise(item.schoolID)"`
```
<div class="shcoolItem" :class="dealChoise(item.schoolID)" @click="changeSchool(item.schoolID)"
            v-for="(item, index) in schoolList" v-bind:key="index">
            {{ item.schoolName }}</div>
```
处理的方法如下，达成某种条件就返回一个选中样式即可
```
methods: {
    dealChoise: function (schoolID) {
        // 找到相同的id就给一个cur样式，达到选中的效果
        if (schoolID === this.$getSchoolId()) {
            return "cur"
        }
    }
}
```
就上面那么一点代码就可以实现这种校区切换页面刷新之后的选中效果了
![](https://img.tnblog.net/arcimg/aojiancc2/3d20cb1d383242a980f0f1ca4bc59ec4.png)


#### 不是循环生成的也可以使用这样方式，原理是完全一样的，贴一下vue3中的写法

效果如下：

![](https://img.tnblog.net/arcimg/aojiancc2/30a47cca25b9413ab026c2bfb87ed9dd.png)

**页面**
```
<view class="classStar">
  <view class="classStarTitle">班级之星</view>
  <view class="splitline"></view>
  <view class="tagWrap">
    <view class="tagContent">
      <view class="tagItem" :class="dealClassStarChoise(1)" @tap="getSortByType(1)">健康</view>
      <view class="tagItem" :class="dealClassStarChoise(3)" @tap="getSortByType(3)">思维</view>
      <view class="tagItem" :class="dealClassStarChoise(2)" @tap="getSortByType(2)">技术</view>
      <view class="tagItem" :class="dealClassStarChoise(4)" @tap="getSortByType(4)">管理</view>
    </view>
    <view @click="openClassStarMorePopup">
      <view class="moreTag">更多 ></view>
    </view>
  </view>
</view>
```
**ts核心部分代码:**
```
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import http from '@/common/request.ts'

const state = reactive({
  studentScoreSortType:[] as any,
  // 这里配置默认选中的
  taskTypeEnum:1 
})

onShow(() => {
  // 默认查询健康的排名数据
  getSortByType(1)
})

// 健康,技术，思维，管理得排名数据
const getSortByType = async (taskTypeEnum:number)=>{
  var res: any = await http.get('/growing/api/StuReport/GetStuScoreSortByClassAndType',{taskTypeEnum:taskTypeEnum})
  state.studentScoreSortType = res.data

  // 记录一下当前需要选中的是什么
  state.taskTypeEnum = taskTypeEnum
}

// 处理tag菜单选中的方法
const dealClassStarChoise=(taskTypeEnum:number)=>{
    if(taskTypeEnum==state.taskTypeEnum)
    {
      return "cur"
    }
}

</script>
```
**其中一点样式也贴一下：**
```
.classStar {
  background-color: #fff;
  margin-top: 23rpx;
  padding-top: 23rpx;
  padding-bottom: 23rpx;

  .classStarTitle {
    font-size: 30rpx;
    color: #3A3B42;
    margin-left: 20rpx;
    // margin-top: 23rpx;
  }

  .tagWrap {
    display: flex;
    justify-content: space-between;
    margin-top: 23rpx;

    .tagContent {
      display: flex;
      margin-left: 30rpx;

      .tagItem {
        width: 110rpx;
        height: 45rpx;
        line-height: 45rpx;
        text-align: center;
        margin-right: 30rpx;
        background: #F5F5F5;
        border-radius: 25px 25px 25px 25px;
        font-size: 28rpx;
        color: #909399;
      }

      .cur {
        background-color: #4D9DF5;
        color: #FFFFFF;
      }
    }

    .moreTag {
      cursor: pointer;
      color: #4D9DF5;
      font-size: 24rpx;
      height: 45rpx;
      line-height: 45rpx;
      margin-right: 30rpx;
    }
  }
}
```



## 选中后的样式不一样的情况，效果如下：
就是tag切换效果，选中的样式是三种不一样的
![](https://img.tnblog.net/arcimg/aojiancc2/cdce159ee3014a81800854cbac847e16.gif)

### 方法一：直接使用dom操作
如果选中样式一样，就可以写死选中的样式了，如果不一样，通过方法传递过来就行,比如上面示例图那种情况。

**html:**
```
<div class="labroom-trend-tag">
  <span class="daychoise" @click="switchChart($event,'daychoise')">日</span>
  <span @click="switchChart($event,'monthchoise')">月</span>
  <span @click="switchChart($event,'termchoise')">学期</span>
</div>
```
**js:**
```
switchChart(event, _className) {
    // 先把元素的样式全部回归成默认状态。默认状态根据情况可以是没有样式的，也可以是有默认样式的
  const childNodes = event.currentTarget.parentNode.childNodes
  for (let index = 0; index < childNodes.length; index++) {
    const element = childNodes[index]
    element.className = ''
  }
  // 给当前点击的元素添加选中样式。这里的样式不一样所以通过方法传递进来的
  event.currentTarget.className = _className
}
```
**一点样式也简单贴一下**
```
.labroom-trend-tag {
  position: absolute;
  right: 10px;
  top: 18px;
}

.labroom-trend-tag span {
  display:inline-block;
  width: 36px;
  height: 18px;
  background: #FFFFFF;
  cursor: pointer;
  border-radius: 2px 2px 2px 2px;
  opacity: 1;
  border: 1px solid #BFEFFF;
  font-size: 12px;
  font-family: MicrosoftYaHei-, MicrosoftYaHei;
  font-weight: normal;
  color: #BFEFFF;
  line-height: 18px;
  text-align: center;
  margin-right: 6px;
}

.labroom-trend-tag  .termchoise
{
  background: #6AB6ED;
  color: #fff;
}

.labroom-trend-tag  .daychoise
{
  background: #31C3F5;
  color: #fff;
}

.labroom-trend-tag  .monthchoise
{
  background: #8AABFF;
  color: #fff;
}
```

### 方法二：使用绑定属性的方式

**html:**
```
<div class="labroom-trend-tag">
  <span :class="daychoise" @click="switchChart($event,'daychoise')">日</span>
  <span :class="monthchoise" @click="switchChart($event,'monthchoise')">月</span>
  <span :class="termchoise" @click="switchChart($event,'termchoise')">学期</span>
</div>
```
这里绑定了三个属性，因为他们选中的样式不一样，如果是一样的话，只需要一个属性就行了，会简单很多。
如果选中样式是一样的话，可以参考：https://www.tnblog.net/xiuxin/article/details/7959

**绑定的属性：**
```
data() {
  return {
    //默认选中一个
    daychoise: 'daychoise',
    monthchoise: '',
    termchoise: ''
  }
}
```
**js：**
同样的道理，因为他们选中的样式不一样，所以要操作三个变量
```
switchChart(event, _className) {
  // 先把元素的样式全部回归成没有选中状态
  this.daychoise = ''
  this.monthchoise = ''
  this.termchoise = ''

  // 点击的哪个就给哪个加上选中的样式
  if (_className === 'daychoise') {
    this.daychoise = 'daychoise'
  }
  if (_className === 'monthchoise') {
    this.monthchoise = 'monthchoise'
  }
  if (_className === 'termchoise') {
    this.termchoise = 'termchoise'
  }
}
```

#### 如果没有选中的样式也不一样的话，其实就是还要写三个没有选中的样式，默认情况下使用这三个样式

**写好三个没有选中情况下的样式**
```
.labroom-trend-tag  .daynochoise
{
  border: 1px solid #BFEFFF;
  color: #BFEFFF;
}
.labroom-trend-tag  .monthnochoise
{
  border: 1px solid #BBCEFF;
  color: #BBCEFF;
}

.labroom-trend-tag  .termnochoise
{
  border: 1px solid #B3D8FF;
  color: #B3D8FF;
}
```
**定义属性的时候给一下默认值**
```
data() {
  return {
    // 默认选中
    daychoise: 'daychoise',
    // 默认是没有选中状态
    monthchoise: 'monthnochoise',
    // 默认是没有选中状态
	termchoise: 'termnochoise',
  }
}
```
**js中也给一下没有选中状态下的样式即可**
```
switchChart(event, _className) {
  // 先把元素的样式全部回归成没有选中状态
  this.daychoise = 'daynochoise'
  this.monthchoise = 'monthnochoise'
  this.termchoise = 'termnochoise'

  // 点击的哪个就给哪个加上选中的样式
  if (_className === 'daychoise') {
    this.daychoise = 'daychoise'
  }
  if (_className === 'monthchoise') {
    this.monthchoise = 'monthchoise'
  }
  if (_className === 'termchoise') {
    this.termchoise = 'termchoise'
  }
}
```

欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739

👈{{preArticle.title}}

👉{{nextArticle.title}}

评价

vue给当前点击的元素添加样式。vue实现tag类型的菜单选中切换效果，vue点击切换样式效果，vue点击选中效果。vue类似tag菜单的样式选中效果

{{titleitem}} {{titleitem}}

{{titleitem}} {{titleitem}}

vue给当前点击的元素添加样式 。vue实现tag类型的菜单选中切换效果，vue点击切换样式效果，vue点击选中效果。vue类似tag菜单的样式选中效果

{{titleitem}} {{titleitem}}

{{titleitem}} {{titleitem}}

vue给当前点击的元素添加样式。vue实现tag类型的菜单选中切换效果，vue点击切换样式效果，vue点击选中效果。vue类似tag菜单的样式选中效果