#夏日挑战赛#【FFH】鸿蒙Js API8之新增Dom的动态添加 原创 精华

FFH_PETSJ
发布于 2022-7-18 16:09
浏览
1收藏

本文正在参加星光计划3.0–夏日挑战赛

鸿蒙Js API8之新增Dom的动态添加

不久前鸿蒙js更新到了api8,看了一下官方文档关于API8的新增内容,发现了这样一个新增
https://developer.harmonyos.com/cn/docs/documentation/doc-releases/apidiff-js-api-8-arkui-0000001276484188
#夏日挑战赛#【FFH】鸿蒙Js API8之新增Dom的动态添加-鸿蒙开发者社区#夏日挑战赛#【FFH】鸿蒙Js API8之新增Dom的动态添加-鸿蒙开发者社区

#夏日挑战赛#【FFH】鸿蒙Js API8之新增Dom的动态添加-鸿蒙开发者社区

新增了dom的接口

static createElement(tag: string): Element

调用示例如下:

let image=dom.createElement('image') //静态调用
let input=dom.createElement('input')
image.setAttribute('src','/common/testImage.png')

viewmodel的Element接口新增三个关于Dom的操作

addChild(child: Element): void;
setAttribute(name: string, value: string): void;
setStyle(name: string, value: string): boolean;

实例演示

尝试添加image的dom

#夏日挑战赛#【FFH】鸿蒙Js API8之新增Dom的动态添加-鸿蒙开发者社区
点击addImage生成image的dom
#夏日挑战赛#【FFH】鸿蒙Js API8之新增Dom的动态添加-鸿蒙开发者社区

调用createElement(‘image’) ,返回Element

let image=dom.createElement(‘image’)

设置image的src属性

image.setAttribute(‘src’,‘/common/testImage.png’)

调用addChild(ELement)添加到指定组件下

this.$element(‘div2add’).addChild(image)

完整代码

<div class="container">
    <div style=" flex-direction: column; width: 612px;height: 240px;border-width: 2px;" id="div2add"></div>
    <button  class="btn" onclick="addImage">add</button>
</div>
export default {
    data: {
    },
    addImage() {
        let image=dom.createElement('image')
        image.setAttribute('src','/common/tesImage.png')
        this.$element('div2add').addChild(image)
    },
}
.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

.btn{
    margin-top: 50px;
    width: 45%;
    height: 10%;
    font-size: 55px;
}

相当于代替了js组件的show或if属性

<image show="{{isShow}}" src="/common/testImage.bmp"></image>
data:{
    isShow:false
}
addImage() {
    this.isShow = true
},

尝试添加input的dom

(因为设置不了text组件的显示内容,用input的text类型替代显示)

let input=dom.createElement('input')
input.setAttribute('value','this is a input text/this is a input text/this is a input text')
input.setAttribute('type','text') //设置成功
input.setStyle('font-size','50px') 
this.$element('div2add').addChild(input)

#夏日挑战赛#【FFH】鸿蒙Js API8之新增Dom的动态添加-鸿蒙开发者社区
添加成功,但设置的font-size:50px样式没有生效

总结

Web框架中js对dom的操作是非常方便实用的,既然ArkUI是类Web框架的,对Dom树增加更多的操作接口是很有必要的,它能更大的提高开发效率。从新增的dom接口来看,这个方向也在逐渐的建立和完善,希望接下来的js API版本更新能给ArkUI前端开发带来更多的惊喜和便利。

期待完善的功能

目前createElement生成的dom貌似设置不了自身style,但能通过在其父组件中设置子组件样式来改变
尝试新增的setStyle()接口:

Sets a style value on a specified element. If the style exists and the style value is valid, the setting is successful. Otherwise, the setting is invalid.
@param name style name
@param value style value
@returns If the setting is successful, true is returned. If the setting fails, false is returned.
@since 8
setStyle(name: string, value: string): boolean;

let div=this.$element('div2add')
let bool = div.setStyle('border-width','0px')
console.info(bool) //文档写的是返回boolean,但输出undefined,设置没有生效,不知道是不是我使用方法不对

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2022-7-20 19:25:34修改
5
收藏 1
回复
举报
5条回复
按时间正序
/
按时间倒序
红叶亦知秋
红叶亦知秋

到api8后能玩的也是越来越多了,变动的文档楼主方便贴一下吗

回复
2022-7-18 18:53:47
82王先生
82王先生

你好,问一下,你的dom对象从哪里引入的?

回复
2022-7-20 15:55:28
FFH_PETSJ
FFH_PETSJ 回复了 82王先生
你好,问一下,你的dom对象从哪里引入的?

不需要引入,createElement()是static方法,直接调用dom.createElement(tag:'string')就能返回一个Element对象

回复
2022-7-20 19:30:18
FFH_PETSJ
FFH_PETSJ 回复了 红叶亦知秋
到api8后能玩的也是越来越多了,变动的文档楼主方便贴一下吗

已贴,暂时还没有具体的接口说明文档,但能在ts文件找到

回复
2022-7-20 19:35:02
Whyalone
Whyalone

现在只是能够创建DOM,不能像网页端一样控制DOM吧。

如果能,那就有的玩了

回复
2022-7-21 18:41:11
回复
    相关推荐