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 相关文章推荐
不错的新闻标题颜色效果
Dec 10 Javascript
解决AJAX中跨域访问出现'没有权限'的错误
Aug 20 Javascript
让mayfish支持mysqli数据库驱动的实现方法
May 22 Javascript
JS获取键盘上任意按键的值(实例代码)
Nov 12 Javascript
js控制iframe的高度/宽度让其自适应内容
Apr 09 Javascript
Javascript基础教程之while语句
Jan 18 Javascript
JS实现在页面随时自定义背景颜色的方法
Feb 27 Javascript
JavaScript动态插入CSS的方法
Dec 10 Javascript
原生JS实现层叠轮播图
May 17 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
vue 国际化 vue-i18n 双语言 语言包
Jun 07 Javascript
VueJS 组件参数名命名与组件属性转化问题
Dec 03 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服务器实现多session并发运行
2006/10/09 PHP
php 正确解码javascript中通过escape编码后的字符
2010/01/28 PHP
给初学者的30条PHP最佳实践(荒野无灯)
2011/08/02 PHP
PHP异常Parse error: syntax error, unexpected T_VAR错误解决方法
2014/05/06 PHP
PHP扩展模块memcached长连接使用方法分析
2014/12/24 PHP
PHP用户注册邮件激活账户的实现代码
2017/05/31 PHP
PHP Trait功能与用法实例分析
2020/06/03 PHP
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
2011/10/29 Javascript
JS实现div内部的文字或图片自动循环滚动代码
2013/04/19 Javascript
javascript操作referer详细解析
2014/03/10 Javascript
原生javaScript实现图片延时加载的方法
2014/12/22 Javascript
JavaScript动态修改弹出窗口大小的方法
2015/04/06 Javascript
JavaScript仿支付宝6位数字密码输入框
2016/12/29 Javascript
js Canvas绘制圆形时钟教程
2017/02/06 Javascript
jQuery实现动态加载select下拉列表项功能示例
2018/05/31 jQuery
基于element-ui的rules中正则表达式
2018/09/04 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
2019/01/27 Javascript
Vue form表单动态添加组件实战案例
2019/09/02 Javascript
element-ui table组件如何使用render属性的实现
2019/11/04 Javascript
JavaScript实现网页计算器功能
2020/10/29 Javascript
[01:16:12]完美世界DOTA2联赛PWL S2 FTD vs Inki 第一场 11.21
2020/11/23 DOTA
python实现登陆知乎获得个人收藏并保存为word文件
2015/03/16 Python
Python构建网页爬虫原理分析
2017/12/19 Python
Python实现计算文件MD5和SHA1的方法示例
2019/06/11 Python
Django中的DateTimeField和DateField实现
2021/02/24 Python
CSS3中几个新增加的盒模型属性使用教程
2016/03/01 HTML / CSS
美国庭院家具购物网站:AlphaMarts
2019/04/10 全球购物
建筑施工实习自我鉴定
2013/09/19 职场文书
工作中个人的自我评价
2013/12/31 职场文书
大学生的自我鉴定范文
2014/01/21 职场文书
教师师德承诺书
2014/03/26 职场文书
入党推优材料
2014/06/02 职场文书
法人单位授权委托书范文
2014/10/06 职场文书
sql注入教程之类型以及提交注入
2021/08/02 MySQL
victoriaMetrics库布隆过滤器初始化及使用详解
2022/04/05 Golang
微软发布Windows 11今年最大更新22H2(附 ISO 镜像官方下载)
2022/09/23 数码科技