欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解如何用VUE寫一個(gè)多用模態(tài)框組件模版

 更新時(shí)間:2018年09月27日 13:40:14   作者:劉員外__  
這篇文章主要介紹了詳解如何用VUE寫一個(gè)多用模態(tài)框組件模版,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧

對(duì)于新手們來說,如何寫一個(gè)可以多用的組件,還是有點(diǎn)難度的,組件如何重用,如何傳值這些在實(shí)際使用中,是多少會(huì)存在一些障礙的,所以今天特意寫一個(gè)最常用的模態(tài)框組件提供給大家,希望能幫助到您!

懶癌患者直接復(fù)制粘貼即可

Modal.vue組件

<template>
  <!-- 過渡動(dòng)畫 -->
  <transition name="modal-fade">
    <!-- 關(guān)閉模態(tài)框事件 和 控制模態(tài)框是否顯示 -->
    <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>
          <!-- 狀態(tài)提示文字的插槽 -->
          <slot name="status">{{statusText}}</slot>
          <li></li>
        </div>
        <!-- 模態(tài)框內(nèi)容文字 可有可無 -->
        <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>
          <!-- 模態(tài)框按鈕 可選單個(gè)確定按鈕 和 兩個(gè)確定、取消按鈕 -->
          <!-- 單個(gè)確定按鈕 -->
          <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, //標(biāo)題文字
    show:{   //顯示取消
      type:Boolean,
      default:false
    },
    statusText:String,  //狀態(tài)文字
    contentText:String,  //描述文字
    IDList:Array,  //ID 列表
    payMoney:Number,
    yuan:String,
    buttonBackground:String, //按鈕背景色
    alert:String,  //判斷一個(gè)還是兩個(gè)按鈕
    sure:String, //第二個(gè)按鈕的提示文字
    
  },
  data(){
    return{
      closemodal:"close",
      // isModalVisible:false,
      // 確定和取消按鈕的兩種顏色
      red:'redBackground',
      blue:'blueBackground'
    }
  },
  methods:{
    // 關(guān)閉模態(tài)框事件
    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;
    }
  } 
}
/* 動(dòng)畫 */
.modal-fade-enter,.modal-fade-leave-active{
  opacity: 0;
}
.modal-fade-enter-active, .modal-fade-leave-active{
  transition: opacity 0.5s ease;
}
</style>

新建一個(gè)index.js文件,在其中全局引入組件,全局引入之后,就不用在每個(gè)調(diào)用的組件里面單獨(dú)引入了,可以直接使用

import Modalfrom "./Modal.vue";
const components = {
  install: function (Vue) {
    Vue.component('Modal', Modal);
  }
}
//導(dǎo)出組件
export default components;

Index.vue中調(diào)用

<template>
  <div class="index">
<!-- 提交成功模態(tài)框 -->
    <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">支付成功模態(tài)框</button>

  </div>
</template>
<script>
export default {
  name: 'Index',
  data(){
    return{
      // 模態(tài)框
      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:{
    // 提示模態(tài)框
    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>

效果如圖

模態(tài)框-1.gif

如果只需要一個(gè)確定按鈕,只需要在調(diào)用的時(shí)候,這么寫就好了

<template>
  <div class="index">
<!-- 提交成功模態(tài)框 -->
    <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">支付成功模態(tài)框</button>

  </div>
</template>

如圖

模態(tài)框-2.gif

可能并不是特別完美,如果您發(fā)現(xiàn)有缺點(diǎn),還請(qǐng)不吝賜教!

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • Vue 項(xiàng)目中遇到的跨域問題及解決方法(后臺(tái)php)

    Vue 項(xiàng)目中遇到的跨域問題及解決方法(后臺(tái)php)

    這篇文章主要介紹了Vue 項(xiàng)目中遇到的跨域問題及解決方法(后臺(tái)php),前端采用vue框架,后臺(tái)php,具體解決方法,大家參考下本文
    2018-03-03
  • vue和iview結(jié)合動(dòng)態(tài)生成表單實(shí)例

    vue和iview結(jié)合動(dòng)態(tài)生成表單實(shí)例

    這篇文章主要介紹了vue和iview結(jié)合動(dòng)態(tài)生成表單實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • element-ui表格如何自適應(yīng)高度效果示例

    element-ui表格如何自適應(yīng)高度效果示例

    這篇文章主要給大家介紹了關(guān)于element-ui表格如何自適應(yīng)高度的相關(guān)資料,Element UI的Table組件默認(rèn)情況下是沒有自適應(yīng)高度的,文中給大家介紹了解決的辦法,需要的朋友可以參考下
    2023-08-08
  • Vue中使用crypto-js AES對(duì)稱加密算法實(shí)現(xiàn)加密解密

    Vue中使用crypto-js AES對(duì)稱加密算法實(shí)現(xiàn)加密解密

    ?在數(shù)字加密算法中,通過可劃分為對(duì)稱加密和非對(duì)稱加密,本文主要介紹了Vue中使用crypto-js AES對(duì)稱加密算法實(shí)現(xiàn)加密解密,文中根據(jù)實(shí)例編碼詳細(xì)介紹的十分詳盡,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-03-03
  • vue循環(huán)中調(diào)用接口-promise.all();按順序執(zhí)行異步處理方式

    vue循環(huán)中調(diào)用接口-promise.all();按順序執(zhí)行異步處理方式

    這篇文章主要介紹了vue循環(huán)中調(diào)用接口-promise.all();按順序執(zhí)行異步處理方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-07-07
  • Vue實(shí)現(xiàn)Excel預(yù)覽功能使用場(chǎng)景示例詳解

    Vue實(shí)現(xiàn)Excel預(yù)覽功能使用場(chǎng)景示例詳解

    這篇文章主要為大家介紹了Vue實(shí)現(xiàn)Excel預(yù)覽功能使用場(chǎng)景示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-09-09
  • vue使用echarts圖表自適應(yīng)的幾種解決方案

    vue使用echarts圖表自適應(yīng)的幾種解決方案

    這篇文章主要給大家介紹了關(guān)于vue使用echarts圖表自適應(yīng)的幾種解決方案,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-12-12
  • vue項(xiàng)目實(shí)現(xiàn)國際化的基本思路與詳細(xì)步驟

    vue項(xiàng)目實(shí)現(xiàn)國際化的基本思路與詳細(xì)步驟

    國際化是指項(xiàng)目能夠根據(jù)不同國家的語言進(jìn)行轉(zhuǎn)換,便于不同國家的用戶使用,這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目實(shí)現(xiàn)國際化的基本思路與詳細(xì)步驟,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2024-04-04
  • vue-cli創(chuàng)建項(xiàng)目及項(xiàng)目結(jié)構(gòu)解析

    vue-cli創(chuàng)建項(xiàng)目及項(xiàng)目結(jié)構(gòu)解析

    上一篇我們安裝了vue-cli,接下來我們就使用該腳手架進(jìn)行創(chuàng)建項(xiàng)目,這篇文章主要介紹了vue-cli創(chuàng)建項(xiàng)目以及項(xiàng)目結(jié)構(gòu)的相關(guān)資料,需要的朋友可以參考下面文章的具體內(nèi)容
    2021-10-10
  • vue異步組件使用及加載失敗異常處理

    vue異步組件使用及加載失敗異常處理

    在構(gòu)建大型單頁應(yīng)用時(shí),組件的按需加載和延遲加載對(duì)于性能優(yōu)化至關(guān)重要,本文主要介紹了vue異步組件使用及加載失敗異常處理,具有一定的參考價(jià)值,感興趣的可以了解一下
    2024-02-02

最新評(píng)論