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 autocomplete 使用手册
Apr 01 Javascript
javascript中的一些注意事项 更新中
Dec 06 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
Apr 10 Javascript
JavaScript实现的圆形浮动标签云效果实例
Aug 06 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
Sep 17 Javascript
JS实现超简单的鼠标拖动效果
Nov 02 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
Dec 02 Javascript
Bootstrap 3 进度条的实现
Feb 22 Javascript
JavaScript创建对象的七种方式(推荐)
Jun 26 Javascript
JS复杂判断的更优雅写法代码详解
Nov 07 Javascript
eslint+prettier统一代码风格的实现方法
Jul 22 Javascript
如何用JS实现网页瀑布流布局
Apr 24 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版QQ互联OAuth示例代码分享
2015/07/05 PHP
PHP中ID设置自增后不连续的原因分析及解决办法
2016/08/21 PHP
php分页查询的简单实现代码
2017/03/14 PHP
提高 DHTML 页面性能
2006/12/25 Javascript
轻轻松松学习JavaScript
2007/02/25 Javascript
JavaScipt基本教程之JavaScript语言的基础
2008/01/16 Javascript
jquery 元素相对定位代码
2010/10/15 Javascript
Jquery的hover方法让鼠标经过li时背景变色
2013/09/06 Javascript
javascript中简单的进制转换代码实例
2013/10/26 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
2014/02/07 Javascript
js实现文本框中焦点在最后位置
2014/03/04 Javascript
基于jQuery的图片不完全按比例自动缩小
2014/07/11 Javascript
jquery带下拉菜单和焦点图代码分享
2015/08/24 Javascript
浅谈Javascript数据属性与访问器属性
2016/07/26 Javascript
jQuery使用方法
2017/02/04 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
2017/06/13 Javascript
JS实现图片放大镜插件详解
2017/11/06 Javascript
vue.js 嵌套循环、if判断、动态删除的实例
2018/03/07 Javascript
javascript自定义日期比较函数用法示例
2019/07/22 Javascript
原生js实现随机点名功能
2019/11/05 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
2020/03/07 Javascript
[07:03]显微镜下的DOTA2第九期——430圣堂刺客杀戮秀
2014/06/20 DOTA
基于Python Numpy的数组array和矩阵matrix详解
2018/04/04 Python
Python系统监控模块psutil功能与经典用法分析
2018/05/24 Python
python 函数内部修改外部变量的方法
2018/12/18 Python
通过python爬虫赚钱的方法
2019/01/29 Python
Python变量类型知识点总结
2019/02/18 Python
超简单使用Python换脸实例
2019/03/27 Python
全球速卖通俄罗斯站:AliExpress俄罗斯
2019/06/17 全球购物
什么是事务?为什么需要事务?
2012/01/09 面试题
办理护照介绍信
2014/01/16 职场文书
一句话工作感言
2014/03/01 职场文书
护理见习报告范文
2014/11/03 职场文书
个人简历自我评价怎么写
2015/03/10 职场文书
安全生产隐患排查制度
2015/08/05 职场文书
python实现简单反弹球游戏
2021/04/12 Python