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

imageButtonCmp.wxml

<!--components/image-button/imageButtonCmp.wxml-->
<button bind:getuserinfo="onGetUserInfo"
        open-type='{{openType}}'  plain='{{true}}'
        class="container">
  <slot name="img"></slot>
</button>

imageButtonCmp.wxss

.container{
  padding: 0 !important;
  border:none !important;
}

imageButtonCmp.js

// components/image-button/imageButtonCmp.js
Component({
  options:{
    multipleSlots: true
  },
  /**
   * 组件的属性列表
   */
  properties: {
    openType:{
      type: String
    }
  },

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

  },

  /**
   * 组件的方法列表
   */
  methods: {
    onGetUserInfo(e){
      this.triggerEvent('getuserinfo', e.detail, {})
    },
  }
})

使用

<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>