@arco.design radioGroup 组件手写 beforeChange 方法

news2024/12/23 15:30:20

在这里插入图片描述

官方是没有提供 beforeChange 事件的,只能自己写一个

子组件(CustomRadioGroup)

<template>
  <a-radio-group :model-value="modelValue" @change="onRadioChange">
    <a-radio v-for="item in list" :value="item.value" :key="item">{{ item.label }}</a-radio>
  </a-radio-group>
</template>
<script setup>
  import { ref } from 'vue'

  const props = defineProps({
    modelValue: Number,
    list: {
      type: Array,
      default: () => [],
    },
    beforeChange: Function,
  })
  const emits = defineEmits(['change', 'update:modelValue'])

  // radioGroup change事件
  const cacheValue = ref()
  const onRadioChange = (value) => {
    // 父组件调用beforeChange方法
    if (props.beforeChange) {
      props
        .beforeChange()
        .then(() => {
          // 1 走到 then 这里,直接更新父级数据
          updateModelValue(value)
        })
        .catch(() => {
          // 2 走到 catch 这里,说明父组件拦截住了,此时不能直接更新父组件数据,
          // 留待后面父组件直接调用 updateModelValue 方法更新父组件数据,此处缓存住当前结果
          cacheValue.value = value
        })
    } else {
      updateModelValue(value)
    }
  }

  // 父级组件主动触发
  const updateModelValue = (value) => {
    emits('change', value !== undefined ? value : cacheValue.value)
    emits('update:modelValue', value !== undefined ? value : cacheValue.value)
  }
  defineExpose({
    updateModelValue,
  })
</script>

父组件

<template>
  <a-form :module="form">
    <a-form-item label="性别">
      <CustomRadioGroup v-model="form.sex" :list="sexList" />
    </a-form-item>
    <a-form-item label="学历">
      <CustomRadioGroup ref="gradeRef" v-model="form.grade" :list="gradeList" :beforeChange="beforeChange" />
    </a-form-item>
  </a-form>

  <a-modal title="提示" v-model:visible="confirmVisible" @ok="handleOk">
    <div>确定要切换吗?</div>
  </a-modal>
</template>
<script setup>
  import CustomRadioGroup from './CustomRadioGroup.vue'
  import { ref } from 'vue'

  // 性别
  const sexList = [
    { label: '男', value: 0 },
    { label: '女', value: 1 },
  ]
  const form = ref({
    sex: 0,
    grade: 1,
  })

  // 年级
  const gradeList = [
    { label: '小学', value: 0 },
    { label: '初中', value: 1 },
    { label: '高中', value: 2 },
  ]
  const confirmVisible = ref(false)
  const beforeChange = () => {
    return new Promise((resolve, reject) => {
      // 开启询问弹窗
      confirmVisible.value = true
      reject()
    })
  }
  const gradeRef = ref()
  const handleOk = () => {
    gradeRef.value.updateModelValue()
  }
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1536163.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【C语言】基础(与python语法比较)

1、【C#】 printf ① 头文件stdio.h&#xff0c;② 注意语法格式&#xff0c;③ printf的文本结尾不换行&#xff0c;④ printf中参数是字符&#xff0c;其它类型可以转为文本&#xff0c;例如"%i","%f"等。 #include <stdio.h>int main(void) {in…

今日问题:动态分配内存出错

2024.3.22 在搜素了许多文章和查阅了许多博客后依然没有找到问题所在&#xff0c;最后无意之间翻看以前的关于动态内存管理的代码后发现&#xff1a; 没加头文件&#xff1a;#include<stdlib.h> 苦笑不得了属于是 #define _CRT_SECURE_NO_WARNINGS 1 #include<stdio…

抖音,剪映,TikTok,竖屏短视频转场pr模板视频素材

120个叠加效果视频转场过渡素材&#xff0c;抖音,剪映,TikTok,短视频转场pr模板项目工程文件。 效果&#xff1a;VHS、光效、胶片、霓虹灯闪光、X射线、信号、老电影等。 适用软件&#xff1a;Adobe Premiere Pro 2018 12.0或更高版本。 视频素材与大多数应用程序兼容&#xff…

JavaWeb:AOP、配置优先级、Bean管理、SpringBoot原理、Maven高级

1 AOP 1.1 基本语法 面向切面编程、面向方面编程&#xff0c;面向特定方法编程 在管理bean对象的过程中&#xff0c;主要通过底层的动态代理机制&#xff0c;对特定的方法进行编程 应用&#xff1a;统计每一个业务方法的执行耗时 xml引入依赖 <!-- AOP-->&l…

全闪存存储怎样对AI大模型赋能

随着科技的飞速发展&#xff0c;人工智能&#xff08;AI&#xff09;与机器人学习&#xff08;ML&#xff09;已经逐渐成为引领未来的核心技术。近期火爆市场的Chat GPT AI大模型深度结合AI与机器人学习技术&#xff0c;实现人机交流、学术研究、内容创作等应用&#xff0c;国内…

【进阶五】Python实现SDVRP(需求拆分)常见求解算法——禁忌搜索+模拟退火算法(TS+SA)

基于python语言&#xff0c;采用经典禁忌搜索&#xff08;TS&#xff09;模拟退火&#xff08;SA&#xff09;对 需求拆分车辆路径规划问题&#xff08;SDVRP&#xff09; 进行求解。 目录 往期优质资源1. 适用场景2. 代码调整3. 求解结果3.1 TS3.2 SA 4. 代码片段参考 往期优质…

迷宫(蓝桥杯)——DFS和BFS

