Gnh-activity-modal NPM

gnh-activity-modal

活动弹窗

使用

安装

npm install gnh-activity-modal -S
// or
yarn add gnh-activity-modal

引入

import GnhActivityModal from 'gnh-activity-modal'
...

components: {
    [GnhActivityModal.name]: GnhActivityModal
  }
...

使用

<gnh-activity-modal
  :closeBtn="require('./assets/close-btn.png')"
  :topImg="require('./assets/reward_mask.png')"
  :centerIcon="require('./assets/reward_success_icon.png')"
   @onHide="onHide"
  ref="modal"
  @onClick="clickHandle"
  />

// methods
 methods: {
    clickHandle (e) {
      this.$refs.modal.$hide()
      // 或者使用 this.$refs.modal.toggle()
    },
    onHide () {
      console.log('hide')
    }
  },

props

属性	说明	类型	默认值
closeBtn	关闭按钮图片	使用require加载图片资源	无
topImg	弹窗顶部图片	使用require加载图片资源	无
centerIcon	弹窗中间位置的图片	使用require加载图片资源	无
centerIconWidth	弹窗中间位置的图片的宽度	String Number	82
contentTitle	主标题	String	确认加速该订单吗
contentSubTitle	副标题	String	确认后不可修改
btnText	按钮文案	String	确认
hasMask	是否有遮罩	Boolean	true
maskClosable	遮罩点击是否关闭弹窗	Boolean	true
onClick	点击按钮触发的事件	Function	无