拿到的设想图长啥品德？

我脑海里YY到了哪些内容

我们拿到设想图能够看到，现在是两种toast，我们在封装组件的时刻要斟酌背面有能够增添其他款式的组件，所以我们在设想的时刻，只管要有拓展性

• 肯定要有type属性，根据type属性掌握显现哪一种范例的组件
• 肯定要有text属性，经由过程属性传入差别的案牍
• 肯定要有timeout属性，经由过程属性传入，若干ms组件消逝

裤子都脱了，该进入正题了，上代码

<template>
  <transition name="fade">
    <div class="toastWrap" v-if="isShow"  v-cloak>
      <div class="toast-content no-wrap">
        // 运用传入的type来通知组件运用哪个子组件
        <component :is="getType()" :text="textinfo"></component>
      </div>
    </div>
  </transition>
</template>
<script>
  const toastText = {
    props: ['text'],
    template: `<div class="text" v-text="text"></div>`
  }
  const toastIcon = {
    props: ['text'],
    template: `<div class="icon-wrap"><div class="icon-img"></div><div class="icon-text" v-text="text"></div></div>`
  }
  export default {
    props: {
      show: {
        type: Boolean,
        default: true,
        required: false
      },
      type: {
        type: String,
        default: 'toastText', //toastText，toastIcon
        required: false
      },
      timeout: {
        type: Number,
        default: 1600,
        required: false
      },
      text: {
        type: String,
        default: '正在提交',
        required: false
      }
    },
    data: function() {
      return {
        isShow: true,
        textinfo: '',
      }
    },
    mounted: function() {
      this.showToast()
    },
    methods: {
      getType() {
        return this.type
      },
      /**
       * 假如经由过程外部参数通报，则显现外部参数，不然显现默许参数
       * @param text
       * @param timeout
       * @returns {Promise}
       */
      showToast(text = this.text, timeout = this.timeout) {
        this.textinfo = text
        return new Promise((reslove,reject) => {
          setTimeout(() => {
            this.isShow = false
            // 宣布音讯
            this.$emit('toast-cb')
            reslove()
          }, timeout)
        })
      }
    },
    components: {
      toastText,
      toastIcon
    },
  }
</script>
<style lang="css">
  .fade-enter-active,.fade-leave-active {
    transition: opacity 0.5s;
  }
  .fade-enter,.fade-leave-to {
    opacity: 0;
  }
  .toastWrap {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100;
  }
  .toastWrap .toast-content {
    border-radius: 7px;
    background: rgba(0,0,0,0.7);
    padding: 15px 10px;
    color: #fff;
    font-size: 14px;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
  }
  .icon-wrap {
    text-align: center;
    font-size: 14px;
  }
  .icon-img {
    width: 30px;
    height: 30px;
    line-height: 30px;
    margin: auto auto 5px;
    background: url('./img/icon-loading.png') center no-repeat;
    background-size: 80%;
    animation: myrotate 0.8s infinite linear;
  }
  .icon-text {
    white-space: nowrap;
  }
  .no-wrap {
    white-space: nowrap;
  }
  @-moz-keyframes myrotate {
    0% {
      -webkit-transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
    }
  }
  @-webkit-keyframes myrotate {
    0% {
      -webkit-transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
    }
  }
  @-o-keyframes myrotate {
    0% {
      -webkit-transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
    }
  }
  @keyframes myrotate {
    0% {
      -webkit-transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
    }
  }
</style>

另有哪些改良？

toastIcon子组件的icon没有经由过程动态设置，背面假如设想出其他的icon的toast时，可把属性提出来，经由过程参数通报

Npm宣布

宣布包之前你起首要有一个npm的账号

在终端输入npm adduser，提醒输入账号，暗码和邮箱，然后将提醒建立胜利

然后，实行npm init，天生package.json

npm publish   //宣布命令

没有终局的终局

toast-vue-mobile

github