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支持带x身份证号码验证函数
Aug 10 Javascript
node.js超时timeout详解
Nov 26 Javascript
node.js中的fs.rmdir方法使用说明
Dec 16 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
Feb 13 Javascript
javascript中eval和with用法实例总结
Nov 30 Javascript
javascript实现下拉提示选择框
Dec 29 Javascript
由浅入深剖析Angular表单验证
Jul 14 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
Jul 24 Javascript
React-Native中禁用Navigator手势返回的示例代码
Sep 09 Javascript
实例详解BootStrap的动态模态框及静态模态框
Aug 13 Javascript
小程序怎样让wx.navigateBack更好用的方法实现
Nov 01 Javascript
Webpack5正式发布,有哪些新特性
Oct 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 MemCached 高级缓存应用代码
2010/08/05 PHP
JavaScript 设计模式学习 Singleton
2009/07/27 Javascript
JSON.parse()和JSON.stringify()使用介绍
2014/06/20 Javascript
jQuery里filter()函数与find()函数用法分析
2015/06/24 Javascript
javascript html实现网页版日历代码
2016/03/08 Javascript
jQuery+CSS实现简单切换菜单示例
2016/07/27 Javascript
JS封装通过className获取元素的函数示例
2016/12/20 Javascript
zTree实现节点修改的实时刷新功能
2017/03/20 Javascript
react-native之ART绘图方法详解
2017/08/08 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
2018/09/05 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
2018/09/05 Javascript
详解webpack引入第三方库的方式以及注意事项
2019/01/15 Javascript
微信小程序 下拉刷新及上拉加载原理解析
2019/11/06 Javascript
Vue.js原理分析之nextTick实现详解
2020/09/07 Javascript
Python3.0与2.X版本的区别实例分析
2014/08/25 Python
一些常用的Python爬虫技巧汇总
2016/09/28 Python
在django中使用自定义标签实现分页功能
2017/07/04 Python
Python实现时钟显示效果思路详解
2018/04/11 Python
python使用pygame框架实现推箱子游戏
2018/11/20 Python
Numpy之random函数使用学习
2019/01/29 Python
对pytorch中的梯度更新方法详解
2019/08/20 Python
解决pycharm启动后总是不停的updating indices...indexing的问题
2019/11/27 Python
Python devel安装失败问题解决方案
2020/06/09 Python
Python如何自动获取目标网站最新通知
2020/06/18 Python
Pycharm常用快捷键总结及配置方法
2020/11/14 Python
python中判断数字是否为质数的实例讲解
2020/12/06 Python
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
HTML5表格_动力节点Java学院整理
2017/07/11 HTML / CSS
阿巴庭院:Abba Patio
2019/06/18 全球购物
Ado与Ado.net的相同与不同
2014/12/08 面试题
英语专业毕业生自荐信范文
2013/12/31 职场文书
地理科学专业自荐信
2014/09/01 职场文书
基层党员群众路线整改措施及努力方向
2014/10/28 职场文书
培根随笔读书笔记
2015/07/01 职场文书
Python Pandas数据分析之iloc和loc的用法详解
2021/11/11 Python
Python+SeaTable实现计算两个日期间的工作日天数
2022/07/07 Python