任务明细页面

components/switch/README.md

@@ -0,0 +1,63 @@
+---
+title: Switch 开关
+description: 用于控制某个功能的开启和关闭。
+spline: form
+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-82%25-blue" /></span>
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+  "t-switch": "tdesign-miniprogram/switch/switch"
+}
+```
+
+## 代码演示
+
+### 基础开关
+
+<img src="https://tdesign.gtimg.com/miniprogram/readme/switch.png" width="375px" height="50%">
+
+{{ base }}
+
+
+### 开关状态
+
+{{ status }}
+
+
+### 受控用法
+
+```html
+<t-switch value="{{value}}" bindchange="onChange"></t-switch>
+
+```
+### 非受控用法
+
+```html
+<t-switch defaultValue="{{value}}"></t-switch>
+```
+
+## API
+### Switch Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+colors | Array | - | 自定义颜色，[打开时的颜色，关闭时的颜色]。组件默认颜色为 ['#0052d9', 'rgba(0, 0, 0, .26']。示例：[blue, gray]。TS 类型：`string[]` | N
+custom-value | Array | - | 开关内容，[打开时的值，关闭时的值]。默认为 [true, false]。示例：[1, 0]。TS 类型：`Array<SwitchValue>` | N
+disabled | Boolean | false | 是否禁用组件 | N
+label | String | '' | 开关的标签 | N
+loading | Boolean | false | 是否处于加载中状态 | N
+size | String | medium | 开关尺寸。可选项：small/medium/large | N
+value | String / Number / Boolean | undefined | 开关值。TS 类型：`SwitchValue` `type SwitchValue = string | number | boolean`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/switch/type.ts) | N
+default-value | String / Number / Boolean | undefined | 开关值。非受控属性。TS 类型：`SwitchValue` `type SwitchValue = string | number | boolean`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/switch/type.ts) | N
+
+### Switch Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(value: SwitchValue)` | 数据发生变化时触发

components/switch/_var.wxss

@@ -0,0 +1,27 @@
+.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);
+}

components/switch/props.d.ts

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

components/switch/props.js

@@ -0,0 +1,36 @@
+const props = {
+    colors: {
+        type: Array,
+    },
+    customValue: {
+        type: Array,
+        value: [true, false],
+    },
+    disabled: {
+        type: Boolean,
+        value: false,
+    },
+    label: {
+        type: String,
+        value: '',
+    },
+    loading: {
+        type: Boolean,
+        value: false,
+    },
+    size: {
+        type: String,
+        value: 'medium',
+    },
+    value: {
+        type: Boolean,
+        optionalTypes: [Number, String],
+        value: null,
+    },
+    defaultValue: {
+        type: Boolean,
+        optionalTypes: [Number, String],
+        value: null,
+    },
+};
+export default props;

components/switch/switch.d.ts

@@ -0,0 +1,24 @@
+import { SuperComponent } from '../common/src/index';
+export default class Switch extends SuperComponent {
+    externalClasses: string[];
+    behaviors: string[];
+    properties: import("./type").TdSwitchProps;
+    data: {
+        classPrefix: string;
+        isActive: boolean;
+        bodyStyle: string;
+    };
+    controlledProps: {
+        key: string;
+        event: string;
+    }[];
+    observers: {
+        value(val: any): void;
+    };
+    methods: {
+        switchChange(): void;
+        handleColorChange(): void;
+        onTapBackground(): void;
+        onTapDot(): void;
+    };
+}

