【OpenHarmony常见问题汇总6】ArkUI开发框架（组件/图形）开发常见问题

最新推荐文章于 2024-08-12 22:28:07 发布
最新推荐文章于 2024-08-12 22:28:07 发布
阅读量424 收藏 3
点赞数 12
文章标签： javascript 开发语言 ecmascript harmonyos 华为 华为云
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xzs51job/article/details/141110174
版权

ArkUI开发框架（组件/图形）

  • 自定义弹窗能否在ts文件中定义和使用

  • 自定义弹窗中的变量如何传递给页面

  • 如何获取组件的宽高

  • 如何一键清空TextInput、TextArea组件内容

  • 如何设置自定义弹窗位置

  • 如何隐藏容器组件的溢出内容

  • 自定义弹窗如何去掉遮罩层

  • 自定义弹窗大小如何自适应内容

  • 如何理解自定义弹窗中的gridCount参数

  • 如何去除自定义弹窗的白色背景

  • TextInput组件密码模式下，右边的眼睛图标能否支持自定义

  • TextInput的onSubmit事件如何使用

  • TextInput在聚焦时如何使光标回到起点

  • 如何获取组件的属性信息

  • 如何获取可滚动组件的当前滚动偏移量

  • 如何实现文本竖向排列

  • 如何创建Toast窗口

  • Toast弹窗是否支持自定义背景或者字体颜色

  • 如何将Ability的UI界面设置成透明

  • constraintSize尺寸设置不生效

  • 如何将背景颜色设置为透明

  • Scroll组件滚动到达不了最底部

  • backgroundImage如何设置CenterCrop

  • 如何自定义Video组件控制栏样式

  • 如何设置组件不同状态下的样式

  • Scroll内Flex加宽高与滑动冲突

  • Marquee组件是否支持设置显示的文字位置

  • 父组件中如何处理子组件内点击事件

  • ArkUI有没有表格的组件，怎么实现一个表格？

  • 如何主动拉起软键盘

  • RichText的是否支持根据内容高度自适应

自定义弹窗能否在ts文件中定义和使用

适用于：OpenHarmony 3.2 Beta5 API 9

自定义弹窗的定义和初始化需要用到属于ArkTS语法内容，必须在ets后缀文件中定义使用，不能在ts后缀文件中定义使用。

参考链接

自定义弹窗

自定义弹窗中的变量如何传递给页面

适用于：OpenHarmony 3.2 Beta5 API 9

问题现象

在自定义弹窗内定义的变量内容，在关闭弹窗或变量变化时需要及时传递给页面，可以通过何种方式传递？

解决措施

  • 方式一：使用组件的状态变量传递。

  • 方式二：在初始化弹窗时，传递一个方法给自定义弹窗，在自定义弹窗中触发该方法，弹窗中变量作为方法的参数。

  • 方式三：使用AppStorage或LocalStorage方式管理页面状态，实现自定义弹窗和页面之间状态的共享。

