文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue实现自定义组件挂载原型上

2022-11-13 14:38

关注

自定义组件挂载原型上

以elementUI二次分装dialog举例

PageDialog.vue

<!-- 页面提示弹框 -->
<template>
    <el-dialog
      :visible.sync="show"
      class="page-dialog-wrapper"
      custom-class="page-dialog-component"
      :width="width"
      :append-to-body="true"
      :show-close="false"
      :close-on-click-modal="false">
      <div class="container">
        <div class="title">
          <slot name='title-icon'>
            <i
              :class="titleIcon"
              v-if="titleIcon">
            </i>
          </slot>
          {{title}}
          <i
            class="el-icon-close close-btn"
            @click="close"
            v-if="showClose">
          </i>
        </div>
        <div class="content">
          <slot>
            <div class="text" v-html="message"></div>
          </slot>
          <div class="btns" v-if="showConfirm || showCancel">
            <el-button
              class="btn cancel"
              @click="close"
              v-if="showCancel">
              {{cancelText}}
            </el-button>
            <el-button
              class="btn"
              @click="confirm"
              v-if="showConfirm">
              {{confirmText}}
            </el-button>
          </div>
        </div>
      </div>
    </el-dialog>
</template>
<script>

export default {
  name: 'PageDialogComponent',
  components: {},
  props: {
    show: { // 隐藏显示
      type: Boolean,
      default: false,
    },
    width: { // 宽度
      type: String,
      default: '600px',
    },
    title: { // 
      type: String,
      default: '提示',
    },
    titleIcon: { // icon
      type: String,
      default: '',
    },
    showCancel: { // 是否显示取消按钮
      type: Boolean,
      default: false,
    },
    cancelText: { // 取消按钮文本
      type: String,
      default: '取消',
    },
    showConfirm: { // 是否显示确认按钮
      type: Boolean,
      default: true,
    },
    confirmText: { // 确认按钮文本
      type: String,
      default: '确定',
    },
    message: { // 提示内容
      type: String,
      default: '这里是提示语',
    },
    showClose: { // 是否显示关闭按钮
      type: Boolean,
      default: true,
    },
  },
  methods: {
    // 确定
    confirm() {
      this.$emit('confirm');
    },
    // 关闭
    close() {
      this.$emit('close');
    },
  },
};
</script>
<style lang='less' scoped>
// 样式区
</style>

同目录新建index.js

import vue from 'vue';
// 这里就是我们刚刚创建的那个静态组件
import pageDialog from './PageDialog.vue';
// 返回一个 扩展实例构造器
const DialogConstructor = vue.extend(pageDialog);
// 定义弹出组件的函数
function showDialog(options) {
  return new Promise((resolve, reject) => {
    const dialogDom = new DialogConstructor({
      el: document.createElement('div'),
    });
    dialogDom.width = options.width || dialogDom.width;
    dialogDom.title = options.title || dialogDom.title;
    dialogDom.titleIcon = options.titleIcon || dialogDom.titleIcon;
    dialogDom.showCancel = options.showCancel || dialogDom.showCancel;
    dialogDom.cancelText = options.cancelText || dialogDom.cancelText;
    dialogDom.showConfirm = options.showConfirm || dialogDom.showConfirm;
    dialogDom.confirmText = options.confirmText || dialogDom.confirmText;
    dialogDom.message = options.message || dialogDom.message;
    dialogDom.showClose = options.showClose || dialogDom.showClose;
    dialogDom.show = true;
    document.body.appendChild(dialogDom.$el);
    dialogDom.confirm = function () { // 确定按钮
      resolve();
      dialogDom.show = false;
    };
    dialogDom.close = function () { // 取消按钮
      reject();
      dialogDom.show = false;
    };
  });
}
// 注册为全局组件的函数
function registryDialog() {
  // 将组件注册到 vue 的 原型链里去,
  // 这样就可以在所有 vue 的实例里面使用 this.$pageDialog()
  vue.prototype.$pageDialog = showDialog;
}
export default registryDialog;

main.js中引入

import pageDialog from '../components/page-dialog/index';
Vue.use(pageDialog)

可以html组件使用

    <!-- 删除前提示 -->
    <page-dialog
    :show="showDialog"
    showCancel
    message="确认删除已选产品?"
    @confirm="deleteChoose"
    @close="showDialog = false"/>

或者在js中使用

        this.$pageDialog({
          message: '审核后的订单有部分发生变化,确定按调整后订单支付?',
          showCancel: true,
          cancelText: '我在想想',
        }).then(() => {
        // 搞事情
        }).catch(() => {
        // 搞事情
        });

在原型上挂载方法和组件

挂在方法,在main.js中

Vue.prototype.langs = function lang(en, id, zh) {
  const L = this.language
  switch (L) {
    case 'en':
      return en || ''
    case 'id':
      return id || ''
    case 'zh':
      return zh || ''
  }
}

使用:this.langs()

注意:

1、如当前页面中的方法与原型方法名字一致,则会覆盖原型的方法

2、如果原型方法太多写在main.js中会赘余,所以一般在另外创建一个js文件,这个js文件都是全部写原型的方法,然后引入到main.js当中,然后把它放在这个位置

new Vue({
  el: '#app',
  router,
  store,
  test, // 比如这个就是js文件,放到vue上面
  components: { App },
  template: '<App/>'
})

挂载组件

import testA from '@/A'
Vue.component('testA ', testA )

使用:<testA></testA>或者<test-a><test-a/> 

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。 

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