分段控制器（排他实现）

注：仅做个人记录

Segmented 分段控制器，使用版本2.7.0以后有效果；

项目要求： element-plus是2.4.0版

效果：
大致代码：

// 结构
<div class="trend-content-top-mini">
   <div
    v-for="(item, index) in options"  @click="changeTime(item)"
    :class="item.value == isSelect
            ? 'trend-content-top-mini-item'
            : 'trend-content-top-mini-item-select'"
    >
      {{ item.label }}
    </div>
 </div>
 
// 数据
options: [
  { value: 1, label: "今日" },
  { value: 2, label: "本周" },
  { value: 3, label: "本月" },
  { value: 4, label: "全年" },
],
isSelect: 1, //默认今日  1-今天  2-本周  3-本月  4-全年

// 事件
changeTime(val) {
   console.log(val, "changeTime");
   this.isSelect = val.value;
},


// 样式
    .trend-content-top-mini {
      display: flex;
      align-items: center;
      padding: 3px;
      background: #f2f3f5;
      border-radius: 2px 2px 2px 2px;
      font-weight: 400;
      font-size: 12px;
      color: #4e5969;
    }
    .trend-content-top-mini-item {
      padding: 4px 12px;
      background: #ffffff;
      border-radius: 2px 2px 2px 2px;
      margin: 0 2px;
      font-size: 12px;
      color: #0096ff;
      font-weight: bold;
    }
    .trend-content-top-mini-item-select {
      padding: 4px 12px;
      background: #f2f3f5;
      border-radius: 2px 2px 2px 2px;
      margin: 0 2px;
      font-weight: 400;
      font-size: 12px;
      color: #4e5969;
    }

注：
可参考Vue3分段控制器（Segmented）