tip组件

tips组件

这是一个通用的tips提示组件,黑透的背景,内容居中显示,一秒钟后消失。效果图如下:

tips.vue

<template>
  <div id="tips" :class="{active: isActive}">
    <div id="box">{{text}}</div>
  </div>
</template>
<script>
  export default {
    name: 'alert',
    props: {
      text: {
        type: String,
        default: '错误'
      }
    },
    data () {
      return {
        isActive: false
      }
    },
    methods: {
      closeTips () {
        this.$emit('closeTips')
      }
    },
    mounted () {
      setTimeout(() => {
        this.isActive = true
        setTimeout(() => {
          this.closeTips()
        }, 1000)
      }, 20)
    }
  }
</script>
<style lang="less" scoped>
  @import "../../assets/less/variable";
  #tips{
    position: fixed;
    left:0;
    top:0;
    right:0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity:0;
    visibility: hidden;
    transition: 0.3s ease all;
    &.active{
      opacity:1;
      visibility: visible;
    }
    #box{
      width:190/@r;
      background: @bgDark;
      box-sizing: border-box;
      color: #fff;
      text-align: center;
      font-size: 14/@r;
      padding: 20px;
      border-radius: 6/@r;
    }
  }
</style> 

父组件调用

添加传入值、是否显示和关闭事件
<tips v-if="showTips" :text="tipsText" @closeTips="closeTips"></tips>
data中绑定数据
showTips: false,
tipsText: '',
添加关闭tips事件
 closeTips () {
        this.showTips = false
},

随机浏览