代码示例

  • 方式一：

    @CustomDialog struct CustomDialog01 { @Link inputValue: string controller: CustomDialogController build() {   Column() {     Text('Change text').fontSize(20).margin({ top: 10, bottom: 10 })     TextInput({ placeholder: '', text: this.inputValue }).height(60).width('90%')       .onChange((value: string) => {         this.inputValue = value       })   } } }​@Entry @Component struct DialogDemo01 { @State inputValue: string = 'click me' dialogController: CustomDialogController = new CustomDialogController({   builder: CustomDialog01({     inputValue: $inputValue   }) })​build() {   Column() {     Button(this.inputValue)       .onClick(() => {         this.dialogController.open()       }).backgroundColor(0x317aff)   }.width('100%').margin({ top: 5 }) } }​

  • 方式二：

    @CustomDialog struct CustomDialog02 { private inputValue: string changeInputValue: (val: string) => void controller: CustomDialogController build() {   Column() {     Text('Change text').fontSize(20).margin({ top: 10, bottom: 10 })     TextInput({ placeholder: '', text: this.inputValue }).height(60).width('90%')       .onChange((value: string) => {         this.changeInputValue(value)       })   } } }​@Entry @Component struct DialogDemo02 { @State inputValue: string = 'click me' dialogController: CustomDialogController = new CustomDialogController({   builder: CustomDialog02({     inputValue: this.inputValue,     changeInputValue: (val: string) => {       this.inputValue = val     }   }) })​build() {   Column() {     Button(this.inputValue)       .onClick(() => {         this.dialogController.open()       }).backgroundColor(0x317aff)   }.width('100%').margin({ top: 5 }) } }​

  • 方式三：

    let storage = LocalStorage.GetShared() @CustomDialog struct CustomDialog03 { @LocalStorageLink('inputVal') inputValue: string = '' controller: CustomDialogController build() {   Column() {     Text('Change text').fontSize(20).margin({ top: 10, bottom: 10 })     TextInput({ placeholder: '', text: this.inputValue }).height(60).width('90%')       .onChange((value: string) => {         this.inputValue = value;       })   } } }​@Entry(storage) @Component struct DialogDemo03 { @LocalStorageLink('inputVal') inputValue: string = '' dialogController: CustomDialogController = new CustomDialogController({   builder: CustomDialog03() })​build() {   Column() {     Button(this.inputValue)       .onClick(() => {         this.dialogController.open()       }).backgroundColor(0x317aff)   }.width('100%').margin({ top: 5 }) } }​

如何获取组件的宽高

适用于：OpenHarmony 3.2 Beta5 API 9

问题现象

组件的宽高信息用于计算布局区域大小以及偏移量等内容，如何获取宽高信息？

解决措施

  • 方式一：使用组件区域变化事件onAreaChange，在组件初始化或组件尺寸发生变化时触发。

  • 方式二：在点击或触摸事件中，事件的回调信息中存在目标元素的区域信息。

参考链接

组件区域变化事件，点击事件，触摸事件

如何一键清空TextInput、TextArea组件内容

适用于：OpenHarmony 3.2 Beta5 API 9

问题现象

TextInput，TextArea组件输入多字符后，需要实现点击清空。

解决措施

将状态变量赋值给TextInput或TextArea组件的text属性，在做点击清空事件时为状态变量赋值空字符串。

代码示例

struct Index { @State text: string = 'Hello World' controller: TextInputController = new TextInputController() build() {   Row() {     Column() {       TextInput({ placeholder: 'Please input your words.', text: this.text,         controller:this.controller}).onChange((value) => {           this.text = value         })       Button("Clear TextInput").onClick(() => {         this.text = "";       })     }     .width('100%')   }   .height('100%') } }

如何设置自定义弹窗位置

适用于：OpenHarmony 3.2 Beta5 API 9

问题现象

自定义弹窗当前默认在窗口居中显示，当自定义弹窗需要与窗口边框对齐是需要设置自定义弹窗的对齐方式。

解决措施

初始化自定义弹窗时，通过alignment参数设置对齐方式，通过offset设置弹窗偏移量。

参考链接

自定义弹窗

如何隐藏容器组件的溢出内容

适用于：OpenHarmony 3.2 Beta5 API 9

问题现象

当容器组件内容溢出时，表现为子组件边缘超出容器组件，需要进行隐藏设置。

解决措施

将通用属性-形状裁剪clip属性设置为true，表示按照容器边缘轮廓进行裁剪。此属性默认为false，表示不进行裁剪隐藏。

参考链接

形状裁剪

自定义弹窗如何去掉遮罩层

适用于：OpenHarmony 3.2 Beta5 API 9

问题现象

当自定义弹窗显示时，会有一个半透明遮罩，该遮罩无法隐藏。

解决措施

当前版本上，遮罩层无法实现隐藏和颜色设置，预计在4.0版本提供maskColor参数修改遮罩层颜色和透明度。

参考链接

自定义弹窗

自定义弹窗大小如何自适应内容

适用于：OpenHarmony 3.2 Beta5 API 9

问题现象

当自定义弹窗中存在可变化区域大小的子组件时，弹窗大小需要跟随自适应。

解决措施

  • 方式一：采用弹窗容器默认样式。在默认样式中，弹窗容器高度自适应子节点，最大可为窗口高度的90%；弹窗容器的宽度根据栅格系统自适应，不跟随子节点变化。

  • 方式二：当显示设置customStyle为true时，弹窗宽高跟随子节点内容适应。

