1.0.3 • Published 6 years ago

avery-one v1.0.3

Weekly downloads
2
License
ISC
Repository
github
Last release
6 years ago

P-DIALOG-MODAL

npm.io npm.io npm.io

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

propstypedefaultdescription
typeStringnormalnormal represents a regular modal,input represents a regular modal with input
titleString弹窗提示您Confirm Modal Title
contentString你要给我点个赞嘛 ?Confirm Modal Content
cancelTextString取消Cancel Button Text
submitTextString确认Submit Button Text
cssStyleObject{}Confirm Modal Style
isMarginTopString35%The distance between the elastic layer and the top

Here is the props of **cssStyle**

propstypedefaultdescription
bgTitleColorString#fffffftitle background color
textTitleColorString#4a4a4atitle text color
bgCancelColorString#ffffffCancel button background color
textCancelColorString#555Cancel button text color
bgSubmitColorString#4d4d4dSubmit button background color
textSubmitColorString#fffSubmit button text color

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')
      }
    }