uni-app/vue项目如何封装全局消息提示组件

过期の秋刀鱼2024-07-10 12:13

效果图：

第一步：封装组件和方法，采用插件式注册！

在项目目录下新建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