参考链接

自定义弹窗

如何理解自定义弹窗中的gridCount参数

适用于：OpenHarmony 3.2 Beta5 API 9

gridCount参数是指弹窗宽度占栅格列数的个数。系统把窗口宽等分，等分的份数即为栅格列数，不同设备栅格列数不同。比如手机屏幕密度值在320vp<=水平宽度<600vp，所以栅格列数是4，则gridCount的有效值在[1, 4]。

注意：仅采用弹窗默认样式时设置有效。

参考链接

自定义弹窗

如何去除自定义弹窗的白色背景

适用于：OpenHarmony 3.2 Beta5 API 9

问题现象

使用自定义弹窗时，默认样式中存在白色背景。

解决措施

需要采用自定义样式来消除自定义弹窗的白色背景：

  1. 在初始化自定义弹窗时设置customStyle为true。

  2. 在定义弹窗时设置组件背景色backgroundColor。

参考链接

自定义弹窗

TextInput组件密码模式下，右边的眼睛图标能否支持自定义

适用于：OpenHarmony 3.2 Beta5 API 9

问题现象

TextInput组件设置type为InputType.Password时，右侧出现眼睛图标，不能修改图标样式。

解决措施

当前图标不支持自定义，可使用TextInput的showPasswordIcon属性隐藏图标，使用Image组件替代控制TextInput组件的type。

参考链接

TextInput组件

TextInput的onSubmit事件如何使用

适用于：OpenHarmony 3.2 Beta5 API 9

问题现象

TextInput的onSubmit事件怎么触发，以及事件回调的参数类型代表的含义。

解决措施

onSubmit事件在外接键盘或软键盘回车时触发该回调，回调的参数为当前软键盘回车键类型。通过TextInput的enterKeyType属性可以设置输入法回车键类型，软键盘回车键样式需要输入法的支持。

参考链接

TextInput组件

TextInput在聚焦时如何使光标回到起点

适用于：OpenHarmony 3.2 Beta5 API 9

问题现象

TextInput组件在聚焦时，光标位置会自动根据触摸点位置变化，如何使得聚焦时光标固定显示在起点位置？

解决措施

  1. TextInput组件绑定onEditChange事件，该事件TextInput可进行输入时触发。

  2. 在事件回调用TextInputController.caretPosition方法设置光标位置，不过需要用到setTimeout延迟方法。

代码示例

@Entry @Component struct TextInputDemo { controller: TextInputController = new TextInputController()​build() {   Column() {     TextInput({ controller: this.controller })       .onEditChange((isEditing: boolean) => {         if (isEditing) {           setTimeout(() => {             this.controller.caretPosition(0)           }, 100)         }       })   } } }

参考链接

TextInput组件

如何获取组件的属性信息

适用于：OpenHarmony 3.2 Beta5 API 9

解决措施

组件所有属性信息可通过通用属性-组件标识内getInspectorByKey获取。

参考链接

组件标识

如何获取可滚动组件的当前滚动偏移量

适用于：OpenHarmony 3.2 Beta5 API 9

问题现象

可滚动组件包含List，Grid，Scroll等，在发生滚动时如何获取滚动偏移量？

解决措施

  1. 可滚动组件在初始化时可设置scroller参数，绑定滚动控制器。

  2. 通过控制器的currentOffset方法可获取水平和竖直方向的滚动偏移量。

参考链接

Scroll

如何实现文本竖向排列

适用于：OpenHarmony 3.2 Beta5 API 9

问题现象

使用Text组件时，无法将文本排列方向设置为竖向排列。

解决措施

Text组件当前文本排列方向固定为横向排列，要设置为竖向排列，可将文件拆分，使用Flex容器组件装填，设置主轴方向为竖向。

代码示例

@Entry @Component struct Index15 { private message: string = '本文档适用于应用开发的初学者。通过构建一个简单的具有页面跳转/返回功能的应用，快速了解工程目录的主要文件，熟悉应用开发流程。'; build() {   Flex({ direction: FlexDirection.Column, wrap: FlexWrap.Wrap }) {     ForEach(this.message.split(''), (item, index) => {       Text(item)         .fontSize(30)         .flexShrink(0)     })   } } }

