• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

lin-xin/vue-toast: A mobile toast plugin for vue2.

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

lin-xin/vue-toast

开源软件地址(OpenSource Url):

https://github.com/lin-xin/vue-toast

开源编程语言(OpenSource Language):

CSS 55.3%

开源软件介绍(OpenSource Introduction):

vue2-toast

A mobile toast plugin for vue2. 中文文档

Downloads Version

Interactive Demo

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

image




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap