feat:add tip (#107)

* feat: radio add disabledTip
EchoTechFE · Sep 12, 2024 · e9133e4 · e9133e4
1 parent 455dc68
commit e9133e4
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 18 deletions.
diff --git a/.changeset/olive-swans-remember.md b/.changeset/olive-swans-remember.md
@@ -0,0 +1,5 @@
+---
+'dangoui': patch
+---
+
+feat: add disabled tip
diff --git a/docs/assets/component-meta/meta.json b/docs/assets/component-meta/meta.json
@@ -3058,6 +3058,13 @@
         "type": "boolean",
         "default": "false"
       },
+      {
+        "name": "disabledTip",
+        "description": "当前无法选中的提示内容",
+        "required": false,
+        "type": "string",
+        "default": "\"\""
+      },
       {
         "name": "inline",
         "description": "",

diff --git a/docs/content/3.input/4.radio.md b/docs/content/3.input/4.radio.md
@@ -46,7 +46,7 @@ title: 使用
   <PreviewBlock title="禁用">
     <div>
       <DuRadio disabled :checked="true" />
-      <DuRadio disabled />
+      <DuRadio disabled :disabledTip="'当前不可选中'" />
     </div>
   </PreviewBlock>
 </template>
@@ -71,16 +71,17 @@ function handleMonthlyUpdate(e: { checked: boolean }) {
 }
 </script>
 ```
+
 ::
 
-::demo
----
-title: 使用 RadioGroup
----
+## ::demo
+
+## title: 使用 RadioGroup
 
 一般来说，你会选择使用 RadioGroup
 
 #snippet
+
 ```vue
 <template>
   <PreviewBlock title="一组值">
@@ -110,22 +111,28 @@ const inlineSelected = ref('')
 const buttonInlineSelected = ref('')
 </script>
 ```
+
 ::
 
-::demo
----
-title: 不同颜色
----
+## ::demo
+
+## title: 不同颜色
 
 #snippet
+
 ```vue
 <template>
   <PreviewBlock title="secondary">
     <div class="flex flex-col gap-y-8px">
       <DuRadioGroup color="secondary" v-model:value="selected" inline>
         <DuRadio v-for="item in items" :label="item" :value="item" />
       </DuRadioGroup>
-      <DuRadioGroup color="secondary" v-model:value="selected" inline shape="button">
+      <DuRadioGroup
+        color="secondary"
+        v-model:value="selected"
+        inline
+        shape="button"
+      >
         <DuRadio v-for="item in items" :label="item" :value="item" />
       </DuRadioGroup>
     </div>
@@ -135,7 +142,12 @@ title: 不同颜色
       <DuRadioGroup color="success" v-model:value="selected" inline>
         <DuRadio v-for="item in items" :label="item" :value="item" />
       </DuRadioGroup>
-      <DuRadioGroup color="success" v-model:value="selected" inline shape="button">
+      <DuRadioGroup
+        color="success"
+        v-model:value="selected"
+        inline
+        shape="button"
+      >
         <DuRadio v-for="item in items" :label="item" :value="item" />
       </DuRadioGroup>
     </div>
@@ -145,7 +157,12 @@ title: 不同颜色
       <DuRadioGroup color="warning" v-model:value="selected" inline>
         <DuRadio v-for="item in items" :label="item" :value="item" />
       </DuRadioGroup>
-      <DuRadioGroup color="warning" v-model:value="selected" inline shape="button">
+      <DuRadioGroup
+        color="warning"
+        v-model:value="selected"
+        inline
+        shape="button"
+      >
         <DuRadio v-for="item in items" :label="item" :value="item" />
       </DuRadioGroup>
     </div>
@@ -155,7 +172,12 @@ title: 不同颜色
       <DuRadioGroup color="error" v-model:value="selected" inline>
         <DuRadio v-for="item in items" :label="item" :value="item" />
       </DuRadioGroup>
-      <DuRadioGroup color="error" v-model:value="selected" inline shape="button">
+      <DuRadioGroup
+        color="error"
+        v-model:value="selected"
+        inline
+        shape="button"
+      >
         <DuRadio v-for="item in items" :label="item" :value="item" />
       </DuRadioGroup>
     </div>
@@ -165,7 +187,12 @@ title: 不同颜色
       <DuRadioGroup color="trade" v-model:value="selected" inline>
         <DuRadio v-for="item in items" :label="item" :value="item" />
       </DuRadioGroup>
-      <DuRadioGroup color="trade" v-model:value="selected" inline shape="button">
+      <DuRadioGroup
+        color="trade"
+        v-model:value="selected"
+        inline
+        shape="button"
+      >
         <DuRadio v-for="item in items" :label="item" :value="item" />
       </DuRadioGroup>
     </div>
@@ -180,6 +207,7 @@ const items = ['月卡', '季卡', '年卡']
 const selected = ref('')
 </script>
 ```
+
 ::
 
 ## API
@@ -188,4 +216,4 @@ const selected = ref('')
 ::
 
 ::api{component="RadioGroup" :withPrefix="true"}
-::
+::
diff --git a/packages/dangoui/src/radio/Radio.vue b/packages/dangoui/src/radio/Radio.vue
@@ -57,6 +57,7 @@ import {
   groupValueInjectionKey,
   setGroupValueInjectionKey,
 } from './helpers'
+import { useToast } from '../composables/useToast'
 
 const props = withDefaults(
   defineProps<{
@@ -76,6 +77,7 @@ const props = withDefaults(
     custom?: boolean
     inline?: boolean
     disabled?: boolean
+    disabledTip?: string
     cell?: boolean
     value?: any
     valueKey?: string
@@ -94,9 +96,10 @@ const props = withDefaults(
     disabled: false,
     cell: false,
     color: undefined,
+    disabledTip: '',
   },
 )
-
+const toast = useToast()
 const emit = defineEmits<{
   (e: 'click', event: any): void
   (e: 'input', value: { checked: boolean; value: any | undefined }): void
@@ -116,6 +119,7 @@ const config = computed(() => {
     inline,
     custom,
     disabled,
+    disabledTip,
     shape,
     cell,
     value,
@@ -124,14 +128,14 @@ const config = computed(() => {
   } = {
     ...props,
   }
-
   return {
     extStyle,
     extClass,
     label,
     inline: inline || groupConfig?.value.inline || false,
     custom: custom || groupConfig?.value.custom || false,
     disabled,
+    disabledTip: disabledTip || '',
     shape: shape || groupConfig?.value.shape || 'normal',
     cell: cell || groupConfig?.value.cell || false,
     value,
@@ -184,7 +188,10 @@ function update(value: string | number) {
 function handleClick(event: any) {
   emit('click', event)
 
-  if (config.value.disabled) {
+  if (config.value.disabled && config.value.disabledTip) {
+    toast.show({
+      message: config.value.disabledTip,
+    })
     return
   }