Merge pull request wocwin#23 from OneDream2000/feat-radio组件

Feat radio组件
sscfaith · Dec 25, 2023 · d467dcf · d467dcf
2 parents 3ccc374 + 5443e9d
commit d467dcf
Show file tree

Hide file tree

Showing 13 changed files with 511 additions and 167 deletions.
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -1,84 +1,85 @@
-import { defineConfig } from 'vitepress'
-import { mdPlugin } from './config/plugins'
-export default defineConfig({
-  title: 'TuiPlus基础组件文档',
-  description: '基于Element-plus基础组件封装使用',
-  lang: 'cn-ZH',
-  base: '/t-ui-plus/',
-  lastUpdated: true,
-  themeConfig: {
-    logo: '/favicon.ico',
-    siteTitle: 'TuiPlus基础组件文档',
-    outline: 3,
-    socialLinks: [
-      { icon: 'github', link: 'https://github.com/wocwin/t-ui-plus' },
-    ],
-    nav: [
-      {
-        text: '安装指南',
-        link: '/components/',
-      },
-      { text: '基础组件', link: '/components/TSelect/base.md' },
-      {
-        text: 'GitHub地址',
-        link: 'https://github.com/wocwin/t-ui-plus',
-      },
-      {
-        text: 'Gitee码云地址',
-        link: 'https://gitee.com/wocwin/t-ui-plus',
-      },
-      {
-        text: '博客',
-        items: [
-          { text: 'CSDN', link: 'https://blog.csdn.net/cwin8951' },
-          {
-            text: '掘金',
-            link: 'https://juejin.cn/user/888061128344087/posts',
-          },
-        ],
-      },
-    ],
-    sidebar: {
-      '/components': [
-        {
-          text: '常用组件',
-          items: [
-            { text: '下拉选择组件', link: '/components/TSelect/base.md' },
-            { text: '详情组件', link: '/components/TDetail/base.md' },
-            { text: 'Button组件', link: '/components/TButton/base.md' },
-            { text: '日期组件', link: '/components/TDatePicker/base.md' },
-            { text: '步骤组件', link: '/components/TStepWizard/base.md' },
-          ],
-        },
-        {
-          text: '复杂组件',
-          items: [
-            {
-              text: '下拉选择表格组件',
-              link: '/components/TSelectTable/base.md',
-            },
-            {
-              text: 'TAdaptivePage组件',
-              link: '/components/TAdaptivePage/base.md',
-            },
-            {
-              text: '条件查询组件',
-              link: '/components/TQueryCondition/base.md',
-            },
-            { text: '表单组件', link: '/components/TForm/base.md' },
-            { text: '模块表单组件', link: '/components/TModuleForm/base.md' },
-            { text: 'table组件', link: '/components/TTable/base.md' },
-          ],
-        },
-      ],
-    },
-  },
-  markdown: {
-    headers: {
-      level: [0, 0],
-    },
-    // light: #f9fafb, dark: --vp-code-block-bg
-    theme: { light: 'github-light', dark: 'github-dark' },
-    config: (md) => mdPlugin(md),
-  },
-})
+import { defineConfig } from 'vitepress'
+import { mdPlugin } from './config/plugins'
+export default defineConfig({
+  title: 'TuiPlus基础组件文档',
+  description: '基于Element-plus基础组件封装使用',
+  lang: 'cn-ZH',
+  base: '/t-ui-plus/',
+  lastUpdated: true,
+  themeConfig: {
+    logo: '/favicon.ico',
+    siteTitle: 'TuiPlus基础组件文档',
+    outline: 3,
+    socialLinks: [
+      { icon: 'github', link: 'https://github.com/wocwin/t-ui-plus' },
+    ],
+    nav: [
+      {
+        text: '安装指南',
+        link: '/components/',
+      },
+      { text: '基础组件', link: '/components/TSelect/base.md' },
+      {
+        text: 'GitHub地址',
+        link: 'https://github.com/wocwin/t-ui-plus',
+      },
+      {
+        text: 'Gitee码云地址',
+        link: 'https://gitee.com/wocwin/t-ui-plus',
+      },
+      {
+        text: '博客',
+        items: [
+          { text: 'CSDN', link: 'https://blog.csdn.net/cwin8951' },
+          {
+            text: '掘金',
+            link: 'https://juejin.cn/user/888061128344087/posts',
+          },
+        ],
+      },
+    ],
+    sidebar: {
+      '/components': [
+        {
+          text: '常用组件',
+          items: [
+            { text: '下拉选择组件', link: '/components/TSelect/base.md' },
+            { text: '详情组件', link: '/components/TDetail/base.md' },
+            { text: 'Button组件', link: '/components/TButton/base.md' },
+            { text: 'Radio组件', link: '/components/TRadio/base.md' },
+            { text: '日期组件', link: '/components/TDatePicker/base.md' },
+            { text: '步骤组件', link: '/components/TStepWizard/base.md' },
+          ],
+        },
+        {
+          text: '复杂组件',
+          items: [
+            {
+              text: '下拉选择表格组件',
+              link: '/components/TSelectTable/base.md',
+            },
+            {
+              text: 'TAdaptivePage组件',
+              link: '/components/TAdaptivePage/base.md',
+            },
+            {
+              text: '条件查询组件',
+              link: '/components/TQueryCondition/base.md',
+            },
+            { text: '表单组件', link: '/components/TForm/base.md' },
+            { text: '模块表单组件', link: '/components/TModuleForm/base.md' },
+            { text: 'table组件', link: '/components/TTable/base.md' },
+          ],
+        },
+      ],
+    },
+  },
+  markdown: {
+    headers: {
+      level: [0, 0],
+    },
+    // light: #f9fafb, dark: --vp-code-block-bg
+    theme: { light: 'github-light', dark: 'github-dark' },
+    config: (md) => mdPlugin(md),
+  },
+})
diff --git a/docs/components/TRadio/base.md b/docs/components/TRadio/base.md
@@ -0,0 +1,67 @@
+# 单选组件
+
+### 基础用法
+
+:::demo 基于 Element-plus 的 `el-radio` 二次封装的**单选组件**，继承原组件的所有属性
+TRadio/base
+:::
+
+### 尺寸大小
+
+:::demo 通过 size 属性用来控制单选框的大小
+TRadio/size
+:::
+
+### 按钮样式
+
+:::demo 你可以让单选框看起来像一个按钮一样, 只需要将`type`属性设置为 button
+TRadio/button
+:::
+
+### 带有边框
+
+:::demo 设置 border 属性为 true 可以渲染为带有边框的单选框。
+TRadio/border
+:::
+
+### 插槽使用及自定义
+
+:::demo 给选项添加 slot 属性，可以自定义单个插槽。也可以通过默认插槽，实现自定义 radio
+TRadio/slot
+:::
+
+### 可选项
+
+:::demo 设置 props 属性，可设置 `value`, `label`, `disabled` 取值
+TRadio/props
+:::
+
+### 2、配置参数（Attributes）继承 el-radio Attributes
+
+| 参数                  | 说明                 | 类型                          | 默认值    |
+| :-------------------- | :------------------- | :---------------------------- | :-------- |
+| model-value / v-model | 绑定值               | string / number / boolean     | 无        |
+| option                | 单选数据源           | Array                         | 无        |
+| size                  | 单选框的尺寸         | 'large' / 'default' / 'small' | 'default' |
+| type                  | 按钮样式             | 'radio' / 'button'            | 'radio'   |
+| props                 | 配置选项，具体看下表 | object                        | -         |
+| border                | 是否显示边框         | boolean                       | false     |
+
+### 2-1、option 配置参数（Attributes）继承 el-radioGroup Attributes
+
+| 参数     | 说明     | 类型                      | 默认值 |
+| :------- | :------- | :------------------------ | :----- |
+| value    | 绑定值   | string / number / boolean | 无     |
+| label    | 显示值   | string                    | 无     |
+| disabled | 是否禁用 | Boolean                   | false  |
+| slot     | 插槽名称 | string                    | 无     |
+
+### 2-2、Props
+
+| 参数     | 说明                                   | 类型   | 默认值     |
+| :------- | :------------------------------------- | :----- | :--------- |
+| value    | 指定节点绑定值为节点对象的某个属性值   | string | 'label'    |
+| label    | 指定节点显示值为节点对象的某个属性值   | string | 'label'    |
+| disabled | 指定节点是否禁用为节点对象的某个属性值 | string | 'disabled' |
+
+### 3、继承 el-radio&el-radioGroup events
diff --git a/docs/examples/TRadio/base.vue b/docs/examples/TRadio/base.vue
@@ -0,0 +1,15 @@
+<template>
+  <t-layout-page>
+    <t-layout-page-item>
+      <t-radio v-model="value" :options="options" />
+    </t-layout-page-item>
+  </t-layout-page>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+const value = ref('1')
+const options = ref([
+  { label: 'Option 1', value: 1 },
+  { label: 'Option 2', value: 2 },
+])
+</script>
diff --git a/docs/examples/TRadio/border.vue b/docs/examples/TRadio/border.vue
@@ -0,0 +1,33 @@
+<template>
+  <t-layout-page>
+    <t-layout-page-item>
+      <div>
+        <t-radio v-model="value" :options="options" size="large" border />
+      </div>
+      <div style="margin-top: 20px">
+        <t-radio v-model="value" :options="options" size="default" border />
+      </div>
+      <div style="margin-top: 20px">
+        <t-radio v-model="value" :options="options" size="small" border />
+      </div>
+      <div style="margin-top: 20px">
+        <t-radio
+          v-model="value"
+          :options="options"
+          size="small"
+          disabled
+          border
+        />
+      </div>
+    </t-layout-page-item>
+  </t-layout-page>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+const value = ref('1')
+const options = ref([
+  { label: 'Option 1', value: 1 },
+  { label: 'Option 2', value: 2 },
+  { label: 'Option 3', value: 3 },
+])
+</script>
diff --git a/docs/examples/TRadio/button.vue b/docs/examples/TRadio/button.vue
@@ -0,0 +1,47 @@
+<template>
+  <t-layout-page>
+    <t-layout-page-item>
+      <div>
+        <t-radio
+          v-model="value"
+          :options="options"
+          size="large"
+          type="button"
+        />
+      </div>
+      <div style="margin-top: 20px">
+        <t-radio
+          v-model="value"
+          :options="options"
+          size="default"
+          type="button"
+        />
+      </div>
+      <div style="margin-top: 20px">
+        <t-radio
+          v-model="value"
+          :options="options"
+          size="small"
+          type="button"
+        />
+      </div>
+      <div style="margin-top: 20px">
+        <t-radio
+          v-model="value"
+          :options="options"
+          size="small"
+          type="button"
+          disabled
+        />
+      </div>
+    </t-layout-page-item>
+  </t-layout-page>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+const value = ref('1')
+const options = ref([
+  { label: 'Option 1', value: 1 },
+  { label: 'Option 2', value: 2 },
+])
+</script>
diff --git a/docs/examples/TRadio/props.vue b/docs/examples/TRadio/props.vue
@@ -0,0 +1,22 @@
+<template>
+  <t-layout-page>
+    <t-layout-page-item>
+      <t-radio
+        v-model="value"
+        :options="options"
+        :props="{ label: 'name', value: 'id', disabled: 'isSelected' }"
+      />
+    </t-layout-page-item>
+  </t-layout-page>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import Disabled from '../TModuleForm/disabled.vue'
+const value = ref('1')
+const options = ref([
+  { id: '2016-05-02', name: '上海市普陀区金沙江路 1518 弄', isSelected: false },
+  { id: '2016-05-04', name: '上海市普陀区金沙江路 1517 弄', isSelected: false },
+  { id: '2016-05-01', name: '上海市普陀区金沙江路 1519 弄', isSelected: false },
+  { id: '2016-05-03', name: '上海市普陀区金沙江路 1516 弄', isSelected: true },
+])
+</script>
diff --git a/docs/examples/TRadio/size.vue b/docs/examples/TRadio/size.vue
@@ -0,0 +1,26 @@
+<template>
+  <t-layout-page>
+    <t-layout-page-item>
+      <div>
+        <t-radio v-model="value" :options="options" size="large" />
+      </div>
+      <div style="margin-top: 20px">
+        <t-radio v-model="value" :options="options" size="default" />
+      </div>
+      <div style="margin-top: 20px">
+        <t-radio v-model="value" :options="options" size="small" />
+      </div>
+      <div style="margin-top: 20px">
+        <t-radio v-model="value" :options="options" size="small" disabled />
+      </div>
+    </t-layout-page-item>
+  </t-layout-page>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+const value = ref('1')
+const options = ref([
+  { label: 'Option 1', value: 1 },
+  { label: 'Option 2', value: 2 },
+])
+</script>