https://github.com/haojen/dear-notice

一个基于Vue的通用弹出框组件
https://github.com/haojen/dear-notice

Last synced: 2 months ago
JSON representation

一个基于Vue的通用弹出框组件

• Host: GitHub
• URL: https://github.com/haojen/dear-notice
• Owner: Haojen
• Created: 2018-11-21T03:28:10.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-03-02T13:24:32.000Z (over 2 years ago)
• Last Synced: 2025-03-28T20:45:39.912Z (3 months ago)
• Language: Vue
• Homepage:
• Size: 1.96 MB
• Stars: 4
• Watchers: 2
• Forks: 0
• Open Issues: 4
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Dear-Notice

一个基于 `Vue` 创造的通知框组件

## Install

    npm install dear-notice --save

## Usage

    // import

    import Vue from 'vue'

    import DearNotice from 'dear-notice'

    // config

    Vue.use(DearNotice, [config options])

    // use in vue

    new Vue({

        created() {

            this.$notice('Hello')

        }

    })

## Config

### Init Config (挂载到Vue时的配置)

`prefix`

DEFAULT: $notice

prefix 是一个挂载到 Vue 实例中的 namespace，用来唤起弹框，例如 `this.$notice({string | [options]})`

    Vue.use(DearNotice, {

        prefix: '$notice'

    })

`backgroundEffectEl`

类型：string | HTMLElement

用来操作弹出框后面的背景元素，比如给其添加模糊效果

### Runtime Config

提供了两种调用方式，第一种简写的方式 `this.$notice('hello')`

和第二种完整的调用方式，如下：

    this.$notice({

        title: '',

        content: '', // notice text

        cancel: '', // cancel button

        confirm: '', // confirm button

        onCancel: () => {}, // cancel callback

        onConfirm: () => {}, // confirm callback

    })