程序員小胖子之從設計圖到npm發佈組件過程

時間 2020-01-04

原文原文鏈接

拿到的設計圖長啥德行？

我腦海裏YY到了哪些內容

咱們拿到設計圖能夠看到，目前是兩種toast，咱們在封裝組件的時候要考慮後面有可能增長其餘樣式的組件，因此咱們在設計的時候，儘可能要有拓展性css

必定要有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>