0.1.4 • Published 2 years ago
vue-toast-test-by-devinfu v0.1.4
@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 / fujuewen@yy.com
0.1.4
2 years ago