Wie das uni-app/vue-Projekt die globale Nachrichtenaufforderung Component

Wie kapselt das uni-app/vue-Projekt die globale Nachrichtenaufforderungskomponente?

2024-07-12

Darstellung:

Schritt eins: Kapseln Sie Komponenten und Methoden und nutzen Sie die Plug-in-Registrierung!

Erstellen Sie einen neuen Komponentenordner im Projektverzeichnis und legen Sie zwei Dateien darin ab, nämlich index.vue und 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>

Die folgende Datei wird im folgenden Beispiel angezeigt:


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
  }
}

Schritt 2: Global mounten

Eingeführt und verwendet in 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

Schritt 3: Verwendung

Vue-Seitennutzung

this.$showToast('我是全局组件菜鸡')

Verwendung auf anderen Seiten


//对于this指向不是vue的需要先引入vue
import Vue from 'vue'
 
//然后调用原型方法
Vue.prototype.$showToast('请求失败');

In gleicher Weise gilt diese Methode auch fürVue-ProjektMehr als nur Uni

Technologieaustausch