@tdesign/uniapp 0.0.1-alpha.1 → 0.7.0

package/dist/message/index.js

@@ -0,0 +1,39 @@
+import { MessageType } from './message.interface';
+import { getInstance } from '../common/utils';
+
+
+const showMessage = function (options, theme = MessageType.info) {
+  const { context, selector = '#t-message', ...otherOptions } = options;
+  const instance = getInstance(context, selector);
+  if (typeof otherOptions.single !== 'boolean') {
+    otherOptions.single = true;
+  }
+  if (instance) {
+    instance.setMessage(otherOptions, theme);
+    return instance;
+  }
+  console.error('未找到组件,请确认 selector && context 是否正确');
+};
+
+export default {
+  info(options) {
+    return showMessage(options, MessageType.info);
+  },
+  success(options) {
+    return showMessage(options, MessageType.success);
+  },
+  warning(options) {
+    return showMessage(options, MessageType.warning);
+  },
+  error(options) {
+    return showMessage(options, MessageType.error);
+  },
+  hide(options) {
+    const { context, selector = '#t-message' } = { ...options };
+    const instance = getInstance(context, selector);
+    if (!instance) {
+      return;
+    }
+    instance.hide();
+  },
+};

package/dist/message/message.interface.ts

@@ -0,0 +1,30 @@
+
+export const MessageType = {
+  info: 'info',
+  success: 'success',
+  warning: 'warning',
+  error: 'error',
+};
+
+export interface MessageMarquee {
+  speed?: number;
+  loop?: number;
+  delay?: number;
+}
+export interface MessageProps {
+  visible?: boolean;
+  content: string;
+  align?: string;
+  theme?: keyof typeof MessageType;
+  icon?: boolean | string;
+  link?: string | object;
+  closeBtn?: boolean;
+  action?: string;
+  marquee?: MessageMarquee;
+  offset?: object;
+  duration?: number;
+  zIndex?: number;
+  id?: string;
+  gap?: string | number;
+  single?: boolean;
+}

package/dist/message/message.vue

