鸿蒙界面开发——组件（2）：文本显示 (Text/Span) &文本输入 (TextInput/T ...

文本显示 (Text/Span)

Text可通过以下两种方式来创建：

1. Text(content?: string | Resource , value?: TextOptions)
2. Text('我是一段文本')//string字符串
3. Text($r('app.string.module_desc'))//引用Resource资源，文件位置为/resources/base/element/string.json。

复制代码

参数名类型必填阐明contentstring或Resource否文本内容。包罗子组件Span且未设置属性字符串时content 不生效，显示Span内容，而且此时text组件的样式不生效。默认值：’ '。设置属性字符串时也不生效。 value | TextOptions | 否 | 文本组件初始化选项。
文本组件初始化选项TextOptions可选项为文本控制器TextController。

1. controller: TextController = new TextController();
2. Text(undefined, { controller: this.controller })
4. TextController 的属性方法有：
5. closeSelectionMenu(): void 关闭自定义选择菜单或系统默认选择菜单。
6. setStyledString(value: StyledString): void 触发绑定或更新属性字符串。
7. getLayoutManager(): LayoutManager 获取布局管理器对象。

复制代码

setStyledString 触发绑定或更新属性字符串 可以 参考属性字符串StyledString一章，设置更灵活的文本样式。
属性

除支持通用属性和文本通用属性外，还支持以部属性：

• textAlign(value: TextAlign)设置文本段落在水平方向的对齐方式。
  

名称描述TextAlign.Start水平对齐首部。TextAlign.Center水平居中对齐。TextAlign.End水平对齐尾部。TextAlign.JUSTIFY双端对齐。当textAlign属性设置为TextAlign.JUSTIFY时，须要根据文本内容设置wordBreak(设置断行规则)属性，且最后一行文本不到场两头对齐，为水平对齐首部结果。文本段落宽度占满Text组件宽度。可通过align（设置容器元素绘制区域内的子元素的对齐方式。）属性控制文本段落在垂直方向上的位置。

• textOverflow(value: { overflow: TextOverflow })设置文本超长时的显示方式。
  

名称描述TextOverflow .None文本超长时按最大行截断显示。TextOverflow .Clip文本超长时按最大行截断显示。TextOverflow .Ellipsis文本超长时显示不下的文本用省略号代替。TextOverflow .MARQUEE文本超长时以跑马灯的方式展示。 当overflow设置为TextOverflow.None、TextOverflow.Clip、TextOverflow.Ellipsis时，需共同maxLines使用，单独设置不生效。设置TextOverflow.None与TextOverflow.Clip结果一样。
当overflow设置为TextOverflow.MARQUEE时，文本在一行内滚动显示，设置maxLines及copyOption属性均不生效。在文本不可滚动时，设置textAlign属性生效；在文本可滚动时，设置textAlign属性不生效。在跑马灯模式下，Text组件clip属性默认为true。

• maxLines(value: number)设置文本的最大行数。
  
• lineHeight(value: number | string | Resource)设置文本的文本行高，设置值不大于0时，不限制文本行高，自适应字体巨细，number类型时单位为fp。
  
• decoration(value: DecorationStyleInterface)设置文本装饰线样式及其颜色。
  

参数名类型必填阐明typeTextDecorationType是装饰线类型。取值：None、Underline、LineThrough、OverlinecolorResourceColor否装饰线颜色。styleTextDecorationStyle否装饰线样式。取值SOLID、DOUBLE、DOTTED、DASHED、WAVY

• baselineOffset(value: number | string)设置文本基线的偏移量，设置该值为百分比时，按默认值显示。
  
• letterSpacing(value: number | string)设置文本字符间距。当取值为负值时，文字会发生压缩.
  
• minFontSize(value: number | string | Resource)设置文本最小显示字号。需共同maxFontSize以及maxlines或布局巨细限制使用，单独设置不生效，对子组件和属性字符串不生效。自适应字号生效时，fontSize设置不生效。minFontSize小于或即是0时，自适应字号不生效。
  
• maxFontSize(value: number | string | Resource)同上
  
• textCase(value: TextCase)设置文本巨细写。
  
• copyOption(value: CopyOptions)设置组件是否支持文本可复制粘贴
  
• draggable(value: boolean)设置选中文本拖拽结果。
  
• font(value: Font)设置文本样式。包括字体巨细、字体粗细、字体族和字体风格。
  
• textShadow(value: ShadowOptions | Array)设置文字阴影结果。
  
• heightAdaptivePolicy(value: TextHeightAdaptivePolicy)设置文本自适应高度的方式。
  
• textIndent(value: Length)设置首行文本缩进。
  
• wordBreak(value: WordBreak)设置断行规则。WordBreak.BREAK_ALL与{overflow: TextOverflow.Ellipsis}，maxLines组合使用可实现英文单词按字母截断，超出部分以省略号显示
  
• selection(selectionStart: number, selectionEnd: number)设置选中区域。选中区域高亮且显示手柄和文本选择菜单。
  
• ellipsisMode(value: EllipsisMode)设置省略位置。
  
• enableDataDetector(enable: boolean)
  
• dataDetectorConfig(config: TextDataDetectorConfig)需共同enableDataDetector一起使用
  
• bindSelectionMenu(spanType: TextSpanType, content: CustomBuilder, responseType: TextResponseType,options?: SelectionMenuOptions)
  TextSpanType枚举阐明
  

名称阐明TEXTSpan为文字类型。IMAGESpan为图像类型。MIXEDSpan为图文混合类型。TextResponseType枚举阐明 名称描述RIGHT_CLICK通过鼠标右键触发菜单弹出。LONG_PRESS通过长按触发菜单弹出。SELECT通过鼠标选中触发菜单弹出。

• fontFeature(value: string)设置文字特性结果，比如数字等宽的特性。
  
• lineSpacing(value: LengthMetrics)设置文本的行间距
  
• privacySensitive(supported: boolean)设置是否支持卡片敏感隐私信息。
  
• lineBreakStrategy(strategy: LineBreakStrategy)设置折行规则。该属性在wordBreak不即是breakAll的时间生效，不支持连词符。
  
• textSelectable(mode: TextSelectableMode)设置是否支持文本可选择、可获焦以及Touch后能否获取焦点。
  
• editMenuOptions(editMenu: EditMenuOptions)设置自定义菜单扩展项，允许用户设置扩展项的文本内容、图标、回调方法。
  
• minFontScale(scale: number | Resource)设置文本最小的字体缩放倍数。
  
• maxFontScale(scale: number | Resource)设置文本最大的字体缩放倍数。
  
• halfLeading(halfLeading: boolean)设置文本是否将行间距中分至行的顶部与底部。
  

事件

除支持通用事件外，还支持以下事件：

• onCopy(callbackvalue: string) => void)长按文本内部区域弹出剪贴板后，点击剪切板复制按钮，触发该回调。目前文本复制仅支持文本。
  
