vue-swal
made with Vuejs

vue-swal

这是一个SweetAlert弹窗组件的Vue实现。

相关问答
暂无相关问题
查看全部
简介及使用教程

vue-swal是一个SweetAlert弹窗组件的Vue实现。SweetAlert是一个漂亮的警告框组件,用于替代默认的javascript弹窗。

安装

Npm

npm i vue-swal

Yarn

yarn add vue-swal

浏览器

<!-- Include after Vue -->
<!-- Local files -->
<script src="vue-swal/dist/vue-swal.js"></script>

<!-- From CDN -->
<script src="https://unpkg.com/vue-swal"></script>

使用

引入并注册

import Vue from 'vue'
import VueSwal from 'vue-swal'

Vue.use(VueSwal)

简单例子

export default {
  methods: {
    alert() {
      this.$swal('Hello word!')
    }
  }
}

在Nuxt.js中使用

添加文件plugins/vue-swal.js:

import Vue from 'vue'
import VueSwal from 'vue-swal'

Vue.use(VueSwal)

nuxt.config.js中添加插件:

module.exports = {
  plugins: ['~/plugins/vue-swal']
}

Vue-swal将包含在应用程序包中,但由于它是一个库,我们希望将它包含在vendor 包中,以获得更好的缓存。为此,我们需要在nuxt.config.js将 vue-swal添加到vendor包中:

module.exports = {
  build: {
    vendor: ['vue-swal']
  },
  plugins: ['~/plugins/vue-swal']
}

示例

basicexample.gif

advancedexample.gif

作者

Antério Vieira

@anteriovieira

相关项目

这是一个轻量、易用且美观的提示条通知组件。
这是一个极简化的通知组件。
这是一个简单的警报、确认、提示组件。
这是一个与库无关的通知组件。
这是一个易用、高度可定制化的Vue.js模态框组件库。
这是一个支持图片全屏预览的Vue指令插件。