高逼格的小程序组件

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

image.png

  
    
      {{title}}
      
        
          
          {{logName}}
        
        {{content}}
      
      
        拒绝
        允许
      
    
  

  /**
   * 组件的属性列表
   */
  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，当对话框这个组件被点击允许后，触发组建的onGotUserInfo

向外传递提交confirm方法

`` content="获得您的公开信息(昵称、头像等)" logName="狗蛋TV"
logImage="https://tvax3.sinaimg.cn/crop.8.7.322.322.180/8970ff1ely8frdenkcgutj209k09kdgw.jpg"
bindcancel="onCancel" bindconfirm="ononfirm">