Wechat----自定义组件

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/damys/article/details/87858194

自定义组件: button image

Component({
  options:{
    multipleSlots:true
  },
 
  /**
    * 组件的属性列表
    */
  properties: {
    openType: {
      type:String
    }
  },
 
  /**
    * 组件的方法列表
    */
  methods: {
    onGetUserInfo(event){
      // 抛到外面处理
      this.triggerEvent('getuserinfo', event.detail, {})
    }
  }
})

.wxml

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

.wxss

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

使用: .json 中引用,.wxml 中使用

{
  "usingComponents": {
    "v-button":"/components/image-button/index",
  }
}

使用:分享

<v-button class='share-btn' open-type="share">
<image class='share' slot="img" src="/images/icon/share.png"></image>
</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'></image>
</v-button>

猜你喜欢

转载自blog.csdn.net/damys/article/details/87858194