@@ -0,0 +1,275 @@
+<template>
+  <view>
+    <TMessageItem
+      v-for="(item) in messageList"
+      :key="item.id"
+      :ref="item.id"
+      @close-btn-click="handleClose($event, { tagId: item.id })"
+      @link-click="handleLinkClick($event, { tagId: item.id })"
+      @duration-end="handleDurationEnd($event, { tagId: item.id })"
+    >
+      <template #icon>
+        <slot
+          name="icon"
+        />
+      </template>
+      <template #content>
+        <slot
+          name="content"
+        />
+      </template>
+      <slot />
+      <template #link>
+        <slot
+          name="link"
+        />
+      </template>
+      <template #close-btn>
+        <slot
+          name="close-btn"
+        />
+      </template>
+    </TMessageItem>
+  </view>
+</template>
+
+<script>
+import TMessageItem from '../message-item/message-item.vue';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import { MessageType } from './message.interface';
+import props from './props';
+import { unitConvert } from '../common/utils';
+
+
+const SHOW_DURATION = 400;
+const name = `${prefix}-message`;
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    TMessageItem,
+  },
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      messageList: [],
+      instances: [],
+      index: 0,
+    };
+  },
+  watch: {
+    visible: {
+      handler(value) {
+        if (value) {
+          const data = Object.keys(props).reduce((acc, key) => ({
+            ...acc,
+            [key]: this[key],
+          }), {});
+
+          this.setMessage(data, this.theme);
+        } else {
+          this.messageList = [];
+        }
+      },
+      immediate: true,
+    },
+  },
+
+  pageLifetimes: {
+    show() {
+      this.hideAll();
+    },
+  },
+
+  mounted() {
+  },
+
+  methods: {
+    /**
+   * 设置消息信息
+   * @param msg
+   * @param theme
+   */
+    setMessage(msg, theme = MessageType.info) {
+      let id = `${name}_${this.index}`;
+      if (msg.single) {
+        // 不能与外层的 ref 相同，否则抖音小程序报错
+        id = `${name}_inner`;
+      }
+      const gap = unitConvert(msg.gap || this.gap);
+      const msgObj = {
+        ...msg,
+        theme,
+        id,
+        gap,
+      };
+      const instanceIndex = this.instances.findIndex(x => x.id === id);
+      if (instanceIndex < 0) {
+        this.addMessage(msgObj);
+      } else {
+      // 更新消息
+        const instance = this.instances[instanceIndex];
+        const offsetHeight = this.getOffsetHeight(instanceIndex);
+        instance.resetData(() => {
+          Object.keys(msgObj).forEach((key) => {
+            instance[key] = msgObj[key];
+          });
+          setTimeout(() => {
+            instance.show.call(instance, offsetHeight);
+          });
+          instance.onHide = () => {
+            this.close(id);
+          };
+        });
+      }
+    },
+
+    /**
+   * 新增消息
+   * @param msgObj
+   */
+    addMessage(msgObj) {
+      const list = [...this.messageList, { id: msgObj.id }];
+      this.messageList = list;
+
+      setTimeout(() => {
+        const offsetHeight = this.getOffsetHeight();
+        const instance = this.showMessageItem(msgObj, msgObj.id, offsetHeight);
+        if (this.instances) {
+          this.instances.push(instance);
+          this.index += 1;
+        }
+      }, 33);
+    },
+
+    /**
+   * 获取消息显示top偏移距离
+   * @param index
+   * @returns
+   */
+    getOffsetHeight(index = -1) {
+      let offsetHeight = 0;
+      let len = index;
+      if (len === -1 || len > this.instances.length) {
+        len = this.instances.length;
+      }
+      for (let i = 0; i < len; i += 1) {
+        const instance = this.instances[i];
+        offsetHeight += instance.height + instance.gap;
+      }
+      return offsetHeight;
+    },
+
+    /**
+   * 新增消息显示
+   * @param options
+   * @param id
+   * @param offsetHeight
+   * @returns
+   */
+    showMessageItem(options, id, offsetHeight) {
+      let instance = this.$refs[`${id}`];
+      if (Array.isArray(instance)) {
+        instance = instance[0];
+      }
+
+      if (instance) {
+        instance.resetData(() => {
+          Object.keys(options).forEach((key) => {
+            instance[key] = options[key];
+          });
+          setTimeout(() => {
+            instance.show.call(instance, offsetHeight);
+          });
+          instance.onHide = () => {
+            this.close(id);
+          };
+        });
+
+        return instance;
+      }
+      console.error('未找到组件,请确认 selector && context 是否正确');
+    },
+
+    close(id) {
+      setTimeout(() => {
+        this.removeMsg(id);
+      }, SHOW_DURATION);
+      this.removeInstance(id);
+    },
+
+    /**
+   * 移除指定消息，id为空则删除全部消息
+   * @param id
+   */
+    hide(id) {
+      if (!id) {
+        this.hideAll();
+      }
+      const instance = this.instances.find(x => x.id === id);
+      if (instance) {
+        instance.hide();
+      }
+    },
+
+    /**
+   * 移除全部消息
+   */
+    hideAll() {
+    // 消息移除后也会移除instance，下标不用增加，直至全部删除
+      for (let i = 0; i < this.instances.length;) {
+        const instance = this.instances[i];
+        instance.hide();
+      }
+    },
+
+    /**
+   * 移除message实例
+   */
+    removeInstance(id) {
+      const index = this.instances.findIndex(x => x.id === id);
+      if (index < 0) return;
+      const instance = this.instances[index];
+      const removedHeight = instance.height;
+      this.instances.splice(index, 1);
+      for (let i = index; i < this.instances.length; i += 1) {
+        const instance = this.instances[i];
+        instance.wrapTop = instance.wrapTop - removedHeight - instance.gap;
+      }
+    },
+
+    /**
+   * 移除页面元素
+   * @param id
+   */
+    removeMsg(id) {
+      this.messageList = this.messageList.filter(item => item.id !== id);
+      // #ifdef VUE2
+      this.$set(this, 'messageList', this.messageList);
+      // #endif
+    },
+
+    handleClose(e) {
+      this.$emit('close-btn-click', { e });
+    },
+
+    handleLinkClick(e) {
+      this.$emit('link-click', { e });
+    },
+
+    handleDurationEnd(e) {
+      this.$emit('duration-end', { e });
+    },
+  },
+});
+</script>
+<style scoped>
+</style>

package/dist/message/props.ts

