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

目录
  • 自定义组件挂载原型上
    • 以elementUI二次分装dialog举例
  • 在原型上挂载方法和组件
    • 挂在方法,在main.js中
    • 挂载组件

自定义组件挂载原型上

以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>
/**
 * slot:
 *  default:提示文本区域,默认
 *  title-icon:标题前面的icon
 * function:
 *  confirm:确认按钮点击
 *  close:取消及关闭按钮点击
 */
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/>

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

(0)

相关推荐

  • vue如何自定义封装API组件

    目录 自定义封装API组件 1.创建vue组件 2.创建Alter.js生成组件 3.导入Vue 如何封装使用api形式调用的vue组件 子组件 父组件 自定义封装API组件 1.创建vue组件 <template>     <div >         <div class="alert">         <div class="alert-main" v-for="item in notices"

  • vue封装可复用组件confirm,并绑定在vue原型上的示例

    如下所示: 首先我们需要创建 confirm.vue , confirm.js这两个文件,一个实现dom结构,一个实现相关逻辑 confirm.vue <template> <div class="confirm" v-if="isShow"> <div class="con_box" > <div class="context"> <h6>{{text.type}}

  • vue实现自定义公共组件及提取公共的方法

    目录 自定义公共组件及提取公共的方法 vue自定义公共组件 vue 提取公共的方法 vue定义公用方法 自定义公共组件及提取公共的方法 vue自定义公共组件 我们在编写页面的时候,会存在公共的组件,比如头部和底部菜单 我们拿公共头部为例子,想在每个页面都显示公共头部的实现方式有两种: 在src/components目录创建目录 common, 再创建header.vue header.vue <template>   <div>   <h1>header in here

  • 深入解析Vue源码实例挂载与编译流程实现思路详解

    在正文开始之前,先了解vue基于源码构建的两个版本,一个是 runtime only ,另一个是 runtime加compiler 的版本,两个版本的主要区别在于后者的源码包括了一个编译器. 什么是编译器,百度百科上面的解释是 简单讲,编译器就是将"一种语言(通常为高级语言)"翻译为"另一种语言(通常为低级语言)"的程序.一个现代编译器的主要工作流程:源代码 (source code) → 预处理器 (preprocessor) → 编译器 (compiler) →

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

    目录 自定义组件挂载原型上 以elementUI二次分装dialog举例 在原型上挂载方法和组件 挂在方法,在main.js中 挂载组件 自定义组件挂载原型上 以elementUI二次分装dialog举例 PageDialog.vue <!-- 页面提示弹框 --> <template>     <el-dialog       :visible.sync="show"       class="page-dialog-wrapper"

  • vue在自定义组件上使用v-model和.sync的方法实例

    目录 自定义事件 自定义组件的v-model .sync 修饰符 思考 总结 自定义事件 tips 推荐始终使用 kebab-case 的事件名.(v-on会将事件名自动转换为小写,避免匹配不到) changeData × change-data √ 自定义组件的v-model 用法: 父组件定义数据源(不需要定义修改数据的方法),在子组件标签上通过v-model="data"进行传递 默认传递的属性名是value,事件名为input.可以在子组件中配置model选项重命名属性名和事件

  • 基于Vue实现自定义组件的方式引入图标

    前言 在项目开发中,使用图标的方式有很多种,可以在iconfont上面找到合适的图标,通过http或者直接下载使用,这里我分享一种通过实现自定义组件的方式引入图标. 搭建环境 这里通过@vue/cli 4.5.13新建项目,并且需要安装依赖svg-sprite-loader,用来处理对应的svg图标,方便我们使用. 安装: npm install --save-dev svg-sprite-loader 配置vue.config.js 在安装svg-sprite-loader后,新建vue.co

  • vue swipe自定义组件实现轮播效果

    本文实例为大家分享了vue swipe自定义组件实现轮播效果的具体代码,供大家参考,具体内容如下 <template> <layout-div :style="getStyle" class="over-h posi-r"> <layout-div :style="getChildStyle" class="flex" @load="loadHandle"> <sl

  • vue.js自定义组件directives的实例代码

    自定义指令:以v开头,如:v-mybind. 代码示例: <input v-mybind /> directives:{ mybind:{ bind:function (el) { el.value = "this is mybind-bind" } }} 这时页面初始化时,input中会显示this is mybind-bind. 通过directives注册自定义指令mybind,每一个自定义指令中又提供若干钩子,如示例中的bind,bind的作用是定义一个在绑定时执行

  • Vue的自定义组件不能使用click方法的解决

    先贴代码 var myButton = Vue.extend({//设置标签 props: ['names', 'item2'],//names为按钮名,item2为数据 template: '<span><span v-for="obj in item2" v-if="obj.name==names" v-html="obj.code"></span></span>' }) Vue.compone

  • vue 封装自定义组件之tabal列表编辑单元格组件实例代码

    vue 封装自定义组件 tabal列表编辑单元格组件 <template> <div class="editable-cell"> <div class="editable-cell-input-wrapper" v-if='editable'> <el-input class="editInput" v-model="cellValue" placeholder="请输入内

  • Vue EventBus自定义组件事件传递

    前言 组件化应用构建是Vue的特点之一,因此我们在Vue的实际开发过程中会经常需要封装自定义组件,以提高开发的效率. 而组件在大部分情况下并不会孤立的存在,它必然会与父组件和兄弟组件产生数据的交互.所以在这里为大家总结两种组件数据交互的方式:EventBus和利用Vuex框架进行状态管理. 我会通过两种不同的交互方式,它们对于父子组件间数据交互和兄弟组件间数据交互. 由于篇幅关系,本文主要介绍EventBus进行数据消息传递:关于运用Vuex框架进行状态管理在下一篇文章中介绍. 案例介绍 本章节

  • vue在自定义组件中使用v-model进行数据绑定的方法

    本文介绍了vue v-model进行数据绑定,分享给大家,具体如下 官方例子https://vuefe.cn/v2/api/#model 有这么一句话: 默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event. 示例: 先来一个组件,不用vue-model,正常父子通信 <!-- parent --> <template> <p class="parent"> <p>我是父亲, 对儿

  • vue.js自定义组件实现v-model双向数据绑定的示例代码

    我们都清楚v-model其实就是vue的一个语法糖,用于在表单控件或者组件上创建双向绑定. //表单控件上使用v-model <template> <input type="text" v-model="name" /> <input type="checkbox" v-model="checked"/> <!--上面的input和下面的input实现的效果是一样的--> <

随机推荐