@yy/vue-toast

通用vue toast组件 查看源码

回到组件列表页

使用场景

用于移动端需要弹出提示的场景

安装

使用npm:

npm install @yy/vue-toast --registry=https://npm-registry.yy.com

或者使用 yarn:

yarn add @yy/vue-toast --registry=https://npm-registry.yy.com

项目中如何引入

方法一

引用编译后的代码

import { VueToast } from '@yy/vue-toast/dist'

方法二

在fec0.5.1及更高版本中直接引用源码

!> **【极度重要】**需要在fec.config.js中增加以下配置

transformModules: ['@yy'],

引用方式

import { VueToast } from '@yy/vue-toast'

如何使用720尺寸的组件

上面的引入方式是以750宽为基准的设计稿，海外版业务的设计稿以720宽为基准，国内的是750

fec0.3.0

import { VueToast } from '@yy/vue-toast/dist/720'
// 版本号 > 0.1.x的话无需引入样式
import '@yy/vue-toast/dist/720/vue-toast.css'

或者直接import { VueToast } from '@yy/vue-toast，只需额外在fec.config.js中增加

transformModules: ['@yy'],

fec0.4.6 无需变化

import { VueToast } from '@yy/vue-toast'

使用方式

VueToast的使用方式比较灵活，具体看个人需求

以组件引入的形式

<template>
  <div id='app'>
    <VueToast :show='show' :content='content' />
  </div>
</template>
<script>
import Vue from 'vue'
import { VueToast } from '@yy/vue-toast/dist'
// 版本号 > 0.1.x的话无需引入样式
import '@yy/vue-toast/dist/vue-toast.css'

const Bus = new Vue()

export default {
  data () {
    return {
      show: false,
      content: '我是提示'
    }
  },
  components: {
    VueToast
  },
  created () {
    Bus.$on('showToast', content => {
      this.content = content
      this.show = true
      setTimeout(() => {
        this.show = false
      }, 2000)
    })
  }
}
</script>

上述例子在Bus上注册了showToast的事件，弹出提示两秒后即隐藏提示，调用的时候可以

Bus.$emit('showToast', '我是新的提示')

直接通过js调用

import Vue from 'vue'
import VueToast from '@yy/vue-toast/dist'
// 版本号 > 0.1.x的话无需引入样式
import '@yy/vue-toast/dist/vue-toast.css'

Vue.use(VueToast)          // 先要初始化后才能调用，如果window.vue存在则不用初始化了，组件内部自动初始化
VueToast.show('我是提示')    // 默认两秒后提示会自动隐藏

2秒后提示消失，你可以以下配置延迟提示的消失

VueToast.config.delay = 3000  // 3秒后提示自动隐藏

在Vue组件中通过this去调用

import Vue from 'vue'
import VueToast from '@yy/vue-toast/dist'
// 版本号 > 0.1.x的话无需引入样式
import '@yy/vue-toast/dist/vue-toast.css'

Vue.use(VueToast)     // 先要初始化后才能调用，如果window.vue存在则不用初始化了，组件内部自动初始化
Vue.prototype.$showToast = VueToast.show

在vue组件中可以这样弹出提示

...
created () {
  this.$showToast('我是在组件内部弹出的提示')
}
...

Vue组件支持的属性

|参数|说明|类型|可选值|默认| |--|--|--|--|--| |show|是否显示toast|Boolean|-|false| |content|toast的提示|String/Number|-|-| |position|toast提示的位置|String|bottom/middle/top|bottom| |toastClass|toast的类，可以用于覆盖默认样式|String|-|-| |transitionName|toast的transition样式|String|vue-toast-fade-top/vue-toast-fade-bottom|vue-toast-fade-top/vue-toast-fade-bottom|

Q&A 通过js调用的方式如何更改这些属性

import Vue from 'vue'
import VueToast from '@yy/vue-toast/dist'
// 版本号 > 0.1.x的话无需引入样式
import '@yy/vue-toast/dist/vue-toast.css'

Vue.use(VueToast)   // 先要初始化后才能调用，如果window.vue存在则不用初始化了，组件内部自动初始化
VueToast.vm.position = 'center'
VueToast.vm.transitionName = ''
...

负责人

符觉文 / YY909074554 / [email protected]