@@ -0,0 +1,101 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdMessageProps } from './type';
+export default {
+  /** 文本对齐方式 */
+  align: {
+    type: String,
+    default: 'left' as TdMessageProps['align'],
+    validator(val: TdMessageProps['align']): boolean {
+      if (!val) return true;
+      return ['left', 'center'].includes(val);
+    },
+  },
+  /** 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string ，如：'user'，则显示组件内置图标。值类型为 object ，则会透传至 icon 组件 */
+  closeBtn: {
+    type: [String, Boolean, Object],
+    default: false as TdMessageProps['closeBtn'],
+  },
+  /** 用于自定义消息弹出内容 */
+  content: {
+    type: String,
+  },
+  /** 消息内置计时器，计时到达时会触发 duration-end 事件。单位：毫秒。值为 0 则表示没有计时器 */
+  duration: {
+    type: Number,
+    default: 3000,
+  },
+  /** 两条 `message` 之间的间距 */
+  gap: {
+    type: [String, Number, Boolean],
+    default: 12 as TdMessageProps['gap'],
+  },
+  /** 消息提醒前面的图标，可以自定义。值为 true 则根据 theme 显示对应的图标，值为 false 则不显示图标。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string ，如：'info'，则显示组件内置图标。值类型为 object ，则会透传至 icon 组件 */
+  icon: {
+    type: [String, Boolean, Object],
+    default: true as TdMessageProps['icon'],
+  },
+  /** 链接名称。值为字符串表示链接名称，值为 `Object` 类型，表示透传至 `Link` */
+  link: {
+    type: [String, Object],
+  },
+  /** 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放 */
+  marquee: {
+    type: [Boolean, Object],
+    default: false as TdMessageProps['marquee'],
+  },
+  /** 相对于 placement 的偏移量，默认单位 rpx。示例：[-10, 20] 或 ['10rpx', '8rpx'] */
+  offset: {
+    type: Array,
+  },
+  /** 是否保持仅显示一条信息 */
+  single: {
+    type: Boolean,
+    default: true,
+  },
+  /** 消息组件风格 */
+  theme: {
+    type: String,
+    default: 'info' as TdMessageProps['theme'],
+    validator(val: TdMessageProps['theme']): boolean {
+      if (!val) return true;
+      return ['info', 'success', 'warning', 'error'].includes(val);
+    },
+  },
+  /** 是否显示，隐藏时默认销毁组件 */
+  visible: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** 是否显示，隐藏时默认销毁组件，非受控属性 */
+  defaultVisible: Boolean,
+  /** 元素层级，样式默认为 15000 */
+  zIndex: {
+    type: Number,
+    default: 15000,
+  },
+  /** 已废弃。当操作按钮存在时，用户点击操作按钮时触发 */
+  onActionBtnClick: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 当关闭按钮存在时，用户点击关闭按钮触发 */
+  onCloseBtnClick: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 计时结束后触发 */
+  onDurationEnd: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 当`link`链接存在时，点击链接文本时触发 */
+  onLinkClick: {
+    type: Function,
+    default: () => ({}),
+  },
+};

package/dist/message/type.ts

@@ -0,0 +1,101 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdMessageProps {
+  /**
+   * 文本对齐方式
+   * @default left
+   */
+  align?: MessageAlignType;
+  /**
+   * 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string ，如：'user'，则显示组件内置图标。值类型为 object ，则会透传至 icon 组件
+   * @default false
+   */
+  closeBtn?: string | boolean | object;
+  /**
+   * 用于自定义消息弹出内容
+   */
+  content?: string;
+  /**
+   * 消息内置计时器，计时到达时会触发 duration-end 事件。单位：毫秒。值为 0 则表示没有计时器
+   * @default 3000
+   */
+  duration?: number;
+  /**
+   * 两条 `message` 之间的间距
+   * @default 12
+   */
+  gap?: string | number | boolean;
+  /**
+   * 消息提醒前面的图标，可以自定义。值为 true 则根据 theme 显示对应的图标，值为 false 则不显示图标。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string ，如：'info'，则显示组件内置图标。值类型为 object ，则会透传至 icon 组件
+   * @default true
+   */
+  icon?: string | boolean | object;
+  /**
+   * 链接名称。值为字符串表示链接名称，值为 `Object` 类型，表示透传至 `Link`
+   */
+  link?: string | object;
+  /**
+   * 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放
+   * @default false
+   */
+  marquee?: boolean | MessageMarquee;
+  /**
+   * 相对于 placement 的偏移量，默认单位 rpx。示例：[-10, 20] 或 ['10rpx', '8rpx']
+   */
+  offset?: Array<string | number>;
+  /**
+   * 是否保持仅显示一条信息
+   * @default true
+   */
+  single?: boolean;
+  /**
+   * 消息组件风格
+   * @default info
+   */
+  theme?: MessageThemeList;
+  /**
+   * 是否显示，隐藏时默认销毁组件
+   * @default false
+   */
+  visible?: boolean;
+  /**
+   * 是否显示，隐藏时默认销毁组件，非受控属性
+   * @default false
+   */
+  defaultVisible?: boolean;
+  /**
+   * 元素层级，样式默认为 15000
+   * @default 15000
+   */
+  zIndex?: number;
+  /**
+   * 已废弃。当操作按钮存在时，用户点击操作按钮时触发
+   */
+  onActionBtnClick?: (context: { e: MouseEvent }) => void;
+  /**
+   * 当关闭按钮存在时，用户点击关闭按钮触发
+   */
+  onCloseBtnClick?: (context: { e: MouseEvent }) => void;
+  /**
+   * 计时结束后触发
+   */
+  onDurationEnd?: () => void;
+  /**
+   * 当`link`链接存在时，点击链接文本时触发
+   */
+  onLinkClick?: (context: { e: MouseEvent }) => void;
+}
+
+export type MessageAlignType = 'left' | 'center';
+
+export interface MessageMarquee {
+  speed?: number;
+  loop?: number;
+  delay?: number;
+}
+
+export type MessageThemeList = 'info' | 'success' | 'warning' | 'error';

