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

参考链接：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>

最后

以上就是忐忑蜗牛为你收集整理的vue3 + el-button 点击后颜色不恢复的全部内容，希望文章能够帮你解决vue3 + el-button 点击后颜色不恢复所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。