12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394 |
- // myComponents/card/card.js
- Component({
- options: {
- multipleSlots: true // 在组件定义时的选项中启用多slot支持
- },
- /**
- * 组件的属性列表
- */
- properties: {
- edit:{
- type:Boolean,
- value:true
- },
- menu:{
- type:Array,
- value:[]
- },
- data:null,
- index:null
- },
- /**
- * 组件的初始数据
- */
- data: {
- popover:null
- },
- /**
- * 组件的方法列表
- */
- methods: {
- onTap: function (e) {
- if(this.data.menu.length == 0){
- return false
- }
- console.log(e)
- console.log(this.data.popover)
- // 获取按钮元素的坐标信息
- var id = e.currentTarget.id // 或者 e.target.id 获取点击元素的 ID 值
- const query = wx.createSelectorQuery().in(this);
- var that = this
- query.select('#'+id).boundingClientRect(function(res) {
- // console.log(res.id); // 节点的ID
- // console.log(res.dataset); // 节点的dataset
- // console.log(res.left); // 节点的左边界坐标
- // console.log(res.right); // 节点的右边界坐标
- // console.log(res.top); // 节点的上边界坐标
- // console.log(res.bottom); // 节点的下边界坐标
- // console.log(res.width); // 节点的宽度
- // console.log(res.height); // 节点的高度
- that.data.popover.onDisplay(res);
- }).exec();
- },
- // 响应popover组件中的子元素点击事件
- onClickA: function (e) {
- const item = e.currentTarget.dataset.item
- item.data = this.properties.data
- item.index = this.properties.index
- // wx.showToast({
- // title: '你点击了A',
- // icon: 'none'
- // });
- // 调用自定义组件 popover 中的 onHide 方法
- this.data.popover.onHide();
- this.triggerEvent('value',item)
- }
- },
- /**
- * 组件的生命周期函数列表
- */
- lifetimes: {
- // 在组件实例进入页面节点树时执行
- attached: function () {
- // 初始化操作
- this.setData(
- {
- popover:this.selectComponent('#popover')
- }
- )
- // this.data.popover = this.selectComponent('#popover')
- console.log(this.data.popover)
- // ...
- },
- // 在组件实例被移除出页面节点树时执行
- detached: function () {
- // 清理工作
- console.log('组件销毁');
- // ...
- },
- // ...
- },
- })
|