从零开始构建自己的vue组件库之——message篇

栏目: 编程语言 · 发布时间: 5年前

内容简介:接下来就可以愉快的使用了,具体的使用姿势如下至此一个message组件就愉快的实现了,可以满足大多数场景的需求,扩展性也是比较OK的,可是总觉得还缺点功能,路过的看官伸出无敌的小手指正一下可好?

第二篇:从零开始构建自己的vue组件库之————message组件

组件需求

  • message这种组件应该是按需加载的没差了,用的时候就不要写在页面里了,必须得是this.$message(config)这样子用的,姿势很优美[滑稽];
  • 顶部居中吧,既然人家各种框架也是顶部居中,咱也随大流啦,重在理解实现方式啦[再次滑稽];
  • 好了,具体需求是,用不同图标表示不同类型的message(有默认);时长自定义或默认;内容自定义;可关闭或不可关闭(或点击文字关闭);

PS:组件结构参考上一篇button组件

message.vue

<template lang="html">
  <transition name="message-fade">
    <div class="wui__message" :class="[prefixCls + '--' + type]" v-if="visible">
      <i  :class="[prefixCls + '__icon' + '--' + type,iconType]"></i>  
      <div :class="[prefixCls + '__content']">
        <span :class="[prefixCls + '__content' + '__body']" v-html="content"></span>
        <span v-if="closeTxt" @click="close()" :class="[prefixCls + '__closeTxt']">
          {{closeTxt}}
        </span>
        <span v-if="closable" :class="[prefixCls + '__iconbox']">
          <i class="icon-close" :class="[prefixCls + '__icon']"  @click="close()"></i>
        </span>
      </div>
    </div>
  </transition>
</template>

<script>
const prefixCls = 'wui__message';
export default {
  name:'Message',
  data(){
    return {
      prefixCls:prefixCls,
    }
  },
  mounted() {
    //do something after mounting vue instance
    if(this.closeTxt){
      this.closable = false
    }
  },
  methods: {
    close() {
      this.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
</style>

message 目录下的 index.js

import Vue from 'vue';
import Message from './src/message.vue';
const defaults = {
    visible:false,
    content:undefined,
    duration:'3',
    type:'info',
    closable:false,
    closeTxt:null,
    top:20,
    iconType:''
};
const typeMap = {
  "info":'icon-info',
  "error":'icon-heart-broken',
  "warning":'icon-stopwatch',
  "success":'icon-checkmark-outline'
}
const MessageVueConstructor = Vue.extend(Message);

MessageVueConstructor.prototype.close = function() {
  var vm=this;
  this.$on('after-leave', _ => {
    if (vm.$el && vm.$el.parentNode) {
      vm.$el.parentNode.removeChild(vm.$el);
    }
    this.$destroy();
  });
    vm.visible = false;

};
const messageBox = (options = {}) => {
    if (Vue.prototype.$isServer) return;
    options = Object.assign({}, defaults, options);
    let instance = new MessageVueConstructor({
      el: document.createElement('div'),
      data: options
    });
    if(!instance.type||!instance.content){return false}
    document.body.appendChild(instance.$el);
    Vue.nextTick(() => {
      instance.visible = true;
      instance.iconType = typeMap[instance.type]
      // if duration is 0 means can't close
      if(instance.duration!=0){
        setTimeout(function(){
          instance.close();
        },options.duration*1000)
      }
    });
    return instance;
  };

export default messageBox;

package下的index.js(继上篇增加)

import WButton from './button/index.js';
import WMessage from './message/index';
const components = [
  WButton,
  WMessage
]

const install = function(Vue) {
  if (install.installed) return
  components.map(component => Vue.component(component.name, component))
  Vue.prototype.$Message = WMessage;  //important
}

if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}

export default {
  install,
  WButton,
  WMessage,
}

接下来就可以愉快的使用了,具体的使用姿势如下

this.$Message({content:'this is info'})  
//不指定type默认为info
this.$Message({type:'info',content:'This is a closed message',closable:true})  
//这种情况就会有关闭的叉叉
this.$Message({type:'info',content:'this is 10-second message',duration:10})  
//时长10秒让message多待会
this.$Message({type:'info',content:'This is a message that can not be closed',duration:0}) 
//时长为0表示不想让消失
this.$Message({type:'info',content:'This is a custom closed text message',closeTxt:'朕知道了',duration:10})  
//自定义关闭文字也可以皮一下

至此一个message组件就愉快的实现了,可以满足大多数场景的需求,扩展性也是比较OK的,可是总觉得还缺点功能,路过的看官伸出无敌的小手指正一下可好?


以上所述就是小编给大家介绍的《从零开始构建自己的vue组件库之——message篇》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

后谷歌时代:大数据的衰落及区块链经济的崛起

后谷歌时代:大数据的衰落及区块链经济的崛起

乔治·吉尔德 / 现代出版社 / 2018-9-5 / 68

以大数据和机器智能为基础的谷歌时代(信息互联网时代)是一个令人敬畏的时代。但它即将终结。 《后谷歌时代》一书的作者乔治•吉尔德是一位颇具远见卓识的智者。他在技术和文化领域具有无与伦比的视野和见地。他向读者描述了谷歌所面临信任与安全危机,并勇敢地预测了即将到来的后谷歌时代。 谷歌用其惊人的“搜索和排序”能力吸引了整个世界。功能强大的搜索引擎,看似免费小应用,诸如视频、地图、电子邮箱等,让......一起来看看 《后谷歌时代:大数据的衰落及区块链经济的崛起》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

MD5 加密
MD5 加密

MD5 加密工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具