如何创建Toast窗口

适用于：OpenHarmony 3.2 Beta5 API 9

问题现象

应用做弱提示时，需要采用Toast窗口。

解决措施

可使用系统提供的@ohos.promptAction接口创建Toast窗口。

参考链接

@ohos.promptAction (弹窗)

Toast弹窗是否支持自定义背景或者字体颜色

适用于 OpenHarmony 3.2 Beta5 API 9

当前版本不支持Toast弹窗自定义背景和字体颜色。

参考链接

@ohos.promptAction (弹窗)

如何将Ability的UI界面设置成透明 

适用于：OpenHarmony 3.2 Beta5，API9

问题现象

如何设置Ability的UI界面为透明

解决措施

将最上层容器组件背景色设置为透明，然后通过设置XComponent组件的opacity属性值为0.01来实现。

示例：

build() { Stack() {   XComponent({   id: 'componentId',   type: 'surface',   })   .width('100%')   .height('100%')   .opacity(0.01)   // 页面内容 } .width('100%') .height('100%') .backgroundColor('rgba(255,255,255, 0)') }

constraintSize尺寸设置不生效

适用于：Openharmony 3.2 Beta5 API 9 stage模型

问题现象

constraintSize约束组件尺寸时，子组件内设置百分比宽度，例如width('100%')会采用constraintSize约束中的最大宽乘百分比，导致撑开组件，看起来constraintSize设置没生效。

解决措施

可以在外层使用Scroll组件，设置constraintSize，当子组件占用空间超过设置的约束值时，会显示滚动条。

如何将背景颜色设置为透明

适用于：OpenHarmony 3.2 Beta5 API 9

解决措施

将backgroundColor设置为 '#00000000'。

Scroll组件滚动到达不了最底部

适用于：OpenHarmony 3.2 Beta5 API 9 Stage模型

问题现象

Scroll组件在未设置高度情况下，默认为窗口高度，当滚动区域外存在其他组件时，滚动底部区域会出现遮挡。

解决措施

Scroll组件需要设置Scroll高度，或者使用Flex布局限制Scroll高度。

backgroundImage如何设置CenterCrop

适用于：OpenHarmony 3.2 Beta5 API 9 Stage模型

问题现象

CenterCrop是android中imageView,scaletype的设置，主要保证图片等比缩放裁剪，位置保持居中，要达到相同效果，应该怎么处理？

解决措施

可以使用通用属性backgroundImageSize(ImageSize.cover)和backgroundImagePosition(Alignment.Center)达到相同效果。

如何自定义Video组件控制栏样式

适用于：OpenHarmony 3.2 Beta5 API 9 Stage模型

解决措施

  1. 通过设置属性controls为false关闭默认控制栏。

  2. 设置Video组件的controller。

  3. 通过ArkTS实现自定义的控制栏，并通过VideoController控制视频播放。

代码示例

// xxx.ets @Entry@Componentstruct VideoCreateComponent { @State videoSrc: Resource = $rawfile('video1.mp4') @State previewUri: Resource = $r('app.media.poster1') @State curRate: PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_X @State isAutoPlay: boolean = false @State showControls: boolean = true controller: VideoController = new VideoController()   build() {   Column() {     Video({       src: this.videoSrc,       previewUri: this.previewUri,       currentProgressRate: this.curRate,       controller: this.controller     }).width('100%').height(600)       .autoPlay(this.isAutoPlay)       .controls(this.showControls)       .onStart(() => {         console.info('onStart')       })       .onPause(() => {         console.info('onPause')       })       .onFinish(() => {         console.info('onFinish')       })       .onError(() => {         console.info('onError')       })       .onPrepared((e) => {         console.info('onPrepared is ' + e.duration)       })       .onSeeking((e) => {         console.info('onSeeking is ' + e.time)       })       .onSeeked((e) => {         console.info('onSeeked is ' + e.time)       })       .onUpdate((e) => {         console.info('onUpdate is ' + e.time)       })             Row() {       Button('src').onClick(() => {         this.videoSrc = $rawfile('video2.mp4') // 切换视频源       }).margin(5)       Button('previewUri').onClick(() => {         this.previewUri = $r('app.media.poster2') // 切换视频预览海报       }).margin(5)​      Button('controls').onClick(() => {         this.showControls = !this.showControls // 切换是否显示视频控制栏       }).margin(5)     }       Row() {       Button('start').onClick(() => {         this.controller.start() // 开始播放       }).margin(5)       Button('pause').onClick(() => {         this.controller.pause() // 暂停播放       }).margin(5)       Button('stop').onClick(() => {         this.controller.stop() // 结束播放       }).margin(5)       Button('setTime').onClick(() => {         this.controller.setCurrentTime(10, SeekMode.Accurate) // 精准跳转到视频的10s位置       }).margin(5)     }       Row() {       Button('rate 0.75').onClick(() => {         this.curRate = PlaybackSpeed.Speed_Forward_0_75_X // 0.75倍速播放       }).margin(5)       Button('rate 1').onClick(() => {         this.curRate = PlaybackSpeed.Speed_Forward_1_00_X // 原倍速播放       }).margin(5)       Button('rate 2').onClick(() => {         this.curRate = PlaybackSpeed.Speed_Forward_2_00_X // 2倍速播放       }).margin(5)     }   } }}

参考链接

Video

如何设置组件不同状态下的样式

问题现象

对应组件的不同状态（如无状态、按下、禁用、聚焦、点击），显示不同的样式。

解决措施

使用多态样式，在组件的StateStyles接口中，定义组件不同状态下的样式。

代码示例

//xxx.ts
@Entry
@Component
struct StyleExample {
  @State isEnable: boolean = true;

  @Styles pressedStyles() {
    .backgroundColor("#ED6F21")
    .borderRadius(10)
    .borderStyle(BorderStyle.Dashed)
    .borderWidth(2)
    .borderColor('#33000000')
    .width(120)
    .height(30)
    .opacity(1)
  }
  build() {
    Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center}) {
      Text("pressed")
        .backgroundColor('#0A59F7')
        .borderRadius(20)
        .borderStyle(BorderStyle.Dotted)
        .borderWidth(2)
        .borderColor(Color.Red)
        .width(100)
        .height(25)
        .opacity(1)
        .fontSize(14)
        .fontColor(Color.White)
        .stateStyles({
          pressed: this.pressedStyles
        })
        .margin({
          bottom: 20
        })
        .textAlign(TextAlign.Center)
    }
    .width(350)
    .height(300)
  }
}

