侧边栏壁纸
  • 累计撰写 72 篇文章
  • 累计创建 31 个标签
  • 累计收到 5 条评论

目 录CONTENT

文章目录
vue

element-ui中el-radio-group组件绑定点击事件触发多次的解决办法

PeakGao
2024-04-07 / 1 评论 / 1 点赞 / 5 阅读 / 0 字 / 正在检测是否收录...
温馨提示:
部分素材可能会来自网络,若不小心影响到您的利益,请联系我们删除。

1、需求

电商首页需求,需要做个单选框,然后点击选中切换图标方向及更换价格升倒序,如下图:
3434cab997c66d0acde470d6ef5769a.png
7f150ab132466f75bffb327d97323b6.png

28c13f5c4e2e6707d8e959f6617c007.png

f36c67940f3d64a886fc1454e4c1c2e7.gif

从官网文档看,单选框支持change event,使用click加载按钮处不会触发选中
但是使用 @click.native 事件不做处理的话会发送多次请求
解决方案如下:

<el-radio-group v-model="buttonRightRadio" id="buttonRightRadio">
                        <el-radio-button label="default" @click.native="sortBy('default',$event)">默认</el-radio-button>
                        <el-radio-button label="sales" @click.native="sortBy('sales',$event)">销量
                            <i :class="{'el-icon-top': sortType === 'sales' && sortDirection === 'desc', 'el-icon-bottom': sortType === 'sales' && sortDirection === 'asc'}"></i>
                        </el-radio-button>
                        <el-radio-button label="price" @click.native="sortBy('price',$event)">价格
                            <i :class="{'el-icon-top': sortType === 'price' && sortDirection === 'desc', 'el-icon-bottom': sortType === 'price' && sortDirection === 'asc'}"></i>
                        </el-radio-button>
                    </el-radio-group>
  sortBy(type, event) {
  //此处解决发送多次请求
            if (event.target.tagName != 'INPUT') {
                return;
            }
            if (type === 'default') {
                this.sortType = '';
                this.sortDirection = '';
                this.load();
                return;
            }
            if (this.sortType === type) {
                // 如果当前已经是该排序方式,则切换排序方向
                this.sortDirection = this.sortDirection === 'desc' ? 'asc' : 'desc';
                this.load()
            } else {
                // 如果当前不是该排序方式,则设置为该排序方式,并将排序方向设为降序
                this.sortType = type;
                this.sortDirection = 'desc';
                this.load()
            }
        },
1
  1. 支付宝打赏

    qrcode alipay
  2. 微信打赏

    qrcode weixin

评论区