【微信小程序】自定义image button组件

imageButtonCmp.wxml
1
2
3
4
5
6
<!--components/image-button/imageButtonCmp.wxml-->
<button bind:getuserinfo="onGetUserInfo"
open-type='{{openType}}' plain='{{true}}'
class="container">
<slot name="img"></slot>
</button>
imageButtonCmp.wxss
1
2
3
4
.container{
padding: 0 !important;
border:none !important;
}
imageButtonCmp.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// components/image-button/imageButtonCmp.js
Component({
options:{
multipleSlots: true
},
/**
* 组件的属性列表
*/
properties: {
openType:{
type: String
}
},

/**
* 组件的初始数据
*/
data: {

},

/**
* 组件的方法列表
*/
methods: {
onGetUserInfo(e){
this.triggerEvent('getuserinfo', e.detail, {})
},
}
})
使用
1
2
3
4
5
6
7
<v-button class="share-btn" open-type="share">
<image class="share" slot="img" src="/images/icon/share.png" />
</v-button>

<v-button wx:if="{{!authorized}}" open-type="getUserInfo" class="avatar-position" bind:getuserinfo="onGetUserInfo">
<image slot="img" class="avatar" src="/images/my/my.png" />
</v-button>