详解如何用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 相关文章推荐
DOM精简教程
Oct 03 Javascript
javaScript 简单验证代码(用户名,密码,邮箱)
Sep 28 Javascript
不要使用jQuery触发原生事件的方法
Mar 03 Javascript
浅谈javascript基础之客户端事件驱动
Jun 10 Javascript
js当前页面登录注册框,固定div,底层阴影的实例代码
Oct 04 Javascript
Three.js利用dat.GUI如何简化试验流程详解
Sep 26 Javascript
vux uploader 图片上传组件的安装使用方法
May 15 Javascript
Vue中使用sass实现换肤功能
Sep 07 Javascript
vue动态删除从数据库倒入列表的某一条方法
Sep 29 Javascript
微信小程序提取公用函数到util.js及使用方法示例
Jan 10 Javascript
vue-router二级导航切换路由及高亮显示的实现方法
Jul 10 Javascript
微信小程序实现同时上传多张图片
Feb 03 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
php 远程关机操作的代码
2008/12/05 PHP
php $_SERVER当前完整url的写法
2009/11/12 PHP
php shell超强免杀、减少体积工具实现代码
2012/10/16 PHP
非常实用的php弹出错误警告函数扩展性强
2014/01/17 PHP
合并ThinkPHP配置文件以消除代码冗余的实现方法
2014/07/22 PHP
PHP安装memcached扩展笔记
2015/05/28 PHP
php魔术方法功能与用法实例分析
2016/10/19 PHP
Laravel源码解析之路由的使用和示例详解
2018/09/27 PHP
PHP常用函数之格式化时间操作示例
2019/10/21 PHP
jquery each()源代码
2011/02/14 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
2014/09/06 Javascript
究竟什么是Node.js?Node.js有什么好处?
2015/05/29 Javascript
常见JS验证脚本汇总
2015/12/01 Javascript
Jquery使用小技巧汇总
2015/12/29 Javascript
AngularJS通过$http和服务器通信详解
2016/09/21 Javascript
详解Angular的双向数据绑定(MV-VM)
2016/12/26 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
2017/03/14 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
2017/06/03 Javascript
[原创]jquery判断元素内容是否为空的方法
2018/05/04 jQuery
浅谈微信小程序之官方UI框架we-ui使用教程
2018/08/20 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
2019/05/26 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
2020/04/23 Javascript
Python中实现远程调用(RPC、RMI)简单例子
2014/04/28 Python
python将文本转换成图片输出的方法
2015/04/28 Python
Django实现全文检索的方法(支持中文)
2018/05/14 Python
python实现的爬取电影下载链接功能示例
2019/08/26 Python
Python scipy的二维图像卷积运算与图像模糊处理操作示例
2019/09/06 Python
Python如何通过Flask-Mail发送电子邮件
2020/01/29 Python
Django DRF APIView源码运行流程详解
2020/08/17 Python
伦敦高级内衣品牌:Agent Provocateur(大内密探)
2016/08/23 全球购物
基督教婚礼主持词
2014/03/14 职场文书
《地震中的父与子》教学反思
2014/04/10 职场文书
电台编导求职信
2014/05/06 职场文书
2015年小学教师培训工作总结
2015/07/21 职场文书
追悼会家属答谢词
2015/09/29 职场文书
为什么MySQL选择Repeatable Read作为默认隔离级别
2021/07/26 MySQL