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

在这里插入图片描述

官方是没有提供 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>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

面试算法-72-删除排序链表中的重复元素

题目 给定一个已排序的链表的头 head &#xff0c; 删除所有重复的元素&#xff0c;使每个元素只出现一次 。返回 已排序的链表 。 示例 1&#xff1a; 输入&#xff1a;head [1,1,2] 输出&#xff1a;[1,2] 解 class Solution {public ListNode deleteDuplicates(ListNo…

鸿蒙一次开发,多端部署(八)典型布局场景

虽然不同应用的页面千变万化&#xff0c;但对其进行拆分和分析&#xff0c;页面中的很多布局场景是相似的。本小节将介绍如何借助自适应布局、响应式布局以及常见的容器类组件&#xff0c;实现应用中的典型布局场景。 说明&#xff1a; 在本文 媒体查询 小节中已经介绍了如何通…

按键模拟精灵

按键模拟精灵功能简单&#xff1a; 1.添加模拟按键 2.删除模拟按键 3.开始模拟 4.停止模拟 适合简单的按键操作&#xff0c;有需要的可以点赞收藏关注我&#xff01;

Linux学习之自定义协议

前言&#xff1a; 首先对于Tcp的socket的通信&#xff0c;我们已经大概了解了&#xff0c;但是其中其实是由一个小问题&#xff0c;我们目前是不得而知得&#xff0c;在我们客户端与服务端连接成功后&#xff0c;服务端读取来自客户端得消息&#xff0c;我们使用的是函数read,…

电子科技大学链时代工作室招新题C语言部分---题号H

1. 题目 最有操作的一道题&#xff0c;有利于对贪心算法有个初步了解。 这道题的开篇向我们介绍了一个叫汉明距离的概念。 汉明距离指的就是两个相同长度的字符串的不同字符的个数。 例如&#xff0c;abc和acd&#xff0c;b与c不同&#xff0c;c与d不同&#xff0c;所以这两个…

【Leetcode每日一题】 递归 - Pow(x, n)(难度⭐⭐)(40)

1. 题目解析 题目链接&#xff1a;50. Pow(x, n) 这个问题的理解其实相当简单&#xff0c;只需看一下示例&#xff0c;基本就能明白其含义了。 2.算法原理 在这个算法中&#xff0c;递归函数的任务是求出 x 的 n 次方。那么&#xff0c;这个函数是怎么工作的呢&#xff1f;它…

基于springboot的大学生租房平台系统

技术&#xff1a;springbootmysqlvue 一、系统背景 互联网发展至今&#xff0c;无论是其理论还是技术都已经成熟&#xff0c;而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播&#xff0c;搭配信息管理工具可以很好地为人们提供服务。针对大学生租房信息管理混乱…

RocketMQ学习笔记四(黑马)项目

课程地址&#xff1a; 1.Rocket第二章内容介绍_哔哩哔哩_bilibili &#xff08;视频35~88&#xff0c;搭建了一个电商项目&#xff0c;8h&#xff09; 待学&#xff0c;待完善。 项目安装&#xff08;打包&#xff09;的命令&#xff1a;&#xff08;注意-D后有空格&#xff09…

数据挖掘之关联规则

“啤酒和尿布的荣誉” 概念 项 item&#xff1a;单个的事物个体 &#xff0c;I{i1,i2…im}是所有项的集合&#xff0c;|I|m是项的总数项集&#xff08;item set)/模式&#xff08;pattern)&#xff1a;项的集合&#xff0c;包含k个项的项集称为k-项集数据集(data set)/数据库…

NCV8664CST50T3G稳压器芯片中文资料规格书PDF数据手册引脚图图片价格参数

产品概述&#xff1a; NCV8664C 是一款精确 3.3 V 和 5.0 V 固定输出&#xff0c;低漏集成式电压稳压器&#xff0c;输出电流能力为 150 mA。对轻型负载电流消耗的精心管理&#xff0c;并结合低漏工艺&#xff0c;实现了 22 A 的典型静态电流。输出电压精度在 2.0&#xff05;…

TikTok运营要用什么代理IP?如何分辨?

