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 相关文章推荐
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
Jan 23 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
Dec 19 Javascript
instanceof和typeof运算符的区别详解
Jan 06 Javascript
js出生日期 年月日级联菜单示例代码
Jan 10 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
Feb 07 Javascript
谈一谈javascript中继承的多种方式
Feb 19 Javascript
JS学习之表格的排序简单实例
May 16 Javascript
微信小程序使用audio组件播放音乐功能示例【附源码下载】
Dec 08 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
Sep 06 Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
Feb 13 Javascript
原生JS实现烟花效果
Mar 10 Javascript
JavaScript实现4位随机验证码的生成
Jan 28 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中HTML标签过滤技巧
2014/01/07 PHP
window.open的功能全解析
2006/10/10 Javascript
window.open()弹出居中的窗口
2007/02/01 Javascript
让回调函数 showResponse 也带上参数的代码
2007/08/13 Javascript
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
2011/03/28 Javascript
Javascript脚本实现静态网页加密实例代码
2013/11/05 Javascript
javascript实现根据身份证号读取相关信息
2014/12/17 Javascript
JavaScript替换当前页面的方法
2015/04/03 Javascript
深入解析JavaScript的闭包机制
2015/10/20 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
2020/04/20 Javascript
下雪了 javascript实现雪花飞舞
2020/08/02 Javascript
Bootstrap模仿起筷首页效果
2016/05/09 Javascript
利用vue.js实现被选中状态的改变方法
2018/02/08 Javascript
Vue波纹按钮组件制作
2018/04/30 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
2019/06/17 Javascript
vue实现文件上传读取及下载功能
2020/11/17 Javascript
weui中的picker使用js进行动态绑定数据问题
2019/11/06 Javascript
JS面试题中深拷贝的实现讲解
2020/05/07 Javascript
Python修改Excel数据的实例代码
2013/11/01 Python
python3安装speech语音模块的方法
2018/12/24 Python
python+opencv打开摄像头,保存视频、拍照功能的实现方法
2019/01/08 Python
Flask处理Web表单的实现方法
2021/01/31 Python
python实现控制台输出颜色
2021/03/02 Python
html5中svg canvas和图片之间相互转化思路代码
2014/01/24 HTML / CSS
荷兰之家英文站:Holland at Home
2016/10/26 全球购物
Aurora London官网:奢华、负担得起的皮革手袋
2020/08/01 全球购物
暑期实践思想汇报
2014/01/06 职场文书
优秀党员获奖感言
2014/02/18 职场文书
企业后勤岗位职责
2014/02/28 职场文书
个人授权委托书范文
2014/09/21 职场文书
毕业论文答辩开场白和答辩技巧
2015/05/27 职场文书
同学聚会感言一句话
2015/07/30 职场文书
不知如何爱孩子,这些方法教会您
2019/08/06 职场文书
python opencv通过按键采集图片源码
2021/05/20 Python
python 多态 协议 鸭子类型详解
2021/11/27 Python
Python尝试实现蒙特卡罗模拟期权定价
2022/04/21 Python