-Toast achieve create the wheel assembly (lower)

1. The toast to solve the problem in the incoming html, implemented by fake slot

// plugins.js
toast.$slots.default = [message]
// toast.vue
 <div v-html="$slots.default[0]"></div>
// 使用
created() {
    this.$toast('<p>我是<strong>hi</strong></p>',{})
},

2. Add in the html toast is a more dangerous action, so to add a default is not an option open.

// toast.vue
<slot v-if="!enableHtml"></slot>
<div v-else v-html="$slots.default[0]"></div>
// plugin.js，进行传递参数的改写
propsData:toastOptions
// 使用
created() {
  this.$toast('<p>我是<strong>hi</strong></p><a href="http://qq.com">qq</a>',{
    enableHtml: false
  })
},

Use of 3.flex-shrink, flex-shrink attribute defines the reduced scale of the project, the default is 1, that is, if space is insufficient, the project will be reduced.

.item {
  flex-shrink: <number>; /* default 1 */
}

If the flex-shrink attribute all items are 1, when the lack of space, will be scaled down. flex-shrink property if a project is zero, other projects are 1, when the lack of space, the former does not shrink. If the higher the value, the greater the reduction ratio.

Height in 4.line, if the height wrote a minimum height, then the height of the sub-elements% will not enter into force. Js to operate with a high degree of line.

// toast.vue
<div class="toast" ref="wrapper">
    <div class="line" ref="line"></div>
</div>

mounted() {
  this.$nextTick(()=>{
    this.$refs.line.style.height = `${this.$refs.wrapper.getBoundingClientRect().height}px`
  })
}, // 这个计较太trick

debugger skills, if the eye is observed to 0, but the print is not 0, may be asynchronous problem.

5. Add the position of toast.

// toast.vue
props: {
  position: {
    type: String,
    default: 'top',
    validator(value){
      return ['top', 'bottom', 'middle'].indexOf(value) >= 0
    }
  }
},
computed:{
  toastClasses(){
    return {
      [`position-${this.position}`]:true
    }
  }
}
// 使用
this.$toast('你的智商需要充值', {
  position: 'bottom'
})
// plugin.js
export default {
  install(Vue, options){
    Vue.prototype.$toast = function (message, toastOptions) {
      let Constructor = Vue.extend(Toast)
      let toast = new Constructor({
        propsData:toastOptions // 在这里将position传进去
      })
      toast.$slots.default = [message]
      toast.$mount()
      document.body.appendChild(toast.$el)
    }
  }
}

6. If you start making a toast that has been put before the kill, again.

1. To write a function
2. A name to the function
3. The proposed parameters

// plugin.js
import Toast from './toast'

let currentToast

export default {
  install(Vue, options){
    Vue.prototype.$toast = function (message, toastOptions) {
      if(currentToast){
        currentToast.close()
      }
      currentToast = createToast({Vue,message, propsData: toastOptions})
    }
  }
}

/* helpers */
function createToast ({Vue,message,propsData}){
  let Constructor = Vue.extend(Toast)
  let toast = new Constructor({propsData})
  toast.$slots.default = [message]
  toast.$mount()
  document.body.appendChild(toast.$el)
  return toast
}

7. achieve animation

1. Declare an animation, and then wrote the above categories

      @keyframes fade {
        0% {opacity: 0; transform: translateY(100%);}
        100% {opacity: 1;transform: translateY(0);}
      } 
      .toast {
        animation: fade 1s;
      }

1. There is a bug, we realize once when there is a problem, if the toast was closed, we do not need to repeat close, and we write are no toast before you have not closed, as long as the value of our closed, that such a problem occurs, or a point close currentToast Toast and did not turn it into a null, so to add a callback to tell the outside, I was locked up not to repeat with me, the code will be more tune once close.

    // toast.vue
    close() {
      this.$el.remove()
      this.$emit('close')
      this.$destroy()
    }
    // plugin.js
    export default {
      install(Vue, options){
        Vue.prototype.$toast = function (message, toastOptions) {
          if(currentToast){
            currentToast.close()
          }
          currentToast = createToast({Vue,message, propsData: toastOptions,onclose: ()=>{
              currentToast = null
            }
          }) // 加了这句话
        }
      }
    }

    /* helpers */
    function createToast ({Vue,message,propsData,onclose}){
      let Constructor = Vue.extend(Toast)
      let toast = new Constructor({propsData})
      toast.$slots.default = [message]
      toast.$mount()
      toast.$on('close',onclose) // 加了这句话
      document.body.appendChild(toast.$el)
      return toast
    }

1. The git-related hook, hook do not want to do on the tube
2. How memories bug is generated, the default style is: transform: translateX (-50%), enter 0% when transform: translateY (100%), they cover the two sessions. There are three options for resolving.
   • Put another way to do it centered, but this method is the best, hard to figure
   • Do not do animation with css
   • Do two outside a div centered inside a do animation
3. Why not write two animation frames to control the center, if a piece of code you want to back down, then it must be a problem.
   1. Optimization of three kinds of animation, from top to bottom is not the same, optimized by css.

This article from the blog article multiple platforms OpenWrite release!