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


Posted in Javascript onOctober 31, 2019

如下所示:

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}}</h6>
    <p>{{text.msg}}</p>
    <div class="btn">
     <span @click="close()" v-if="text.btn.no">{{text.btn.no}}</span>
     <span @click="ok()" v-if="text.btn.ok">{{text.btn.ok}}</span>
    </div>
   </div>
  </div>
 </div>
</template>
<script>
export default {
 data(){
  return{
   isShow:true,
   text:{
    type:'提示',    
    msg:'确定删除此条信息?',
    btn:{
     ok:'确定',
     no:'取消'
    },
   }
  }
 },
 methods:{
  close(){
   console.log('关闭');
  },
  ok(){
   console.log('确定')
  }
 }
}
</script>
<style scoped>
.confirm{background-color:rgba(0, 0, 0, 0.6);width: 100%;height: 100%; position: fixed;top: 0;}
.con_box{width: 75%;height: 22%;background-color: white;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;border-radius: 5px;}
.context{padding: 10px;}
.context h6{font-size: 24px;padding: 15px;}
.context p{font-size: 20px;padding: 35px 15px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
.btn{padding: 15px;text-align: right;}
.btn span{padding: 10px 35px; color: white;border-radius: 5px;}
.btn span:nth-child(1){background-color: #f1f1f1;color: rgb(106, 223, 223);}
.btn span:nth-child(2){background-color: rgb(106, 223, 223);}
</style>

confirm.js

import Vue from 'vue';
import confirm from './confirm.vue';

let confirmConstructor = Vue.extend(confirm);

let theConfirm = function (text) {
 return new Promise((res, rej) => { //promise封装,ok执行resolve,no执行rejectlet
  let confirmDom = new confirmConstructor({ 
  el: document.createElement('div')
  })
  document.body.appendChild(confirmDom.$el); //new一个对象,然后插入body里面

  confirmDom.text = text; //为了使confirm的扩展性更强,这个采用对象的方式传入,所有的字段都可以根据需求自定义
  confirmDom.ok = function () {
  res()
  confirmDom.isShow = false
  }
  confirmDom.close = function () {
  rej()
  confirmDom.isShow = false
  }

 })
 }

 export default theConfirm; 
 
 //暴露出去,别忘记挂载到vue的原型上 
 // => 在main.js里面先引入 import theConfirm from './components/confirm/confirm.js'
 // => 再挂载 Vue.prototype.$confirm = theConfirm;
 //在需要的地方直接用以下方法调用即可:
 // this.$confirm({
 //  type:'提示',
 //  msg:'是否删除这条信息?',
 //  btn:{
 //   ok:'yes',
 //   no:'no'
 //  }
 // }).then(() => {
 //  console.log('ok')
 // })
 // .catch(() => {
 //  console.log('no')
 // })

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

//这里就是对组件的绑定
import theConfirm from './components/confirm/confirm.js'
Vue.prototype.$confirm = theConfirm;

Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 components: { App },
 template: '<App/>'
})

helloworld.vue

<template>
 <div class="hello">
  <span @click="handMe()">点击一下</span>
 </div>
</template>

<script>
export default {
 name: 'HelloWorld',
 data () {
 return {
  
 }
 },
 methods:{
 handMe(){
 this.$confirm({
 type:'提示',
 msg:'是否删除这条信息?',
 btn:{
  ok:'yes',
  no:'no'
 }
 }).then(() => {
 console.log('ok')
 })
 .catch(() => {
 console.log('no')
 })
 }
 }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
span{font-size: 24px;}
</style>

以上这篇vue封装可复用组件confirm,并绑定在vue原型上的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js或css文件后面跟参数的原因说明
Jan 09 Javascript
JavaScript动态插入script的基本思路及实现函数
Nov 11 Javascript
JavaScript获取页面中第一个锚定文本的方法
Apr 03 Javascript
浅谈javascript原型链与继承
Jul 13 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
Feb 21 Javascript
Javascript缓存API
Jun 14 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
Jul 09 Javascript
AngularJS 输入验证详解及实例代码
Jul 28 Javascript
BootStrap入门教程(二)之固定的内置样式
Sep 19 Javascript
vue实现留言板todolist功能
Aug 16 Javascript
JS插入排序简单理解与实现方法分析
Nov 25 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
Nov 12 Javascript
关于vue表单提交防双/多击的例子
Oct 31 #Javascript
Vuex的实战使用详解
Oct 31 #Javascript
如何在Vue中抽离接口配置文件
Oct 31 #Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
Oct 30 #Javascript
基于Vue中使用节流Lodash throttle详解
Oct 30 #Javascript
Vue最新防抖方案(必看篇)
Oct 30 #Javascript
vue输入节流,避免实时请求接口的实例代码
Oct 30 #Javascript
You might like
PHP语法速查表
2006/12/06 PHP
第四章 php数学运算
2011/12/30 PHP
分享PHP header函数使用教程
2013/09/05 PHP
php获取淘宝分类id示例
2014/01/16 PHP
ThinkPHP5框架实现简单的批量查询功能示例
2018/06/07 PHP
window.open的功能全解析
2006/10/10 Javascript
学习YUI.Ext基础第一天
2007/03/10 Javascript
Prototype String对象 学习
2009/07/19 Javascript
在JavaScript中重写jQuery对象的方法实例教程
2014/08/25 Javascript
JS打开新窗口防止被浏览器阻止的方法
2015/01/03 Javascript
JavaScript静态类型检查工具FLOW简介
2015/01/06 Javascript
jQuery实现延迟跳转的方法
2015/06/05 Javascript
基于jQuery实现以手风琴方式展开和折叠导航菜单
2016/01/28 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
2016/03/13 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
2016/09/24 Javascript
jquery实现图片上传前本地预览
2017/04/28 jQuery
基于D3.js实现时钟效果
2018/07/17 Javascript
vue实现购物车抛物线小球动画效果的方法详解
2019/02/13 Javascript
使用pm2部署node生产环境的方法步骤
2019/03/09 Javascript
ES6 Object.assign()的用法及其使用
2020/01/18 Javascript
小程序自定义圆形进度条
2020/11/17 Javascript
Python3导入CSV文件的实例(跟Python2有些许的不同)
2018/06/22 Python
Python实现注册、登录小程序功能
2018/09/21 Python
Python pandas实现excel工作表合并功能详解
2019/08/29 Python
Anaconda的安装及其环境变量的配置详解
2020/04/22 Python
CSS3模拟IOS滑动开关效果
2016/09/28 HTML / CSS
Debenhams爱尔兰:英国知名的百货公司
2017/01/02 全球购物
Emporio Armani腕表天猫官方旗舰店:乔治·阿玛尼为年轻人设计的副线品牌
2017/07/02 全球购物
英国婴儿和儿童服装网站:Vertbaudet
2018/04/02 全球购物
男女朋友协议书
2014/04/23 职场文书
社区维稳工作方案
2014/06/06 职场文书
文明礼仪标语
2014/06/13 职场文书
2015年党员公开承诺书范文
2015/01/22 职场文书
2015年学校党建工作总结
2015/05/19 职场文书
篮球赛新闻稿
2015/07/17 职场文书
MySQL事务操作的四大特性以及并发事务问题
2022/04/12 MySQL