nuxt-tailvue
made with Vuejs

nuxt-tailvue是一个基于Tailwind CSS的Nuxt.js程序化Toast组件。

安装

Npm

npm i nuxt-tailvue

Yarn

yarn add nuxt-tailvue

使用

在nuxt.config.js添加modules:

{
  modules: [
    ['nuxt-tailvue', {toast: true}],
  ]
}

如果你使用Purge（https://tailwindcss.com/docs/controlling-file-size）,需要在tailwind.config.js中添加：

module.exports = {
  ...
  purge: {
    ...
    content: [
      'node_modules/tv-*/dist/tv-*.umd.min.js',
    ],
  },
}

示例

简单示例：

this.$toast.show('Keeping it simple')

success状态

  this.$toast.show({
    type: 'success',
    title: 'Success',
    message: 'This is a successful toast',
  })

error状态

this.$toast.show({
    type: 'danger',
    title: 'Error',
    message: 'Please specify an e-mail address',
  })

单个按钮

  this.$toast.show({
    message: 'Single action toast',
    primary: { label: 'UNDO', action: () => alert('primary') },
    timeout: false,
  })

多个按钮

  this.$toast.show({
    title: 'Toast with actions',
    message: 'This toast has multiple actions',
    primary: { label: 'Primary', action: () => alert('primary') },
    secondary: { label: 'Secondary', action: () => alert('secondary') },
    timeout: false,
  })

自定义

  this.$toast.show({
    title: 'custom colors',
    message: 'these are custom colors',
    classToast: 'bg-teal-600',
    classTitle: 'text-teal-100',
    classMessage: 'text-teal-200',
    classClose: 'text-teal-300',
    classTimeout: 'bg-teal-800',
  })