Merge pull request #704 from AntzyMo/docs/dialog

Docs/dialog

src/dialog/README.md

@@ -17,99 +17,22 @@ isComponent: true
 
 ## 代码演示
 
-### 基础方式
+### 反馈类对话框
 
 <img src="https://tdesign.gtimg.com/miniprogram/readme/dialog-1.png" width="375px" height="50%">
 
-```html
-<!-- 单行标题 -->
-<t-dialog visible="{{true}}" title="对话框标题" confirm-btn="我知道了" bind:confirm="confirmHandle"> </t-dialog>
-
-<!-- 带文本说明 -->
-<t-dialog
-  visible="{{true}}"
-  title="对话框标题"
-  content="告知当前状态、信息和解决方法等内容。"
-  confirm-btn="我知道了"
-  bind:confirm="confirmHandle"
-></t-dialog>
-```
+{{ base }}
 
 > 使用这种方式，对话框的 `visible` 是受控的，需要手动设置额 `visible` 为 `false` 才会关闭对话框。
 
-### API 调用方式
-
-用 `Dialog.alert` 方法调用反馈类对话框。
-
-```html
-<t-dialog id="t-dialog" />
-```
-
-```js
-import Dialog from 'tdesign-miniprogram/dialog/index';
-
-Dialog.alert({
-  title: '对话框标题',
-  content: '告知当前状态、信息和解决方法等内容。',
-  confirmBtn: '我知道了',
-}).then(() => {
-  // 点击确定按钮时触发
-});
-```
-
-> 使用这种方式，对话框会在点击事件发生之后自动关闭。
-
-### 不同状态的对话框
-
-#### 双按钮对话框
-<img src="https://tdesign.gtimg.com/miniprogram/readme/dialog-2.png" width="375px" height="50%">
+### 确认类对话框
+{{ confirm }}
 
-```html
-<t-dialog id="t-dialog" />
-```
-
-```js
-// 双按钮
-import Dialog from 'tdesign-miniprogram/dialog/index';
-
-Dialog.confirm({
-  title: '弹窗标题',
-  content: '告知当前状态、信息和解决方法等内容。',
-  confirmBtn: '按钮最多字数',
-  cancelBtn: '取消',
-})
-  .then(() => {
-    // 点击确定按钮
-  })
-  .catch(() => {
-    // 点击取消按钮
-  });
-```
-#### 多按钮对话框
-
-通过 `actions` 可实现多个操作按钮。
-
-```html
-<t-dialog id="t-dialog" />
-```
-
-```js
-import Dialog from 'tdesign-miniprogram/dialog/index';
-
-Dialog.action({
-  title: '弹窗标题',
-  content: '告知当前状态、信息和解决方法等内容。',
-  actions: [
-    { name: '取消', primary: false },
-    { name: '单行按钮最多十五个字符文案内容', primary: true },
-    { name: '按钮文案文字内容较长', primary: true, style: 'color:red;' },
-  ]
-})
-  .then(({ index }) => {
-    console.log(index);
-  })
-```
+### 输入类对话框
+{{ inputDialog }}
 
+### 命令调用
+{{ command }}
 ## API
 ### Dialog Props
 

src/dialog/_example/base/index.js

@@ -0,0 +1,20 @@
+Component({
+  data: {
+    dialogKey: '',
+    showText: false,
+    showMultiText: false,
+    showTextAndTitle: false,
+    showMultiTextAndTitle: false,
+  },
+  methods: {
+    showDialog(e) {
+      const { key } = e.currentTarget.dataset;
+      this.setData({ [key]: true, dialogKey: key });
+    },
+
+    closeDialog() {
+      const { dialogKey } = this.data;
+      this.setData({ [dialogKey]: false });
+    },
+  },
+});

src/dialog/_example/base/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-button": "tdesign-miniprogram/button/button",
+    "t-dialog": "tdesign-miniprogram/dialog/dialog"
+  }
+}

src/dialog/_example/base/index.wxml