迷宫 题目描述 下图给出了一个迷宫的平面图&#xff0c;其中标记为 1 的为障碍&#xff0c;标记为 0 的为可以通行的地方。 010000 000100 001001 110000迷宫的入口为左上角&#xff0c;出口为右下角&#xff0c;在迷宫中&#xff0c;只能从一个位置走到这 个它的上、下、左…

表格列内容过长显示省略号,并悬浮展示信息

自定义全局指令&#xff1a; 指定超出行数的内容&#xff0c;以省略号替代。 // main.ts import App from ./App.vue;const app createApp(App);// 自定义指令app.directive(textOverflow, {mounted(el, binding, vnode) {const maxRows binding.value || 3;// 添加样式vnod…

哪些因素决定SSL证书的定价?DV、OV和EV证书多少钱?

在当前网络环境安全问题日益凸显的时代背景下&#xff0c;SSL证书已成为保障网站及用户数据传输安全的核心手段。然而&#xff0c;由于不同供应商、证书类型和功能差异&#xff0c;SSL证书的价格存在较大浮动空间。本文将概述SSL证书的基本定价范围及其决定因素&#xff0c;为选…

什么快递可以寄摩托车?看你要啥样的了

一辆49cc的二冲程摩托车仅需561元。 购买125的组装车不会超过1元&#xff0c;购买250品牌发动机的组装车不会超过4000元。 购买一辆名牌摩托车大约需要4000到10000元。 花一万到两百万多就能买到一辆像样、动力强劲、能玩的炫酷摩托车。 哈哈&#xff0c;就看你想要什么了&…

基于ssm的乡镇自来水收费系论文

摘 要 互联网发展至今&#xff0c;无论是其理论还是技术都已经成熟&#xff0c;而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播&#xff0c;搭配信息管理工具可以很好地为人们提供服务。针对乡镇自来水收费信息管理混乱&#xff0c;出错率高&#xff0c;信息安…

算法第三十一天-直方图的水量

直方图的水量 题目要求 解题思路 使用面向列的计算比面向行的计算更加容易。我们只需要考虑当前的位置的左右最高模板的高度。 方法一、暴力解法 每个位置能接到多少雨水&#xff0c;很容易想到[木桶效应]&#xff0c;即是由两边最短的木板限制的。那么直观思路就是&#x…

PTA-练习5

目录 实验7-2-1 求矩阵各行元素之和 实验7-2-2 矩阵运算 实验7-2-3 求矩阵的局部极大值 实验7-2-5 判断上三角矩阵 实验7-2-6 打印杨辉三角 实验7-2-7 方阵循环右移 实验7-2-8 找鞍点 实验7-2-1 求矩阵各行元素之和 #include<stdio.h> #include<stdlib.h> …

uniapp微信小程序_购物车_下单页面

先说下整体逻辑以方便总体理解 1、首先画出下单页面 2、此次画出结算价格页面 3、怎么点击下完单变成结算页面&#xff1f;其实就是把下单页面的信息传递给结算页面就行 问题难点&#xff1f; 点击加号的时候把物品加入一个数组传到下单页面&#xff0c;但是点击的时候不能…

再谈 Flink 的 “动态表” 和 “流表二象性”

博主历时三年精心创作的《大数据平台架构与原型实现&#xff1a;数据中台建设实战》一书现已由知名IT图书品牌电子工业出版社博文视点出版发行&#xff0c;点击《重磅推荐&#xff1a;建大数据平台太难了&#xff01;给我发个工程原型吧&#xff01;》了解图书详情&#xff0c;…

Modbus串口通信

Modbus ASCII与RTU? 发送报文的方式不一样 ASCII:将数据转换成1 6进制ASCII码再发送 RTU:直接发送原始报文当然也是进制 Modbus-与RS485有何区别? Modbus是通信协议 RS485电气接口规范 Modbus软件 RS485硬件 比如高速公路与汽车的关系&#xff0c;TCP/IP与网线…

瑞_Redis_商户查询缓存_什么是缓存

文章目录 项目介绍1 短信登录2 商户查询缓存2.1 什么是缓存2.1.1 缓存的应用场景2.1.2 为什么要使用缓存2.1.3 Web应用中缓存的作用2.1.4 Web应用中缓存的成本 附&#xff1a;缓存封装工具类 &#x1f64a; 前言&#xff1a;本文章为瑞_系列专栏之《Redis》的实战篇的商户查询缓…

Mq之pulsar的入门使用(一)

目录 一、linux集群安装pulsar 注意事项 编辑 /etc/hostname与/etc/hosts 执行初始化命令 二、创建应用程序对消息的生产和消费进行测试 物理主机启动应用发送消息时报错处理程序的搭建及说明使用到的pom依赖springboot中pulsar配置接收消息模拟发送消息发送与接收消息打印…

Java-SSM医院在线预约系统

Java-SSM医院在线预约系统 1.服务承诺&#xff1a; 包安装运行&#xff0c;如有需要欢迎联系&#xff08;VX:yuanchengruanjian&#xff09;。 2.项目所用框架: 前端:JSP、layui等。 后端:SSM,即Spring、SpringMvc、Mybatis等。 3.项目功能点: 1.管理员功能: a.修改个人信息…

【图解物联网】第6章 物联网与数据分析

6.1 传感器数据与分析 从前几章中我们已经了解到&#xff0c;只要把配备传感器的设备连接到网络&#xff0c;就能把所有的信息采集到物联网服务之中&#xff08;图6.1&#xff09;。 从工业角度而言&#xff0c;给工厂中的生产流水线和流通的产品打上电子标签&#x…