• onTextSelectionChange(callback: (selectionStart: number, selectionEnd: number) => void)文本选择的位置发生变化时，触发该回调。
  

Span&ImageSpan&ContainerSpan&SymbolSpan

Span只能作为Text和RichEditor组件的子组件显示文本内容。可以在一个Text内添加多个Span来显示一段信息，比方产品阐明书、答应书等。
Span作为Text、ContainerSpan组件的子组件，用于显示行内文本的组件。

1. Text('我是Text') {
2.   Span('我是Span')
3. }

复制代码

ImageSpan：Text、ContainerSpan组件的子组件，用于显示行内图片。
ContainerSpan：Text组件的子组件，用于统一管理多个Span、ImageSpan的背景色及圆角弧度。
SymbolSpan：作为Text组件的子组件，用于显示图标小符号的组件。
属性

和Text属性有许多重合。属性继承自BaseSpan，通用属性方法仅支持文本通用。
文本输入 (TextInput/TextArea)

TextInput为单行输入框、TextArea为多行输入框。通过以下接口来创建。

1. TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextInputController})
2. TextArea(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextAreaController})

复制代码

多行输入框文字超出一行时会主动折行。
设置输入框当前的文本内容。

1. TextInput({placeholder:'我是提示文本',text:'我是当前文本内容'})

复制代码

TextInput默认会占据一行，单行输入框可设置.width('auto')
使组件宽度自适应文本宽度(从API version 10开始)

1. .width('auto')

复制代码

默认环境下，通用属性padding的默认值为：

1. {top: '8vp',
2. right: '16vp',
3. bottom: '8vp',
4. left: '16vp'}

复制代码

输入框开启下划线模式时通用属性padding的默认值为：

