详解如何用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 相关文章推荐
js技巧--转义符&quot;\&quot;的妙用
Jan 09 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
Aug 01 Javascript
一个字符串反转函数可实现字符串倒序
Sep 15 Javascript
JavaScript实现的字符串replaceAll函数代码分享
Apr 02 Javascript
jQuery on()方法示例及jquery on()方法的优点
Aug 27 Javascript
JS中如何实现复选框全选功能
Dec 19 Javascript
js获取地址栏中传递的参数(两种方法)
Feb 08 Javascript
Bootstrap与Angularjs的模态框实例代码
Aug 03 Javascript
vue-router实现编程式导航的代码实例
Jan 19 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
Apr 16 Javascript
详解小程序input框失焦事件在提交事件前的处理
May 05 Javascript
jQuery实现朋友圈查看图片
Sep 11 jQuery
解决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
杏林同学录(一)
2006/10/09 PHP
Wordpress 相册插件 NextGEN-Gallery 添加目录将中文转为拼音的解决办法
2010/12/29 PHP
php7 安装yar 生成docker镜像
2017/05/09 PHP
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
2012/01/13 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
2012/10/11 Javascript
jquery解析XML字符串和XML文件的方法说明
2014/02/21 Javascript
深入理解JavaScript系列(49):Function模式(上篇)
2015/03/04 Javascript
js控制TR的显示隐藏
2016/03/04 Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
2016/04/13 Javascript
微信小程序 倒计时组件实现代码
2016/10/24 Javascript
jQuery实现弹窗居中效果类似alert()
2017/02/27 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
2017/05/20 Javascript
深入浅析Node.js单线程模型
2017/07/10 Javascript
vue组件 $children,$refs,$parent的使用详解
2017/07/31 Javascript
JS数组实现分类统计实例代码
2018/09/30 Javascript
Vue中CSS动画原理的实现
2019/02/13 Javascript
详解关于微信setData回调函数中的坑
2019/02/18 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
2019/04/24 Javascript
JavaScript 作用域scope简单汇总
2019/10/23 Javascript
python2.7 mayavi 安装图文教程(推荐)
2017/06/22 Python
python 使用poster模块进行http方式的文件传输到服务器的方法
2019/01/15 Python
python判断文件夹内是否存在指定后缀文件的实例
2019/06/10 Python
Python中filter与lambda的结合使用详解
2019/12/24 Python
Django 拼接两个queryset 或是两个不可以相加的对象实例
2020/03/28 Python
卫校中专生个人自我评价
2013/09/19 职场文书
网络工程师的自我评价
2013/10/02 职场文书
预备党员思想汇报
2014/01/08 职场文书
水果超市创业计划书
2014/01/27 职场文书
最新结婚典礼主持词
2014/03/14 职场文书
研讨会主持词
2014/04/02 职场文书
小学数学课后反思
2014/04/23 职场文书
护理专业毕业生自荐书
2014/05/24 职场文书
欢迎词怎么写
2015/01/23 职场文书
python自动化测试之Selenium详解
2022/03/13 Python
画错魏国疆域啦!《派对咖孔明》动画因作画失误于官网致歉
2022/04/07 日漫
windows系统安装配置nginx环境
2022/06/28 Servers