vue3 + el-button 点击后颜色不恢复

最新推荐文章于 2024-06-24 14:37:18 发布

Apple-Wang

最新推荐文章于 2024-06-24 14:37:18 发布

阅读量1.4k

点赞数 1

分类专栏：前端技术文章标签：前端 vue3 elementui

本文链接：https://blog.csdn.net/wdm891026/article/details/127268281

版权

前端技术专栏收录该内容

8 篇文章 0 订阅

订阅专栏

参考链接：el-button点击了按钮之后，将鼠标移出按钮，会出现保留点击的状态_汤圆真的好可爱的博客-CSDN博客_鼠标点击之后保持点击的状态

点击按钮前，查询按钮和重置按钮：

点击按钮后：

之前代码：

    // 查询
    const query = () => {
        handleCurrentChange(1);
    }
     // 重置
    const resetAll = () => {
        radioValue.value = '全部';
        typeValue.value = '';
        const paginationStoreInit = {
            currentPage: ref(1),
            pageSize: 8,
            total: 0,
            pageCount: 1,
            size: ref(1),
            pageSizes: [8,16,24,32,40,80],
        };
        Object.assign(paginationStore, paginationStoreInit);
        getList();
    }
    <el-button type="primary" class="r--btn" @click="query()">查询</el-button>
    <el-button class="r--btn" @click="resetAll()">重置</el-button>

解决代码：

    // 查询
    const query = (event) => {
        // 添加失去焦点事件
        let target = event.target;
        if (target.nodeName === "BUTTON" || target.nodeName === "SPAN"){
            target.parentNode.blur();
        }
        target.blur();

        handleCurrentChange(1);
    }
    // 重置
    const resetAll = (event) => {
        // 添加失去焦点事件
        let target = event.target;
        if (target.nodeName === "BUTTON" || target.nodeName === "SPAN"){
            target.parentNode.blur();
        }
        target.blur();

        radioValue.value = '全部';
        typeValue.value = '';
        const paginationStoreInit = {
            currentPage: ref(1),
            pageSize: 8,
            total: 0,
            pageCount: 1,
            size: ref(1),
            pageSizes: [8,16,24,32,40,80],
        };
        Object.assign(paginationStore, paginationStoreInit);
        getList();
    }
// 使用
<el-button type="primary" class="r--btn" @click="(event)=>query(event)">查询</el-button> 


<el-button class="r--btn" @click="(event)=>resetAll(event)">重置</el-button>