ref动态修改el-button字体颜色

最新推荐文章于 2024-04-26 16:47:03 发布

&小胖&

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量1.4k

点赞数 2

分类专栏： vue 文章标签： javascript vue.js 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/a2739294436/article/details/129226006

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、效果图

二、代码

<template>
  <div>
    <el-button
      @mouseenter.native="onmouseover(item.id, index)"
      @mouseleave.native="onmouseout(item.id, index)"
      @click.native="click(item.id, index)"
      :ref="item.id + index"
      :key="item.id"
      v-for="(item, index) in data"
      >{{ item.name }}</el-button
    >
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: [
       {
          id: '1',
          name: 'asd',
          color: '#f56c6c',
          color1: '#0de52b',
          color2: '#fff',
          isShow: false
        },
        {
          id: '2',
          name: 'qwe',
          color: '#0de52b',
          color1: '#f56c6c',
          color2: '#fff',
          isShow: false
        },
        {
          id: '3',
          name: 'zxc',
          color: '#5C4033',
          color1: '#CDCDCD',
          color2: '#4F2F4F',
          isShow: false
        },
        {
          id: '4',
          name: 'rty',
          color: '#CC3299',
          color1: '#D8D8BF',
          color2: '#99CC32',
          isShow: false
        }
      ]
    }
  },
  mounted() {
    this.data.forEach((item, index) => {
      this.$refs[`${item.id}${index}`][0].$el.style.color = item.color
    })
  },
  methods: {
    onmouseover(data, index) {
      if (this.data[index].isShow) return
      this.$refs[`${data}${index}`][0].$el.style.color = this.data[index].color1
    },
    onmouseout(data, index) {
      if (this.data[index].isShow) return
      this.$refs[`${data}${index}`][0].$el.style.color = this.data[index].color
    },
    click(data, index) {
      this.$nextTick(() => {
        this.data.forEach((item, indexs) => {
          if (index == indexs) {
            item.isShow = true
            this.$refs[`${data}${index}`][0].$el.style.color =
              this.data[index].color2
          } else {
            this.$refs[`${item.id}${indexs}`][0].$el.style.color = item.color
            item.isShow = false
          }
        })
      })
    }
  }
}
</script>