components/switch/switch.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 { wxComponent, SuperComponent } from '../common/src/index';
+import config from '../common/config';
+import props from './props';
+const { prefix } = config;
+const name = `${prefix}-switch`;
+let Switch = class Switch extends SuperComponent {
+    constructor() {
+        super(...arguments);
+        this.externalClasses = ['t-class', 't-class-label', 't-class-body', 't-class-dot'];
+        this.behaviors = ['wx://form-field'];
+        this.properties = props;
+        this.data = {
+            classPrefix: name,
+            isActive: false,
+            bodyStyle: '',
+        };
+        this.controlledProps = [
+            {
+                key: 'value',
+                event: 'change',
+            },
+        ];
+        this.observers = {
+            value(val) {
+                const [activeValue] = this.data.customValue;
+                this.setData({
+                    isActive: val === activeValue,
+                });
+                this.handleColorChange();
+            },
+        };
+        this.methods = {
+            switchChange() {
+                const { disabled, value, customValue } = this.data;
+                const [activeValue, inactiveValue] = customValue;
+                if (disabled)
+                    return;
+                this._trigger('change', {
+                    value: value === activeValue ? inactiveValue : activeValue,
+                });
+            },
+            handleColorChange() {
+                const { disabled, colors = [] } = this.data;
+                const [activedColor = '#0052d9', inactivedColor = 'rgba(0, 0, 0, .26)'] = colors;
+                if (!disabled) {
+                    this.setData({
+                        bodyStyle: `background-color: ${this.data.isActive ? activedColor : inactivedColor}`,
+                    });
+                }
+            },
+            onTapBackground() {
+                this.switchChange();
+            },
+            onTapDot() {
+                this.switchChange();
+            },
+        };
+    }
+};
+Switch = __decorate([
+    wxComponent()
+], Switch);
+export default Switch;

components/switch/switch.json

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

components/switch/switch.wxml

@@ -0,0 +1,13 @@
+<view class="t-class {{classPrefix}}">
+  <view wx:if="{{label}}" class="{{classPrefix}}__label t-class-label">{{label}}</view>
+  <view
+    class="{{classPrefix}}__body t-class-body {{isActive ? classPrefix + '__body--active' : ''}} {{disabled ? classPrefix + '__body--disabled' : ''}}"
+    style="{{bodyStyle}}"
+    bindtap="onTapBackground"
+  >
+    <view
+      class="{{classPrefix}}__dot t-class-dot  {{isActive ? classPrefix + '__dot--active' : ''}}"
+      catchtap="onTapDot"
+    />
+  </view>
+</view>

components/switch/switch.wxss

@@ -0,0 +1,70 @@
+.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-switch {
+  display: flex;
+  align-items: center;
+}
+.t-switch__label {
+  display: inline-block;
+  vertical-align: middle;
+  text-align: right;
+  margin-right: 32rpx;
+  font-size: 32rpx;
+  color: rgba(0, 0, 0, 0.4);
+}
+.t-switch__body {
+  vertical-align: middle;
+  width: 88rpx;
+  height: 48rpx;
+  border-radius: 24rpx;
+  background-color: rgba(0, 0, 0, 0.26);
+  position: relative;
+}
+.t-switch__body--active {
+  background-color: #0052d9;
+}
+.t-switch__body--disabled {
+  background-color: #E7E7E7;
+}
+.t-switch__body--active.t-switch__body--disabled {
+  background-color: #96BBF8;
+}
+.t-switch__dot {
+  position: absolute;
+  left: 5rpx;
+  top: 50%;
+  width: 40rpx;
+  height: 40rpx;
+  border-radius: 50%;
+  background-color: #fff;
+  transition: all 0.3s;
+  transform: translateY(-50%);
+}
+.t-switch__dot--active {
+  left: 45rpx;
+}

components/switch/type.d.ts

@@ -0,0 +1,37 @@
+export interface TdSwitchProps {
+    colors?: {
+        type: ArrayConstructor;
+        value?: string[];
+    };
+    customValue?: {
+        type: ArrayConstructor;
+        value?: Array<SwitchValue>;
+    };
+    disabled?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    label?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    loading?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    size?: {
+        type: StringConstructor;
+        value?: 'small' | 'medium' | 'large';
+    };
+    value?: {
+        type: BooleanConstructor;
+        optionalTypes: Array<NumberConstructor | StringConstructor>;
+        value?: SwitchValue;
+    };
+    defaultValue?: {
+        type: BooleanConstructor;
+        optionalTypes: Array<NumberConstructor | StringConstructor>;
+        value?: SwitchValue;
+    };
+}
+export declare type SwitchValue = string | number | boolean;

components/switch/type.js

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