diff --git a/src/router/modules/component.basic.example.ts b/src/router/modules/component.basic.example.ts
index 2c61e816..24d54d73 100644
--- a/src/router/modules/component.basic.example.ts
+++ b/src/router/modules/component.basic.example.ts
@@ -8,120 +8,18 @@ const routes: RouteRecordRaw = {
redirect: '/component_basic_example/icon',
name: 'componentBasicExample',
meta: {
- title: '基础组件（部分）',
+ title: '基础组件',
icon: 'ep:element-plus',
},
children: [
{
- path: 'icon',
- name: 'componentBasicExampleIcon',
- component: () => import('@/views/component_basic_example/icon.vue'),
+ path: '',
+ name: 'componentBasicExampleIndex',
+ component: () => import('@/views/component_basic_example/index.vue'),
meta: {
- title: '图标',
- },
- },
- {
- path: 'button',
- name: 'componentBasicExampleButton',
- component: () => import('@/views/component_basic_example/button.vue'),
- meta: {
- title: '按钮',
- },
- },
- {
- path: 'link',
- name: 'componentBasicExampleLink',
- component: () => import('@/views/component_basic_example/link.vue'),
- meta: {
- title: '文字链接',
- },
- },
- {
- path: 'radio',
- name: 'componentBasicExampleRadio',
- component: () => import('@/views/component_basic_example/radio.vue'),
- meta: {
- title: '单选框',
- },
- },
- {
- path: 'checkbox',
- name: 'componentBasicExampleCheckbox',
- component: () => import('@/views/component_basic_example/checkbox.vue'),
- meta: {
- title: '多选框',
- },
- },
- {
- path: 'input',
- name: 'componentBasicExampleInput',
- component: () => import('@/views/component_basic_example/input.vue'),
- meta: {
- title: '输入框',
- },
- },
- {
- path: 'inputnumber',
- name: 'componentBasicExampleInputnumber',
- component: () => import('@/views/component_basic_example/inputnumber.vue'),
- meta: {
- title: '数字输入框',
- },
- },
- {
- path: 'select',
- name: 'componentBasicExampleSelect',
- component: () => import('@/views/component_basic_example/select.vue'),
- meta: {
- title: '选择器',
- },
- },
- {
- path: 'switch',
- name: 'componentBasicExampleSwitch',
- component: () => import('@/views/component_basic_example/switch.vue'),
- meta: {
- title: '开关',
- },
- },
- {
- path: 'slider',
- name: 'componentBasicExampleSlider',
- component: () => import('@/views/component_basic_example/slider.vue'),
- meta: {
- title: '滑块',
- },
- },
- {
- path: 'timepicker',
- name: 'componentBasicExampleTimepicker',
- component: () => import('@/views/component_basic_example/timepicker.vue'),
- meta: {
- title: '时间选择器',
- },
- },
- {
- path: 'datepicker',
- name: 'componentBasicExampleDatepicker',
- component: () => import('@/views/component_basic_example/datepicker.vue'),
- meta: {
- title: '日期选择器',
- },
- },
- {
- path: 'datetimepicker',
- name: 'componentBasicExampleDatetimepicker',
- component: () => import('@/views/component_basic_example/datetimepicker.vue'),
- meta: {
- title: '日期时间选择器',
- },
- },
- {
- path: 'rate',
- name: 'componentBasicExampleRate',
- component: () => import('@/views/component_basic_example/rate.vue'),
- meta: {
- title: '评分',
+ title: '基础组件',
+ sidebar: false,
+ breadcrumb: false,
},
},
],
diff --git a/src/views/component_basic_example/button.vue b/src/views/component_basic_example/button.vue
deleted file mode 100644
index 434ade7a..00000000
--- a/src/views/component_basic_example/button.vue
+++ /dev/null
@@ -1,294 +0,0 @@
-
-meta:
- enabled: false
-
-
-
-
-
-
-
-
-
-
- 默认按钮
-
- 主要按钮
-
-
- 成功按钮
-
-
- 信息按钮
-
-
- 警告按钮
-
-
- 危险按钮
-
-
-
-
- 朴素按钮
-
-
- 主要按钮
-
-
- 成功按钮
-
-
- 信息按钮
-
-
- 警告按钮
-
-
- 危险按钮
-
-
-
-
- 圆角按钮
-
-
- 主要按钮
-
-
- 成功按钮
-
-
- 信息按钮
-
-
- 警告按钮
-
-
- 危险按钮
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 默认按钮
-
-
- 主要按钮
-
-
- 成功按钮
-
-
- 信息按钮
-
-
- 警告按钮
-
-
- 危险按钮
-
-
-
-
- 朴素按钮
-
-
- 主要按钮
-
-
- 成功按钮
-
-
- 信息按钮
-
-
- 警告按钮
-
-
- 危险按钮
-
-
-
-
-
- 文字按钮
-
-
- 文字按钮
-
-
- 文字按钮
-
-
- 文字按钮
-
-
- 文字按钮
-
-
- 文字按钮
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 搜索
-
-
- 上传
-
-
-
-
-
-
-
-
-
-
-
- 上一页
-
-
- 下一页
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 加载中
-
-
-
-
-
- 大号按钮
-
-
- 默认按钮
-
-
- 小号按钮
-
-
-
-
- 大号按钮
-
-
- 默认按钮
-
-
- 小号按钮
-
-
-
-
-
-
-
-
- 备选项
-
-
-
-
- 备选项1
-
-
- 备选项
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ city }}
-
-
-
-
-
-
- {{ city }}
-
-
-
-
-
-
-
-
-
-
- 基础组件来自 Element Plus ，更多组件及使用技巧请查看
-
- Element Plus 官网
-
-
-
-
-
-
-
diff --git a/src/views/component_basic_example/components/button.vue b/src/views/component_basic_example/components/button.vue
new file mode 100644
index 00000000..6cbd8ace
--- /dev/null
+++ b/src/views/component_basic_example/components/button.vue
@@ -0,0 +1,288 @@
+
+
+
+ 基础用法
+
+
+ 默认按钮
+
+ 主要按钮
+
+
+ 成功按钮
+
+
+ 信息按钮
+
+
+ 警告按钮
+
+
+ 危险按钮
+
+
+
+
+ 朴素按钮
+
+
+ 主要按钮
+
+
+ 成功按钮
+
+
+ 信息按钮
+
+
+ 警告按钮
+
+
+ 危险按钮
+
+
+
+
+ 圆角按钮
+
+
+ 主要按钮
+
+
+ 成功按钮
+
+
+ 信息按钮
+
+
+ 警告按钮
+
+
+ 危险按钮
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 禁用状态
+
+
+
+ 默认按钮
+
+
+ 主要按钮
+
+
+ 成功按钮
+
+
+ 信息按钮
+
+
+ 警告按钮
+
+
+ 危险按钮
+
+
+
+
+ 朴素按钮
+
+
+ 主要按钮
+
+
+ 成功按钮
+
+
+ 信息按钮
+
+
+ 警告按钮
+
+
+ 危险按钮
+
+
+
+ 文字按钮
+
+
+ 文字按钮
+
+
+ 文字按钮
+
+
+ 文字按钮
+
+
+ 文字按钮
+
+
+ 文字按钮
+
+
+ 文字按钮
+
+
+ 图标按钮
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 搜索
+
+
+ 上传
+
+
+
+
+
+ 按钮组
+
+
+
+
+
+
+ 上一页
+
+
+ 下一页
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 加载中
+
+
+ 加载中
+
+
+ 不同尺寸
+
+
+
+ 大号按钮
+
+
+ 默认按钮
+
+
+ 小号按钮
+
+
+
+
+ 大号按钮
+
+
+ 默认按钮
+
+
+ 小号按钮
+
+
+
+
+ 基础用法
+
+
+ 备选项
+
+
+ 禁用状态
+
+
+ 备选项1
+
+
+ 备选项
+
+
+ 多选框组
+
+
+
+
+
+
+
+
+
+ 可选项目数量的限制
+
+
+
+ {{ city }}
+
+
+
+ 按钮样式
+
+
+
+ {{ city }}
+
+
+
+ 带有边框
+
+
+
+
+
diff --git a/src/views/component_basic_example/icon.vue b/src/views/component_basic_example/components/icon.vue
similarity index 62%
rename from src/views/component_basic_example/icon.vue
rename to src/views/component_basic_example/components/icon.vue
index 7262674a..dadbfc69 100644
--- a/src/views/component_basic_example/icon.vue
+++ b/src/views/component_basic_example/components/icon.vue
@@ -1,17 +1,10 @@
-
-meta:
- enabled: false
-
-
-
-
-
+
@@ -23,7 +16,17 @@ import Alert from './components/alert.vue'
搜索
-
+
+
+ 图标集合
+
+
+
+
+
+
+
+
+
+ 基础用法
+
+
+
+ 禁用状态
+
+
+
+ 可清空
+
+
+
+ 密码框
+
+
+
+ 带 icon 的输入框
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 文本域
+
+
+
+
diff --git a/src/views/component_basic_example/components/inputnumber.vue b/src/views/component_basic_example/components/inputnumber.vue
new file mode 100644
index 00000000..ac9bd8bb
--- /dev/null
+++ b/src/views/component_basic_example/components/inputnumber.vue
@@ -0,0 +1,32 @@
+
+
+
+
+
+ 基础用法
+
+
+
+ 禁用状态
+
+
+
+ 步数
+
+
+
+ 精度
+
+
+
+ 按钮位置
+
+
+
+
diff --git a/src/views/component_basic_example/components/link.vue b/src/views/component_basic_example/components/link.vue
new file mode 100644
index 00000000..c6568a95
--- /dev/null
+++ b/src/views/component_basic_example/components/link.vue
@@ -0,0 +1,74 @@
+
+
+
+ 基础用法
+
+
+ 默认链接
+
+
+ 主要链接
+
+
+ 成功链接
+
+
+ 警告链接
+
+
+ 危险链接
+
+
+ 信息链接
+
+
+ 禁用状态
+
+
+ 默认链接
+
+
+ 主要链接
+
+
+ 成功链接
+
+
+ 警告链接
+
+
+ 危险链接
+
+
+ 信息链接
+
+
+ 下划线
+
+
+ 无下划线
+
+ 有下划线
+
+ 图标
+
+
+
+
+
+ 编辑
+
+
+ 查看
+
+
+
+
+
+
+
+
diff --git a/src/views/component_basic_example/components/radio.vue b/src/views/component_basic_example/components/radio.vue
new file mode 100644
index 00000000..3dbf3b56
--- /dev/null
+++ b/src/views/component_basic_example/components/radio.vue
@@ -0,0 +1,62 @@
+
+
+
+
+
+ 基础用法
+
+
+ 备选项
+
+
+ 备选项
+
+
+ 禁用状态
+
+
+ 备选项
+
+
+ 备选项
+
+
+ 单选框组
+
+
+
+ 备选项
+
+
+ 备选项
+
+
+ 备选项
+
+
+
+ 按钮样式
+
+
+
+
+
+
+
+
+ 带有边框
+
+
+ 备选项1
+
+
+ 备选项2
+
+
+
diff --git a/src/views/component_basic_example/components/rate.vue b/src/views/component_basic_example/components/rate.vue
new file mode 100644
index 00000000..fc00daba
--- /dev/null
+++ b/src/views/component_basic_example/components/rate.vue
@@ -0,0 +1,22 @@
+
+
+
+
+
+ 基础用法
+
+
+
+ 辅助文字
+
+
+
+ 只读
+
+
+
+
diff --git a/src/views/component_basic_example/components/select.vue b/src/views/component_basic_example/components/select.vue
new file mode 100644
index 00000000..ff7d4746
--- /dev/null
+++ b/src/views/component_basic_example/components/select.vue
@@ -0,0 +1,60 @@
+
+
+
+
+
+ 基础用法
+
+
+
+
+
+ 有禁用选项
+
+
+
+
+
+ 禁用状态
+
+
+
+
+
+ 可清空单选
+
+
+
+
+
+ 基础多选
+
+
+
+
+
+ 可搜索
+
+
+
+
+
+
diff --git a/src/views/component_basic_example/components/slider.vue b/src/views/component_basic_example/components/slider.vue
new file mode 100644
index 00000000..41bcf817
--- /dev/null
+++ b/src/views/component_basic_example/components/slider.vue
@@ -0,0 +1,52 @@
+
+
+
+
+
+ 基础用法
+
+ 默认
+
+ 自定义初始值
+
+ 隐藏 Tooltip
+
+ 格式化 Tooltip
+
+ 禁用
+
+
+ 离散值
+
+ 不显示间断点
+
+ 显示间断点
+
+
+ 带有输入框
+
+
+
+ 范围选择
+
+
+
+ 竖向模式
+
+
+
+
diff --git a/src/views/component_basic_example/components/switch.vue b/src/views/component_basic_example/components/switch.vue
new file mode 100644
index 00000000..97d31d92
--- /dev/null
+++ b/src/views/component_basic_example/components/switch.vue
@@ -0,0 +1,24 @@
+
+
+
+
+
+ 基础用法
+
+
+
+ 文字描述
+
+
+
+ 禁用状态
+
+
+
+
+
diff --git a/src/views/component_basic_example/datepicker.vue b/src/views/component_basic_example/datepicker.vue
deleted file mode 100644
index 152d6c0c..00000000
--- a/src/views/component_basic_example/datepicker.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-
-meta:
- enabled: false
-
-
-
-
-
-
-
-
-
- 默认
-
- 带快捷选项
-
-
-
- 周
-
- 月
-
- 年
-
- 多个日期
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 起始日期时刻为 12:00:00，结束日期时刻为 08:00:00
-
-
-
+
+
+
+
+
+
+
+ Element Plus 官网
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 默认链接
-
-
- 主要链接
-
-
- 成功链接
-
-
- 警告链接
-
-
- 危险链接
-
-
- 信息链接
-
-
-
-
- 默认链接
-
-
- 主要链接
-
-
- 成功链接
-
-
- 警告链接
-
-
- 危险链接
-
-
- 信息链接
-
-
-
-
- 无下划线
-
- 有下划线
-
-
-
-
-
-
- 编辑
-
-
- 查看
-
-
-
-
-
-
-
-
-
-
- 备选项
-
-
- 备选项
-
-
-
-
- 备选项
-
-
- 备选项
-
-
-
-
-
- 备选项
-
-
- 备选项
-
-
- 备选项
-
-
-
-
-
-
-
-
-
-
-
-
-
- 备选项1
-
-
- 备选项2
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 默认
-
- 自定义初始值
-
- 隐藏 Tooltip
-
- 格式化 Tooltip
-
- 禁用
-
-
-
- 不显示间断点
-
- 显示间断点
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-