1. {top: '12vp',
2. right: '0vp',
3. bottom: '12vp',
4. left: '0vp'}

复制代码

文本输入框默认圆角矩形框，独占一行？？。可将内边距Padding设置为0。
TextInput属性

除支持通用属性和文本通用属性的fontColor、fontSize、fontStyle、fontWeight、fontFamily外，还支持以部属性：

• type(value: InputType)设置输入框类型。InputType枚举阐明：Normal、Password、Email、Number、PhoneNumber
  
• enableAutoFill(value: boolean)设置是否启用主动填充。
  
• contentType(value: ContentType)设置主动填充类型。ContentType枚举阐明
  
• placeholderColor(value: ResourceColor)设置placeholder文本颜色。
  
• placeholderFont(value?: Font)设置placeholder文本样式，包括字体巨细，字体粗细，字体族，字体风格。目前仅支持默认字体族。
  
• enterKeyType(value: EnterKeyType)设置输入法回车键类型。
  
• caretColor(value: ResourceColor)设置输入框光标颜色。
  
• caretStyle(value: CaretStyle)设置光标风格。
  
• maxLength(value: number)设置文本的最大输入字符数。
  
• caretPosition(value: number)设置光标位置。
  
• inputFilter(value: ResourceStr, error?: (value: string) => void)通过正则表达式设置输入过滤器。
  
• copyOption(value: CopyOptions)设置输入的文本是否可复制。
  
• showPasswordIcon(value: boolean)设置当暗码输入模式时，输入框末尾的图标是否显示。
  
• style(value: TextInputStyle | TextContentStyle)设置输入框为默认风格或内联输入风格，内联输入风格只支持InputType.Normal类型。
  
• textAlign(value: TextAlign)设置文本在输入框中的水平对齐方式。
  
• selectedBackgroundColor(value: ResourceColor)设置文本选中底板颜色。
  
• showUnit(value: CustomBuilder)设置控件作为文本框单位。需搭配showUnderline使用。
  
• showUnderline(value: boolean)设置是否开启下划线。
  
• showError(value?: ResourceStr | undefined)设置错误状态下提示的错误文本或者不显示错误状态。
  
• underlineColor(value: ResourceColor|UnderlineColor|undefined)开启下划线时，支持配置下划线颜色。
  
• passwordIcon(value: PasswordIcon)设置当暗码输入模式时，输入框末尾的图标。
  
• enableKeyboardOnFocus(value: boolean)设置TextInput通过点击以外的方式获焦时，是否绑定输入法。
  
• selectionMenuHidden(value: boolean)设置是否不弹出体系文本选择菜单。
  
• barState(value: BarState)设置内联输入风格编辑态时滚动条的显示模式。
  
• maxLines(value: number)设置内联输入风格编辑态时文本可显示的最大行数。
  
• customKeyboard(value: CustomBuilder, options?: KeyboardOptions)设置自定义键盘。
  
• passwordRules(value: string)定义生成暗码的规则
  
• cancelButton(value: { style?: CancelButtonStyle, icon?: IconOptions })设置右侧扫除按钮样式。不支持内联模式。
  
• selectAll(value: boolean)设置当初始状态，是否全选文本。不支持内联模式。
  
• showCounter(value: boolean, options?: InputCounterOptions)设置当通过InputCounterOptions输入的字符数超过阈值时显示计数器。
  
• showPassword(visible: boolean)设置暗码的显隐状态。需组合暗码模式才华生效
  
• enablePreviewText(enable: boolean)设置是否开启输入预上屏。
  

事件

• onChange(callback: EditableTextOnChangeCallback)输入内容发生变化时，触发该回调。
  
• onSubmit(callback: (enterKey: EnterKeyType, event: SubmitEvent) => void)按下输入法回车键触发该回调。
  
• onEditChanged(callback: (isEditing: boolean) => void)输入状态变化时，触发该回调。deprecated
  
• onEditChange(callback: (isEditing: boolean) => void)输入状态变化时，触发该回调。有光标时为编辑态，无光标时为非编辑态。isEditing为true表示正在输入。
  
• onCopy(callback: (value: string) => void)进行复制操作时，触发该回调。
  
• onCut(callback: (value: string) => void)进行剪切操作时，触发该回调。
  
• onPaste(callback: (value: string, event: PasteEvent) => void)进行粘贴操作时，触发该回调。
  
