Write a Vue version Toast component by hand

preface

At present, there are many UI libraries in the front-end ecosystem. However, as a professional in mobile terminal development and H5 development, 996 is willing to accept the demands of high-end, domineering and upscale products.

So how can you reduce your work stress?

1. Get in the habit of reviewing your own code at work so that all kinds of commonly used designs can be pulled out as plug-ins or components for common use. Ctrl+C, Ctrl+V copy-paste is a quick way to solve the same problem, but it doesn’t make the code readable. Is the so-called time away from a cool, subsequent use of a straight.
2. You can also choose to cheat product requirements, you can also choose to read the SOURCE code of the UI library to modify the source code to meet requirements. As the saying goes, all roads lead to Rome. I prefer to have my own logical design and change it more quickly.

My NTH Vue component, Toast

1. Component design

Info Success errer Warning close.

API

2. Implement

1. Expose the calling method externally

//index.js

const type = ["success"."errer"."warning"]
const fnc = {
    name: 'G-Toast'.info: (options = {}) = >{},close: (a)= > {
        if (install) {
            
        }
    }
}
type.forEach(element= > {
    fnc[element] = (options = {}) = >{}});export default fnc
Copy the code

2. View implementation

<! --index.vue-->

<template>
  <div class="g7-Toast">
    <template v-if="mask">
      <transition name="fade">
        <div v-show="value" class="g7-Toast-mask"></div>
      </transition>
    </template>
    <transition name="fade">
      <div v-show="value" :class="['g7-Toast-body',type]">
        <div class="g7-Toast-iconfont" v-show="type">
          <Icon :icon="iconfont" :size="26" color="#fff" />
        </div>
        <div class="g7-Toast-context">{{context}}</div>
      </div>
    </transition>
  </div>
</template>

<script>
import Icon from ".. /Icon";
export default {
  components: { Icon },
  props: {
    type: {
      type: String.validator: function(value) {
        return ["success"."errer"."warning"."loading"].includes(value); }},value: {
      type: Boolean
    },
    context: {
      type: String
    },
    icon: {
      type: String
    },
    mask: {
      type: Boolean.default: false}},computed: {
    iconfont() {
      if (this.icon) {
        return this.icon;
      }
      const icon = {
        success: "iconzhengque".errer: "iconcuowu".warning: "iconinfo".loading: ""
      };
      return icon[this.type]; }}};</script>
Copy the code

3. Create instance Vue and render the view

//index.js

import Vue from "vue";
import Toast from "./index.vue";

let install;

function newInstall(options) {
    install = new Vue({
        data() {
            return options;
        },
        render(h) {
            return h(Toast, {
                props: {
                    value: this.value,
                    context: this.context,
                    type: this.type,
                    icon: this.icon,
                    mask: this.mask
                }
            })
        }
    })
    if (window) {
        document.body.appendChild(install.$mount().$el)
    }
}
Copy the code

Tip: configuring JSX to write the render function in the render function is more enjoyable

4. Add call view methods

// index.js

let timer;

function init(options, type) {
    const params = {
        value: undefined.context: undefined.type: undefined.duration: 3000.icon: undefined.mask: undefined.clear: (a)= >{}}if(! install) { newInstall(params) }Object.assign(install, params, options, { value: true.context: options.context ? options.context : options, type: type })
    if (install.duration > 0) {
        clearTimeout(timer);
        timer = setTimeout(function () {
            Object.assign(install, { value: false}) install.clear() }, install.duration); }}Copy the code

5. Finally update the code to expose the call method

//index.js

const type = ["success"."errer"."warning"]
const fnc = {
    name: 'G-Toast'.info: (options = {}) = > {
        init(options)
    },
    close: (a)= > {
        if (install) {
            Object.assign(install, { value: false })
            install.clear()
        }
    }
}
type.forEach(element= > {
    fnc[element] = (options = {}) = > {
        init(options, element)
    }
});

export default fnc
Copy the code

rendering

conclusion

Oneself level is limited, move brick not easy, inadequacy place asks for advice! A variety of business components after internal business polished, will be slowly sorted out and shared to you……