选中标签业务逻辑

Question

选中标签,改变字体颜色,再点一下恢复原样,如何做 请教一下
没有一点思路

下面是源代码

<template>
<view class="addLiaison-box">

<view class="addLiaison-content">
  <view class="content-box">
    <u-form :model="form" ref="uForm">
      <u-form-item label="联系人" label-width="auto"><u-input v-model="form.name" placeholder="请填写联系人姓名" /></u-form-item>
      <u-form-item label="联系电话" label-width="auto"><u-input v-model="form.intro" placeholder="请填写联系电话" /></u-form-item>
    </u-form>
      <view class="content-tag">
        设置标签(可多选)
      </view>
      <view class="content-text">
        <u-tag class="tags-text" text="默认"  :type="type1" mode="plain"  :show="show" @click="tagClick('1')" />
        <u-tag class="tags-text" text="本人"  :type="type2" mode="plain"  :show="show" @click="tagClick('2')" />
        <u-tag class="tags-text" text="父母"  :type="type3" mode="plain"  :show="show" @click="tagClick('3')" />
        <u-tag class="tags-text" text="子女"  :type="type4" mode="plain"  :show="show" @click="tagClick('4')" />
        <u-tag class="tags-text" text="夫妻"  :type="type5" mode="plain"  :show="show" @click="tagClick('5')" />
        <u-tag class="tags-text" text="朋友"  :type="type6" mode="plain"  :show="show" @click="tagClick('6')" />
      </view>
  </view>
</view>
<view class="addLiaison-button">
   <u-button  @click="conserve" type="primary" shape="circle" >保存并使用</u-button>

</view>
</view>
</template>

<script>
export default {
data() {

        return {
    form: {
      name: '',
      intro: '',
    },
    show:true,
    type1:"info",
    type2:"info",
    type3:"info",
    type4:"info",
    type5:"info",
    type6:"info",
        }
    },
methods:{
  conserve(){
    console.log("点击了")
  },
  tagClick(index){
    console.log(index)
    this.type1 = "primary"
    // this.type[index] = "primary"
  }
}

}
</script>

<style lang="scss" scoped>
page {

height: 100%;
background-color: #f6f6f6;

}
.addLiaison-box{
margin: 0 24rpx;
.addLiaison-content{

padding: 0 24rpx;
border-radius: 16rpx;
background-color:#FFF;
margin-top: 24rpx;
.content-box{
  u-form-item{
    color: #333333;
    font-size: 28rpx;
    font-weight: 500;
  }
  .content-tag{
    padding-top: 28rpx;
    color: #333333;
    font-size: 28rpx;
    font-weight: 500;
  }
  .content-text{
    padding: 32rpx 0 32rpx;
    .tags-text{
      margin: 12rpx;
    }
  }
}

}
.addLiaison-button{

padding-top: 48rpx;

}
}
</style>

Answer 1

你可以这么设计

<u-tag class="tags-text" text="item.text" v-for='(item,index) in dataType' :key='index'  :type="item.type" mode="item.mode"  :show="item.show" @click="tagClick(item,index)" />

//数据源
dataType: [{
    text: '默认',
    type: 'info',
    show: true,
    mode: 'plain'
},
{
    text: '本人',
    type: 'info',
    show: true,
    mode: 'plain'
}]

//方法处理（单选）
tagClick(item, index){
    console.log(item,index)
    this.dataType.forEach(res => {res.type = 'info'})
    item.type = "primary"
    ************************
    //如果视图不更新可以采用下述写法
    //写法一：this.$forceUpdate()
    ----------------------------
    //写法二：
    //替换  item.type = "primary" 为
    //this.$set(this.dataType[index], type, "primary")
    *************************
}

//方法处理（多选）
tagClick(item, index){
    item.type = item.type == "primary" ？"info" : "primary"
}

Answer 2

这个没啥难度呀。一般UI都有实现。

说说思路吧，
一般是两个css，一个默认的 tags-text ，一个高亮的 tags-text--checked。
然后全局有个控制的变量，单选就是 1 数值类型，多选就是 [1] 数组类型。
然后判断当前是否选中即可，