@@ -0,0 +1,55 @@
+<view class="box">
+  <t-button t-class="external-class" size="large" variant="outline" data-key="showText" bind:tap="showDialog" block
+    >单行标题</t-button
+  >
+  <t-dialog visible="{{showText}}" title="对话框标题" confirm-btn="我知道了" bind:confirm="closeDialog" />
+
+  <t-button t-class="external-class" size="large" variant="outline" data-key="showMultiText" bind:tap="showDialog" block
+    >多行标题最大高度</t-button
+  >
+  <t-dialog
+    visible="{{showMultiText}}"
+    title="对话框标题告知当前状态、信息和解决方法，等内容。描述文案尽可能控制在三行内"
+    confirm-btn="我知道了"
+    bind:confirm="closeDialog"
+  />
+
+  <t-button
+    t-class="external-class"
+    size="large"
+    variant="outline"
+    data-key="showTextAndTitle"
+    bind:tap="showDialog"
+    block
+    >带说明文本</t-button
+  >
+  <t-dialog
+    visible="{{showTextAndTitle}}"
+    title="对话框标题"
+    content="告知当前状态、信息和解决方法，等内容。描述文案尽可能控制在三行内"
+    confirm-btn="我知道了"
+    bind:confirm="closeDialog"
+  />
+
+  <t-button
+    t-class="external-class"
+    size="large"
+    variant="outline"
+    data-key="showMultiTextAndTitle"
+    bind:tap="showDialog"
+    block
+    >带说明文本最大高度</t-button
+  >
+  <t-dialog
+    visible="{{showMultiTextAndTitle}}"
+    title="对话框带文本最大高度"
+    confirm-btn="我知道了"
+    bind:confirm="closeDialog"
+  >
+    <scroll-view slot="content" scroll-y class="long-content">
+      <view class="content-cintainer">
+        告知当前状态、信息和解决方法，等内容。描述文案很多描述文案很多描述文案很多描述文案很多描述文案很多描述文案很多描述文案很多描述文案很多描述文案很多描述文案很多描述文案很多描述文案很多描述文案很多描述文案很多描述文案很多描述文案很多描述文案很多描述文案很多描述文案很多描述文案很多描述文案很多描述文案很多描述文案很多描述文案很多描述文案很多描述文案很多描述文案很多描述文案很多描述文案很多描述文案很多描述文案很多描述文案很多描述文案很多描述文案很多描述文案很多描述文案很多描述文案很多描述文案
+      </view>
+    </scroll-view>
+  </t-dialog>
+</view>

src/dialog/_example/base/index.wxss

@@ -0,0 +1,18 @@
+.box {
+  margin: 32rpx;
+}
+
+.external-class {
+  margin: 0 0 32rpx 0;
+  height: 96rpx;
+}
+
+.long-content {
+  height: 576rpx;
+  margin-top: 16rpx;
+  font-size: 32rpx;
+  color: #888;
+}
+.long-content .content-cintainer {
+  width: 540rpx;
+}

src/dialog/_example/command/index.js

@@ -0,0 +1,22 @@
+import Dialog from 'tdesign-miniprogram/dialog/index';
+
+Component({
+  methods: {
+    showDialog(e) {
+      const { type } = e.currentTarget.dataset;
+
+      const dialogConfig = {
+        context: this,
+        title: '弹窗标题',
+        content: '告知当前状态、信息和解决方法等内容。',
+        confirmBtn: '确认按钮',
+      };
+
+      if (type === 'hasCancelBtn') {
+        dialogConfig.cancelBtn = '取消按钮';
+      }
+
+      Dialog.confirm(dialogConfig);
+    },
+  },
+});

src/dialog/_example/command/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-button": "tdesign-miniprogram/button/button",
+    "t-dialog": "tdesign-miniprogram/dialog/dialog"
+  }
+}

src/dialog/_example/command/index.wxml

@@ -0,0 +1,7 @@
+<view class="box">
+  <t-button t-class="external-class" size="large" variant="outline" data-type="hasCancelBtn" bind:tap="showDialog" block
+    >带取消按钮</t-button
+  >
+  <t-button t-class="external-class" size="large" variant="outline" bind:tap="showDialog" block>无取消按钮</t-button>
+  <t-dialog id="t-dialog" />
+</view>

src/dialog/_example/command/index.wxss

@@ -0,0 +1,8 @@
+.box {
+  margin: 32rpx;
+}
+
+.external-class {
+  margin: 0 0 32rpx 0;
+  height: 96rpx;
+}

