devbox
羊村懒王
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

harmonyos 自定义组件（popup）_harmonyos popup

作者：羊村懒王 | 2024-03-13 11:20:32

赞

踩

harmonyos popup

自定义类似于下拉列表框的效果，当时考虑了几种组件，select, menu, popup,dialog, 自定义组件等。

比较：

select：

优缺点：

1. 右边的箭头不能自定义;

2.下拉框的option也不能随便修改样式；除了能修改字体样式外，宽度高度等都不能自定义；

3.下拉框的起始位置跟随select的左边沿。当select位于左边有足够空间时，option显示也比较大，但当select位于右边比较靠边的位置时，option的宽度就自动变小，左右两边的下拉框宽度不一样。

popup:

优缺点：

1. popup的位置可以通过placement设置，，使弹出框显示在控件的上下左右等八个位置，正上方，正下方也可以设，但这是个气泡，会有箭头显示，虽然箭头可以设置它的位置，但不能隐藏。

2. popup里面的内容可以自定义，可任意设置内容和样式。

menu：

优缺点：

1. 点击目标元素弹出menu, 目标元素可以是按钮，也可以自定义，这个比较好，但是menu做出的下拉框类似于select的效果，因为里面的每一项也是用option来显示，也不能随便更改样式；

2.menu的定位，使用target属性可以使menu定位在目标元素附近，弹出菜单位置优先为目标元素右下角，当右边可视空间不足时会适当左移，当下方空间不足时会适当上移，不能自己调整位置。不一定会显示在正下方或正上方。

dialog：

优缺点：

1. dialog里的内容可完全自定义；

2. dialog的定位，dialog定位比较灵活，但不能准确定位在目标元素的正下方或正上方。

自定义组件：

同dialog，定位不准确；

各种组件的具体使用：

1. 使用<div>+<select>制作的下拉框列表见：

Harmonyos 自定义下拉列表框（select）

效果如下：

2. 使用popup制作的下拉框

效果如下：

index.hml

  1.                         <div class="onOffLine_status" style="flex: 2;" id="selectIcon">
  2.                             <image src="/common/img/ic_right_expend_grey.webp" style="width: 50px; height: 50px;" onclick="changeCustomerValue"></image>
  3.                             <popup id="dialog1" target="selectIcon" placement="top" keepalive='true' clickable="false" onvisibilitychange="visibilitychange" style="width: 200px; height: {{massageStrengthArr1.length*100+'px'}}; background-color: #f5f5f5;">
  4.                                 <div style="display: flex; flex-direction: column; justify-content: center;">
  5.                                     <div for="{{massageStrengthArr1}}" tid="name" style="justify-content: center;">
  6.                                         <text if="{{$idx==0}}" style="width: 180px; height: 100px;border-radius: 15px; background-color: {{$item.isSelect?'#4291dd':'#00000000'}};text-align: center;" onclick="menuClicked({{$idx}})">{{$item.name}}</text>
  7.                                         <text else style="width: 100px; height: 100px;border-top: 1px solid #333333; border-radius: {{$item.isSelect?'15px':'0px'}}; background-color: {{$item.isSelect?'#4291dd':'#00000000'}};text-align: center;" onclick="menuClicked({{$idx}})">{{$item.name}}</text>
  8.                                     </div>
  9.                                 </div>
  10.                             </popup>
  11.                         </div>

index.js目标元素的点击事件：

  1.     //点击目标元素时触发该方法
  2.     changeCustomerValue(e) {
  3.         this.isShow = !this.isShow;
  4.         if (this.isShow) {
  5.             this.$element('dialog1').show();
  6.         } else {
  7.             this.$element('dialog1').hide();
  8.         }
  9.         console.info('changeCustomerValue'+JSON.stringify(e));
  10.     },
  11.  
  12. ……
  13.  
  14.    //当气泡弹出和消失时会触发该回调函数
  15.     visibilitychange(e) {
  16.         console.info('visibilitychange===='+JSON.stringify(e));
  17.     }

3. 使用自定义组件：

index.hml

  1. <!--引入自定义组件-->
  2. <element name="selectView" src="../../common/selectView/selectView.hml"></element>
  3. ……
  4. <!--使用自定义组件-->
  5. <div class="onOffLine_status" style="flex: 2;" id="selectIcon">
  6.      <image src="/common/img/ic_right_expend_grey.webp" style="width: 50px; height: 50px;" onclick="changeCustomerValue"></image>
  7.      <selectview onmenu-clicked='childClicked' strength-arr="{{massageStrengthArr1}}" massage-strength="{{massageStrength}}" is-show="{{isShow}}"></selectview>
  8. </div>

