自定义弹框

淡淡的烟草味﹌ 2021-07-24 16:24 497阅读 0赞

基于vue,传入tips的值,即可自定义弹框文本内容

<template>
        <div class='alert'>
          <div class='a_container' >
            <img src="./imgs/1.png" alt="">
            <p>{ { tip}}</p>
            <button @click='closeTip'>确认</button>
          </div>
        </div>
    
    </template>
    
    <script>
      export default{ 
        data()
        { 
          return{ 
          }
        },
        props:['tip'],
        methods:{ 
          closeTip()
          { 
            this.$emit('close');
          }
        }
    
      }
    </script>
    
    <style lang='less'>
      @keyframes tipMove
      { 
       0%{ 
         transform: scale(1);
       }
    
       35%{ 
         transform: scale(.8);
       }
    
       70%
       { 
         transform: scale(1.1);
       }
    
       100%{ 
         transform: scale(1);
       }
    
      }
    
    .alert{ 
      position: fixed;
    
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      background: rgba(0, 0, 0, .5);
      z-index: 100;
    }
    .a_container{ 
      width: 60%;
      margin: 0 auto;
      background-color: white;
      position: relative;
      top:25%;
      height: 200px;
      width: 200px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      border-radius: 10px;
      animation: tipMove 1s;
    }
    .a_container>img{ 
      width: 55px;
      height: 55px;
      margin-top: 30px;
    }
    .a_container>p{ 
      padding-top: 10px;
    
    }
    .a_container>button{ 
      width: 100%;
      background-color: #41C562;
      color: white;
      border: none;
      padding: 10px 0;
      font-weight: bold;
      letter-spacing: 5px;
      border-radius:0 0 9px 9px ;
    }
    
    </style>

![在这里插入图片描述][20200527095838234.png]  
效果图:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]

[20200527095838234.png]: /images/20210724/c84db3fbbc2747c2ad51ed83abacdbf1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: /images/20210724/de3646bfd85d4a9d991072344977160b.png