前端组件设计模板之小程序message消息通知

用于轻量级反馈或提示，不会打断用户操作。（组件描述）

何时使用

当需要对用户进行较轻量的反馈或提示，可以自动消失或通过点击关闭，通常由用户触发。

场景收集

提示场景	提醒UI	功能点	文案/逻辑
截图提示		类型图标+文本、自定义消失时间	content："xxx"、消失时间：3s
其他场景

业务逻辑：

这里可以写上你的业务逻辑

组件设计

xmind设计组件字段，可以定义类型

流程图

可以画一个流程图简单描述一下调用方法会执行哪些逻辑，组件内会有哪些方法、变量等

• 父级组件引入组件
• 在需要使用的地方，调用组件方法，显示提示/关闭提示
• 调用show方法，会执行组件内部的add方法，添加到messageList数组中
• 添加的逻辑
• 添加后，会调用内部showMessage方法，设置组件visible为true，显示组件
• 同时，setTimeout执行延迟后消失逻辑
• 这样大致描述就可以

组件部分方法

可以结合部分的实验代码表明可行性

message/func

// 获取到引入的message组件实例，调用show方法可直接渲染组件
const getInstance = function (callback, selector?: string) {
  const pages = getCurrentPages();
  const page: any = pages[pages.length - 1];
  const context = page.$$basePage || page;
  const instance = context ? context.selectComponent(selector || '#wx-message') : undefined;
  if (instance) {
    callback(instance);
    return instance;
  }
  console.error('未找到组件,请确认 selector && context 是否正确');
};

export default {
  show(options) {
    // 如果是使用了uniapp，需要用$vm，否则，可以不用.$vm
    return getInstance((instance) => instance.$vm.setMessage?.(options));
  },
  destroy() {
    return getInstance((instance) => instance.$vm.destroyMessage?.());
  },
  close() {
    return getInstance((instance) => instance.$vm.hideMessage?.());
  }
};

message/index

import { Vue, Component, Prop } from 'vue-property-decorator';
import {ICurrentMessage, MessageType} from './types';

@Component
export default class MediaVideo extends Vue {
  @Prop({ default: '' }) url;

  visible = false;
  messageList = []; // 消息列表
  closeTimeout = 0; // 延时关闭句柄 
  currentMessage: ICurrentMessage = {
    type: MessageType.info,
    content: '',
    duration: 3000,
    icon: '',
    zIndex: 1500,
    className: ''
  };

  /**
   * 设置，外部调用
   */
  setMessage(data) {
    this.addMessage(data);
  }

  /**
   * 添加消息队列
   * @param options 
   */
  addMessage(options) {
    this.messageList.push(options);
    this.showMessageItem(this.messageList[0]);
  }

  /**
   * 展示消息
   * @param item 
   */
  showMessageItem(item) {
    this.visible = true;
    this.currentMessage = {...this.currentMessage, ...item};
    if(this.currentMessage.duration > 0) {
      this.closeTimeout = setTimeout(() => {
        this.hideMessage();
      }, this.currentMessage.duration);
    }
  }

  /**
   * 关闭消息
   */
  hideMessage() {
    this.visible = false;
    this.closeTimeout && clearTimeout(this.closeTimeout);
  }

  /**
   * 销毁消息，清空队列
   */
  destroyMessage() {
    this.messageList = [];
    this.hideMessage();
  }

  beforeDestroy() {
    this.destroyMessage();
  }

}

代码演示

页面组件，引入Message

import Message from '@/message'

@Component({
  components: {
    Message,
  }
})

<message id="wx-message"/>

使用组件

import message from '@/message/func';

message.show({
    type: 'info',
    content: '这是内容',
    duration: 2000,
    onClose: () => {...}
})

API

名称	类型	默认值	说明	是否必传
type	MessageType: info	normal	info	N
content	String / Slot	-	用于自定义消息弹出内容	Y
duration	number	3000	自动关闭的延时，单位秒。设置0不自动关闭	N
其他的字段名称...

全局方法

提供销毁方法

• message.destroy()
• message.close(key)

参考组件：tdesign.tencent.com/miniprogram…

组件代码：github.com/Tencent/tde…