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

92 阅读 0 评论 61 点赞

我是靠谱客的博主瘦瘦冷风，最近开发中收集的这篇文章主要介绍ref动态修改el-button字体颜色，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一、效果图

二、代码

<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>