初始化项目, 添加TDesign等包

miniprogram/miniprogram_npm/tdesign-miniprogram/notice-bar/notice-bar.d.ts

@@ -0,0 +1,36 @@
+import { SuperComponent, ComponentsOptionsType } from '../common/src/index';
+export default class NoticeBar extends SuperComponent {
+    externalClasses: string[];
+    options: ComponentsOptionsType;
+    properties: import("./type").TdNoticeBarProps;
+    data: {
+        prefix: string;
+        classPrefix: string;
+        loop: number;
+        __ready: boolean;
+    };
+    observers: {
+        marquee(val: any): void;
+        visible(visible: any): void;
+        prefixIcon(prefixIcon: any): void;
+        suffixIcon(v: any): void;
+        content(): void;
+    };
+    lifetimes: {
+        created(): void;
+        detached(): void;
+        ready(): void;
+    };
+    methods: {
+        initAnimation(): void;
+        startScrollAnimation(isFirstScroll?: boolean): void;
+        show(): void;
+        clearNoticeBarAnimation(): void;
+        setPrefixIcon(v: any): void;
+        onChange(e: WechatMiniprogram.SwiperChange): void;
+        clickPrefixIcon(): void;
+        clickContent(): void;
+        clickSuffixIcon(): void;
+        clickOperation(): void;
+    };
+}

miniprogram/miniprogram_npm/tdesign-miniprogram/notice-bar/notice-bar.js

@@ -0,0 +1 @@
+import{__decorate}from"tslib";import{SuperComponent,wxComponent}from"../common/src/index";import{getRect,getAnimationFrame,calcIcon}from"../common/utils";import props from"./props";import config from"../common/config";const{prefix:prefix}=config,name=`${prefix}-notice-bar`,THEME_ICON={info:"info-circle-filled",success:"check-circle-filled",warning:"error-circle-filled",error:"error-circle-filled"};let NoticeBar=class extends SuperComponent{constructor(){super(...arguments),this.externalClasses=[`${prefix}-class`,`${prefix}-class-content`,`${prefix}-class-prefix-icon`,`${prefix}-class-operation`,`${prefix}-class-suffix-icon`],this.options={multipleSlots:!0,pureDataPattern:/^__/},this.properties=props,this.data={prefix:prefix,classPrefix:name,loop:-1,__ready:!1},this.observers={marquee(t){"{}"!==JSON.stringify(t)&&"true"!==JSON.stringify(t)||this.setData({marquee:{speed:50,loop:-1,delay:0}})},visible(t){this.data.__ready&&(t?this.show():this.clearNoticeBarAnimation())},prefixIcon(t){this.setPrefixIcon(t)},suffixIcon(t){this.setData({_suffixIcon:calcIcon(t)})},content(){this.data.__ready&&(this.clearNoticeBarAnimation(),this.initAnimation())}},this.lifetimes={created(){this.resetAnimation=wx.createAnimation({duration:0,timingFunction:"linear"})},detached(){this.clearNoticeBarAnimation()},ready(){this.show(),this.setData({__ready:!0})}},this.methods={initAnimation(){const t=`.${name}__content-wrap`,i=`.${name}__content`;getAnimationFrame(this,()=>{Promise.all([getRect(this,i),getRect(this,t)]).then(([t,i])=>{const{marquee:e}=this.properties;if(null!=t&&null!=i&&t.width&&i.width&&!1!==e&&(e||i.width<t.width)){const n=e.speed||50,o=e.delay||0,a=(i.width+t.width)/n*1e3,r=t.width/n*1e3;this.setData({wrapWidth:Number(i.width),nodeWidth:Number(t.width),animationDuration:a,delay:o,loop:e.loop-1,firstAnimationDuration:r}),0!==e.loop&&this.startScrollAnimation(!0)}}).catch(()=>{})})},startScrollAnimation(t=!1){this.clearNoticeBarAnimation();const{wrapWidth:i,nodeWidth:e,firstAnimationDuration:n,animationDuration:o,delay:a}=this.data,r=t?a:0,s=t?n:o;this.setData({animationData:this.resetAnimation.translateX(t?0:i).step().export()}),getAnimationFrame(this,()=>{this.setData({animationData:wx.createAnimation({duration:s,timingFunction:"linear",delay:r}).translateX(-e).step().export()})}),this.nextAnimationContext=setTimeout(()=>{this.data.loop>0?(this.data.loop-=1,this.startScrollAnimation()):0===this.data.loop?this.setData({animationData:this.resetAnimation.translateX(0).step().export()}):this.data.loop<0&&this.startScrollAnimation()},s+r)},show(){this.clearNoticeBarAnimation(),this.setPrefixIcon(this.properties.prefixIcon),this.initAnimation()},clearNoticeBarAnimation(){this.nextAnimationContext&&clearTimeout(this.nextAnimationContext),this.nextAnimationContext=null},setPrefixIcon(t){const{theme:i}=this.properties;this.setData({_prefixIcon:calcIcon(t,THEME_ICON[i])})},onChange(t){const{current:i,source:e}=t.detail;this.triggerEvent("change",{current:i,source:e})},clickPrefixIcon(){this.triggerEvent("click",{trigger:"prefix-icon"})},clickContent(){this.triggerEvent("click",{trigger:"content"})},clickSuffixIcon(){this.triggerEvent("click",{trigger:"suffix-icon"})},clickOperation(){this.triggerEvent("click",{trigger:"operation"})}}}};NoticeBar=__decorate([wxComponent()],NoticeBar);export default NoticeBar;

