欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-11-10 16:23:58
对于新手们来说,如何写一个可以多用的组件,还是有点难度的,组件如何重用,如何传值这些在实际使用中,是多少会存在一些障碍的,所以今天特意写一个最常用的模态框组件提供给大家,希...

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

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

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

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

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