当前位置:首页 >> 网络编程

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

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

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

Modal.vue组件

<template>
  <!-- 过渡动画 -->
  <transition name="modal-fade">
    <!-- 关闭模态框事件 和 控制模态框是否显示 -->
    <div class="modal-backdrop" @click="$emit('closeModal')" v-show="show">
      <div class="modal">
        <img class="img" :src="/UploadFiles/2021-04-02/imgadress">

新建一个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

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

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