index.js 点击事件

  1.     //点击目标元素时
  2.     changeCustomerValue(e) {
  3.         this.isShow = !this.isShow;
  4.         if (this.isShow) {
  5.             this.$element('dialog1').show();
  6.         } else {
  7.             this.$element('dialog1').hide();
  8.         }
  9.         console.info('changeCustomerValue'+JSON.stringify(e));
  10.     },
  11.  
  12.     //点击下拉框里的选项时
  13.     childClicked(e) {
  14.         console.info('childClicked'+JSON.stringify(e));
  15.     },

注: isShow决定自定义组件是否显示

自定义组件 ：

selectView.hml

  1. <div style="position: fixed; width: 200px; height: 300px; align-content: center; border: 1px solid gray;" show="{{isShow}}">
  2. <!--    <div style="width: 100px;" onclick="menuClicked">-->
  3. <!--        <image src="/common/img/ic_right_expend_grey.webp" style="width: 30px; height: 30px;align-content: center;"></image>-->
  4. <!--    </div>-->
  5.     <div id="menu_opts" style="background-color: #ffffff; position: relative; margin-top: 40px;display: flex; flex-direction: column;justify-content: center;">
  6.         <div for="{{massageStrengthArr}}" tid="name" style="width: 100%;">
  7.             <text style="width: 100px; height: 50px; background-color: {{$item.isSelect?'#4291dd':'#00000000'}};" onclick="menuClicked({{$idx}})">{{$item.name}}</text>
  8.         </div>
  9.     </div>
  10. </div>

selectView.js

  1. import router from '@system.router';
  2. import app from '@system.app';
  3.  
  4. export default {
  5.     props: [
  6.         'strengthArr',
  7.         'massageStrength',
  8.         'isShow',
  9.         'page'
  10.     ],
  11.     data: {
  12.         massageStrengthArr: "",
  13.         massageStrength: 1,
  14.         isShow:false,
  15.         isSelect: false
  16.     },
  17.     //onInit方法在主页面加载的时候就开始执行了。
  18.     onInit() {
  19.         this.massageStrengthArr = this.strengthArr;
  20.         this.massageStrength = this.massageStrength;
  21.         this.isShow = this.isShow;
  22.         console.log('selectView'+this.massageStrengthArr)
  23.         for (var index = 0; index < this.massageStrengthArr.length; index++) {
  24.             const element = this.massageStrengthArr[index];
  25.             if (element.value == this.massageStrength) {
  26.                 element.isSelect = true;
  27.             }
  28.         }
  29.         //添加返回按钮事件的监听
  30.         this.$watch('page','onBack');
  31.     },
  32.     //点击下拉框的某个选项时
  33.     menuClicked(index) {
  34. //        this.$element("menu_opts").show();
  35.         this.isShow = true;
  36.         console.log('11111111111112222=='+JSON.stringify(this.massageStrengthArr)+",===="+index);
  37.         this.$emit('menuClicked','22');
  38.     },
  39. }

注意：

1. 事件绑定：

自定义组件中绑定子组件事件使用(on|@)child1语法，子组件中使用驼峰命名法命名的事件，在父组件中绑定时需要使用短横线分隔命名形式，例如：@children-event表示绑定子组件的childrenEvent事件，如 @children-event="bindParentVmMethod"。以代码中的例子为例：子组件调用时的事件为onmenu-clicked='childClicked'，在子组件中的定义则为：menuClicked, 调用：οnclick="menuClicked({{$idx}})"

2. 参数的传递：

在父组件中调用子组件传递的参数可以自定义一个属性，如果上面例子中要传递一个手法数据，自定义一个strength-arr属性，在子组件中接收这个参数，则用strengthArr，也是父组件中用短线连接的变量，在子组件中用驼峰命令法命名；

3. 事件的触发：

子组件中通过this.$emit('menuClicked', { params: '传递参数' })触发事件并进行传值，父组件执行childClicked方法并接收子组件传递的参数。

上面代码的例子中，this.$emit('menuClicked',index);子传递的参数为当前点击选项的位置, 在父组件的onmenu-clicked事件中，接收这个传参。接收的参数（点击了第5个选项 index为4）：

childClicked{"timestamp":1627106022674,"detail":4,"type":"menuClicked"}

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/228869
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号