详解如何用VUE写一个多用模态框组件模版


Posted in Javascript onSeptember 27, 2018

对于新手们来说,如何写一个可以多用的组件,还是有点难度的,组件如何重用,如何传值这些在实际使用中,是多少会存在一些障碍的,所以今天特意写一个最常用的模态框组件提供给大家,希望能帮助到您!

懒癌患者直接复制粘贴即可

Modal.vue组件

<template>
  <!-- 过渡动画 -->
  <transition name="modal-fade">
    <!-- 关闭模态框事件 和 控制模态框是否显示 -->
    <div class="modal-backdrop" @click="$emit('closeModal')" v-show="show">
      <div class="modal">
        <img class="img" :src="imgadress" alt="">
        <div class="modal-body" id="modalDescription">
          <li></li>
          <!-- 状态提示文字的插槽 -->
          <slot name="status">{{statusText}}</slot>
          <li></li>
        </div>
        <!-- 模态框内容文字 可有可无 -->
        <div class="modal-content" v-if="contentText">
          {{contentText}}
          <span v-if="IDList" v-for="item in IDList" :key="item.id">{{item.payMoney}}
            <i>{{item.yuan}}</i>
          </span>
        </div>
        <ul>
          <!-- 模态框按钮 可选单个确定按钮 和 两个确定、取消按钮 -->
          <!-- 单个确定按钮 -->
          <li v-if="alert" :class="buttonBackground" @click.stop="$emit('button')">确定</li>
          <!-- 确定和取消按钮 -->
          <li v-else class="confirm">
            <div>取消</div>
            <div :class="buttonBackground" @click.stop="$emit('confirm')">{{sure}}</div>
          </li>
        </ul>
      </div>
    </div>
  </transition>
</template>
<script>
export default {
  name:'modal',
  // 通过 props 传值
  props: {
    imgadress:String,
    title:String, //标题文字
    show:{   //显示取消
      type:Boolean,
      default:false
    },
    statusText:String,  //状态文字
    contentText:String,  //描述文字
    IDList:Array,  //ID 列表
    payMoney:Number,
    yuan:String,
    buttonBackground:String, //按钮背景色
    alert:String,  //判断一个还是两个按钮
    sure:String, //第二个按钮的提示文字
    
  },
  data(){
    return{
      closemodal:"close",
      // isModalVisible:false,
      // 确定和取消按钮的两种颜色
      red:'redBackground',
      blue:'blueBackground'
    }
  },
  methods:{
    // 关闭模态框事件
    close(){
      this.$emit('close')
    },
  }
}
</script>
<style lang="scss" scoped> 
.modal-backdrop {
  position: fixed; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0; 
  background-color: rgba(0,0,0,.3); 
  display: flex; 
  justify-content: center; 
  align-items: center;
  z-index: 12;
  .modal { 
    background-color: #fff; 
    box-shadow: 2px 2px 20px 1px; 
    overflow-x:auto; 
    display: flex; 
    flex-direction: column; 
    width: 11.8rem;
    position: relative;
    border-radius: 0.2rem;
    .img{
      width: 3.6rem;
      height: 3.6rem;
      margin: 0.8rem 4.1rem;
    }
    .modal-header{ 
      padding: 0.6rem 4.1rem;
      width: 3.6rem;
      height: 3.6rem;
      box-sizing: border-box; 
      .img{
        width: 100%;
        height: 100%;
      }
      div{
        width: 100%;
        height: 100%;
        background: #000;
      }
    } 
    .modal-body{
      width: 100%;
      height: 0.48rem;
      padding: 0rem 1.6rem;
      margin-bottom: 0.8rem;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between; 
      align-items: center; 
      li{
        width: 2rem;
        height: 0.04rem;
        background: #eeeee5;
      }
    }
    .modal-content{
      width: 100%;
      // height: 0.6rem;
      margin-bottom: 0.8rem;
      text-align: center;
      color: #34304B;
      span{
        color: #32B8B9;
        i{
          color: #4F4F4F;
        }
      }
    }
    ul{
      li{
        width: 100%;
        height: 1.52rem;
        line-height: 1.52rem;
        text-align: center;
        color: #fff;
        font-size: 0.56rem;
        letter-spacing: 0.4rem;
      }
      .confirm{
        display: flex;
        div:nth-child(1){
          flex: 1;
          background: #DEDEDE;
          color: #BCBBBF;
        }
        div:nth-child(2){
          flex: 1;
          color: #fff;
        }
      }
    }
    .blueBackground{
      background: #21A6DF;
    }
    .redBackground{
      background: #FF4046;
    }
  } 
}
/* 动画 */
.modal-fade-enter,.modal-fade-leave-active{
  opacity: 0;
}
.modal-fade-enter-active, .modal-fade-leave-active{
  transition: opacity 0.5s ease;
}
</style>

新建一个index.js文件,在其中全局引入组件,全局引入之后,就不用在每个调用的组件里面单独引入了,可以直接使用

import Modalfrom "./Modal.vue";
const components = {
  install: function (Vue) {
    Vue.component('Modal', Modal);
  }
}
//导出组件
export default components;

Index.vue中调用

<template>
  <div class="index">
<!-- 提交成功模态框 -->
    <Modal
      ref="Modal"
      :imgadress="imgadress"
      v-show="isModalVisible"
      statusText="提交成功"
      @closeModal="closeModal"
      contentText="Index.vue"
      :IDList="IDList"
      :buttonBackground="red"
      sure="确定"
      @confirm="confirm"
    >
      <!-- :payMoney="payMoney"
      yuan="元" -->
    </Modal>
    <button @click="showModel">支付成功模态框</button>

  </div>
