taro-ui-vue3/lib/message/index.js

Taro UI Rewritten in Vue 3.0

import {h, defineComponent, ref, reactive, onMounted, onUnmounted, nextTick, computed, mergeProps} from "vue";
import {View} from "@tarojs/components";
import Taro from "@tarojs/taro";
const AtMessage = defineComponent({
  name: "AtMessage",
  onHide() {
    Taro.eventCenter.off("atMessage");
  },
  onShow() {
    this.bindMessageListener();
  },
  setup(props, {attrs}) {
    const _timer = ref(null);
    const state = reactive({
      _isOpened: false,
      _message: "",
      _type: "info",
      _duration: 3e3
    });
    const rootClasses = computed(() => ({
      "at-message": true,
      "at-message--show": state._isOpened,
      "at-message--hidden": !state._isOpened,
      [`at-message--${state._type}`]: true
    }));
    function bindMessageListener() {
      Taro.eventCenter.on("atMessage", (options = {}) => {
        const {message, type, duration} = options;
        const newState = {
          _isOpened: true,
          _message: message,
          _type: type,
          _duration: duration || state._duration
        };
        Object.assign(state, newState);
        nextTick(() => {
          clearTimeout(_timer.value);
          _timer.value = setTimeout(() => {
            state._isOpened = false;
          }, state._duration);
        });
      });
      Taro.atMessage = Taro.eventCenter.trigger.bind(Taro.eventCenter, "atMessage");
    }
    onMounted(() => {
      bindMessageListener();
    });
    onUnmounted(() => {
      Taro.eventCenter.off("atMessage");
    });
    return () => h(View, mergeProps(attrs, {
      class: rootClasses.value
    }), {default: () => state._message});
  }
});
var message_default = AtMessage;
export {
  message_default as default
};