初始化项目, 添加TDesign等包

miniprogram/miniprogram_npm/tdesign-miniprogram/message-item/index.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="miniprogram-api-typings" />
+/// <reference types="miniprogram-api-typings" />
+/// <reference types="miniprogram-api-typings" />
+import { MessageProps } from '../message/message.interface';
+declare type Context = WechatMiniprogram.Page.TrivialInstance | WechatMiniprogram.Component.TrivialInstance;
+interface MessageActionOptionsType extends Optional<MessageProps> {
+    context?: Context;
+    selector?: string;
+}
+declare const _default: {
+    info(options: MessageActionOptionsType): WechatMiniprogram.Component.TrivialInstance;
+    success(options: MessageActionOptionsType): WechatMiniprogram.Component.TrivialInstance;
+    warning(options: MessageActionOptionsType): WechatMiniprogram.Component.TrivialInstance;
+    error(options: MessageActionOptionsType): WechatMiniprogram.Component.TrivialInstance;
+    hide(options: MessageActionOptionsType): void;
+};
+export default _default;

miniprogram/miniprogram_npm/tdesign-miniprogram/message-item/index.js

@@ -0,0 +1 @@
+import{__rest}from"tslib";import{MessageType}from"../message/message.interface";import{getInstance}from"../common/utils";const showMessage=function(e,s=MessageType.info){const{context:t,selector:o="#t-message"}=e,n=__rest(e,["context","selector"]),a=getInstance(t,o);if(a)return a.resetData(()=>{a.setData(Object.assign({theme:s},n),a.show.bind(a))}),a;console.error("未找到组件,请确认 selector && context 是否正确")};export default{info:e=>showMessage(e,MessageType.info),success:e=>showMessage(e,MessageType.success),warning:e=>showMessage(e,MessageType.warning),error:e=>showMessage(e,MessageType.error),hide(e){const{context:s,selector:t="#t-message"}=Object.assign({},e),o=getInstance(s,t);o&&o.hide()}};

miniprogram/miniprogram_npm/tdesign-miniprogram/message-item/message-item.d.ts

@@ -0,0 +1,39 @@
+/// <reference types="miniprogram-api-typings" />
+import { SuperComponent, ComponentsOptionsType } from '../common/src/index';
+import { MessageProps } from '../message/message.interface';
+export default class Message extends SuperComponent {
+    externalClasses: string[];
+    options: ComponentsOptionsType;
+    properties: MessageProps;
+    data: {
+        prefix: string;
+        classPrefix: string;
+        loop: number;
+        animation: any[];
+        showAnimation: any[];
+        wrapTop: number;
+        fadeClass: string;
+    };
+    closeTimeoutContext: number;
+    nextAnimationContext: number;
+    resetAnimation: WechatMiniprogram.Animation;
+    observers: {
+        marquee(val: any): void;
+        'icon, theme'(icon: any, theme: any): void;
+        link(v: any): void;
+        closeBtn(v: any): void;
+    };
+    lifetimes: {
+        ready(): void;
+        detached(): void;
+    };
+    memoInitialData(): void;
+    resetData(cb: () => void): void;
+    checkAnimation(): void;
+    clearMessageAnimation(): void;
+    show(offsetHeight?: number): void;
+    hide(): void;
+    reset(): void;
+    handleClose(): void;
+    handleLinkClick(): void;
+}

miniprogram/miniprogram_npm/tdesign-miniprogram/message-item/message-item.js

