详解如何用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 相关文章推荐
List the Codec Files on a Computer
Jun 18 Javascript
十分钟打造AutoComplete自动完成效果代码
Dec 26 Javascript
jquery isType() 类型判断代码
Feb 14 Javascript
常用Extjs工具:Extjs.util.Format使用方法
Mar 22 Javascript
简单的js图片轮换代码(js图片轮播)
May 06 Javascript
详解Angularjs中的依赖注入
Mar 11 Javascript
100行代码理解和分析vue2.0响应式架构
Mar 09 Javascript
seajs中模块依赖的加载处理实例分析
Oct 10 Javascript
使用 vue.js 构建大型单页应用
Feb 10 Javascript
vue iview实现动态路由和权限验证功能
Apr 17 Javascript
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
JavaScript实现鼠标经过表格某行时此行变色
Nov 20 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生成16位随机数的代码(两种方法)
2014/09/16 PHP
PHP unlink与rmdir删除目录及目录下所有文件实例代码
2018/02/07 PHP
php的单例模式及应用场景详解
2021/02/27 PHP
让textarea自动调整大小的js代码
2011/04/12 Javascript
使用UglifyJS合并/压缩JavaScript的方法
2012/03/07 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
2013/10/18 Javascript
web前端设计师们常用的jQuery特效插件汇总
2014/12/07 Javascript
AngularJS报错$apply already in progress的解决方法分析
2017/01/30 Javascript
详解webpack运行Babel教程
2018/06/13 Javascript
Vue列表渲染的示例代码
2018/11/01 Javascript
微信jssdk逻辑在vue中的运用详解
2018/11/14 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
2019/07/15 Javascript
p5.js临摹旋转爱心
2019/10/23 Javascript
如何在JavaScript中创建具有多个空格的字符串?
2020/02/23 Javascript
用Python的pandas框架操作Excel文件中的数据教程
2015/03/31 Python
Python过滤列表用法实例分析
2016/04/29 Python
python opencv之SIFT算法示例
2018/02/24 Python
python 列表递归求和、计数、求最大元素的实例
2018/11/28 Python
在Python中表示一个对象的方法
2019/06/25 Python
python绘制随机网络图形示例
2019/11/21 Python
Django实现前台上传并显示图片功能
2020/05/29 Python
Python自动发送和收取邮件的方法
2020/08/12 Python
全面介绍python中很常用的单元测试框架unitest
2020/12/14 Python
详解webapp页面滚动卡顿的解决办法
2018/12/26 HTML / CSS
香港个人化生活购物网站:Ballyhoo Limited
2016/09/10 全球购物
加拿大最大的书店:Indigo
2017/01/01 全球购物
电气工程师岗位职责
2014/01/01 职场文书
回门宴新郎答谢词
2014/01/12 职场文书
个人自我剖析材料
2014/02/07 职场文书
运动会获奖感言
2014/02/11 职场文书
党的群众路线教育实践活动宣传方案
2014/02/23 职场文书
奉献演讲稿范文
2014/05/21 职场文书
2014年医务科工作总结
2014/12/18 职场文书
独生子女证明范本
2015/06/19 职场文书
接收函
2019/04/22 职场文书
使用vue-element-admin框架从后端动态获取菜单功能的实现
2021/04/29 Vue.js