lin-xin / Vue Toast
A mobile toast plugin for vue2.
Stars: ✭ 313
Labels
Projects that are alternatives of or similar to Vue Toast
vue-translator
A deadly simple i18n translate plugin for Vue, ready for Server Side Rendering.
Stars: ✭ 18 (-94.25%)
Mutual labels: vue-plugin
vue-auto-storage
🍻 An automatic storage plugin for Vue2, persist the data with localStorage.
Stars: ✭ 84 (-73.16%)
Mutual labels: vue-plugin
vue-web-storage
Vue.js plugin for local storage and session storage (1.8 kb min+gz) 💾
Stars: ✭ 85 (-72.84%)
Mutual labels: vue-plugin
vue-cli-plugin-chrome-ext
vue cli plugin that setup vue project for chrome extension
Stars: ✭ 86 (-72.52%)
Mutual labels: vue-plugin
vue-unique-id
Component and HTML unique id generation plugin for Vue.js
Stars: ✭ 46 (-85.3%)
Mutual labels: vue-plugin
vite-plugin-webfont-dl
⚡ Webfont Download Vite Plugin - Make your Vite site load faster
Stars: ✭ 69 (-77.96%)
Mutual labels: vue-plugin
X-Particles-Vue
A Vue.js particles plugin base on particles.js
Stars: ✭ 15 (-95.21%)
Mutual labels: vue-plugin
vue-methods-promise
Let Vue methods support return Promise
Stars: ✭ 35 (-88.82%)
Mutual labels: vue-plugin
v-scroller
A vue plugin for nesting scroller ,you can use it to expand more components such as banner,date-piacker and so on.
Stars: ✭ 35 (-88.82%)
Mutual labels: vue-plugin
vue2-toast
A mobile toast plugin for vue2. 中文文档
Usage
Install:
npm install vue2-toast -S
Import:
import 'vue2-toast/lib/toast.css';
import Toast from 'vue2-toast';
Vue.use(Toast);
or
import 'vue2-toast/lib/toast.css';
import Toast from 'vue2-toast';
Vue.use(Toast, {
type: 'center',
duration: 3000,
wordWrap: true,
width: '150px'
});
Use in component:
<template>
<div id="app">
<button @click="openTop()">top</button>
<button @click="openCenter()">center</button>
<button @click="openBottom()">bottom</button>
<button @click="openLoading()">loading</button>
</div>
</template>
export default {
methods:{
openTop(){
this.$toast.top('top');
},
openCenter(){
this.$toast.center('center');
},
openBottom(){
this.$toast('bottom'); // or this.$toast.bottom('bottom');
},
openLoading(){
this.$loading('loading...');
let self = this;
setTimeout(function () {
self.closeLoading()
}, 2000)
},
closeLoading(){
this.$loading.close();
}
}
}
work in Nuxt.js
config it in nuxt.config.js
build: {
vendor: ['vue2-toast'],
extend (config, ctx) {
if (ctx.isClient) {
config.resolve.alias['vue'] = 'vue/dist/vue.js';
}
}
}
options
Vue.use(Toast, [options])
- type : position of Toast. | String | default: 'bottom' | possible 'top, center,bottom'
- duration : Number | default 2500ms
- wordWrap : word wrap. | Boolean | default: false
- width : width of Toast. | String | default: 'auto'
source code
download in Github.
demo
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].