@@ -0,0 +1 @@
+import{__decorate}from"tslib";import{SuperComponent,wxComponent}from"../common/src/index";import config from"../common/config";import props from"../message/props";import{getRect,unitConvert,calcIcon}from"../common/utils";import{isObject}from"../common/validator";const{prefix:prefix}=config,name=`${prefix}-message`,SHOW_DURATION=500,THEME_ICON={info:"info-circle-filled",success:"check-circle-filled",warning:"error-circle-filled",error:"error-circle-filled"};let Message=class extends SuperComponent{constructor(){super(...arguments),this.externalClasses=[`${prefix}-class`,`${prefix}-class-content`,`${prefix}-class-icon`,`${prefix}-class-link`,`${prefix}-class-close-btn`],this.options={multipleSlots:!0},this.properties=Object.assign({},props),this.data={prefix:prefix,classPrefix:name,loop:-1,animation:[],showAnimation:[],wrapTop:-999,fadeClass:""},this.closeTimeoutContext=0,this.nextAnimationContext=0,this.resetAnimation=wx.createAnimation({duration:0,timingFunction:"linear"}),this.observers={marquee(t){"{}"!==JSON.stringify(t)&&"true"!==JSON.stringify(t)||this.setData({marquee:{speed:50,loop:-1,delay:0}})},"icon, theme"(t,e){this.setData({_icon:calcIcon(t,THEME_ICON[e])})},link(t){const e=isObject(t)?Object.assign({},t):{content:t};this.setData({_link:e})},closeBtn(t){this.setData({_closeBtn:calcIcon(t,"close")})}},this.lifetimes={ready(){this.memoInitialData()},detached(){this.clearMessageAnimation()}}}memoInitialData(){this.initialData=Object.assign(Object.assign({},this.properties),this.data)}resetData(t){this.setData(Object.assign({},this.initialData),t)}checkAnimation(){const{marquee:t}=this.properties;if(!t||0===t.loop)return;const e=t.speed;if(this.data.loop>0)this.data.loop-=1;else if(0===this.data.loop)return void this.setData({animation:this.resetAnimation.translateX(0).step().export()});this.nextAnimationContext&&this.clearMessageAnimation();const i=`#${name}__text-wrap`,s=`#${name}__text`;Promise.all([getRect(this,s),getRect(this,i)]).then(([t,i])=>{this.setData({animation:this.resetAnimation.translateX(i.width).step().export()},()=>{const s=(t.width+i.width)/e*1e3,a=wx.createAnimation({duration:s}).translateX(-t.width).step().export();setTimeout(()=>{this.nextAnimationContext=setTimeout(this.checkAnimation.bind(this),s),this.setData({animation:a})},20)})})}clearMessageAnimation(){clearTimeout(this.nextAnimationContext),this.nextAnimationContext=0}show(t=0){const{duration:e,marquee:i,offset:s,id:a}=this.properties;this.setData({visible:!0,loop:i.loop||this.data.loop,fadeClass:`${name}__fade`,wrapTop:unitConvert(s[0])+t}),this.reset(),this.checkAnimation(),e&&e>0&&(this.closeTimeoutContext=setTimeout(()=>{this.hide(),this.triggerEvent("duration-end",{self:this})},e));getRect(this,a?`#${a}`:`#${name}`).then(t=>{this.setData({height:t.height},()=>{this.setData({fadeClass:""})})})}hide(){this.reset(),this.setData({fadeClass:`${name}__fade`}),setTimeout(()=>{this.setData({visible:!1,animation:[]})},500),"function"==typeof this.onHide&&this.onHide()}reset(){this.nextAnimationContext&&this.clearMessageAnimation(),clearTimeout(this.closeTimeoutContext),this.closeTimeoutContext=0}handleClose(){this.hide(),this.triggerEvent("close-btn-click")}handleLinkClick(){this.triggerEvent("link-click")}};Message=__decorate([wxComponent()],Message);export default Message;

miniprogram/miniprogram_npm/tdesign-miniprogram/message-item/message-item.json

@@ -0,0 +1 @@
+{"component":true,"styleIsolation":"apply-shared","usingComponents":{"t-icon":"../icon/icon","t-link":"../link/link"}}

miniprogram/miniprogram_npm/tdesign-miniprogram/message-item/message-item.wxml

@@ -0,0 +1 @@
+<wxs src="./message-item.wxs" module="_this"></wxs><wxs src="../common/utils.wxs" module="_"/><import src="../common/template/icon.wxml"/><block wx:if="{{visible}}"><view class="{{classPrefix}} class {{prefix}}-class {{classPrefix}}--{{theme}} {{fadeClass}}" style="{{_._style([_this.getMessageStyles(zIndex, offset, wrapTop), style, customStyle])}}" animation="{{showAnimation}}" id="{{id || classPrefix}}" aria-role="alert"><view class="{{classPrefix}}__icon--left"><slot name="icon"/><template wx:if="{{_icon}}" is="icon" data="{{tClass: prefix + '-class-icon', ariaHidden: true, ..._icon }}"/></view><view class="{{classPrefix}}__text-wrap {{marquee ? classPrefix + '__text-nowrap' : ''}}" style="text-align: {{align}}" id="{{classPrefix}}__text-wrap"><view class="{{classPrefix}}__text {{prefix}}-class-content" id="{{classPrefix}}__text" animation="{{animation}}"><block wx:if="{{content}}">{{content}}</block><slot name="content"/><slot/></view></view><t-link wx:if="{{_link && _link.content}}" class="{{classPrefix}}__link {{prefix}}-class-link" style="{{_._style([_link.style, _link.customStyle])}}" disabled="{{_link.disabled || false}}" hover="{{_link.hover || true}}" theme="{{_link.theme || 'primary'}}" size="{{_link.size || 'medium'}}" prefixIcon="{{_link.prefixIcon || false}}" suffixIcon="{{_link.suffixIcon || false}}" underline="{{_link.underline || false}}" content="{{_link.content || ''}}" navigatorProps="{{_link.navigatorProps || null}}" bind:complete="handleLinkClick"/><slot name="link"/><view class="{{classPrefix}}__icon--right" bind:tap="handleClose"><slot name="close-btn"/><template wx:if="{{_closeBtn}}" is="icon" data="{{tClass: prefix + '-class-close-btn', ariaRole: 'button', ariaLabel: '关闭', ..._closeBtn }}"/></view></view></block>

miniprogram/miniprogram_npm/tdesign-miniprogram/message-item/message-item.wxs

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

miniprogram/miniprogram_npm/tdesign-miniprogram/message-item/message-item.wxss

@@ -0,0 +1,13 @@
+@import '../common/style/index.wxss';.t-message{position:fixed;top:0;left:0;right:0;transition:opacity .3s,transform .4s,top .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,#fff)));box-shadow:var(--td-message-box-shadow,var(--td-shadow-1,0 1px 10px rgba(0,0,0,.05),0 4px 5px rgba(0,0,0,.08),0 2px 4px -1px rgba(0,0,0,.12)));}
+.t-message__text{display:inline-block;color:var(--td-message-content-font-color,var(--td-text-color-primary,var(--td-font-gray-1,rgba(0,0,0,.9))));font-size:var(--td-font-size-base,28rpx);line-height:44rpx;}
+.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,.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%);}