vue 点击改变数组中选中的icon颜色(结合拖拽实现)

1。 vue 点击改变数组中选中的icon颜色

在Vue中，可以通过使用v-bind指令来动态地修改元素的样式。要根据点击事件来改变数组中选中图标的颜色，首先需要定义一个data属性来存储当前被选中的索引值或者其他相关信息。然后，在模板中使用v-for指令来迭代生成每个图标，并为每个图标添加点击事件处理函数。

2 结合拖拽实现
展示部分代码，去除了点击事件，因为拖拽自带了时间，把变色写在拖拽事件中

js 部分
data 中定义初始值

  data (){
    return{
      formData:{
        panelTitle:'',
        pointsList:[]
      },
      groupName: '', // 测点大类
      dataName: '', // 测名称
      deviceIdList: 1, // 设备号
      label: null,
      
      selectedIndex: -1,
      dragStartIndex: '',
      dragStartData: ''
    }
  },

methods 方法中处理

  methods:{
    isSelected(index) {
      return index === this.selectedIndex; // 判断该图标是否被选中
    },
    dragStart (index, item) {
      this.dragStartIndex = index
      this.dragStartData = item
      this.selectedIndex = index; // 更新选中的索引值
    },
    // 只要拖拽元素进入到放置区域就触发，这里实际是鼠标指针进入放置区域才触发
    dragOver (index) {
      this.dragOverIndex = index
    },
    dragEnd () {
      const copyTodolist = [...this.formData.pointsList]
      // 删除老的节点
      copyTodolist.splice(this.dragStartIndex, 1)
      // 在列表中目标位置增加新的节点
      copyTodolist.splice(this.dragOverIndex, 0, this.dragStartData)
      this.selectedIndex = this.dragOverIndex; // 更新选中的索引值
      this.formData.pointsList = [...copyTodolist]
      this.dragOverIndex = ''
    },
  }

在保存事件中记得清空颜色选中状态没可那需求

  this.selectedIndex = -1;
  this.dragStartIndex = '';

css样式中设置 颜色

 .selected {
        color: red; /* 设置选中时的颜色 */
      }

拖拽前

拖拽中

拖拽后

搞的定