package/dist/message-item/computed.js

@@ -0,0 +1,23 @@
+export const isEmptyObj = function (obj) {
+  return JSON.stringify(obj) === '{}';
+};
+
+const changeNumToStr = function (arr) {
+  return arr.map(item => (typeof item === 'number' ? `${item}rpx` : item));
+};
+
+export const getMessageStyles = function (zIndex, offset, wrapTop) {
+  const arr = changeNumToStr(offset || [0, 0]);
+  const left = arr[1] || 0;
+  const right = arr[1] || 0;
+
+  const zIndexStyle = zIndex ? `z-index:${zIndex};` : '';
+  let styleOffset = '';
+
+  styleOffset += `top:${wrapTop}px;`;
+  styleOffset += `left:${left};`;
+  styleOffset += `right:${right};`;
+
+  return zIndexStyle + styleOffset;
+};
+

package/dist/message-item/index.js

@@ -0,0 +1,40 @@
+import { MessageType } from '../message/message.interface';
+import { getInstance } from '../common/utils';
+
+
+const showMessage = function (options, theme = MessageType.info) {
+  const { context, selector = '#t-message', ...otherOptions } = options;
+  const instance = getInstance(context, selector);
+
+  if (instance) {
+    instance.resetData(() => {
+      instance.setData({ theme, ...otherOptions }, instance.show.bind(instance));
+    });
+
+    return instance;
+  }
+  console.error('未找到组件,请确认 selector && context 是否正确');
+};
+
+export default {
+  info(options) {
+    return showMessage(options, MessageType.info);
+  },
+  success(options) {
+    return showMessage(options, MessageType.success);
+  },
+  warning(options) {
+    return showMessage(options, MessageType.warning);
+  },
+  error(options) {
+    return showMessage(options, MessageType.error);
+  },
+  hide(options) {
+    const { context, selector = '#t-message' } = { ...options };
+    const instance = getInstance(context, selector);
+    if (!instance) {
+      return;
+    }
+    instance.hide();
+  },
+};

package/dist/message-item/message-item.css

@@ -0,0 +1,63 @@
+.t-message {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  transition: opacity 0.3s, transform 0.4s, top 0.4s;
+  display: flex;
+  justify-content: flex-start;
+  height: 96rpx;
+  align-items: center;
+  z-index: 15000;
+  padding: 0 32rpx;
+  box-sizing: border-box;
+  border-radius: var(--td-message-border-radius, var(--td-radius-default, 12rpx));
+  line-height: 1;
+  background-color: var(--td-message-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
+  box-shadow: var(--td-message-box-shadow, var(--td-shadow-1, 0 1px 10px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.12)));
+}
+.t-message__text {
+  display: inline-block;
+  color: var(--td-message-content-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
+  font: var(--td-font-body-medium, 28rpx / 44rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular));
+}
+.t-message__text-wrap {
+  flex: 1 1 auto;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+}
+.t-message__text-nowrap {
+  word-break: keep-all;
+  white-space: nowrap;
+}
+.t-message--info {
+  color: var(--td-message-info-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+}
+.t-message--success {
+  color: var(--td-message-success-color, var(--td-success-color, var(--td-success-color-5, #2ba471)));
+}
+.t-message--warning {
+  color: var(--td-message-warning-color, var(--td-warning-color, var(--td-warning-color-5, #e37318)));
+}
+.t-message--error {
+  color: var(--td-message-error-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
+}
+.t-message__icon--left,
+.t-message__icon--right {
+  font-size: 44rpx;
+}
+.t-message__icon--left:not(:empty) {
+  margin-right: var(--td-spacer, 16rpx);
+}
+.t-message__icon--right {
+  color: var(--td-message-close-icon-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
+}
+.t-message__icon--right:not(:empty),
+.t-message__link {
+  flex: 0 0 auto;
+  margin-left: var(--td-spacer, 16rpx);
+}
+.t-message__fade {
+  opacity: 0;
+  transform: translateY(-100%);
+}