• onTextSelectionChange(callback: (selectionStart: number, selectionEnd: number) => void)文本选择的位置发生变化或编辑状态下光标位置发生变化时，触发该回调。
  
• onContentScroll(callback: (totalOffsetX: number, totalOffsetY: number) => void)文本内容滚动时，触发该回调。
  
• onSecurityStateChange(callback: Callback)暗码显隐状态切换时，触发该回调。
  
• onWillInsert(callback: Callback<InsertValue, boolean>)在将要输入时，触发该回调。
  
• onDidInsert(callback: Callback)在输入完成时，触发该回调。
  
• onWillDelete(callback: Callback<DeleteValue, boolean>)在将要删除时，触发该回调。
  
• onDidDelete(callback: Callback)在删除完成时，触发该回调。
  

内联模式？

如图，嵌入输入框

键盘避让？

显示图片 (Image)

Image通过调用接口来创建，接口调用形式如下：

1. Image(src: PixelMap | ResourceStr | DrawableDescriptor)
2. src新增ImageContent类型，可指定对应的图形内容。

复制代码

Image支持多种图片格式，包括png、jpg、bmp、svg和gif。
图片的数据源，支持当舆图片和网络图片。

• PixelMap格式为像素图，常用于图片编辑的场景。
  
• ResourceStr包罗Resource和string格式。
  

string格式可用于加载网络图片和当舆图片，常用于加载网络图片。当使用相对路径引用当舆图片时，比方Image(“common/test.jpg”)，不支持跨包/跨模块调用该Image组件，建议使用Resource格式来管理需全局使用的图片资源。

• 支持Base64字符串。格式data:image/[png|jpeg|bmp|webp|heif];base64,[base64 data], 其中[base64 data]为Base64字符串数据。
  
• 支持file://路径前缀的字符串，应用沙箱URI：file:///。用于读取本应用安装目录下files文件夹下的图片资源。须要保证目录包路径下的文件有可读权限。
  

Resource格式可以跨包/跨模块访问资源文件，是访问当舆图片的推荐方式。

• 当传入资源id或name为普通图片时，生成DrawableDescriptor对象。传入AnimatedDrawableDescriptor类型可播放PixelMap数组动画。
  
• 传入ImageContent类型，指定图像内容。
  

阐明：

• ArkTS卡片上支持gif图片格式动效，但仅在显示时播放一次。
  
• ArkTS卡片上不支持http://等网络相关路径前缀和file://路径前缀的字符串。
  
• ArkTS卡片上不支持 PixelMap类型。
  
• 加载当舆图片过程中，如果对图片进行修改或者替换，大概会引起应用瓦解。因此须要覆盖图片文件时，应该先删除该文件再重新创建一个同名文件。
  
• 网络图片必须支持RFC 9113尺度，否则会导致加载失败。
  
• 如果下载的网络图片大于10MB或一次下载的网络图片数量较多，建议使用HTTP工具提前预下载，提高图片加载性能，方便应用侧管理数据。
  
• 如果SVG图片没有原生巨细，须要给Image组件设置宽高，否则不显示。
  
• 如果SVG图片通过image标签引用当地其他图片，被引用的图片不支持svg格式和gif格式。
  

1. Image(src: PixelMap | ResourceStr | DrawableDescriptor, imageAIOptions: ImageAIOptions)
2. Image新增imageAIOptions参数，为组件设置AI分析选项。

复制代码

加载图片资源

Image支持加载存档图、多媒体像素图两种类型。
存档图类型数据源

存档图类型的数据源可以分为当地资源、网络资源、Resource资源、媒体库资源和base64。

1. 本地资源
2. 创建文件夹，将本地图片放入ets文件夹下的任意位置。
3. Image组件引入本地图片路径，即可显示图片（根目录为ets文件夹）。
4. Image('images/view.jpg')
5. 网络资源
6. Image('https://www.example.com/example.JPG') // 实际使用时请替换为真实地址
7. Resource资源
8. 使用资源格式可以跨包/跨模块引入图片，resources文件夹下的图片都可以通过$r资源接口读 取到并转换到Resource格式。
9. Image($r('app.media.icon'))
10. 还可以将图片放在rawfile文件夹下。
11. Image($rawfile('example1.png'))
12. 媒体库file://data/storage
13. 支持file://路径前缀的字符串，用于访问通过媒体库提供的图片路径。
14.         a.调用接口获取图库的照片url。
15.         b.从媒体库获取的url格式通常如下。
16.         Image('file://media/Photos/5')
17. base64
18. 路径格式为data:image/[png|jpeg|bmp|webp];base64,[base64 data]，其中[base64 data]为Base64字符串数据。
19. Base64格式字符串可用于存储图片的像素数据，在网页上使用较为广泛。

