avery-one v1.0.3

P-DIALOG-MODAL

Explain

1 . Confirm Dialog Modal

2 . Support customization，for example: color 、 position 、 text ...

3 . normal confirm dialog and input confirm dialog

4 . .....(There will be more follow ups)

Demo

Usage

1.1 Installation

  npm install p-dialog-modal --save

1.2 ES6 Import

import ConfirmModal from 'p-dialog-modal'

export default {
  components: {
    ConfirmModal
  }
}

Basic Example

html

<template>
  <div>
    <confirm-modal
      :type="confirmModal.type"
      :title="confirmModal.title"
      :content="confirmModal.content"
      :cancelText="confirmModal.cancelText"
      :submitText="confirmModal.submitText"
      :cssStyle="confirmModal.cssStyle"
      :isMarginTop="confirmModal.isMarginTop"
      @onHandleCancel="handleOnCancel"
      @onHandleOnOk="handleOnOk"
    />
  </div>
</template>

js

import ConfirmModal from 'p-dialog-modal'

export default {
  components: {
    ConfirmModal
  },
  data() {
    return {
      confirmModal: {
        type: 'input',
        title: '请输入用户名',
        content: '你要给我点个赞嘛 ?',
        cancelText: '取消',
        submitText: '确认',
        cssStyle: {
          bgTitleColor: '#4d4d4d',
          textTitleColor: '#ffffff',
          bgCancelColor: '#fff',
          textCancelColor: '#555',
          bgSubmitColor: '#4d4d4d',
          textSubmitColor: '#fff'
        },
        isMarginTop: '35%'
      }
    }
  },
  methods: {
    // submit
    handleOnOk(type, bool, value) {
      if (type === 'normal') {
        console.log(type, bool, value) // normal  true  ''
      } else {
        console.log(type, bool, value) // normal  true  value
      }
    },
    // cancel
    handleOnCancel(type, bool) {
      console.log('?????', type, bool)
    }
  }
}

Props

Here is the props of **cssStyle**

Event

When you press the confirm modal cancel button，trigger handleOnCancel()

    handleOnCancel(type, bool) {
      console.log('close modal', type, bool)
    }

When you press the confirm modal submit button，trigger handleOnOk(type, value)

    handleOnOk(type, value) {
      if (type === 'normal') {
        console.log('OK')
        console.log('close modal')
      } else {
        console.log('callback value is : ', value)
        console.log('close modal')
      }
    }