प्रौद्योगिकी साझेदारी

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

प्रतिपादनम् : १.

प्रथमः चरणः: घटकान् पद्धतीश्च समाहितं कुर्वन्तु तथा च प्लग-इन् पञ्जीकरणस्य उपयोगं कुर्वन्तु!

परियोजनानिर्देशिकायां नूतनं घटकपुटं निर्माय तस्मिन् 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: 1.1.

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

Step 2: वैश्विकरूपेण माउण्ट् कुर्वन्तु

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

Step 3: कथं उपयोगः करणीयः

vue पृष्ठस्य प्रयोगः

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

अन्येषु पृष्ठेषु प्रयोगः

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

तथैव एषः विधिः अपि प्रवर्ततेVue परियोजनाकेवलं uni इत्यस्मात् अधिकं