index.js

import Vue from 'vue'
import tip from './tip.vue' const Constructor = Vue.extend(tip); const Tip = (options={})=>{
options.showAlert = options.fn//传来的fn给options,赋值data
const vm = new Constructor({
data:options
})
vm.$mount()
document.body.appendChild(vm.$el)
vm.visible = true
return vm
} export default Tip

  tip.vue

<template>
<div class="tip-0">
<div class="tip" v-show="visible" @click="tipHide()">{{message}}</div>
</div>
</template>
<script>
export default {
data(){
return{
visible:true,
message:9999,
showAlert:null//接收传来的fn
}
},
methods:{
tipHide(){
this.showAlert()
this.visible = false;
}
}
}
</script>

  使用

<button @click="showTip()">tip</button>

import Tip from './components/tip'

showTip(){
Tip({
message:2222,
fn: () => { alert('关闭了') }
})
},

  

使用vue的extend自定义组件开发的更多相关文章

  1. 在Vue前端项目中,附件展示的自定义组件开发

    在Vue前端界面中,自定义组件很重要,也很方便,我们一般是把一些通用的界面模块进行拆分,创建自己的自定义组件,这样操作可以大大降低页面的代码量,以及提高功能模块的开发效率,本篇随笔继续介绍在Vue&a ...

  2. Flex自定义组件开发之日周月日期选择日历控件

    原文:Flex自定义组件开发之日周月日期选择日历控件         使用过DateField的我们都知道,DateField 控件是用于显示日期的文本字段,字段右侧带有日历图标.当用户在控件边框内的 ...

  3. vue.js2.0 自定义组件初体验

    理解 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.在有些情况 ...

  4. 基于Vue的数字输入框组件开发

    1.概述 Vue组件开发的API:props.events和slots 2.组件代码 github地址:https://github.com/MengFangui/VueInputNumber 效果: ...

  5. vue之全局自定义组件

    在项目开发中,往往需要使用到一些公共组件,比如,弹出消息.面包屑或者其它的组件,为了使用方便,将其以插件的形式融入到vue中,以面包屑插件为例: 1.创建公共组件MyBread.vue <tem ...

  6. 自定义组件开发:使用v-model封装el-pagination组件

    1.前言 通过封装el-pagination组件开发自定义分页组件的类似文章网上已经有很多了,但看了一圈,总是不如意,于是决定还是自己动手搞一个. 2.背景 2.1.常规分页处理方法 利用el-pag ...

  7. vue框架之自定义组件中使用v-model

    通常 vue在html常见表单空间支持v-model双向绑定例如 <input v-model="message" placeholder="edit me&quo ...

  8. vue怎么给自定义组件绑定原生事件

     下面主要以4个示例Demo演示(示例代码JS引用的Vue CDN),建议小伙伴直接复制示例代码运行查看, 赶时间的小伙伴可直接往下拉,看示例demo4 注:全局或局部注册的组件称为子组件,其中声明的 ...

  9. Flex自定义组件开发 - jackyWHJ

    一般情况下需要组件重写都是由于以下2个原因: 1.在FLEX已有组件无法满足业务需求,或是需要更改其可视化外观等特性时,直接进行继承扩展. 2.为了模块化设计或进一步重用,需要对FLEX组件进行组合. ...

随机推荐

  1. 使用js实现图片轮滑效果

    经常在购物网站,看到那种图片轮滑的效果,所以看到有人实现了,所以我也就学习下了. 首先贴出html代码: <!DOCTYPE html> <html lang="en&qu ...

  2. JS高级 — 函数的声明和表达式

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  3. jquery遍历获取带checkbox表格的选中值以及遍历json数组

    今天整理了一下jquery遍历的两个用法,分享给大家. 1.$().each 主要用来遍历DOM元素,获取DOM的值或样式等. 2.$.each() 主要用来遍历后台ajax返回的json数组,循环将 ...

  4. 免费资源(CDN,顶级域名)汇集

    CloudFlare:免费CDN,需要将域名指向到cloudflare服务器.付费的可以使用二级域名 https://www.cloudflare.com/ Freenom:freenom会提供免费提 ...

  5. 二、RabbitMQ操作

    1.RabbitMQ发送与接收. 2.RabbitMQ发送与接收. 3.RabbitMQ发送与接收.

  6. Kvm--02 安装centos6系统 ,kvm磁盘管理

    目录 1.安装一个CentOS6的系统的虚拟主机 2.虚拟机的备份 3.企业案例: 4.Kvm磁盘管理 1.安装一个CentOS6的系统的虚拟主机 #上传一个CenOS6系统的镜像到/opt目录下 [ ...

  7. java基础复习(一)

    一.常用的DOS命令  打开命令提示符窗口的方式: ① win + R --> 输入cmd --> 回车 ② 开始 --> 搜索程序和文件的框中输入  cmd  --> 回车 ...

  8. FORTRAN学习记录

    WHERE statement http://scv.bu.edu/computation/bluegene/IBMdocs/compiler/xlf-10.1/html/xlflr/where.ht ...

  9. SQL Server 2008 R2 数据库备份文件.bak如何挂载到【阿里云&#183;独立虚拟主机数据库】上

    1.前言 8月份刚刚开始,公司[工作流]挂了,实体服务器会自动重启,数据库死活起不来,这可是计算工资提成的事儿,不能马虎! 在实体服务器中,找到了OA页面源码与数据库的.MDF 与 .LDF 等文件. ...

  10. 连载 3:利用 matlab计算卷积