复制代码

多媒体像素图

显示矢量图

Image组件可显示矢量图（svg格式的图片），支持的svg标签为：svg、rect、circle、ellipse、path、line、polyline、polygon和animate。
svg格式的图片可以使用fillColor属性改变图片的绘制颜色。
属性

1.== alt==(value: string | Resource | PixelMap)设置图片加载时显示的占位图。当组件的参数类型为AnimatedDrawableDescriptor时设置该属性不生效。
2. objectFit(value: ImageFit) 设置图片的填充结果。可以使图片缩放到高度和宽度确定的框内。

1. // 保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内。
2. .objectFit(ImageFit.Contain)
3. // 保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。
4. .objectFit(ImageFit.Cover)
5. // 自适应显示。
6. .objectFit(ImageFit.Auto)
7. // 不保持宽高比进行放大缩小，使得图片充满显示边界。
8. .objectFit(ImageFit.Fill)
9. // 保持宽高比显示，图片缩小或者保持不变。
10. .objectFit(ImageFit.ScaleDown)
11. // 保持原有尺寸显示。
12. .objectFit(ImageFit.None)

复制代码

• objectRepeat(value: ImageRepeat)设置图片的重复样式，从中央点向双方重复，剩余空间不足放下一张图片时会截断。svg、AnimatedDrawableDescriptor 不支持。
  
• interpolation(value: ImageInterpolation)设置图片的插值结果，即缓解图片在缩放时的锯齿问题。svg、AnimatedDrawableDescriptor 不支持。
  
• renderMode(value: ImageRenderMode)设置图片的渲染模式。通过renderMode属性设置图片的渲染模式为原色或黑白。svg、AnimatedDrawableDescriptor 、ColorFilter 不支持。
  
• sourceSize(value: { width: number; height: number })设置图片解码尺寸。仅在目的尺寸小于图源尺寸时生效。
  
• matchTextDirection(value: boolean)设置图片是否跟随体系语言方向，在RTL语言环境下显示镜像翻转显示结果。
  
• fitOriginalSize(value: boolean)设置图片的显示尺寸是否跟随图源尺寸。图片组件尺寸未设置时，其显示尺寸是否跟随图源尺寸。默认值：false。
  
• fillColor(value: ResourceColor)设置填充颜色，设置后填充颜色会覆盖在图片上。仅对svg图源生效，设置后会替换svg图片的填充颜色。如需对png图片进行修改颜色，可以使用colorFilter。
  
• autoResize(value: boolean)设置图片解码过程中是否对图源主动缩放。
  
• syncLoad(value: boolean)设置是否同步加载图片。建议加载尺寸较小的当舆图片时将syncLoad设为true，因为耗时较短，在主线程上实行即可。默认是异步加载。同步加载时壅闭UI线程，不会显示占位图。默认值：false。
  
• colorFilter(value: ColorFilter | DrawingColorFilter)为图像设置颜色滤镜结果。
  
• draggable(value: boolean)设置组件默认拖拽结果。不能和onDragStart事件同时使用。
  
• enableAnalyzer(enable: boolean)设置组件支持AI分析。不能和overlay属性同时使用
  
• resizable(value: ResizableOptions)设置图像拉伸时可调解巨细的图像选项。
  
• dynamicRangeMode(value: DynamicRangeMode)设置盼望展示的图像动态范围。该属性仅在手机装备上生效。
  

图片的解码尺寸sourceSize，图片的宽高，图片的缩放填充objectFit，图片的autoResize？？？

怎样设置图片的尺寸？
事件

除支持通用事件外，还支持以下事件：

• onComplete图片数据加载成功和解码成功时均触发该回调，返回成功加载的图片尺寸。
  
• onError(callback: ImageErrorCallback)图片加载非常时触发该回调。
  
• onFinish(event: () => void)当加载的源文件为动员效的svg格式图片时，svg动效播放完成时会触发这个回调。如果动效为无限循环动效，则不会触发这个回调。
  