对于运营TikTok的从业者来说&#xff0c;IP的重要性自然不言而喻。 在其他条件都正常的情况下&#xff0c;拥有一个稳定&#xff0c;纯净的IP&#xff0c;你的视频起始播放量很可能比别人高出不少&#xff0c;而劣质的IP轻则会限流&#xff0c;重则会封号。那么&#xff0c;如何…

Linux 文件系统:重定向、缓冲区

目录 一、重定向 1、输出重定向 2、输入重定向 3、追加重定向 4、dup2 系统调用 二、理性理解Linux系统下“一切皆文件” 了解硬件接口 三、缓冲区 1、为什么要有缓冲区? 2、刷新策略 3、缓冲模式改变导致发生写时拷贝 未创建子进程时 创建子进程时 使用fflush…

贾志杰“大前端”系列著作出版发行

杰哥著作《VueSpringBoot前后端分离开发实战》2021年出版以来&#xff0c;累计发行2.6万册&#xff0c;受到广大读者热捧。后应读者要求&#xff0c;受出版社再次邀请&#xff0c;“大前端”系列之《剑指大前端全栈工程师》、《前端三剑客》由清华大学出版社陆续出版发行。系列…

Django日志(二)

一、Handler Handler决定如何处理logger中的每条消息。它表示一个特定的日志行为,例如 将消息写入屏幕、文件或网络Socket handler对应的是个字典,每一个键都是一个handler的名字,每个值又一个字典,描述了如何配置对应的handler实例 2.1、内置Handler class(必需):处理…

STM32最小核心板使用HAL库ADC读取MCU温度(使用DMA通道)

STM32自带CPU的温度数据&#xff0c;需要使用ADC去读取。因此在MX创建项目时如图配置&#xff1a; 模块初始化代码如下&#xff1a; void MX_ADC1_Init(void) {/* USER CODE BEGIN ADC1_Init 0 *//* USER CODE END ADC1_Init 0 */ADC_ChannelConfTypeDef sConfig {0};/* USER…

敢为天下先!深圳市全力推动鸿蒙生态发展……程序员

3月19日&#xff0c;鸿蒙生态创新中心揭幕仪式在深圳正式举行。鸿蒙生态创新中心的建立是为构建先进完整、自主研发的鸿蒙生态体系&#xff0c;将深圳打造为鸿蒙生态策源地、集聚区的具体举措&#xff0c;也是推动我国关键核心技术高水平自立自强、数字经济高质量发展、保障国家…

开源的OCR工具基本使用:PaddleOCR/Tesseract/CnOCR

前言 因项目需要&#xff0c;调研了一下目前市面上一些开源的OCR工具&#xff0c;支持本地部署&#xff0c;非调用API&#xff0c;主要有PaddleOCR/CnOCR/chinese_lite OCR/EasyOCR/Tesseract/chineseocr/mmocr这几款产品。 本文主要尝试了EasyOCR/CnOCR/Tesseract/PaddleOCR这…

基于Springboot+Vue的在线考试系统

项目介绍 这是一个在线考试系统&#xff0c;使用Maven进行项目管理&#xff0c;基于springbootmybatis框架开发的项目&#xff0c;mysql底层数据库&#xff0c;前端采用VueElementPlus&#xff0c;作为初学springbootvue前后端分离架构的同学是一个很不错的项目&#xff0c;如…

软件工程-第5章 结构化设计

5.1 总体设计的目标及其表示方法 5.2 总体设计 变换设计基本步骤&#xff1a; 第1步&#xff1a;设计准备--复审并精华系统模型&#xff1b; 第2步&#xff1a;确定输入、变换、输出这三部分之间的边界&#xff1b; 第3步&#xff1a;第一级分解--系统模块结构图顶层和第一层…

大模型来了,你的“存力”攒够了吗?

作者 | 曾响铃 文 | 响铃说 提到AI、大模型&#xff0c;很多人脑海里最先想到的是算力、算法、数据这“三驾马车”。 而要论谁最重要&#xff0c;恐怕多数人都会觉得是算力。 毕竟&#xff0c;“算力紧缺”的气氛常常被渲染起来。 然而&#xff0c;随着大模型进一步演进&a…