project init

components/overlay/README.md

@@ -0,0 +1,42 @@
+---
+title: Overlay 遮罩层
+description: 通过遮罩层，可以强调部分内容
+spline: message
+isComponent: true
+---
+
+<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-100%25-blue" /></span>
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+  "t-overlay": "tdesign-miniprogram/overlay/overlay"
+}
+```
+
+## 代码演示
+
+### 基础使用
+
+{{ base }}
+
+## API
+
+### Overlay Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+visible | Boolean | false | 是否展示 | N
+zIndex | Number | 11000 | 遮罩层及 | N
+duration | Number | 300 | (暂不支持)背景色过渡时间，单位毫秒 | N
+backgroundColor | String | - | 遮罩层的背景色 | N
+preventScrollThrough | Boolean | true | 防止滚动穿透，即不允许点击和滚动 | N
+custom-style| String | '' | 自定义样式 | N
+
+### Overlay Events
+
+名称 | 参数 | 描述
+-- | -- | --
+click | `({ visible: boolean })` | 点击遮罩时触发

components/overlay/overlay.d.ts

@@ -0,0 +1,40 @@
+import { SuperComponent } from '../common/src/index';
+export default class Overlay extends SuperComponent {
+    properties: {
+        zIndex: {
+            type: NumberConstructor;
+            value: number;
+        };
+        duration: {
+            type: NumberConstructor;
+            value: number;
+        };
+        backgroundColor: {
+            type: StringConstructor;
+            value: string;
+        };
+        preventScrollThrough: {
+            type: BooleanConstructor;
+            value: boolean;
+        };
+        customStyle: {
+            type: StringConstructor;
+            value: string;
+        };
+    };
+    behaviors: string[];
+    data: {
+        prefix: string;
+        classPrefix: string;
+        computedStyle: string;
+        _zIndex: number;
+    };
+    observers: {
+        backgroundColor(v: any): void;
+        zIndex(v: any): void;
+    };
+    methods: {
+        handleClick(): void;
+        noop(): void;
+    };
+}

components/overlay/overlay.js

@@ -0,0 +1,69 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { SuperComponent, wxComponent } from '../common/src/index';
+import config from '../common/config';
+import transition from '../mixins/transition';
+const { prefix } = config;
+const name = `${prefix}-overlay`;
+let Overlay = class Overlay extends SuperComponent {
+    constructor() {
+        super(...arguments);
+        this.properties = {
+            zIndex: {
+                type: Number,
+                value: 11000,
+            },
+            duration: {
+                type: Number,
+                value: 300,
+            },
+            backgroundColor: {
+                type: String,
+                value: '',
+            },
+            preventScrollThrough: {
+                type: Boolean,
+                value: true,
+            },
+            customStyle: {
+                type: String,
+                value: '',
+            },
+        };
+        this.behaviors = [transition()];
+        this.data = {
+            prefix,
+            classPrefix: name,
+            computedStyle: '',
+            _zIndex: 11000,
+        };
+        this.observers = {
+            backgroundColor(v) {
+                this.setData({
+                    computedStyle: `background-color: ${v};`,
+                });
+            },
+            zIndex(v) {
+                if (v !== 0) {
+                    this.setData({
+                        _zIndex: v,
+                    });
+                }
+            },
+        };
+        this.methods = {
+            handleClick() {
+                this.triggerEvent('click', { visible: !this.properties.visible });
+            },
+            noop() { },
+        };
+    }
+};
+Overlay = __decorate([
+    wxComponent()
+], Overlay);
+export default Overlay;

components/overlay/overlay.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

components/overlay/overlay.wxml

@@ -0,0 +1,19 @@
+<view
+  wx:if="{{realVisible && preventScrollThrough}}"
+  class="{{prefix}}-overlay {{transitionClass}}"
+  style="z-index: {{_zIndex}}; {{computedStyle}} {{customStyle}}"
+  bind:tap="handleClick"
+  catchtouchmove="noop"
+  bind:transitionend="onTransitionEnd"
+>
+  <slot />
+</view>
+<view
+  wx:elif="{{realVisible}}"
+  class="{{prefix}}-overlay {{transitionClass}}"
+  style="z-index: {{_zIndex}}; {{computedStyle}} {{customStyle}}"
+  bind:tap="handleClick"
+  bind:transitionend="onTransitionEnd"
+>
+  <slot />
+</view>

components/overlay/overlay.wxss

@@ -0,0 +1,42 @@
+.t-float-left {
+  float: left;
+}
+.t-float-right {
+  float: right;
+}
+@keyframes tdesign-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.hotspot-expanded.relative {
+  position: relative;
+}
+.hotspot-expanded::after {
+  content: '';
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  transform: scale(1.5);
+}
+.t-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  transition: opacity 300ms ease;
+}
+.t-fade-enter {
+  opacity: 0;
+}
+.t-fade-leave-to {
+  opacity: 0;
+}