nuxt-tailvue
made with Vuejs

nuxt-tailvue

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

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

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}],
  ]
}

如果你使用Purgehttps://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')

simple.gif

success状态

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

success.gif

error状态

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

error.gif

单个按钮

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

action.gif

多个按钮

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

actions.gif

自定义

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

custom.gif

作者

acidjazz

相关项目

这是一个SweetAlert弹窗组件的Vue实现。
这是一个轻量、易用且美观的提示条通知组件。
这是一个极简化的通知组件。
这是一个与库无关的通知组件。
这是乌克兰的一家外卖电子商务网站。
这是精品设计型酒店11 Mirrors的的网站。