程序员小胖子之从设计图到npm发布组件过程

拿到的设计图长啥德行？

---

我脑海里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