</template>
<script>
export default {
  name: 'Index',
  data(){
    return{
      // 模态框
      imgadress:require('./../../assets/img/success.png'),
      isModalVisible:false,
      show: false,
      showToast: false,
      thisIndex:0,
      green:'green',
      blue:'',
      red:'',
      IDList:[
        {payMoney:23456,yuan:'、'},
        {payMoney:23456,yuan:'、'},
        {payMoney:23456,yuan:'、'},
        {payMoney:23456,yuan:'、'},
        {payMoney:23456,yuan:'、'},
        {payMoney:23456,yuan:'、'},
        {payMoney:23456,yuan:'、'},
      ],
      payMoney:99,
    }
  },
  methods:{
    // 提示模态框
    showModel(){
      this.isModalVisible = true;
      this.blue = this.$refs.Model.blue
      this.red = this.$refs.Model.red
      
    },
    closeModal(){
      this.isModalVisible = false
    },
    confirm(){
      console.log(11111111111);
    },
  }
}
</script>

效果如图

详解如何用VUE写一个多用模态框组件模版

模态框-1.gif

如果只需要一个确定按钮,只需要在调用的时候,这么写就好了

<template>
  <div class="index">
<!-- 提交成功模态框 -->
    <Modal
      ref="Modal"
      :imgadress="imgadress"
      v-show="isModalVisible"
      statusText="提交成功"
      @closeModal="closeModal"
      contentText="Index.vue"
      :IDList="IDList"
      :buttonBackground="blue"
      @button="closeModal"
      sure="确定"
      alert="1"
    >
    </Modal>
    <button @click="showModel">支付成功模态框</button>

  </div>
</template>

如图

详解如何用VUE写一个多用模态框组件模版

模态框-2.gif

可能并不是特别完美,如果您发现有缺点,还请不吝赐教!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
老鱼 浅谈javascript面向对象编程
Mar 04 Javascript
为Extjs加加速(javascript加速)
Aug 19 Javascript
javascript 实现键盘上下左右功能的小例子
Sep 15 Javascript
jQuery中校验时间格式的正则表达式小结
Sep 22 Javascript
escape函数解决js中ajax传递中文出现乱码问题
Oct 30 Javascript
js格式化时间小结
Nov 03 Javascript
基于javascript编写简单日历
May 02 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
May 17 Javascript
浏览器事件循环与vue nextTicket的实现
Apr 16 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
Aug 14 Javascript
React实现阿里云OSS上传文件的示例
Aug 10 Javascript
移动端JS实现拖拽两种方法解析
Oct 12 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
Sep 27 #Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
Sep 27 #Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
Sep 27 #Javascript
详解关于vue2.0工程发布上线操作步骤
Sep 27 #Javascript
解决betterScroll在vue中存在图片时,出现拉不动的问题
Sep 27 #Javascript
Vue中的v-for指令不起效果的解决方法
Sep 27 #Javascript
在vue中使用v-bind:class的选项卡方法
Sep 27 #Javascript
You might like
利用Memcached在php下实现session机制 替换PHP的原生session支持
2010/08/21 PHP
php实现文件下载(支持中文文名)
2013/12/04 PHP
PHP.ini中配置屏蔽错误信息显示和保存错误日志的例子
2014/05/12 PHP
php操作xml入门之xml基本介绍及xml标签元素
2015/01/23 PHP
PHP命令行执行整合pathinfo模拟定时任务实例
2016/08/12 PHP
PHP简单实现上一页下一页功能示例
2016/09/14 PHP
php PDO实现的事务回滚示例
2017/03/23 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
PHP以json或xml格式返回请求数据的方法
2018/05/31 PHP
实例说明js脚本语言和php脚本语言的区别
2019/04/04 PHP
解决laravel(5.5)访问public报错的问题
2019/10/12 PHP
jquery.ui.draggable中文文档
2009/11/24 Javascript
一些有用的JavaScript和jQuery的片段分享
2011/08/23 Javascript
JQuery 在线引用及测试引用是否成功
2014/06/24 Javascript
Nodejs极简入门教程(二):定时器
2014/10/25 NodeJs
JavaScript基础函数整理汇总
2015/01/30 Javascript
Backbone.js框架中简单的View视图编写学习笔记
2016/02/14 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
2016/04/06 Javascript
终于实现了!精彩的jquery弹幕效果
2016/07/18 Javascript
JavaScript中的工厂函数(推荐)
2017/03/08 Javascript
浅谈vue父子组件怎么传值
2018/07/21 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
2018/08/07 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
2018/11/14 Javascript
jquery简单实现纵向的无缝滚动代码实例
2019/04/01 jQuery
小程序分享链接onShareAppMessage的具体用法
2020/05/22 Javascript
JavaScript中交换值的10种方法总结
2020/08/18 Javascript
Vue中nprogress页面加载进度条的方法实现
2020/11/13 Javascript
python rsa 加密解密
2017/03/20 Python
pandas 选择某几列的方法
2018/07/03 Python
Python 使用生成器代替线程的方法
2020/08/04 Python
python中实现词云图的示例
2020/12/19 Python
韩国三星旗下的一家超市连锁店:Home Plus
2016/07/30 全球购物
社区班子对照检查材料
2014/08/27 职场文书
商场收银员岗位职责
2015/04/07 职场文书
golang 实现对Map进行键值自定义排序
2021/04/28 Golang
Hive HQL支持2种查询语句风格
2022/06/25 数据库