From dc740675b679678b0618c2bd4eb120e8664c5a90 Mon Sep 17 00:00:00 2001 From: leejimqiu Date: Thu, 31 Mar 2022 19:03:27 +0800 Subject: [PATCH] feat(fab): add new component --- example/app.json | 1 + example/pages/fab/fab.ts | 11 ++++- example/pages/fab/fab.wxml | 10 +++-- example/pages/home/data/form.ts | 8 ++-- src/common/template/button.wxml | 5 ++- src/fab/README.md | 56 +++++++++++++++----------- src/fab/fab.json | 2 +- src/fab/fab.less | 36 ++++++++++++++++- src/fab/fab.ts | 71 ++++++++++----------------------- src/fab/fab.wxml | 11 +++-- src/fab/props.ts | 30 ++++++++++++++ src/fab/type.ts | 39 ++++++++++++++++++ 12 files changed, 190 insertions(+), 90 deletions(-) create mode 100644 src/fab/props.ts create mode 100644 src/fab/type.ts diff --git a/example/app.json b/example/app.json index ef958563b..13381eb5b 100644 --- a/example/app.json +++ b/example/app.json @@ -57,6 +57,7 @@ "pages/date-time-picker/date-time-picker" ], "usingComponents": { + "t-demo": "../../components/demo-block/index", "t-avatar": "tdesign-miniprogram/avatar/avatar", "t-avatar-group": "tdesign-miniprogram/avatar/avatar-group", "t-badge": "tdesign-miniprogram/badge/badge", diff --git a/example/pages/fab/fab.ts b/example/pages/fab/fab.ts index 560d44d43..643567467 100644 --- a/example/pages/fab/fab.ts +++ b/example/pages/fab/fab.ts @@ -1 +1,10 @@ -Page({}); +Page({ + data: { + fabButton: { + openType: 'getPhoneNumber', + }, + }, + handleClick(e) { + console.log(e); + }, +}); diff --git a/example/pages/fab/fab.wxml b/example/pages/fab/fab.wxml index 8def1d08b..58a5c88f8 100644 --- a/example/pages/fab/fab.wxml +++ b/example/pages/fab/fab.wxml @@ -1,4 +1,6 @@ - - - - +Fab 悬浮按钮 +当功能使用图标即可表意清楚时，可使用纯图标悬浮按钮，例如：添加、发布 + + + + diff --git a/example/pages/home/data/form.ts b/example/pages/home/data/form.ts index 02aa98a65..0dac068ea 100644 --- a/example/pages/home/data/form.ts +++ b/example/pages/home/data/form.ts @@ -14,10 +14,10 @@ const form = { name: 'DateTimePicker', label: '时间选择器', }, - // { - // name: 'Fab', - // label: '悬浮按钮', - // }, + { + name: 'Fab', + label: '悬浮按钮', + }, { name: 'Input', label: '输入框', diff --git a/src/common/template/button.wxml b/src/common/template/button.wxml index 6879afbb4..a21d50fa8 100644 --- a/src/common/template/button.wxml +++ b/src/common/template/button.wxml @@ -7,6 +7,8 @@ icon="{{icon}}" loading="{{loading}}" theme="{{theme}}" + shape="{{shape}}" + size="{{size}}" open-type="{{openType}}" hover-stop-propagation="{{hoverStopPropagation}}" hover-start-time="{{hoverStartTime}}" @@ -25,7 +27,6 @@ bind:error="onTplButtonTap" bind:opensetting="onTplButtonTap" bind:launchapp="onTplButtonTap" + >{{content}} - {{content}} - diff --git a/src/fab/README.md b/src/fab/README.md index 69ff379bc..9e6d9ccdd 100644 --- a/src/fab/README.md +++ b/src/fab/README.md @@ -1,19 +1,14 @@ --- title: Fab -description: 悬浮按钮。 +description: 当功能使用图标即可表意清楚时，可使用纯图标悬浮按钮，例如：添加、发布。 spline: form isComponent: true --- -### 特性及兼容性 - -无 - ## 引入 -### 引入组件 +全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。 -在 `app.json` 或 `page.json` 中引入组件： ```json "usingComponents": { @@ -21,30 +16,45 @@ isComponent: true } ``` -## 用法 +## 代码演示 -### 组件方式 +### 基础使用 ```html - - + ``` -## API +### 进阶使用 -### `` 组件 +```html + +``` -组件路径：`tdesign-miniprogram/fab/fab` +```js +Page({ + data: { + fabButton: { + openType: 'getPhoneNumber' + } + }, + handleClick(e) { + console.log(e) + } +}) +``` -#### Props +## API +### Fab Props -| 属性 | 值类型 | 默认值 | 必传 | 说明 | -| ------ | -------- | ------ | ----- | ------------------ | -| icon | 'string' | 'add' | false | 图标 | -| text | 'string' | '' | false | 文字 | -| bottom | 'string' | '32px' | false | 离屏幕底部的距离 | -| right | 'string' | '16px' | false | 离屏幕右边缘的距离 | +名称 | 类型 | 默认值 | 说明 | 必传 +-- | -- | -- | -- | -- +button-props | Object | - | 透传至 Button 组件 | N +icon | String | - | 图标 | N +style | String | right: 16px; bottom: 32px; | 悬浮按钮的样式，常用于调整位置 | N +text | String | - | 文本内容 | N -#### Events +### Fab Events -无 +名称 | 参数 | 描述 +-- | -- | -- +click | `({e: Event})` | 悬浮按钮点击事件 diff --git a/src/fab/fab.json b/src/fab/fab.json index 049940c16..e73f3adaa 100644 --- a/src/fab/fab.json +++ b/src/fab/fab.json @@ -1,6 +1,6 @@ { "component": true, "usingComponents": { - "t-icon": "../icon/icon" + "t-button": "../button/button" } } diff --git a/src/fab/fab.less b/src/fab/fab.less index f026128a8..a740328f6 100644 --- a/src/fab/fab.less +++ b/src/fab/fab.less @@ -1 +1,35 @@ -@import (css) '../common/index.wxss'; +@import '../common/style/index.less'; + +@fab-height: 86rpx; +@fab-min-width: @fab-height; +@fab-horizontal-padding: 40rpx; +@fab-text-margin-left: 16rpx; + +.@{prefix}-fab { + position: absolute; + width: auto; + min-width: @fab-min-width; + height: @fab-height; + line-height: normal; + padding: 0 @fab-horizontal-padding; + box-sizing: border-box; + border-radius: 48rpx; + + .@{prefix}-button__text { + display: flex; + align-items: center; + } + + &::after { + border-radius: inherit; + } + + &__text { + margin-left: @fab-text-margin-left; + } + + &--icononly { + padding: 0; + border-radius: @border-radius-50; + } +} diff --git a/src/fab/fab.ts b/src/fab/fab.ts index 70d510465..11a6912c3 100644 --- a/src/fab/fab.ts +++ b/src/fab/fab.ts @@ -1,60 +1,29 @@ -import TComponent from '../common/component'; +import { SuperComponent, wxComponent } from '../common/src/index'; import config from '../common/config'; +import props from './props'; const { prefix } = config; const name = `${prefix}-fab`; -TComponent({ - // 组件的对外属性 - properties: { - icon: { - type: String, - value: 'add', // 默认为 ‘+’ - }, - text: { - type: String, - value: '', - }, - bottom: { - type: String, - value: '32px', - }, - right: { - type: String, - value: '16px', - }, - }, - // 组件的内部数据 - data: { - // 按钮样式列表 - className: '', - styleName: '', - textClass: `${name}__text`, - }, +@wxComponent() +export default class Fab extends SuperComponent { + properties = props; - /* 组件生命周期 */ - lifetimes: { - attached() { - this.setClass(); - this.setStyle(); - }, - }, + externalClasses = [`${prefix}-class`, `${prefix}-class-button`]; - /* Methods */ - methods: { - setClass() { - const classList = [`${name}`, this.data.text && `${name}--with-text`]; - this.setData({ - className: classList.join(' '), - }); + data = { + prefix, + classPrefix: name, + baseButtonProps: { + size: 'large', + shape: 'circle', + theme: 'primary', }, - setStyle() { - this.setData({ - styleName: ` - bottom: ${this.data.bottom}; - right: ${this.data.right}; - `, - }); + }; + + methods = { + onTplButtonTap(e) { + this.triggerEvent('click', e); }, - }, -}); + }; +} diff --git a/src/fab/fab.wxml b/src/fab/fab.wxml index 1ff613bd0..1558bab6c 100644 --- a/src/fab/fab.wxml +++ b/src/fab/fab.wxml @@ -1,4 +1,9 @@ - - - {{text}} + + + +