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 相关文章推荐
JQuery中$之选择器用法介绍
Apr 05 Javascript
jQuery 属性选择器element[herf*='value']使用示例
Oct 20 Javascript
ajax在兼容模式下失效的快速解决方法
Mar 22 Javascript
AngularJs 弹出模态框(model)
Apr 07 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
Aug 03 Javascript
给easyui datebox扩展一个清空的实例
Nov 09 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
Dec 23 Javascript
vue日期组件 支持vue1.0和2.0
Jan 09 Javascript
详解如何构建Angular项目目录结构
Jul 13 Javascript
vue路由中前进后退的一些事儿
May 18 Javascript
在layer弹层layer.prompt中,修改placeholder的实现方法
Sep 27 Javascript
基于JS实现table导出Excel并保留样式
May 19 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程序员的13个好习惯小结
2012/02/20 PHP
PHP扩展模块memcached长连接使用方法分析
2014/12/24 PHP
php通过ksort()函数给关联数组按照键排序的方法
2015/03/18 PHP
用PHP代码在网页上生成图片
2015/07/01 PHP
ThinkPHP路由机制简介
2016/03/23 PHP
Yii框架核心组件类实例详解
2019/08/06 PHP
PHP7 标准库修改
2021/03/09 PHP
javascript 异常处理使用总结
2009/06/21 Javascript
javascript删除数组元素并且数组长度减小的简单实例
2014/02/14 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
2015/04/17 Javascript
jquery实现键盘左右翻页特效
2015/04/30 Javascript
JS实现图片平面旋转的方法
2016/03/01 Javascript
js HTML5 Canvas绘制转盘抽奖
2020/09/13 Javascript
javascript 实现动态侧边栏实例详解
2016/11/11 Javascript
Vue.js原理分析之observer模块详解
2017/02/17 Javascript
Vue中Quill富文本编辑器的使用教程
2018/09/21 Javascript
AngularJs中$cookies简单用法分析
2019/05/30 Javascript
前端深入理解Typescript泛型概念
2020/03/09 Javascript
详解小程序横屏方案对比
2020/06/28 Javascript
vue 手机物理监听键+退出提示代码
2020/09/09 Javascript
使用Python编写一个模仿CPU工作的程序
2015/04/16 Python
python通过ssh-powershell监控windows的方法
2015/06/02 Python
Python实现递归遍历文件夹并删除文件
2016/04/18 Python
python生成器,可迭代对象,迭代器区别和联系
2018/02/04 Python
python psutil库安装教程
2018/03/19 Python
python读取文件名称生成list的方法
2018/04/27 Python
详解python pandas 分组统计的方法
2019/07/30 Python
Pycharm远程连接服务器并实现代码同步上传更新功能
2020/02/25 Python
Python加速程序运行的方法
2020/07/29 Python
Python 中如何使用 virtualenv 管理虚拟环境
2021/01/21 Python
在职研究生自我鉴定
2013/10/16 职场文书
公务员中国梦演讲稿
2014/08/19 职场文书
高三语文复习计划
2015/01/19 职场文书
2015年学校保卫部工作总结
2015/05/11 职场文书
AJAX学习笔记
2021/05/18 Javascript
SpringBoot实现quartz定时任务可视化管理功能
2021/08/30 Java/Android