首页 > 其他分享 >BootstrapBlazor组件库,组件方法的表达式传参

BootstrapBlazor组件库,组件方法的表达式传参

时间:2023-08-11 09:00:28浏览次数:42  
标签:传参 img await DeleteImages BootstrapBlazor 组件 async

BootstrapBlazor组件库,组件方法的表达式传参

有时候我们在循环中创建组件的时候,可能想把item的值也一并传入组件的方法事件中去处理,有很多小伙伴就不知道如何去调用事件了。

下面是一段实例代码,通过循环遍历来创建图片,并且创建一个删除图片的按钮,这个按钮的OnConfirm方法需要把图片本身也给带进去。
这个时候就可以使用表达式来传参OnConfirm="@(async()=>await DeleteImages(img))"

@foreach (var img in images)
{
    <div class="col-auto">
        <Card IsShadow="true">
            <HeaderTemplate>
                <div class="container">
                    <div class="row">
                        <div class="col-auto">
                            <PopConfirmButton Placement="Placement.Top"
                                              Color="Color.Danger" Size="Size.ExtraSmall"
                                              ConfirmIcon="fa-solid fa-triangle-exclamation text-danger"
                                              ConfirmButtonColor="Color.Danger"
                                              Text="删除照片"
                                              Content="是否确认删除?"
                                              IsAsync="true"
                                              OnBeforeClick="OnBeforeDeleteImages"
                                              OnConfirm="@(async()=>await DeleteImages(img))" />
                        </div>
                        <div class="col-auto">
                            <code>@img.FileNum</code>
                        </div>
                    </div>
                </div>
            </HeaderTemplate>
            <BodyTemplate>
                <ImageViewer style="width:150px;"
                             Alt="@img.Test"
                             Url="@img.Url"
                             PreviewList="@(new List<string>() { img.Url! })"
                             ShowPlaceHolder="true" />
            </BodyTemplate>
        </Card>
    </div>
}
private async Task DeleteImages(Images image)
{
    await ...
}

这样我们就实现了这么一个需求,那如果我需要在传参的同时把组件本身的参数也给传过去,可以用下面的语法

OnConfirm="@(async(x)=>await DeleteImages(x,img))"

private async Task DeleteImages(object sender,Images image)
{
    await ...
}

表达式括号里面的x,就是组件本身的参数了,这样就实现了组件传参的一个灵活性。

标签:传参,img,await,DeleteImages,BootstrapBlazor,组件,async
From: https://www.cnblogs.com/codecopier/p/17622147.html

相关文章

  • 探索 OSGi 框架的组件运行机制
    OSGi框架为基于Java的组件开发提供了一套通用的和标准的解决方案,通过OSGi框架可以轻松实现组件信息的隐藏和共享。本文介绍了OSGi框架中的组件(Bundle)的运行机制,并结合实际示例加以说明,读者可以进一步深入了解OSGi框架的基本原理,并解决实际开发工作中遇到的类似问题。在目......
  • avue组件自定义按钮/标题/内容/搜索栏
    话不多说笔记直接分享!!一、自定义crud搜索栏组件<templateslot-scope="scope"slot="provinceCodeSearch"> <avue-select v-model="objFrom.provinceCode"//这是存放省份的code placeholder="请选择省市" :di......
  • 【Archaius技术专题】「Netflix原生态」动态化配置服务之微服务配置组件变色龙
    推荐超值课程:点击获取前提介绍如果要设计开发一套微服务基础架构,参数化配置是一个非常重要的点,而Netflix也开源了一个叫变色龙Archaius的配置中心客户端,而且Archaius可以说是比其他客户端具备更多生产级特性,也更灵活。*在NetflixOSS微服务技术栈中,几乎所有的其它组件(例如Zuul......
  • ATL使用.rgs注册脚本文件操作注册表注册Com组件
    1.      ATL注册组件1.1     创建注册脚本注册脚本通过操作系统注册表完成Com服务的注册,通过数字形式而非代码API的形式完成,这种形式显得更加简单有效,因为它只需要几行数字代码就可以将一个Key添加到注册表中。使用ATL向导时,会自动的生成一个后缀为.rgs的注册脚本......
  • Vue 自定义组件
    下面有一个例子。<template><el-input:value="value"@click.native="select"readonly><iclass="el-icon-circle-close"slot="suffix"@[email protected]="clear"/>&l......
  • web三大组件之一Listener
    什么是Listener监听器?1、Listener监听器它是JavaWeb的三大组件之一。JavaWeb的三大组件分别是:Servlet程序、Filter过滤器、Listener监听器。2、Listener它是JavaEE的规范,就是接口3、监听器的作用是,监听某种事物的变化。然后通过回调函数,反馈给客户(程序)去做一些相应的......
  • 软件测试|Python函数参数之必传参数、默认参数、可变参数、关键字参数的详细使用
    在Python中,函数参数是定义在函数头部的变量,用于接收传递给函数的数据。Python函数参数有四种类型:必传参数、默认参数、可变参数和关键字参数。每种类型都有不同的使用方式和适用场景。本文将详细介绍这四种函数参数的使用方法。Python函数参数类型必传参数:最常用的,必传确定数量的参......
  • camera2 传参流程以及hal添加自定义参数方法
    camera2传参流程以及hal添加自定义参数方法//设置自动曝光模式mPreviewBuilder.set(CaptureRequest.CONTROL_AF_MODE,CaptureRequest.CONTROL_AE_MODE_ON_AUTO_FLASH);/frameworks/base/core/java/android/hardware/camera2/CaptureRequest.javaKey<Integer>CONTROL_AF_MOD......
  • vue import 调用方法 Import是javascript中的一种模块加载方式,在Vue中也可以使用impor
    vueimport调用方法Import是javascript中的一种模块加载方式,在Vue中也可以使用import来加载组件、库或其他模块。使用import语句,可以将需要的模块导入到当前模块的作用域中,以使其可用于当前模块内的执行。原文链接:https://www.yzktw.com.cn/post/1248672.htmlImport是javascri......
  • iOS 子工程(下沉组件 私有库) 调用文件、图片 等资源 方法
    发现问题:在子工程里面使用 [[NSBundlemainBundle]pathForResource:ofType:] 不能找到目标资源文件原因:[[NSBundlemainBundle]pathForResource:ofType:]是获取主程序包(MainBundle)中资源文件路径的方法。主程序包是指你的应用程序本身,而不包括子工程或子项目。那么要......