点击小按钮就可以实现上下切换，图标颜色改变

最新推荐文章于 2024-04-06 16:13:18 发布

iiiilooaixuud

最新推荐文章于 2024-04-06 16:13:18 发布

阅读量661

点赞数 1

分类专栏：页面遇到的基础问题文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/qq_46617584/article/details/126645221

版权

页面遇到的基础问题专栏收录该内容

101 篇文章 3 订阅

订阅专栏

这篇博客展示了如何使用Vue.js创建一个交互式的颜色切换图标组件。通过点击上下箭头图标，可以改变其颜色状态。代码示例中，定义了两个状态变量并绑定了点击事件，实现了图标颜色的切换功能。此组件适用于前端界面中的控制元素。

摘要由CSDN通过智能技术生成

效果图：

点击上下图标，颜色切换

直接上代码：

<div class="iconBox">
              <el-icon style="height: 10px" @click="timeUpClick()"  :id='timeUpState?"activeColor":""'
                ><CaretTop style="width: 15px; height: 10px; top: 4px"
              /></el-icon>
              <el-icon style="height: 10px" @click="timeDownClick()"  :id='timeDownState?"activeColor":""'
                ><CaretBottom style="width: 15px; height: 10px"
              /></el-icon>
</div>

    let upState=ref(false);
    let downState=ref(false);
    let timeUpState=ref(false);
    let timeDownState=ref(false);

    let upclick=()=>{
      upState.value=true;
      downState.value=false;
    }
    let downclick=()=>{
      upState.value=false;
      downState.value=true;
    }
    let timeUpClick=()=>{
      timeUpState.value=true;
      timeDownState.value=false;
    }
    let timeDownClick=()=>{
      timeUpState.value=false;
      timeDownState.value=true;
    }

return {
      upclick,
      downclick,
      upState,
      downState,
      timeUpState,
      timeDownState,
      timeUpClick,
      timeDownClick
     
    };