自定义弹窗 (CustomDialog)

• 使用@CustomDialog装饰器装饰自定义弹窗。
  
• @CustomDialog装饰器用于装饰自定义弹框，此装饰器内进行自定义内容（也就是弹框内容）。
  

1. @CustomDialog //
2. struct CustomDialogExample {
3.   controller: CustomDialogController = new CustomDialogController({
4.     builder: CustomDialogExample({}),
5.   })
6.   build() {
7.     Column() {
8.       Text('我是内容')
9.         .fontSize(20)
10.         .margin({ top: 10, bottom: 10 })
11.     }
12.   }
13. }

复制代码

• 创建构造器，与装饰器呼应相连。
  

1. @Entry
2. @Component
3. struct CustomDialogUser {
4. //创建构造器，与装饰器呼应相连。
5.    dialogController: CustomDialogController = new CustomDialogController({
6.      builder: CustomDialogExample(),
7.    })
8. }

复制代码

• 点击与onClick事件绑定的组件使弹窗弹出。
  

1. @Entry
2. @Component
3. struct CustomDialogUser {
4. //创建构造器，与装饰器呼应相连。
5.   dialogController: CustomDialogController = new CustomDialogController({
6.     builder: CustomDialogExample(),
7.   })
9.   build() {
10.     Column() {
11.       Button('click me')
12.         .onClick(() => {
13.           this.dialogController.open()//点击与onClick事件绑定的组件使弹窗弹出。
14.         })
15.     }.width('100%').margin({ top: 5 })
16.   }
17. }

复制代码

弹窗的交互

• 在@CustomDialog装饰器内添加按钮，同时添加数据函数。
  
• 页面内须要在构造器内进行吸收，同时创建相应的函数操作。
  
• 可通过弹窗中的按钮实现路由跳转，同时获取跳转页面向当前页传入的参数。
  

弹窗的动画

弹窗通过定义openAnimation控制弹窗出现动画的连续时间，速度等参数。
弹窗的样式

弹窗通过定义宽度、高度、背景色、阴影等参数来控制样式。

1. @CustomDialog
2. struct CustomDialogExample {
3.   controller?: CustomDialogController
4.   build() {
5.     Column() {
6.       Text('我是内容').fontSize(16).margin({ bottom: 10 })
7.     }
8.   }
9. }
11. @Entry
12. @Component
13. struct CustomDialogUser {
14.   @State textValue: string = ''
15.   @State inputValue: string = 'click me'
16.   dialogController: CustomDialogController | null = new CustomDialogController({
17.     builder: CustomDialogExample(),
18.     autoCancel: true,
19.     alignment: DialogAlignment.Center,
20.     offset: { dx: 0, dy: -20 },
21.     gridCount: 4,
22.     customStyle: false,
23.     //自定义弹窗样式
24.     backgroundColor: 0xd9ffffff,
25.     cornerRadius: 20,
26.     width: '80%',
27.     height: '100px',
28.     borderWidth: 1,
29.     borderStyle: BorderStyle.Dashed,//使用borderStyle属性，需要和borderWidth属性一起使用
30.     borderColor: Color.Blue,//使用borderColor属性，需要和borderWidth属性一起使用
31.     shadow: ({ radius: 20, color: Color.Grey, offsetX: 50, offsetY: 0}),
32.   })
34.   // 在自定义组件即将析构销毁时将dialogController置空
35.   aboutToDisappear() {
36.     this.dialogController = null // 将dialogController置空
37.   }
39.   build() {
40.     Column() {
41.       Button(this.inputValue)
42.         .onClick(() => {
43.           if (this.dialogController != null) {
44.             this.dialogController.open()
45.           }
46.         }).backgroundColor(0x317aff)
47.     }.width('100%').margin({ top: 5 })
48.   }
49. }

复制代码

嵌套自定义弹窗

通过第一个弹窗打开第二个弹窗时，最好将第二个弹窗定义在第一个弹窗的父组件处，通过父组件传给第一个弹窗的回调来打开第二个弹窗。
由于自定义弹窗在状态管理侧有父子关系，如果将第二个弹窗定义在第一个弹窗内，那么当父组件（第一个弹窗）被烧毁（关闭）时，子组件（第二个弹窗）内无法再继承创建新的组件。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。