miniprogram/miniprogram_npm/tdesign-miniprogram/notice-bar/notice-bar.json

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

miniprogram/miniprogram_npm/tdesign-miniprogram/notice-bar/notice-bar.wxml

@@ -0,0 +1 @@
+<import src="../common/template/icon.wxml"/><wxs src="../common/utils.wxs" module="_"/><view wx:if="{{visible}}" style="{{_._style([style, customStyle])}}" class="{{classPrefix}} {{classPrefix}}--{{theme}} class {{prefix}}-class"><view class="{{classPrefix}}__prefix-icon" bind:tap="clickPrefixIcon"><slot name="prefix-icon"/><template wx:if="{{_prefixIcon}}" is="icon" data="{{tClass: prefix + '-class-prefix-icon', ..._prefixIcon }}"></template></view><view class="{{classPrefix}}__content-wrap" bind:tap="clickContent"><view wx:if="{{ direction === 'vertical' && _.isArray(content) }}"><swiper autoplay="true" vertical="true" circular="true" interval="{{interval}}" display-multiple-items="1" class="{{classPrefix}}__content {{classPrefix}}__content--vertical" bindchange="onChange"><block wx:for="{{content}}" wx:key="index"><swiper-item><view class="{{classPrefix}}__content--vertical-item">{{item}}</view></swiper-item></block></swiper></view><view wx:else class="{{classPrefix}}__content {{prefix}}-class-content {{ !marquee ? classPrefix + '__content-wrapable' : ''}}" animation="{{ animationData }}"><block wx:if="{{content}}">{{content}}</block><slot name="content"/><view class="{{classPrefix}}__operation {{prefix}}-class-operation" catch:tap="clickOperation"><block wx:if="{{ operation }}">{{operation}}</block><slot name="operation"/></view></view></view><view class="{{classPrefix}}__suffix-icon" bind:tap="clickSuffixIcon"><slot name="suffix-icon"/><template wx:if="{{_suffixIcon}}" is="icon" data="{{tClass: prefix + '-class-suffix-icon', ..._suffixIcon }}"></template></view></view>

miniprogram/miniprogram_npm/tdesign-miniprogram/notice-bar/notice-bar.wxss

