card.js 2.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. // myComponents/card/card.js
  2. Component({
  3. options: {
  4. multipleSlots: true // 在组件定义时的选项中启用多slot支持
  5. },
  6. /**
  7. * 组件的属性列表
  8. */
  9. properties: {
  10. edit:{
  11. type:Boolean,
  12. value:true
  13. },
  14. menu:{
  15. type:Array,
  16. value:[]
  17. },
  18. data:null,
  19. index:null
  20. },
  21. /**
  22. * 组件的初始数据
  23. */
  24. data: {
  25. popover:null
  26. },
  27. /**
  28. * 组件的方法列表
  29. */
  30. methods: {
  31. onTap: function (e) {
  32. if(this.data.menu.length == 0){
  33. return false
  34. }
  35. console.log(e)
  36. console.log(this.data.popover)
  37. // 获取按钮元素的坐标信息
  38. var id = e.currentTarget.id // 或者 e.target.id 获取点击元素的 ID 值
  39. const query = wx.createSelectorQuery().in(this);
  40. var that = this
  41. query.select('#'+id).boundingClientRect(function(res) {
  42. // console.log(res.id); // 节点的ID
  43. // console.log(res.dataset); // 节点的dataset
  44. // console.log(res.left); // 节点的左边界坐标
  45. // console.log(res.right); // 节点的右边界坐标
  46. // console.log(res.top); // 节点的上边界坐标
  47. // console.log(res.bottom); // 节点的下边界坐标
  48. // console.log(res.width); // 节点的宽度
  49. // console.log(res.height); // 节点的高度
  50. that.data.popover.onDisplay(res);
  51. }).exec();
  52. },
  53. // 响应popover组件中的子元素点击事件
  54. onClickA: function (e) {
  55. const item = e.currentTarget.dataset.item
  56. item.data = this.properties.data
  57. item.index = this.properties.index
  58. // wx.showToast({
  59. // title: '你点击了A',
  60. // icon: 'none'
  61. // });
  62. // 调用自定义组件 popover 中的 onHide 方法
  63. this.data.popover.onHide();
  64. this.triggerEvent('value',item)
  65. }
  66. },
  67. /**
  68. * 组件的生命周期函数列表
  69. */
  70. lifetimes: {
  71. // 在组件实例进入页面节点树时执行
  72. attached: function () {
  73. // 初始化操作
  74. this.setData(
  75. {
  76. popover:this.selectComponent('#popover')
  77. }
  78. )
  79. // this.data.popover = this.selectComponent('#popover')
  80. console.log(this.data.popover)
  81. // ...
  82. },
  83. // 在组件实例被移除出页面节点树时执行
  84. detached: function () {
  85. // 清理工作
  86. console.log('组件销毁');
  87. // ...
  88. },
  89. // ...
  90. },
  91. })