HarmonyOS-自定义组件的步进器

时间：2023-03-12 17:11:31 科技观察

了解更多开源请访问：51CTO开源基础软件社区https://ost.51cto.com组件说明组件支持：步长、最大值、最小值、标题、当前值、精度、功能支持：增加、减少、禁用，增加和减少时，按钮高亮显示。效果展示组代码step.hml：

=max?'step-btn-disabled':'step-btn-not-disabled'}}"disabled="{{disabled||num>=max}}"@click="addHandle">step.js：exportdefault{props:{disabled:{default:false},num:{default:0},min:Number,max:Number,title:{default:""},step:{default:1},precision:{default:0}},computed:{showNum(){letnum=this.numreturnnum.toFixed(this.precision);}},addHandle(){this.$emit("change",{num:this.num+this.step});},minusHandle(){this.$emit("change",{num:this.num-this.step});}}step.css：.step-wrapper{width:100%;height:64px;margin:12px;border-radius:16px;背景颜色：#fff;}.step-wrapper-disabled{opacity:0.4;}.step-wrapper-not-disabled{opacity:1;}.step-minus,.step-add,.step-state{flex:1;}.步减,.step-add{justify-content:center;}.icon{width:100%;顶部边距：21px；调整内容：居中；}.step-minus-icon,.step-add-icon,.step-minus-icon:active,.step-add-icon:active{width:24px;高度：24px；背景位置：中心；背景重复：不重复；背景大小：封面；}.step-minus-icon{background-image:url("/common/images/ic_minus_disabled.png");}.step-add-icon{background-image:url("/common/images/ic_add_disabled.png");}.step-minus-icon:active{background-image:url("/common/images/ic_minus_active.png");}.step-add-icon:active{背景图像:url("/common/images/ic_add_active.png");}.step-btn-disabled{opacity:0.4;}.step-btn-not-disabled{opacity:1;}.step-state{flex-direction:柱子;align-items:center;}.step-num{margin-bottom:2px;}.small-top{margin-top:13px;}.big-top{margin-top:21px;}.step-num>text{字体大小：16px；高度：21px；line-height:22px;}.step-title>文本{高度：16px；字体大小：12px；line-height:16px;}.step-num,.step-title{width:100%;字体系列：HarmonyHeiTi-，HarmonyHeiTi；字体粗细：正常；：#000000；证明内容：居中；}.step-disabled-title{width:100%;margin-top:21px;}.step-disabled-title>text{width:100%;文本对齐：居中；高度：21px；字体大小：16px；line-height:22px;}示例1、基本用法2、禁用3.指定精度4.指定的步长需要匹配对应的精度才能使用5.指定最大值和最小值6.指定标题指定标题后禁用状态必须传递属性名type表示numNumbertrue组件展示的部分，关联父组件。disabledBooleanfalse为禁用，禁用样式根据是否有title属性区分。显示minNumberfalse计算出的最小值maxNumberfalse计算出的最大值TitleStringfalse是否显示标题stepNumberfalse指定计算步长需要匹配精度。使用precisionNumberfalse指定值的精度。事件名称表示更改绑定值时触发更改。使用e.detail获取问题库存的动态绑定样式。class="step-wrapper{{disabled?'step-wrapper-disabled':'step-wrapper-not-disabled'}}"0.00在页面中显示为0。这里我尝试了num.toString()和num+=""转换为字符串，但是无效，所以我使用toFixed()转换为相应精度的字符串。computed:{showNum(){让num=this.num返回num.toFixed(this.precision);}}相关资料写这个组件，简单的使用组件间通信，动态类名等，这里列出官方API，供后续查看。Props自定义组件可以通过props声明属性。父组件通过设置属性向子组件传递参数。Props支持的类型包括：String、Number、Boolean、Array、Object。camelCase（驼峰命名法）的prop名称在外部父组件中传递参数时需要使用kebab-case（破折号分隔命名）形式，即在父组件中引用属性compProp时，需要转换为comp-prop。向自定义组件添加props并通过父组件向下传递参数的示例如下：

{{compProp}}//comp.jsexportdefault{props:['compProp'],

描述：来自定义属性名时，禁止以保留关键字开头，如on、@、on:、grab:等。Props添加默认值子组件可以通过固定值default设置默认值。当父组件没有设置该属性时，将使用其默认值。在这种情况下，props属性必须是对象的形式，而不是数组。示例如下：comp.hml:

{{title}}本例中添加了一个文本组件，用于显示标题，标题内容为自定义Attribute，显示标题内容集由用户设置，当用户未设置时显示默认值title。引用组件时添加该属性的设置：xxx.hml:组件通信1.Props子组件向上传递参数comp.hml:

点击此处查看隐藏文本helloworldcomp.js:exportdefault{childClicked(){this.$emit('eventType1',{text:'收到子组件参数'});this.showObj=!this.showObj;},}2.父组件通过e.detail获取参数：xxx.hml:父组件：{{text}}

xxx.js:exportdefault{data:{text:'Start',},textClicked(e){this.text=e.detail.text;},}总结在写组件的过程中，发现一些js方法在FA中不起作用，需要反复试验才能搞定。了解更多开源信息，请访问：51CTO开源基础软件社区https://ost.51cto.com。

上一篇：OHOS3.0标准系统写C程序控制LED

下一篇：AI一键纹身，几秒就能看清明星“真面目”

HarmonyOS-自定义组件的步进器相关文章