@@ -0,0 +1,18 @@
+@import '../common/style/index.wxss';.t-notice-bar{display:flex;align-items:flex-start;padding:26rpx 32rpx;font-size:var(--td-font-size-base,28rpx);}
+.t-notice-bar__content-wrap{flex:1;overflow-x:hidden;line-height:44rpx;color:var(--td-notice-bar-font-color,var(--td-text-color-primary,var(--td-font-gray-1,rgba(0,0,0,.9))));}
+.t-notice-bar__content{display:inline-block;white-space:nowrap;}
+.t-notice-bar__content-wrapable{white-space:normal;}
+.t-notice-bar__content--vertical{display:block;height:44rpx;line-height:44rpx;}
+.t-notice-bar__content--vertical-item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.t-notice-bar__prefix-icon{color:inherit;}
+.t-notice-bar__prefix-icon:not(:empty){padding-right:var(--td-spacer,16rpx);width:44rpx;}
+.t-notice-bar__suffix-icon{color:var(--td-notice-bar-suffix-icon-color,var(--td-text-color-placeholder,var(--td-font-gray-3,rgba(0,0,0,.4))));}
+.t-notice-bar__prefix-icon,.t-notice-bar__suffix-icon{font-size:44rpx;}
+.t-notice-bar__prefix-icon:empty,.t-notice-bar__suffix-icon:empty{display:none;}
+.t-notice-bar__operation{display:inline-flex;vertical-align:top;color:var(--td-notice-bar-operation-font-color,var(--td-brand-color,var(--td-primary-color-7,#0052d9)));font-weight:700;}
+.t-notice-bar__operation:empty{display:none;}
+.t-notice-bar__suffix-icon:not(:empty){padding-left:var(--td-spacer,16rpx);width:44rpx;}
+.t-notice-bar--info{color:var(--td-notice-bar-info-color,var(--td-brand-color,var(--td-primary-color-7,#0052d9)));background-color:var(--td-notice-bar-info-bg-color,var(--td-brand-color-light,var(--td-primary-color-1,#f2f3ff)));}
+.t-notice-bar--success{color:var(--td-notice-bar-success-color,var(--td-success-color,var(--td-success-color-5,#2ba471)));background-color:var(--td-notice-bar-success-bg-color,var(--td-success-color-1,#e3f9e9));}
+.t-notice-bar--warning{color:var(--td-notice-bar-warning-color,var(--td-warning-color,var(--td-warning-color-5,#e37318)));background-color:var(--td-notice-bar-warning-bg-color,var(--td-warning-color-1,#fff1e9));}
+.t-notice-bar--error{color:var(--td-notice-bar-error-color,var(--td-error-color,var(--td-error-color-6,#d54941)));background-color:var(--td-notice-bar-error-bg-color,var(--td-error-color-1,#fff0ed));}

miniprogram/miniprogram_npm/tdesign-miniprogram/notice-bar/props.d.ts

@@ -0,0 +1,3 @@
+import { TdNoticeBarProps } from './type';
+declare const props: TdNoticeBarProps;
+export default props;

miniprogram/miniprogram_npm/tdesign-miniprogram/notice-bar/props.js

@@ -0,0 +1 @@
+const props={content:{type:null},direction:{type:String,value:"horizontal"},interval:{type:Number,value:2e3},marquee:{type:null,value:!1},operation:{type:String},prefixIcon:{type:null,value:!0},suffixIcon:{type:null},theme:{type:String,value:"info"},visible:{type:Boolean,value:null},defaultVisible:{type:Boolean,value:!1}};export default props;

miniprogram/miniprogram_npm/tdesign-miniprogram/notice-bar/type.d.ts

@@ -0,0 +1,47 @@
+export interface TdNoticeBarProps {
+    content?: {
+        type: null;
+        value?: string | string[];
+    };
+    direction?: {
+        type: StringConstructor;
+        value?: 'horizontal' | 'vertical';
+    };
+    interval?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+    marquee?: {
+        type: null;
+        value?: boolean | NoticeBarMarquee;
+    };
+    operation?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    prefixIcon?: {
+        type: null;
+        value?: string | boolean | object;
+    };
+    suffixIcon?: {
+        type: null;
+        value?: string | object;
+    };
+    theme?: {
+        type: StringConstructor;
+        value?: 'info' | 'success' | 'warning' | 'error';
+    };
+    visible?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    defaultVisible?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+}
+export interface NoticeBarMarquee {
+    speed?: number;
+    loop?: number;
+    delay?: number;
+}

miniprogram/miniprogram_npm/tdesign-miniprogram/notice-bar/type.js

@@ -0,0 +1 @@
+export{};