Merge pull request #905 from WeBankFinTech/feat-tooltip-confirmOption

feat(Tooltip): confirm 模式增加是否显示确认和取消按钮的配置项
WeBankFinTech · Nov 7, 2024 · f2a91cb · f2a91cb
2 parents d7d701c + 973c494
commit f2a91cb
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 61 deletions.
diff --git a/components/tooltip/tooltip.tsx b/components/tooltip/tooltip.tsx
@@ -12,7 +12,6 @@ import getPrefixCls from '../_util/getPrefixCls';
 import { useTheme } from '../_theme/useTheme';
 import ExclamationCircleFilled from '../icon/ExclamationCircleFilled';
 import FButton from '../button/button';
-import { useNormalModel } from '../_util/use/useModel';
 import { popperProps } from '../popper/props';
 import { CANCEL_EVENT, OK_EVENT, UPDATE_MODEL_EVENT } from '../_util/constants';
 import type { ExtractPublicPropTypes } from '../_util/interface';
@@ -22,6 +21,8 @@ const prefixCls = getPrefixCls('tooltip');
 const defaultConfirmOption = {
     okText: '确定',
     cancelText: '取消',
+    showOk: true,
+    showCancel: true,
     icon: <ExclamationCircleFilled />,
 };
 
@@ -124,25 +125,32 @@ export default defineComponent({
                                 )}
                         {isConfirm && (
                             <>
-                                <FButton
-                                    class={`${prefixCls}-modal-btn`}
-                                    onClick={(event) =>
-                                        handleConfirmCB(OK_EVENT, event)
+                                {mergeOpt.showOk && (
+                                    <FButton
+                                        class={`${prefixCls}-modal-btn`}
+                                        onClick={(event) =>
+                                            handleConfirmCB(OK_EVENT, event)
                                     }
-                                    size="small"
-                                    type="primary"
-                                >
-                                    {mergeOpt.okText}
-                                </FButton>
-                                <FButton
-                                    class={`${prefixCls}-modal-btn`}
-                                    onClick={(event) =>
-                                        handleConfirmCB(CANCEL_EVENT, event)
+                                        size="small"
+                                        type="primary"
+                                    >
+                                        {mergeOpt.okText}
+                                    </FButton>
+                                )}
+                                {
+                                    mergeOpt.showCancel && (
+                                        <FButton
+                                            class={`${prefixCls}-modal-btn`}
+                                            onClick={(event) =>
+                                                handleConfirmCB(CANCEL_EVENT, event)
                                     }
-                                    size="small"
-                                >
-                                    {mergeOpt.cancelText}
-                                </FButton>
+                                            size="small"
+                                        >
+                                            {mergeOpt.cancelText}
+                                        </FButton>
+                                    )
+                                }
+
                             </>
                         )}
                     </>

diff --git a/docs/.vitepress/components/popper/passive.vue b/docs/.vitepress/components/popper/passive.vue
@@ -9,11 +9,6 @@
                         { label: '否(默认)', value: false },
                         { label: '是', value: true },
                     ]"
-                    @change="
-                        (value) => {
-                            console.log(value);
-                        }
-                    "
                 />
             </FFormItem>
             <FFormItem label="点击空白处是否关闭:">
@@ -24,11 +19,6 @@
                         { label: '否(默认)', value: false },
                         { label: '是', value: true },
                     ]"
-                    @change="
-                        (value) => {
-                            console.log(value);
-                        }
-                    "
                 />
             </FFormItem>
         </FForm>

diff --git a/docs/.vitepress/components/popper/visible.vue b/docs/.vitepress/components/popper/visible.vue
@@ -9,11 +9,6 @@
                         { label: '否(默认)', value: false },
                         { label: '是', value: true },
                     ]"
-                    @change="
-                        (value) => {
-                            console.log(value);
-                        }
-                    "
                 />
             </FFormItem>
         </FForm>

diff --git a/docs/.vitepress/components/tooltip/confirm.vue b/docs/.vitepress/components/tooltip/confirm.vue
@@ -1,8 +1,33 @@
 <template>
     <FSpace>
+        <FForm :labelWidth="150">
+            <FFormItem label="是否显示确认按钮:">
+                <FRadioGroup
+                    v-model="showOk"
+                    :cancelable="false"
+                    :options="[
+                        { label: '是(默认)', value: true },
+                        { label: '否', value: false },
+                    ]"
+                />
+            </FFormItem>
+            <FFormItem label="是否显示取消按钮:">
+                <FRadioGroup
+                    v-model="showCancel"
+                    :cancelable="false"
+                    :options="[
+                        { label: '是(默认)', value: true },
+                        { label: '否', value: false },
+                    ]"
+                />
+            </FFormItem>
+        </FForm>
+    </FSpace>
+
+    <FSpace align="center">
         <FTooltip
             mode="confirm"