Scroll内Flex加宽高与滑动冲突

适用于：OpenHarmony 3.2 Beta5 API 9 Stage模型

问题现象

当在Scroll组件中添加容器组件，并设置该容器组件的尺寸时，会破坏滚动布局。

解决措施

Scroll组件中的容器组件不设置尺寸，大小由内容撑开。

Marquee组件是否支持设置显示的文字位置

适用于：OpenHarmony 3.2 Beta5 API 9 Stage模型

目前不支持。

父组件中如何处理子组件内点击事件

适用于：OpenHarmony 3.2 Beta5 API 9 Stage模型

在父组件中初始化子组件时，将父组件中定义的方法，传递给子组件，在子组件中调用该方法，类似于变量传递。

代码示例

class Model {
  value: string
}
@Entry
@Component
struct EntryComponent {
  test() {
    console.log('testTag test in my component');
  }
  build() {
    Column() {
      MyComponent({ title: { value: 'Hello World 2' }, count: 7, onClick: this.test }) //初始化时传递定义的方法
    }
  }
}

@Component
struct MyComponent {
  @State title: Model = { value: 'Hello World' }
  @State count: number = 0
  onClick: any;
  private toggle: string = 'Hello World'
  private increaseBy: number = 1

  build() {
    Column() {
      Text(`${this.title.value}`).fontSize(30)
      Button(`Click to increase count=${this.count}`)
        .margin(20)
        .onClick(() => {
          // 修改内部状态变量count
          this.count += this.increaseBy
          this.onClick.call();
        })
    }
  }
}

