diff --git a/locales/en.yaml b/locales/en.yaml index 993c33efb..9b8d9174d 100644 --- a/locales/en.yaml +++ b/locales/en.yaml @@ -44,7 +44,9 @@ menus: hsmap: Map hsdraggable: Draggable hssplitPane: Split Pane - hsbutton: Button + hsElButton: Button + hsbutton: Button Animation + hsCheckButton: Check Button hscropping: Picture Cropping hsanimatecss: AnimateCss Selector hscountTo: Digital Animation @@ -102,7 +104,6 @@ menus: hsCascader: Area Cascader hsSwiper: Swiper Plugin hsVirtualList: Virtual List - hsCheckButton: Check Button hsPdf: PDF Preview hsExcel: Export Excel hsInfiniteScroll: Table Infinite Scroll diff --git a/locales/zh-CN.yaml b/locales/zh-CN.yaml index 6fa2ea75f..dc4f2ec8d 100644 --- a/locales/zh-CN.yaml +++ b/locales/zh-CN.yaml @@ -44,7 +44,9 @@ menus: hsmap: 地图 hsdraggable: 拖拽 hssplitPane: 切割面板 - hsbutton: 按钮 + hsElButton: 按钮 + hsCheckButton: 可选按钮 + hsbutton: 按钮动效 hscropping: 图片裁剪 hsanimatecss: animate.css选择器 hscountTo: 数字动画 @@ -102,7 +104,6 @@ menus: hsCascader: 区域级联选择器 hsSwiper: Swiper插件 hsVirtualList: 虚拟列表 - hsCheckButton: 可选按钮 hsPdf: PDF预览 hsExcel: 导出Excel hsInfiniteScroll: 表格无限滚动 diff --git a/src/router/modules/able.ts b/src/router/modules/able.ts index ad5164ad0..488b9e62c 100644 --- a/src/router/modules/able.ts +++ b/src/router/modules/able.ts @@ -123,7 +123,7 @@ export default { } }, { - path: "/able/videoFrame", + path: "/able/video-frame", name: "VideoFrame", component: () => import("@/views/able/video-frame/index.vue"), meta: { @@ -139,7 +139,7 @@ export default { } }, { - path: "/able/infiniteScroll", + path: "/able/infinite-scroll", name: "InfiniteScroll", component: () => import("@/views/able/infinite-scroll.vue"), meta: { @@ -147,7 +147,7 @@ export default { } }, { - path: "/able/menuTree", + path: "/able/menu-tree", name: "MenuTree", component: () => import("@/views/able/menu-tree.vue"), meta: { @@ -155,7 +155,7 @@ export default { } }, { - path: "/able/lineTree", + path: "/able/line-tree", name: "LineTree", component: () => import("@/views/able/line-tree.vue"), meta: { diff --git a/src/router/modules/components.ts b/src/router/modules/components.ts index 994c36eba..a8e1b326b 100644 --- a/src/router/modules/components.ts +++ b/src/router/modules/components.ts @@ -27,7 +27,7 @@ export default { } }, { - path: "/components/iconSelect", + path: "/components/icon-select", name: "IconSelect", component: () => import("@/views/components/icon-select.vue"), meta: { @@ -51,7 +51,23 @@ export default { } }, { - path: "/components/checkButton", + path: "/components/segmented", + name: "Segmented", + component: () => import("@/views/components/segmented.vue"), + meta: { + title: $t("menus.hssegmented") + } + }, + { + path: "/components/el-button", + name: "PureButton", + component: () => import("@/views/components/el-button.vue"), + meta: { + title: $t("menus.hsElButton") + } + }, + { + path: "/components/check-button", name: "CheckButton", component: () => import("@/views/components/check-button.vue"), meta: { @@ -60,11 +76,11 @@ export default { } }, { - path: "/components/segmented", - name: "Segmented", - component: () => import("@/views/components/segmented.vue"), + path: "/components/button", + name: "ButtonPage", + component: () => import("@/views/components/button.vue"), meta: { - title: $t("menus.hssegmented") + title: $t("menus.hsbutton") } }, { @@ -92,7 +108,7 @@ export default { } }, { - path: "/components/splitPane", + path: "/components/split-pane", name: "SplitPane", component: () => import("@/views/components/split-pane.vue"), meta: { @@ -116,7 +132,7 @@ export default { } }, { - path: "/components/countTo", + path: "/components/count-to", name: "CountTo", component: () => import("@/views/components/count-to.vue"), meta: { @@ -140,7 +156,7 @@ export default { } }, { - path: "/components/seamlessScroll", + path: "/components/seamless-scroll", name: "SeamlessScroll", component: () => import("@/views/components/seamless-scroll.vue"), meta: { @@ -148,20 +164,12 @@ export default { } }, { - path: "/components/virtualList", + path: "/components/virtual-list", name: "VirtualList", component: () => import("@/views/components/virtual-list/index.vue"), meta: { title: $t("menus.hsVirtualList") } - }, - { - path: "/components/button", - name: "ButtonPage", - component: () => import("@/views/components/button.vue"), - meta: { - title: $t("menus.hsbutton") - } } ] } satisfies RouteConfigsTable; diff --git a/src/router/modules/flowchart.ts b/src/router/modules/flowchart.ts index c69a5a6d7..db83ad1a0 100644 --- a/src/router/modules/flowchart.ts +++ b/src/router/modules/flowchart.ts @@ -2,8 +2,8 @@ import { $t } from "@/plugins/i18n"; import { flowchart } from "@/router/enums"; export default { - path: "/flowChart", - redirect: "/flowChart/index", + path: "/flow-chart", + redirect: "/flow-chart/index", meta: { icon: "setUp", title: $t("menus.hsflowChart"), @@ -11,7 +11,7 @@ export default { }, children: [ { - path: "/flowChart/index", + path: "/flow-chart/index", name: "FlowChart", component: () => import("@/views/flow-chart/index.vue"), meta: { diff --git a/src/router/modules/formdesign.ts b/src/router/modules/formdesign.ts index 1aaf7f90b..64a204440 100644 --- a/src/router/modules/formdesign.ts +++ b/src/router/modules/formdesign.ts @@ -3,8 +3,8 @@ import { formdesign } from "@/router/enums"; const IFrame = () => import("@/layout/frameView.vue"); export default { - path: "/formDesign", - redirect: "/formDesign/index", + path: "/form-design", + redirect: "/form-design/index", meta: { icon: "terminalWindowLine", title: $t("menus.hsFormDesign"), @@ -12,7 +12,7 @@ export default { }, children: [ { - path: "/formDesign/index", + path: "/form-design/index", name: "FormDesign", component: IFrame, meta: { diff --git a/src/views/components/check-button.vue b/src/views/components/check-button.vue index d2801e7dc..127420780 100644 --- a/src/views/components/check-button.vue +++ b/src/views/components/check-button.vue @@ -10,6 +10,7 @@ defineOptions({ const spaceSize = ref(20); const size = ref("default"); const dynamicSize = ref(); +const checked = ref(true); const radio = ref("wait"); const radioBox = ref("complete"); @@ -74,6 +75,11 @@ function onGroupChecked(tag, index) { checkGroupTag.value[index].checked = curTagGroupMap.value[index].checked; } +function onSingleChecked() { + if (size.value === "disabled") return; + checked.value = !checked.value; +} + watch(size, val => val === "disabled" ? (dynamicSize.value = "default") @@ -89,10 +95,10 @@ watch(size, val => 可选按钮
- 大尺寸 - 默认尺寸 - 小尺寸 - 禁用 + 大尺寸 + 默认尺寸 + 小尺寸 + 禁用 @@ -253,6 +259,20 @@ watch(size, val => {{ tag.title }} + + +

单个可选按钮

+ + 一个人也要努力 😊 + diff --git a/src/views/components/el-button.vue b/src/views/components/el-button.vue new file mode 100644 index 000000000..bee4a8c02 --- /dev/null +++ b/src/views/components/el-button.vue @@ -0,0 +1,233 @@ + + + + +