高逼格的小程序组件

下面展示的是一个小程序弹出对话框的组件

image.png

  <view class="dialog_mask">
    <view class='dialog_container'>
      <view class="dialog__title" wx:if="{{title}}" style="color: {{titleColor}}">{{title}}</view>
      <view class="dialog__content" wx:if="{{title}}">
        <view class='log_wrap' wx:if="{{logImage && logName}}">
          <view class='log_wrap--log' tyle="background-image:url('{{logImage}}')"></view>
          <view class='log_wrap--text'>{{logName}}</view>
        </view>
        <view class="dialog__content--text" wx:if="{{content}}" style="color: {{contentColor}}">{{content}}</view>
      </view>
      <view class="dialog__btns">
        <view class="dialog__btns--cancel" bindtap="cancelCallback">拒绝</view>
        <button class="getUserInfo_btn" open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo">允许</button>
      </view>
    </view>
  </view>
</block>

  /**
   * 组件的属性列表
   */
  properties: {
    title: {
      type: String
    },
    titleColor: {
      type: String,
      value: '#000000'
    },
    logImage: {
      type: String
    },
    logName: {
      type: String
    },
    content: {
      type: String
    },
    contentColor: {
      type: String,
      value: '#888888'
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    show: false
  },
  /**
   * 组件的方法列表
   */
  methods: {
    cancelCallback() {
      this.triggerEvent('cancel')
    },
    hide() {
      this.setData({
        show: false
      })
    },
    show() {
      this.setData({
        show: true
      })
    },
    onGotUserInfo(e) {
      this.triggerEvent('confirm', e)
      //向外传递
    }
  }
})

js代码 其中有自带的组件方法triggerEvent，当对话框这个组件被点击允许后，触发组建的<font color="#00dd00">onGotUserInfo</font><br >
向外传递提交confirm方法
<wxc-dialog class="wxc-dialog" title="微信授权" content="获得您的公开信息(昵称、头像等)" logName="狗蛋TV" logImage="https://tvax3.sinaimg.cn/crop.8.7.322.322.180/8970ff1ely8frdenkcgutj209k09kdgw.jpg" bindcancel="onCancel" bindconfirm="ononfirm"></wxc-dialog>
`` <wxc-dialog class="wxc-dialog" title="微信授权"
content="获得您的公开信息(昵称、头像等)" logName="狗蛋TV"
logImage="https://tvax3.sinaimg.cn/crop.8.7.322.322.180/8970ff1ely8frdenkcgutj209k09kdgw.jpg"
bindcancel="onCancel" bindconfirm="ononfirm"></wxc-dialog>