ArkUI有没有表格的组件，怎么实现一个表格？

适用于：OpenHarmony 3.2 Beta5 API 9 Stage模型

目前没有表格组件，可以使用web组件引入一个本地的html，在html中绘制一个表格。

如何主动拉起软键盘

适用于OpenHarmony 3.2 Beta5 API 9

解决措施

可以通过focusControl.requestFocus控制输入框获焦，组件获焦后会自动弹起软键盘

RichText的是否支持根据内容高度自适应

适用于OpenHarmony 3.2 Release API 9

目前不支持。

青少年编程作品集
关注
  • 12
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
6、OpenHarmony多芯片适配框架和开发实践1
08-03
简介角标 15pt合作 项目进展分享 适配经验展望 美好未来规划立项技术立项产品交付技术Ready客户洽谈产品项目立项产品展示发布更多产品落地• 研发投入大：两
OH哔哩是一款基于OpenHarmony系统ArkUI框架开发的哔哩哔哩动画第三方客户端
08-03
ArkUI是OpenHarmony系统中的关键组件，它是一个基于声明式UI开发框架，开发者可以通过编写简单的、声明式的代码来设计用户界面。 ArkUI借鉴了React Native和Flutter等现代前端框架的理念，使得开发者可以更高效地...
ArkUI框架是OpenHarmony UI开发框架
05-26
ArkUI框架是OpenHarmony UI开发框架，提供开发者进行应用UI开发时所必需的能力，包括UI组件、动画、绘制、交互事件、JS API扩展机制等。ArkUI框架提供了两种开发范式，分别是基于ArkTS的声明式开发范式（简称“声明...
基于OpenHarmony系统ArkUI框架开发的哔哩哔哩动画第三方客户端
11-11
ArkUI是OpenHarmony中的重要组成部分，它是一个用于构建用户界面的应用开发框架，类似于Android的Android UI框架。 ArkUI允许开发者使用声明式语言进行界面设计，提高了开发效率并简化了代码。 在“OH哔哩”项目中...
基于C和Python的OpenHarmony应用开发源码
04-05
本资源提供了一套基于C和Python语言的OpenHarmony应用开发源码。项目文件共242个，包括142个C源文件、86个头文件、5个mk文件、5个Python脚本以及相关的许可证、Makefile、Markdown文档和gn文件。该源码旨在帮助...
Arco Design for Vue 3 - 快速上手指南与实战技巧
qq_42072014的博客
08-11 418
如果你在使用 TypeScript 时遇到了类型定义问题，确保你安装了正确的类型包，并且版本与 Arco Design 的版本相匹配。Arco Design for Vue 3 是一个非常强大的 UI 框架，它不仅提供了丰富的组件和功能，还有完善的文档和支持。通过本文，你已经掌握了如何快速上手 Arco Design，并学会了一些实用的技巧来提升你的开发效率。希望这些经验能帮助你在 Vue 3 的开发过程中更进一步！
05_ Electron 自定义菜单、主进程与渲染进程通信
所学所思
08-09 582
单独写在一个 js 文件中，然后再在主进程中引入labe: "文件",submenu: [label: "新建文件",},label: "编辑",submenu: [label: "复制",},submenu: [// main.js// 1、引入初始化remote 模块width:800,})// __dirname 表示获取我们当前目录， path.join 会将两个参数合并成 d://electrondemo/index.html// 打开调试模式。
Electron学习与总结
song854601134的博客
08-12 117
组成，‌其中Chromium负责渲染和显示Web页面，‌而Node.js则提供了主进程的功能，‌包括管理应用程序的生命周期、‌创建和控制浏览器窗口以及与操作系统交互。，‌Electron使得开发者能够保持JavaScript代码库的一致性，‌从而轻松地创建跨平台的应用程序，‌而无需具备本地开发经验。Electron的核心是由。
牛客JS题（三十四）监听对象
不起眼小菜菜的博客
08-10 414
注释很详细，直接上代码……
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
水w的博客
08-07 308
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
【Markdown】Markdown 中的语言简称
最新发布
EleganceJiaBao的博客
08-12 439
以下是常见编程语言、脚本语言、标记语言等在 Markdown 中的语言简称以及相应的示例：
Ant-Design-Vue快速上手 指南+排坑（下）
Dingdangr的博客
08-10 458
确保你正确定义了校验规则。Ant Design Vue 3.x 及以上版本推荐使用Form.Item的rules属性来定义校验规则，这是一个数组，可以包含多个校验项。html复制代码label="用户名":rules="[{ required: true, message: '请输入用户名!' }, { min: 3, message: '用户名至少为3个字符!' }]"如果 Ant Design Vue 提供的校验规则不满足你的需求，你可以自定义校验规则。
【Ajax使用说明】Ajax、Axios以及跨域
aaaa_aaab的博客
08-12 644
XML：可扩展标记语言XML：被设计用来传输和存储数据XML和HTML类似，不同点：HTML中都是预定义标签，XML中没有预定义标签，全是自定义标签，用来表示一些数据现在已被JSON取代。
【Vue3】图片未加载成功前占位
菜就多练
08-08 328
原生img标签可以通过自定义指令解决< template > < img class = " image_item-img " v-preload = " ' loading' " src = " https://xx " alt = " 加载失败 " /> < script setup > import {reactive } from 'vue' // 自定义图片占位 const vPreload = {
高级java每日一道面试题-2024年8月12日-网络篇-说一下JSONP的实现原理?
qq_43071699的博客
08-12 366
JSONP是一种非官方的跨域数据交换协议，它允许在网页中通过标签的src属性从其他域名（网站）安全地获取数据。由于浏览器的同源策略限制，直接通过Ajax等方式跨域请求数据通常是不被允许的，而JSONP则巧妙地绕过了这一限制。
基于微信小程序的心理测评平台设计与实现
No_Name_Cao_Ni_Mei的博客
08-12 169
本文旨在设计与实现一个基于微信小程序的心理测评平台。该平台将提供心理测评问卷、分析报告和个性化建议等功能，旨在帮助用户了解自身心理状况并提供适当的改善方案。该平台将采用微信小程序作为开发平台，具备跨平台、便捷性等优势，能够满足用户在手机应用中进行心理测评的需求。本平台主要分为用户端和管理员端两个模块。用户端提供注册、登录、心理测试问卷填写等功能，同时可以生成个人心理分析报告和个性化建议。管理员端可以管理测试问卷、生成报告和建议，并管理用户信息和反馈意见。
创建一个简单的贪吃蛇游戏：HTML、CSS和JavaScript教程
Mr_Zhangyuge的博客
08-08 1609
在本教程中，我们将逐步构建一个简单的贪吃蛇游戏。这个项目适合初学者，可以帮助你理解HTML、CSS和JavaScript的基础知识，并掌握如何将它们结合起来创建一个完整的游戏。
基于vue框架的NBA球星管理系统1878g（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
h2345678的博客
08-12 835
随着互联网的普及和体育产业的蓬勃发展，篮球运动在全球范围内拥有庞大的粉丝群体，NBA（美国职业篮球联赛）作为其中的佼佼者，其球星更是备受关注。传统的球星信息管理方式往往依赖于纸质文档或简单的电子表格，这种方式不仅效率低下，难以实现数据的即时更新与共享，也无法满足球迷和媒体对球星信息深度挖掘的需求。因此，开发一套基于Vue框架的NBA球星管理系统，通过信息化手段整合球星信息，实现数据的快速录入、存储、查询与分析，对于提升管理效率、满足用户需求具有重要意义。，处理前端请求并提供业务逻辑。
ECMAScript6中的模块：export导出、import导入
pan_junbiao的博客
08-12 571
早期的 JavaScript 程序很小，通常被用来执行独立的脚本任务，在 Web 页面中需要的地方提供一定的交互。随着 Web 应用程序变得越来越复杂，有必要考虑提供一种将 JavaScript 程序拆分为可按需导入的单独模块的机制，这就是模块化编程。模块化编程就是将一个复杂的程序根据一定的规则封装成一个或多个文件，并组合在一起。使用这种方式，可以将代码分解到多个文件中，每个文件都称为一个模块。一个模块通常是一个类或者多个函数组成的方法库。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

青少年编程作品集

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值