[JavaScript知识库]如何用js的方法 调用组件 uniapp（弹框）

通常情况下，我们封装组件，然后调用，通过import 引入，再书写components，再调用，遇到使用频率很高的弹框，就是显得很麻烦，冗余。

案例以 uniapp的uview插件的u-model为例

1.首先创建 index.vue， index.js文件

2.index.vue 页面

<template>
  <view class="components-message">
    <u-modal
      v-model="showModel"
      :content="content"
      :title="title"
      :show-cancel-button='showCancel'
      @cancel="handleClose"
      @confirm="handleBtn"
      :confirm-text='confirmText'
      :cancel-text='cancelText'
      :mask-close-able='maskcloseAble'
    ></u-modal>
  </view>
</template>

<script>
// import引入的组件需要注入到对象中才能使用
export default {
  name: "Cmessage",
  // 组件模板
  components: {},
  data() {
    // 这里存放数据
    return {
      showModel: false,//是否显示
      title:'提示',//标题
      content: "",//内容
      showCancel:true, //是否显示取消按钮
      confirmText:'确认', //确认文字
      cancelText:'取消',//取消文字
      maskcloseAble:true, //是否允许点击遮罩关闭Modal
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  onLoad(options) {},
  // 生命周期 - 页面展示（不可以访问DOM元素）
  onShow() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  onReady() {},
  // 方法集合
  methods: {
    emitBtn() {},
    emitClose() {},
    handleClose() {
      this.$el.parentNode.removeChild(this.$el);
      this.emitClose();
    },
    handleBtn() {
      this.$el.parentNode.removeChild(this.$el);
      this.emitBtn();
    },
  },
  onHide() {}, // 生命周期 - 监听页面隐藏
  onUnload() {}, // 生命周期 - 监听页面卸载
};
</script>
<style lang='scss'>
</style>

3 .index.js

import Vue from 'vue';
import Message from './index.vue';

const MessageConstructor = Vue.extend(Message); //注册实例

export const Cmessage = (options,methods = {}) => {
  const instance = new MessageConstructor(
    {
  //   el: document.createElement('view'),
    data: options,//数据
    methods //方法
  }
  ).$mount();//挂载实例
  document.body.appendChild(instance.$el);
}

4.使用 main.js 全局注册

import { Cmessage } from '@/components/message/index.js';
//js调用弹框
Vue.prototype.$Cmessage = Cmessage

5.使用

this.$Cmessage({showModel:true,content: '登录状态已过期，您可以继续留在该页面，或者重新登录',maskcloseAble:false}, {
//确认
	emitBtn () {
		store.dispatch('LogOut').then((res) => {
			uni.reLaunch({
				url:'/pages/login/index'
		    })
		})
	},
	//取消
	emitClose() {
		console.log('用户点击取消');
	},
});

6.效果图

帮助到你的话点赞支持一下~