效果图:
第一步:封装组件和方法,采用插件式注册!
在项目目录下新建components文件夹,里面放两个文件,分别是index.vue和index.js.
index.vue:
<template>
<div class="toast" v-if="isShow">
{{ message }}
</div>
</template>
<script>
export default {
name: 'AllToast',
props: {
isShow: {
type: Boolean,
required: true,
default: false
},
message: {
type: String,
required: true,
default: ''
}
},
data() {
return {};
}
}
</script>
<style scoped>
.toast {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
width: 300rpx;
height: 100rpx;
background-color: red;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
border-radius: 10rpx;
}
</style>
index.js:
import Vue from 'vue'
import AllToast from './index.vue'
const ToastConstructor = Vue.extend(AllToast)
function showToast(message) {
const instance = new ToastConstructor({
el: document.createElement('view'),
propsData: {
isShow: true,
message: message
}
})
document.body.appendChild(instance.$el)
setTimeout(() => {
instance.isShow = false
document.body.removeChild(instance.$el)
}, 3000) // 3秒后自动隐藏
}
export default {
install: function (vue) {
vue.component('toast', AllToast)
vue.prototype.$showToast = showToast
}
}
第二步:全局挂载
在main.js中引入和使用
import App from './App'
import uView from '@/uni_modules/uview-ui'
// 引入全局组件
import Mycomponent from '@/components/index.js'
// #ifndef VUE3
import Vue from 'vue'
Vue.use(uView)
// 挂载组件
Vue.use(Mycomponent)
import './uni.promisify.adaptor'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
// 测试使用
Vue.prototype.$showToast('请求失败');
// #endif
// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
const app = createSSRApp(App)
return {
app
}
}
// #endif
第三步:使用方法
vue页面使用
this.$showToast('我是全局组件菜鸡')
其他页面使用
//对于this指向不是vue的需要先引入vue
import Vue from 'vue'
//然后调用原型方法
Vue.prototype.$showToast('请求失败');
同理 这个方法也适用于Vue项目不止是uni