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

Taro UI Rewritten in Vue 3.0

import Taro from '@tarojs/taro';
import { defineComponent, ref, reactive, computed, onMounted, onUnmounted, toRef, nextTick, toDisplayString, createTextVNode, resolveComponent, mergeProps, withCtx, openBlock, createBlock } from 'vue';

const AtMessage = defineComponent({
  name: "AtMessage",
  onHide() {
    Taro.eventCenter.off("atMessage");
  },
  onShow() {
    this.bindMessageListener();
  },
  setup() {
    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 {
      message: toRef(state, "_message"),
      rootClasses,
      bindMessageListener
    };
  }
});

// Binding optimization for webpack code-split
const _toDisplayString = toDisplayString, _createTextVNode = createTextVNode, _resolveComponent = resolveComponent, _mergeProps = mergeProps, _withCtx = withCtx, _openBlock = openBlock, _createBlock = createBlock;

function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_taro_view = process.env.TARO_ENV === "h5" ? _resolveComponent("taro-view") : "view";

  return (_openBlock(), _createBlock(_component_taro_view, _mergeProps(_ctx.$attrs, { class: _ctx.rootClasses }), {
    default: _withCtx(() => [
      _createTextVNode(_toDisplayString(_ctx.message), 1 /* TEXT */)
    ]),
    _: 1 /* STABLE */
  }, 16 /* FULL_PROPS */, ["class"]))
}


AtMessage.render = _sfc_render;

export default AtMessage;