评论

【微信小程序】多选Picker组件

分享一个自己开发的组件

先贴效果图

Gitee地址:https://gitee.com/x587/wp-combobox

使用方法:

在需要引入此组件的page中的iindex.json中加入以下内容

"usingComponents": {
    "combobox""../../components/combobox/combobox"
  }

index.wxml中

  


参数及事件说明

|    参数名   	| 是否必填 	|  属性  	|   默认值   	|      说明      	|
|:-----------:	|:--------:	|:------:	|:----------:	|:--------------:	|
|    values   	|    Yes   	|  Array 	|            	| 待选菜单中的值 	|
| placeholder 	|    No    	| String 	| 添加新标签 	| 输入框的提示符 	|


|    事件名   	|                说明                |               detail              |
|:-----------:	|:---------------------------------: |  :--------------------------------: |
|     add     	|     当用户在输入框新建tag时触发    |      target:当前新建的tag,        |
|               |                                    |      value:当前已经选中的tag 	    |
| repeatvalue 	| 当用户在输入框新建已经存在的时触发 |      value:当前输入的重复的tag    |
|    delete   	|      当用户删除添加的tag时触发     |      target:当前删除的tag,        |
|               |                                    |      value:当前已经选中的tag      |
|     sure    	|      当用户点击确认按钮时触发      |      value:当前已经选中的tag      |
|    cancel   	|      当用户点击取消按钮时触发      |      value:当前已经选中的tag      |


Tips:由于阴影会超出页面范围,为防止出现滚动条,可以在使用的Page的样式文件中加入

page {
  overflow: hidden;
}
最后一次编辑于  2021-11-11  
点赞 4
收藏
评论

3 个评论

  • Smooth
    Smooth
    2021-11-11

    功能不错,ui再美化点就更好啦

    2021-11-11
    赞同 2
    回复 1
    • 587!
      587!
      2021-11-11
      初版其实比这个好看点,但是与微信原生组件的风格太不搭了
      2021-11-11
      1
      回复
  • F丶SH
    F丶SH
    2023-06-20

    找了一圈在这里找到了,谢谢楼主!可惜还要自己慢慢改,新增target没问题,但是如果删除新增的target就会报错

    2023-06-20
    赞同
    回复
  • wall.e
    wall.e
    2022-01-06

    功能报错,VM636 WAService.js:2 TypeError: Cannot read property 'checked' of undefined。怎么肥事啦,楼主!

    2022-01-06
    赞同
    回复 1
    • 鼻涕怪ww
      鼻涕怪ww
      2022-11-16
      组件里搜 e.target.dataset.value    替换成 e.currentTarget.dataset.value
      2022-11-16
      回复
登录 后发表内容