src/dialog/_example/confirm/index.js

@@ -0,0 +1,25 @@
+Component({
+  data: {
+    dialogKey: '',
+    showConfirm: false,
+    showWarnConfirm: false,
+    showTooLongBtnContent: false,
+    showMultiBtn: false,
+    multiBtnList: [
+      { name: '取消', primary: false },
+      { name: '单行按钮最多十五个字符文案内容', primary: true },
+      { name: '按钮文案文字内容较长', primary: true, style: 'color:red;' },
+    ],
+  },
+  methods: {
+    showDialog(e) {
+      const { key } = e.currentTarget.dataset;
+      this.setData({ [key]: true, dialogKey: key });
+    },
+
+    closeDialog() {
+      const { dialogKey } = this.data;
+      this.setData({ [dialogKey]: false });
+    },
+  },
+});

src/dialog/_example/confirm/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-button": "tdesign-miniprogram/button/button",
+    "t-dialog": "tdesign-miniprogram/dialog/dialog"
+  }
+}

src/dialog/_example/confirm/index.wxml

@@ -0,0 +1,65 @@
+<view class="box">
+  <t-button t-class="external-class" size="large" variant="outline" data-key="showConfirm" bind:tap="showDialog" block
+    >双按钮</t-button
+  >
+  <t-dialog
+    visible="{{showConfirm}}"
+    title="对话框标题"
+    content="告知当前状态、信息和解决方法，等内容。描述文案尽可能控制在三行内"
+    confirm-btn="按钮最多字数"
+    cancel-btn="取消"
+    bind:confirm="closeDialog"
+    bind:cancel="closeDialog"
+  />
+
+  <t-button
+    t-class="external-class"
+    size="large"
+    variant="outline"
+    data-key="showWarnConfirm"
+    bind:tap="showDialog"
+    block
+    >带警示按钮</t-button
+  >
+  <t-dialog
+    visible="{{showWarnConfirm}}"
+    title="对话框标题"
+    t-class-confirm="custom-confirm-btn"
+    confirm-btn="警示操作"
+    cancel-btn="取消"
+    bind:confirm="closeDialog"
+    bind:cancel="closeDialog"
+  />
+
+  <t-button
+    t-class="external-class"
+    size="large"
+    variant="outline"
+    data-key="showTooLongBtnContent"
+    bind:tap="showDialog"
+    block
+    >双按钮文字过长</t-button
+  >
+  <t-dialog
+    visible="{{showTooLongBtnContent}}"
+    title="对话框标题"
+    content="告知当前状态、信息和解决方法，等内容。描述文案尽可能控制在三行内"
+    confirm-btn="按钮文案文字内容较长"
+    cancel-btn="取消"
+    button-layout="vertical"
+    bind:confirm="closeDialog"
+    bind:cancel="closeDialog"
+  />
+
+  <t-button t-class="external-class" size="large" variant="outline" data-key="showMultiBtn" bind:tap="showDialog" block
+    >多按钮</t-button
+  >
+  <t-dialog
+    visible="{{showMultiBtn}}"
+    title="对话框标题"
+    content="告知当前状态、信息和解决方法，等内容。描述文案尽可能控制在三行内"
+    button-layout="vertical"
+    actions="{{ multiBtnList }}"
+    bind:action="closeDialog"
+  />
+</view>

src/dialog/_example/confirm/index.wxss

@@ -0,0 +1,12 @@
+.box {
+  margin: 32rpx;
+}
+
+.external-class {
+  margin: 0 0 32rpx 0;
+  height: 96rpx;
+}
+
+.custom-confirm-btn {
+  color: #ff4646 !important;
+}

src/dialog/_example/dialog.json

@@ -2,6 +2,10 @@
   "navigationBarTitleText": "Dialog 对话框",
   "navigationBarBackgroundColor": "#fff",
   "usingComponents": {
-    "t-demo": "../../components/demo-block/index"
+    "t-demo": "../../components/demo-block/index",
+    "base": "./base",
+    "confirm": "./confirm",
+    "inputDialog": "./inputDialog",
+    "command": "./command"
   }
 }