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 相关文章推荐
FireFox与IE 下js兼容触发click事件的代码
Nov 20 Javascript
理解 JavaScript 预解析
Oct 25 Javascript
JS判断是否360安全浏览器极速内核的方法
Jan 29 Javascript
jQuery随机密码生成的方法
Mar 09 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
Oct 14 Javascript
值得分享的JavaScript实现图片轮播组件
Nov 21 Javascript
大白话讲解JavaScript的Promise
Apr 06 Javascript
用 js 的 selection range 操作选择区域内容和图片
Apr 18 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
Nov 17 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
Nov 26 Javascript
详解Vue 如何监听Array的变化
Jun 06 Javascript
AngularJS动态生成select下拉框的方法实例
Nov 17 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 程序员也要学会使用“异常”
2009/06/16 PHP
一些php项目中比较通用的php自建函数的详解
2013/06/06 PHP
PHP 快速排序算法详解
2014/11/10 PHP
php中异常处理方法小结
2015/01/09 PHP
yii分页组件用法实例分析
2015/12/28 PHP
javascript 装载iframe子页面,自适应高度
2009/03/20 Javascript
javascript中定义类的方法汇总
2014/12/28 Javascript
jquery实现鼠标滑过显示提示框的方法
2015/02/05 Javascript
EasyUI中实现form表单提交的示例分享
2015/03/01 Javascript
JS 调用微信扫一扫功能
2016/12/22 Javascript
jquery实现多次上传同一张图片
2017/01/09 Javascript
nodejs批量下载图片的实现方法
2017/05/19 NodeJs
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
2017/07/11 Javascript
搭建一个Koa后端项目脚手架的方法步骤
2019/05/30 Javascript
原生js实现二级联动菜单
2019/11/27 Javascript
JavaScript语句错误throw、try及catch实例解析
2020/08/18 Javascript
python算法学习之计数排序实例
2013/12/18 Python
在DigitalOcean的服务器上部署flaskblog应用
2015/12/19 Python
Python按行读取文件的简单实现方法
2016/06/22 Python
Python编程实现控制cmd命令行显示颜色的方法示例
2017/08/14 Python
Python基础学习之常见的内建函数整理
2017/09/06 Python
Tensorflow卷积神经网络实例
2018/05/24 Python
Python实现base64编码的图片保存到本地功能示例
2018/06/22 Python
使用Python进行体育竞技分析(预测球队成绩)
2019/05/16 Python
Pycharm导入anaconda环境的教程图解
2020/07/31 Python
豪华床上用品 :Jennifer Adams
2019/09/15 全球购物
八一慰问活动方案
2014/02/07 职场文书
应届毕业生如何写求职信
2014/02/16 职场文书
劳动竞赛活动方案
2014/02/20 职场文书
项目申报专员岗位职责
2014/07/09 职场文书
卖车协议书范本4篇
2014/10/01 职场文书
高三复习计划
2015/01/19 职场文书
2015年党员创先争优承诺书
2015/01/22 职场文书
2015年毕业生个人自荐书
2015/03/24 职场文书
python文件名批量重命名脚本实例代码
2021/04/22 Python
Java实现给Word文件添加文字水印
2022/02/15 Java/Android