-            :confirmOption="{ okText: 'OK' }"
+            :confirmOption="{ okText: 'OK', showOk, showCancel }"
             :content="0"
             @ok="() => handleConfirm('确定')"
             @cancel="() => handleConfirm('取消')"
@@ -15,20 +40,16 @@
 
         <FTooltip
             mode="confirm"
-            :confirmOption="{ okText: 'OK' }"
+            :confirmOption="{ okText: 'OK', showOk, showCancel }"
             :content="0"
             @ok="() => handleConfirm('确定')"
             @cancel="() => handleConfirm('取消')"
         >
-            <svg
-                style="margin-top: 8px; cursor: pointer;"
-                width="16"
-                height="16"
-                viewBox="0 0 1024 1024"
-                xmlns="http://www.w3.org/2000/svg"
-            >
-                <path d="M704 96.768a21.333 21.333 0 0 1 21.333 21.333V251.18h181.334A21.333 21.333 0 0 1 928 272.512v21.333a21.333 21.333 0 0 1-21.333 21.334h-87.851l-23.381 612.778H227.54L204.46 315.18h-87.126A21.333 21.333 0 0 1 96 293.845v-21.333a21.333 21.333 0 0 1 21.333-21.333h181.334v-133.12A21.333 21.333 0 0 1 320 96.725h384zm29.824 767.147 20.992-548.736H268.544l20.65 548.778h444.63zM442.667 432.043A21.333 21.333 0 0 1 464 453.376v271.787a21.333 21.333 0 0 1-21.333 21.333h-21.334A21.333 21.333 0 0 1 400 725.163V453.376a21.333 21.333 0 0 1 21.333-21.333h21.334zm160 0A21.333 21.333 0 0 1 624 453.376v271.787a21.333 21.333 0 0 1-21.333 21.333h-21.334A21.333 21.333 0 0 1 560 725.163V453.376a21.333 21.333 0 0 1 21.333-21.333h21.334zm58.624-271.275H362.624v90.453h298.667v-90.453z" />
-            </svg>
+            <FButton type="danger">
+                <template #icon>
+                    <DeleteOutlined />
+                </template>
+            </FButton>
             <template #title>
                 <div style="width: 200px">是否删除当前内容</div>
             </template>
@@ -38,13 +59,21 @@
 
 <script>
 import { FMessage } from '@fesjs/fes-design';
+import { ref } from 'vue';
+import { DeleteOutlined } from '@fesjs/fes-design/icon';
 
 export default {
     setup() {
+        const showOk = ref(true);
+        const showCancel = ref(true);
+
         function handleConfirm(type) {
             FMessage.info(`点击了${type}`);
         }
+
         return {
+            showOk,
+            showCancel,
             handleConfirm,
         };
     },

diff --git a/docs/.vitepress/components/tooltip/index.md b/docs/.vitepress/components/tooltip/index.md
@@ -74,11 +74,13 @@ passive.vue
 
 ### confirmOption 属性
 
-| 属性       | 说明         | 类型   | 默认值                       |
-| ---------- | ------------ | ------ | ---------------------------- |
-| okText     | 确认按钮文字 | string | -                            |
-| cancelText | 取消按钮文字 | string | -                            |
-| icon       | 图标         | vNode  | `<ExclamationCircleFilled/>` |
+| 属性       | 说明             | 类型    | 默认值                       |
+| ---------- | ---------------- | ------- | ---------------------------- |
+| okText     | 确认按钮文字     | string  | -                            |
+| cancelText | 取消按钮文字     | string  | -                            |
+| showOk     | 是否显示确认按钮 | boolean | `true`                       |
+| showCancel | 是否显示取消按钮 | boolean | `true`                       |
+| icon       | 图标             | vNode   | `<ExclamationCircleFilled/>` |
 
 ## Tooltip Events
 
@@ -90,8 +92,8 @@ passive.vue
 
 ## Tooltip Methods
 
-| 方法名称   | 说明       | 参数    |
-| -------------------- | -------- | ---------- |
+| 方法名称             | 说明           | 参数       |
+| -------------------- | -------------- | ---------- |
 | updatePopperPosition | 更新弹出层位置 | () => void |
 
 ## Tooltip Slots

diff --git a/docs/.vitepress/components/tooltip/passive.vue b/docs/.vitepress/components/tooltip/passive.vue
@@ -9,11 +9,6 @@
                         { label: '否(默认)', value: false },
                         { label: '是', value: true },
                     ]"
-                    @change="
-                        (value) => {
-                            console.log(value);
-                        }
-                    "
                 />
             </FFormItem>
             <FFormItem label="点击空白处是否关闭:">
@@ -24,11 +19,6 @@
                         { label: '否(默认)', value: false },
                         { label: '是', value: true },
                     ]"
-                    @change="
-                        (value) => {
-                            console.log(value);
-                        }
-                    "
                 />
             </FFormItem>
         </FForm>