vue简单提示组件

• 组件化是最近两年很火的一个话题，几乎每个公司的研发团队在开发的过程中都会或多或少的积累一些组件，无论是定制化的还是非定制的，最早的组件化就是把一个html拆分成几个公共的html（组件）以及一些定制化的html(模块)，在这两个部分的基础上开发新的页面会快很多。

• vue中也比较推荐去写组件。组件的几种调用方式就不赘述了最简单的就是写一个vue文件，在使用的页面import进来，components注册下，然后直接使用就好。今天要说的是直接在vue中通过this就可以调用的组件，类似于elementui中的this.$message.

• 首先需要简单实现一个简单的提示，背景半透明加中间小的tip提示。

<template>
<transition name="el-fade-in">
  <div class='test-notice' v-if='show'>
    <div class='test-notice-bg'></div>
    <div class='test-notice-content'>
      <div class='icon-area' :class='{"success-icon":type === "success", "error-icon" : type === "error"}'></div>
      <span>{{info}}</span>
    </div>
  </div>
</transition>
</template>
<script>
export default {
  name: 'TestNotice',
  data () {
    return {
      info: '操作成功!',
      type: 'success',
      show: false
    }
  },
  mounted () {
    let _this = this
    _this.show = true
    setTimeout(function () {
      _this.show = false
    }, 2000)
  }
}
</script>
<style lang="scss" scoped>
.test-notice{
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 3000;
  top: 0px;
  left: 0px;
  .test-notice-bg{
    position: fixed;
    top: 0px;
    left: 0px;;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: #000000;
    opacity: 0.5;
  }
  .test-notice-content{
    width: 440px;
    height: 115px;
    margin: 0 auto;
    background-color: #FFFFFF;
    top: 200px;
    position: relative;
    z-index: 2;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: Center;
    -ms-flex-align: Center;
    align-items: Center;
    .icon-area{
      width: 135px;
      height: 100%;
      position: absolute;
      top: 0px;
      left: 0px;
    }
    .error-icon{
      background:linear-gradient(90deg,rgba(229,57,53,1),rgb(223, 163, 162));
      &::before{
        content: '';
        width: 50px;
        height: 50px;
        position: absolute;
        top: 32.5px;
        left: 42.5px;
        background: url(/static/images/admin/error.png) center center no-repeat;
        background-size: contain;
      }
    }
    .success-icon{
      background:linear-gradient(90deg,rgba(26,180,0,1),rgba(29,199,1,1));
      &::before{
        content: '';
        width: 50px;
        height: 50px;
        position: absolute;
        top: 32.5px;
        left:42.5px;
        background: url(/static/images/admin/success.png) center center no-repeat;
        background-size: contain;
      }
    }
    span{
      float: left;
      position: relative;
      font-size:22px;
      font-family:MicrosoftYaHei;
      font-weight:400;
      color:rgba(51,51,51,1);
      padding-left: 20px;
      width: calc(100% - 135px);
      margin-left: 135px;
    }
  }
}
</style>

• 在组件的统计目录新建一个index.js文件

  import vue from 'vue'

import TestNotice from './TestNotice.vue'
const NoticeConstructor = vue.extend(TestNotice )
function showNotice (info, type) {
  // 实例化一个 toast.vue
  const noticeDom = new NoticeConstructor({
    el: document.createElement('div'),
    data () {
      return {
        info: info,
        type: type
      }
    }
  })

  // 把 实例化的 toast.vue 添加到 body 里
  document.body.appendChild(noticeDom.$el)
}
function registryNotice () {
  vue.prototype.$TestNotice = showNotice 
}

export default registryNotice

• 大功告成~，剩下的就是需要在main.js中引入下就ok了

// In main.js
import KtNotice from '@/components/notice/index'
Vue.use(KtNotice)
//In SomeVue.vue
...
 methods:{
   yourMethods () {
        this.$TestNotice('我出来啦，我是国产小提示！')
   }
}
...