From 14b40b95a6c5f8759a17b95f5b29f1cd081fc8be Mon Sep 17 00:00:00 2001 From: lwl <1181102955@qq.com> Date: Sat, 21 Aug 2021 23:08:21 +0800 Subject: [PATCH 01/10] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=20cascader=20l?= =?UTF-8?q?i=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/cascader-li/index.scss | 22 +++++++++++++++++++ .../cascader/components/cascader-li/index.tsx | 17 ++++++++++++++ 2 files changed, 39 insertions(+) create mode 100644 devui/cascader/components/cascader-li/index.scss create mode 100644 devui/cascader/components/cascader-li/index.tsx diff --git a/devui/cascader/components/cascader-li/index.scss b/devui/cascader/components/cascader-li/index.scss new file mode 100644 index 00000000..459a9136 --- /dev/null +++ b/devui/cascader/components/cascader-li/index.scss @@ -0,0 +1,22 @@ +@import '../../../style/mixins/flex'; +@import '../../../style/theme/color'; +@import '../../../style/core/font'; + +.devui-cascader-li { + &.devui-dropdown-item { + height: 32px; + padding: 8px 12px; + color: $devui-text; + cursor: pointer; + @include flex(flex-start); + } + + .dropdown-item-label { + display: inline-block; + flex: 1; + width: 0; + overflow: hidden; + text-overflow: ellipsis; + font-size: $devui-font-size; + } +} diff --git a/devui/cascader/components/cascader-li/index.tsx b/devui/cascader/components/cascader-li/index.tsx new file mode 100644 index 00000000..fecd6d07 --- /dev/null +++ b/devui/cascader/components/cascader-li/index.tsx @@ -0,0 +1,17 @@ +import { defineComponent } from 'vue' +import { getRootClass } from '../../hooks/use-cascader-class-li' +import './index.scss' +export default defineComponent({ + name: 'CascaderLi', + setup(props, ctx) { + const rootClasses = getRootClass() + return () => ( +
  • +
    + 我是li我是li我是li我是li我是li我是li +
    + +
    • + ) + } +}) -- Gitee From 891c69ffed9bd75d80fbd07d2c61aa9cd5773383 Mon Sep 17 00:00:00 2001 From: lwl <1181102955@qq.com> Date: Sat, 21 Aug 2021 23:08:42 +0800 Subject: [PATCH 02/10] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=20cascader=20u?= =?UTF-8?q?l=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/cascader/components/cascader-ul/index.scss | 13 +++++++++++++ devui/cascader/components/cascader-ul/index.tsx | 14 ++++++++++++++ 2 files changed, 27 insertions(+) create mode 100644 devui/cascader/components/cascader-ul/index.scss create mode 100644 devui/cascader/components/cascader-ul/index.tsx diff --git a/devui/cascader/components/cascader-ul/index.scss b/devui/cascader/components/cascader-ul/index.scss new file mode 100644 index 00000000..330f1761 --- /dev/null +++ b/devui/cascader/components/cascader-ul/index.scss @@ -0,0 +1,13 @@ +@import '../../../style/mixins/flex'; +@import '../../../style/theme/color'; + +.devui-cascader-ul { + width: 200px; + height: 180px; + background: $devui-connected-overlay-bg; + display: block; + list-style: none; + margin: 0; + padding: 0; + overflow-y: auto; +} diff --git a/devui/cascader/components/cascader-ul/index.tsx b/devui/cascader/components/cascader-ul/index.tsx new file mode 100644 index 00000000..da2a3340 --- /dev/null +++ b/devui/cascader/components/cascader-ul/index.tsx @@ -0,0 +1,14 @@ +import { defineComponent } from 'vue' +import { getRootClass } from '../../hooks/use-cascader-class-ul' +import './index.scss' +export default defineComponent({ + name: 'CascaderUl', + setup(props, { slots }) { + const rootClasses = getRootClass() + return () => ( + + ) + } +}) -- Gitee From efa781679e1c4b9579006361c70e800cefae7994 Mon Sep 17 00:00:00 2001 From: lwl <1181102955@qq.com> Date: Sat, 21 Aug 2021 23:09:31 +0800 Subject: [PATCH 03/10] =?UTF-8?q?fix:=20input=E6=A0=B7=E5=BC=8F=E9=97=AE?= =?UTF-8?q?=E9=A2=98=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/input/src/input.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/devui/input/src/input.scss b/devui/input/src/input.scss index b90b8e26..ecd01736 100644 --- a/devui/input/src/input.scss +++ b/devui/input/src/input.scss @@ -3,8 +3,9 @@ .devui-input { &__wrap { + width: 100%; position: relative; - @include flex('space-between'); + @include flex(space-between); } &__preview { -- Gitee From 92baef39484db6d89d18d7402ab86407374df00a Mon Sep 17 00:00:00 2001 From: lwl <1181102955@qq.com> Date: Sat, 21 Aug 2021 23:09:56 +0800 Subject: [PATCH 04/10] =?UTF-8?q?chore:=20sidebar=E9=87=8D=E6=96=B0?= =?UTF-8?q?=E6=9E=84=E5=BB=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- sites/.vitepress/config/sidebar.ts | 245 ++++++++++++++++++----------- 1 file changed, 149 insertions(+), 96 deletions(-) diff --git a/sites/.vitepress/config/sidebar.ts b/sites/.vitepress/config/sidebar.ts index b47f0157..cb299f29 100644 --- a/sites/.vitepress/config/sidebar.ts +++ b/sites/.vitepress/config/sidebar.ts @@ -1,98 +1,151 @@ -const sidebar = { +export default { '/': [ - { text: '快速开始', link: '/' }, - { - text: '通用', - children: [ - { text: 'Button 按钮', link: '/components/button/', status: '已完成' }, - { text: 'Icon 图标', link: '/components/icon/', status: '已完成' }, - { text: 'DragDrop 拖拽', link: '/components/dragdrop/' }, - { text: 'Fullscreen 全屏', link: '/components/fullscreen/' }, - { text: 'Panel 面板', link: '/components/panel/', status: '已完成' }, - { text: 'Search 搜索框', link: '/components/search/', status: '已完成' }, - { text: 'Status 状态', link: '/components/status/', status: '已完成' }, - { text: 'Sticky 便贴', link: '/components/sticky/' }, - ] - }, - { - text: '导航', - children: [ - { text: 'Accordion 手风琴', link: '/components/accordion/' }, - { text: 'Anchor 锚点', link: '/components/anchor/' }, - { text: 'BackTop 回到顶部', link: '/components/back-top/' }, - { text: 'Breadcrumb 面包屑', link: '/components/breadcrumb/' }, - { text: 'Dropdown 下拉菜单', link: '/components/dropdown/' }, - { text: 'NavSprite 导航精灵', link: '/components/nav-sprite/' }, - { text: 'Pagination 分页', link: '/components/pagination/' }, - { text: 'StepsGuide 操作指引', link: '/components/steps-guide/' }, - { text: 'Tabs 选项卡', link: '/components/tabs/', status: '已完成' }, - ] - }, - { - text: '反馈', - children: [ - { text: 'Alert 警告', link: '/components/alert/', status: '已完成' }, - { text: 'Drawer 抽屉板', link: '/components/drawer/' }, - { text: 'Loading 加载提示', link: '/components/loading/', status: '已完成' }, - { text: 'Mention 提及', link: '/components/mention/' }, - { text: 'Modal 模态弹窗', link: '/components/modal/' }, - { text: 'Popover 悬浮提示', link: '/components/popover/' }, - { text: 'ReadTip 阅读提示', link: '/components/read-tip/' }, - { text: 'Toast 全局通知', link: '/components/toast/', status: '已完成' }, - { text: 'Tooltip 提示', link: '/components/tooltip/' }, - ] - }, - { - text: '数据录入', - children: [ - { text: 'AutoComplete 自动补全', link: '/components/auto-complete/' }, - { text: 'Cascader 级联菜单', link: '/components/cascader/' }, - { text: 'CategorySearch 分类搜索', link: '/components/category-search/' }, - { text: 'Checkbox 复选框', link: '/components/checkbox/', status: '已完成' }, - { text: 'DatePicker 日期选择器', link: '/components/date-picker/' }, - { text: 'DatePickerPro 日期选择器', link: '/components/date-picker-pro/' }, - { text: 'EditableSelect 可编辑下拉框', link: '/components/editable-select/' }, - { text: 'Form 表单', link: '/components/form/' }, - { text: 'Input 文本框', link: '/components/input/', status: '已完成' }, - { text: 'InputNumber 数字输入框', link: '/components/input-number/' }, - { text: 'MultiAutoComplete 多项自动补全', link: '/components/multi-auto-complete/' }, - { text: 'Radio 单选框', link: '/components/radio/', status: '已完成' }, - { text: 'Select 下拉选择框', link: '/components/select/', status: '已完成' }, - { text: 'Slider 滑块', link: '/components/slider/' }, - { text: 'Switch 开关', link: '/components/switch/', status: '已完成' }, - { text: 'TagInput 标签输入', link: '/components/tag-input/', status: '已完成' }, - { text: 'Textarea 多行文本框', link: '/components/textarea/' }, - { text: 'TimePicker 时间选择器', link: '/components/time-picker/' }, - { text: 'Transfer 穿梭框', link: '/components/transfer/' }, - { text: 'TreeSelect 树形选择框', link: '/components/tree-select/' }, - { text: 'Upload 上传', link: '/components/upload/' }, - ] - }, - { - text: '数据展示', - children: [ - { text: 'Avatar 头像', link: '/components/avatar/', status: '已完成' }, - { text: 'Badge 徽标', link: '/components/badge/' }, - { text: 'Card 卡片', link: '/components/card/', status: '已完成' }, - { text: 'Carousel 走马灯', link: '/components/carousel/', status: '已完成' }, - { text: 'DataTable 表格', link: '/components/data-table/' }, - { text: 'Gantt 甘特图', link: '/components/gantt/' }, - { text: 'ImagePreview 图片预览', link: '/components/image-preview/' }, - { text: 'Progress 进度条', link: '/components/progress/', status: '已完成' }, - { text: 'QuadrantDiagram 象限图', link: '/components/quadrant-diagram/' }, - { text: 'Rate 等级评估', link: '/components/rate/', status: '已完成' }, - { text: 'Tag 标签', link: '/components/tag/' }, - { text: 'Tree 树', link: '/components/tree/' }, - ] - }, - { - text: '布局', - children: [ - { text: 'Layout 布局', link: '/components/layout/' }, - { text: 'Splitter 分割器', link: '/components/splitter/' } - ] - }, - ] + { + "text": "快速开始", + "link": "/" + }, + { + "text": "通用", + "children": [ + { + "text": "Button 按钮", + "link": "/components/button/", + "status": "" + }, + { + "text": "Icon 图标", + "link": "/components/icon/", + "status": "" + }, + { + "text": "Panel 面板", + "link": "/components/panel/", + "status": "" + }, + { + "text": "Search 搜索框", + "link": "/components/search/", + "status": "" + }, + { + "text": "Status 状态", + "link": "/components/status/", + "status": "" + } + ] + }, + { + "text": "导航", + "children": [ + { + "text": "Accordion 手风琴", + "link": "/components/accordion/", + "status": "" + }, + { + "text": "Anchor 锚点", + "link": "/components/anchor/", + "status": "" + }, + { + "text": "Pagination 分页", + "link": "/components/pagination/", + "status": "" + }, + { + "text": "Tabs 选项卡", + "link": "/components/tabs/", + "status": "" + } + ] + }, + { + "text": "反馈", + "children": [ + { + "text": "Alert 警告", + "link": "/components/alert/", + "status": "" + }, + { + "text": "Progress 进度条", + "link": "/components/progress/", + "status": "" + } + ] + }, + { + "text": "数据录入", + "children": [ + { + "text": "Cascader 级联菜单", + "link": "/components/cascader/" + }, + { + "text": "Checkbox 复选框", + "link": "/components/checkbox/", + "status": "" + }, + { + "text": "Input 输入框", + "link": "/components/input/", + "status": "" + }, + { + "text": "Radio 单选框", + "link": "/components/radio/", + "status": "" + }, + { + "text": "Rate 评分", + "link": "/components/rate/", + "status": "" + }, + { + "text": "Select 下拉框", + "link": "/components/select/", + "status": "" + }, + { + "text": "Switch 开关", + "link": "/components/switch/", + "status": "" + }, + { + "text": "TagInput 标签输入框", + "link": "/components/tag-input/", + "status": "" + } + ] + }, + { + "text": "数据展示", + "children": [ + { + "text": "Avatar 头像", + "link": "/components/avatar/", + "status": "" + }, + { + "text": "Badge 徽标", + "link": "/components/badge/", + "status": "" + }, + { + "text": "Card 卡片", + "link": "/components/card/", + "status": "" + }, + { + "text": "Carousel 走马灯", + "link": "/components/carousel/", + "status": "" + } + ] + }, + { + "text": "布局", + "children": [] + } + ] } - -export default sidebar -- Gitee From a80e8170fe3c9afae0ae17ee118e0c47a2e35436 Mon Sep 17 00:00:00 2001 From: lwl <1181102955@qq.com> Date: Sat, 21 Aug 2021 23:10:30 +0800 Subject: [PATCH 05/10] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=20=20cascader?= =?UTF-8?q?=20=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8Fhook?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/cascader/hooks/use-cascader-class-li.ts | 12 ++++++++++++ devui/cascader/hooks/use-cascader-class-ul.ts | 11 +++++++++++ devui/cascader/hooks/use-cascader-class.ts | 16 ++++++++++++++++ 3 files changed, 39 insertions(+) create mode 100644 devui/cascader/hooks/use-cascader-class-li.ts create mode 100644 devui/cascader/hooks/use-cascader-class-ul.ts create mode 100644 devui/cascader/hooks/use-cascader-class.ts diff --git a/devui/cascader/hooks/use-cascader-class-li.ts b/devui/cascader/hooks/use-cascader-class-li.ts new file mode 100644 index 00000000..d8b3a962 --- /dev/null +++ b/devui/cascader/hooks/use-cascader-class-li.ts @@ -0,0 +1,12 @@ +/** + * 定义组件class + */ + import { computed, ComputedRef } from 'vue'; + + export const getRootClass = (): ComputedRef => { + return computed(() => ({ + 'devui-cascader-li': true, + 'devui-dropdown-item': true, + })) + } + \ No newline at end of file diff --git a/devui/cascader/hooks/use-cascader-class-ul.ts b/devui/cascader/hooks/use-cascader-class-ul.ts new file mode 100644 index 00000000..eb0109c7 --- /dev/null +++ b/devui/cascader/hooks/use-cascader-class-ul.ts @@ -0,0 +1,11 @@ +/** + * 定义组件class + */ + import { computed, ComputedRef } from 'vue'; + + export const getRootClass = (): ComputedRef => { + return computed(() => ({ + 'devui-cascader-ul': true, + })) + } + \ No newline at end of file diff --git a/devui/cascader/hooks/use-cascader-class.ts b/devui/cascader/hooks/use-cascader-class.ts new file mode 100644 index 00000000..deadb56a --- /dev/null +++ b/devui/cascader/hooks/use-cascader-class.ts @@ -0,0 +1,16 @@ +/** + * 定义组件class + */ +import { computed, ComputedRef } from 'vue'; +import { CascaderProps } from '../src/cascader-types' +const TRIGGER_Map = { + hover: 'hover', + click: 'click', +} +export const getRootClass = (props: CascaderProps): ComputedRef => { + return computed(() => ({ + 'devui-dropdown devui-dropdown-animation': true, + 'devui-cascader': true, + 'devui-cascader__disbaled': props.disabled, + })) +} -- Gitee From 1d5c5e6b879eeb12cb523985e6837c523949ace8 Mon Sep 17 00:00:00 2001 From: lwl <1181102955@qq.com> Date: Sat, 21 Aug 2021 23:34:14 +0800 Subject: [PATCH 06/10] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=20cascader=20?= =?UTF-8?q?=E7=BA=A7=E8=81=94=E8=8F=9C=E5=8D=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/cascader/index.ts | 18 +++++++++ devui/cascader/src/cascader-types.ts | 58 ++++++++++++++++++++++++++++ devui/cascader/src/cascader.scss | 44 +++++++++++++++++++++ devui/cascader/src/cascader.tsx | 42 ++++++++++++++++++++ 4 files changed, 162 insertions(+) create mode 100644 devui/cascader/index.ts create mode 100644 devui/cascader/src/cascader-types.ts create mode 100644 devui/cascader/src/cascader.scss create mode 100644 devui/cascader/src/cascader.tsx diff --git a/devui/cascader/index.ts b/devui/cascader/index.ts new file mode 100644 index 00000000..81e416df --- /dev/null +++ b/devui/cascader/index.ts @@ -0,0 +1,18 @@ +import type { App } from 'vue' +import Cascader from './src/cascader' + +Cascader.install = function(app: App): void { + app.component(Cascader.name, Cascader) +} + +export { Cascader } + +export default { + title: 'Cascader 级联菜单', + category: '数据录入', + status: undefined, // TODO: 组件若开发完成则填入"已完成"，并删除该注释 + install(app: App): void { + + app.use(Cascader as any) + } +} diff --git a/devui/cascader/src/cascader-types.ts b/devui/cascader/src/cascader-types.ts new file mode 100644 index 00000000..202d9832 --- /dev/null +++ b/devui/cascader/src/cascader-types.ts @@ -0,0 +1,58 @@ +import type { PropType, ExtractPropTypes } from 'vue' + +type TriggerTypes = 'hover'|'click' + +export interface CascaderItem { + label: string + value: number | string + isLeaf?: boolean + children?: CascaderItem[] + disabled?: boolean + icon?: string + // 用户可以传入自定义属性，并在dropDownItemTemplate中使用 + [prop: string]: any +} + +export const cascaderProps = { + /** + * 可选，指定展开次级菜单方式 + * @description 可选择的值 'hover', 'click' + * @type {('hover'|'click')} + * @default 'hover' + */ + trigger: { + type: String as PropType, + default: 'hover' + }, + /** + * 必选，级联器的菜单信息 + * @type {CascaderItem[]} + * @default [] + */ + options: { + type: Object as PropType, + default: [], + required: true + }, + /** + * 可选，级联器是否禁用 + * @type {boolean} + * @default false + */ + disabled: { + type: Boolean, + default: false + }, + /** + * 可选，没有选择时的输入框展示信息 + * @type {string} + * @default ''' + */ + placeholder: { + type: String, + default: '' + } + +} as const + +export type CascaderProps = ExtractPropTypes diff --git a/devui/cascader/src/cascader.scss b/devui/cascader/src/cascader.scss new file mode 100644 index 00000000..dbdc02aa --- /dev/null +++ b/devui/cascader/src/cascader.scss @@ -0,0 +1,44 @@ +@import '../../style/mixins/size'; +@import '../../style/mixins/flex'; +@import '../../style/theme/color'; + +.devui-cascader { + @include flex(flex-start); + + position: relative; + + >div:nth-child(1) { + width: 100%; + } + + &__icon { + position: absolute; + right: 5px; + top: 0; + height: 100%; + @include flex; + @include flex-direction; + } + + input { + width: 100%; + padding-right: 16px; + } + + .devui-drop-menu-wrapper { + margin: 5px 0; + font-size: 0; + white-space: nowrap; + padding: 0; + } +} + +.devui-drop-icon-animation { + transition: transform 0.2s linear; +} + +.devui-dropdown__open { + .devui-cascader__icon { + transform: rotate(180deg); + } +} diff --git a/devui/cascader/src/cascader.tsx b/devui/cascader/src/cascader.tsx new file mode 100644 index 00000000..1b5cef2e --- /dev/null +++ b/devui/cascader/src/cascader.tsx @@ -0,0 +1,42 @@ +import './cascader.scss' + +import { defineComponent, ref } from 'vue' +import { cascaderProps, CascaderProps } from './cascader-types' +import { getRootClass } from '../hooks/use-cascader-class' +import DInput from '../../input/src/input' +import CascaderUl from '../components/cascader-ul' +import CascaderLi from '../components/cascader-li' + +export default defineComponent({ + name: 'DCascader', + props: cascaderProps, + emits: [], + setup(props: CascaderProps, ctx) { + // 配置class + const rootClasses = getRootClass(props) + const menuShow = ref(false) + const cascaderClick = () => { + menuShow.value = !menuShow.value + } + return () => ( +
    +
    + +
    + +
    +
    +
    + + {{ + li: + }} + +
    +
    + ) + }, +}) -- Gitee From b12d26b2804a09dcd41b2a11a606edf8810a905d Mon Sep 17 00:00:00 2001 From: lwl <1181102955@qq.com> Date: Sat, 21 Aug 2021 23:34:59 +0800 Subject: [PATCH 07/10] =?UTF-8?q?docs:=20=E6=96=B0=E5=A2=9E=20cascader=20?= =?UTF-8?q?=E7=BA=A7=E8=81=94=E8=8F=9C=E5=8D=95demo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- sites/components/cascader/index.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 sites/components/cascader/index.md diff --git a/sites/components/cascader/index.md b/sites/components/cascader/index.md new file mode 100644 index 00000000..5478d019 --- /dev/null +++ b/sites/components/cascader/index.md @@ -0,0 +1,12 @@ +# 级联菜单 +下拉级联菜单。 + +:::demo + +```vue + +``` + +::: \ No newline at end of file -- Gitee From d197fa37d4bbe92abc42275bad7a1406525d579a Mon Sep 17 00:00:00 2001 From: lwl <1181102955@qq.com> Date: Sat, 21 Aug 2021 23:36:56 +0800 Subject: [PATCH 08/10] =?UTF-8?q?Revert=20"fix:=20input=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=E9=97=AE=E9=A2=98=E4=BF=AE=E6=94=B9"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commit efa781679e1c4b9579006361c70e800cefae7994. --- devui/input/src/input.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/devui/input/src/input.scss b/devui/input/src/input.scss index ecd01736..b90b8e26 100644 --- a/devui/input/src/input.scss +++ b/devui/input/src/input.scss @@ -3,9 +3,8 @@ .devui-input { &__wrap { - width: 100%; position: relative; - @include flex(space-between); + @include flex('space-between'); } &__preview { -- Gitee From e3ffa2de1460b6759a5c724c6a69368d91a70275 Mon Sep 17 00:00:00 2001 From: lwl <1181102955@qq.com> Date: Sat, 21 Aug 2021 23:44:53 +0800 Subject: [PATCH 09/10] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Dsearch=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E5=B0=8Fbug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/search/src/search.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/devui/search/src/search.scss b/devui/search/src/search.scss index 0e7d66aa..0e5c186a 100644 --- a/devui/search/src/search.scss +++ b/devui/search/src/search.scss @@ -41,6 +41,7 @@ cursor: pointer; padding: 0 10px; position: absolute; + z-index: 1; right: 0; top: 0; font-size: 16px; -- Gitee From 57dd82e35b4bed3e36ecc9e0af27d5752a0a51d3 Mon Sep 17 00:00:00 2001 From: lwl <1181102955@qq.com> Date: Wed, 25 Aug 2021 22:08:14 +0800 Subject: [PATCH 10/10] feat: update cascader component --- .../{cascader-li => cascader-item}/index.scss | 0 .../components/cascader-item/index.tsx | 14 +++ .../cascader-item/use-class.ts} | 3 +- .../cascader/components/cascader-li/index.tsx | 17 --- .../{cascader-ul => cascader-list}/index.scss | 0 .../{cascader-ul => cascader-list}/index.tsx | 4 +- .../cascader-list/use-class.ts} | 0 devui/cascader/hooks/use-cascader-class.ts | 8 +- devui/cascader/hooks/use-cascader-options.ts | 12 ++ devui/cascader/hooks/use-cascader-popup.ts | 42 +++++++ devui/cascader/src/cascader-types.ts | 8 +- devui/cascader/src/cascader.scss | 24 ++++ devui/cascader/src/cascader.tsx | 35 +++--- sites/.vitepress/config/sidebar.ts | 4 + sites/components/cascader/index.md | 109 +++++++++++++++++- 15 files changed, 238 insertions(+), 42 deletions(-) rename devui/cascader/components/{cascader-li => cascader-item}/index.scss (100%) create mode 100644 devui/cascader/components/cascader-item/index.tsx rename devui/cascader/{hooks/use-cascader-class-li.ts => components/cascader-item/use-class.ts} (71%) delete mode 100644 devui/cascader/components/cascader-li/index.tsx rename devui/cascader/components/{cascader-ul => cascader-list}/index.scss (100%) rename devui/cascader/components/{cascader-ul => cascader-list}/index.tsx (75%) rename devui/cascader/{hooks/use-cascader-class-ul.ts => components/cascader-list/use-class.ts} (100%) create mode 100644 devui/cascader/hooks/use-cascader-options.ts create mode 100644 devui/cascader/hooks/use-cascader-popup.ts diff --git a/devui/cascader/components/cascader-li/index.scss b/devui/cascader/components/cascader-item/index.scss similarity index 100% rename from devui/cascader/components/cascader-li/index.scss rename to devui/cascader/components/cascader-item/index.scss diff --git a/devui/cascader/components/cascader-item/index.tsx b/devui/cascader/components/cascader-item/index.tsx new file mode 100644 index 00000000..15ce3016 --- /dev/null +++ b/devui/cascader/components/cascader-item/index.tsx @@ -0,0 +1,14 @@ +import { defineComponent } from 'vue' +import { getRootClass } from './use-class' +import './index.scss' +export const DCascaderItem = (props) => { + const rootClasses = getRootClass() + return ( +
  • +
    + 111111111 +
    + +
    • + ) +} diff --git a/devui/cascader/hooks/use-cascader-class-li.ts b/devui/cascader/components/cascader-item/use-class.ts similarity index 71% rename from devui/cascader/hooks/use-cascader-class-li.ts rename to devui/cascader/components/cascader-item/use-class.ts index d8b3a962..5a5ec3e2 100644 --- a/devui/cascader/hooks/use-cascader-class-li.ts +++ b/devui/cascader/components/cascader-item/use-class.ts @@ -5,8 +5,7 @@ export const getRootClass = (): ComputedRef => { return computed(() => ({ - 'devui-cascader-li': true, - 'devui-dropdown-item': true, + 'devui-cascader-li devui-dropdown-item': true, })) } \ No newline at end of file diff --git a/devui/cascader/components/cascader-li/index.tsx b/devui/cascader/components/cascader-li/index.tsx deleted file mode 100644 index fecd6d07..00000000 --- a/devui/cascader/components/cascader-li/index.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { defineComponent } from 'vue' -import { getRootClass } from '../../hooks/use-cascader-class-li' -import './index.scss' -export default defineComponent({ - name: 'CascaderLi', - setup(props, ctx) { - const rootClasses = getRootClass() - return () => ( -
  • -
    - 我是li我是li我是li我是li我是li我是li -
    - -
    • - ) - } -}) diff --git a/devui/cascader/components/cascader-ul/index.scss b/devui/cascader/components/cascader-list/index.scss similarity index 100% rename from devui/cascader/components/cascader-ul/index.scss rename to devui/cascader/components/cascader-list/index.scss diff --git a/devui/cascader/components/cascader-ul/index.tsx b/devui/cascader/components/cascader-list/index.tsx similarity index 75% rename from devui/cascader/components/cascader-ul/index.tsx rename to devui/cascader/components/cascader-list/index.tsx index da2a3340..b49f4b55 100644 --- a/devui/cascader/components/cascader-ul/index.tsx +++ b/devui/cascader/components/cascader-list/index.tsx @@ -1,8 +1,8 @@ import { defineComponent } from 'vue' -import { getRootClass } from '../../hooks/use-cascader-class-ul' +import { getRootClass } from './use-class' import './index.scss' export default defineComponent({ - name: 'CascaderUl', + name: 'DCascaderList', setup(props, { slots }) { const rootClasses = getRootClass() return () => ( diff --git a/devui/cascader/hooks/use-cascader-class-ul.ts b/devui/cascader/components/cascader-list/use-class.ts similarity index 100% rename from devui/cascader/hooks/use-cascader-class-ul.ts rename to devui/cascader/components/cascader-list/use-class.ts diff --git a/devui/cascader/hooks/use-cascader-class.ts b/devui/cascader/hooks/use-cascader-class.ts index deadb56a..706eca5e 100644 --- a/devui/cascader/hooks/use-cascader-class.ts +++ b/devui/cascader/hooks/use-cascader-class.ts @@ -1,16 +1,16 @@ /** * 定义组件class */ -import { computed, ComputedRef } from 'vue'; +import { computed, ComputedRef, Ref } from 'vue'; import { CascaderProps } from '../src/cascader-types' const TRIGGER_Map = { hover: 'hover', click: 'click', } -export const getRootClass = (props: CascaderProps): ComputedRef => { +export const getRootClass = (props: CascaderProps, menuShow: Ref ): ComputedRef => { return computed(() => ({ - 'devui-dropdown devui-dropdown-animation': true, - 'devui-cascader': true, + 'devui-cascader devui-dropdown devui-dropdown-animation': true, + 'devui-dropdown__open': menuShow.value, 'devui-cascader__disbaled': props.disabled, })) } diff --git a/devui/cascader/hooks/use-cascader-options.ts b/devui/cascader/hooks/use-cascader-options.ts new file mode 100644 index 00000000..f0b1aa1b --- /dev/null +++ b/devui/cascader/hooks/use-cascader-options.ts @@ -0,0 +1,12 @@ +/** + * 处理传入options数据 + */ +import { ref, watch } from 'vue'; +import { CascaderProps } from '../src/cascader-types' + +export const optionsHandles = (props: CascaderProps) => { + const options = props.options + return { + + } +} diff --git a/devui/cascader/hooks/use-cascader-popup.ts b/devui/cascader/hooks/use-cascader-popup.ts new file mode 100644 index 00000000..5085b8fc --- /dev/null +++ b/devui/cascader/hooks/use-cascader-popup.ts @@ -0,0 +1,42 @@ +/** + * 控制窗口打开收起 + */ +import { ref, watch } from 'vue'; +import { PopupTypes } from '../src/cascader-types' + +export const popupHandles = (): PopupTypes => { + const menuShow = ref(false) + const menuOpenClass = ref('') + const openPopup = (e) => { + menuShow.value = !menuShow.value + } + // 监听与解除监听事件必须得声明 + const cb = (e: MouseEvent) => { + if ((e.target as HTMLInputElement).className === 'devui-cascader-ul') { + return false + } + menuShow.value = !menuShow.value + } + // 监听popup的打开关闭，绑定或解除事件绑定 + watch(menuShow, (status) => { + console.log(status) + switch (status) { + case false: + document.removeEventListener('click', cb, true) + menuOpenClass.value = '' + break + case true: + document.addEventListener('click', cb, true) + menuOpenClass.value = 'devui-drop-menu-wrapper' + break + default: + break + } + }) + + return { + menuShow, + menuOpenClass, + openPopup, + } +} diff --git a/devui/cascader/src/cascader-types.ts b/devui/cascader/src/cascader-types.ts index 202d9832..139cf3c5 100644 --- a/devui/cascader/src/cascader-types.ts +++ b/devui/cascader/src/cascader-types.ts @@ -1,4 +1,4 @@ -import type { PropType, ExtractPropTypes } from 'vue' +import type { PropType, ExtractPropTypes, Ref } from 'vue' type TriggerTypes = 'hover'|'click' @@ -56,3 +56,9 @@ export const cascaderProps = { } as const export type CascaderProps = ExtractPropTypes + +export interface PopupTypes { + menuShow: Ref + menuOpenClass: Ref + openPopup: (e?: MouseEvent) => void +} \ No newline at end of file diff --git a/devui/cascader/src/cascader.scss b/devui/cascader/src/cascader.scss index dbdc02aa..0da2491f 100644 --- a/devui/cascader/src/cascader.scss +++ b/devui/cascader/src/cascader.scss @@ -18,6 +18,10 @@ height: 100%; @include flex; @include flex-direction; + + .icon { + margin: 0; + } } input { @@ -37,8 +41,28 @@ transition: transform 0.2s linear; } +.devui-drop-menu-animation { + transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out; + opacity: 0; + position: absolute; + float: left; + z-index: 1000; + transform: scaleY(0.7) translateY(-5px); + top: calc(100% - 1px); +} + .devui-dropdown__open { .devui-cascader__icon { transform: rotate(180deg); } + + .devui-drop-menu-animation { + transform-origin: 0 0%; + transform: scaleY(0.9999) translateY(0); + opacity: 1; + } + + .devui-drop-menu-wrapper { + display: block; + } } diff --git a/devui/cascader/src/cascader.tsx b/devui/cascader/src/cascader.tsx index 1b5cef2e..c5ca64b0 100644 --- a/devui/cascader/src/cascader.tsx +++ b/devui/cascader/src/cascader.tsx @@ -1,26 +1,29 @@ import './cascader.scss' -import { defineComponent, ref } from 'vue' +import { defineComponent, ref, computed } from 'vue' import { cascaderProps, CascaderProps } from './cascader-types' import { getRootClass } from '../hooks/use-cascader-class' +import { popupHandles } from '../hooks/use-cascader-popup' +import { DCascaderItem } from '../components/cascader-item' +import DCascaderList from '../components/cascader-list' import DInput from '../../input/src/input' -import CascaderUl from '../components/cascader-ul' -import CascaderLi from '../components/cascader-li' +import { optionsHandles } from '../hooks/use-cascader-options' + export default defineComponent({ name: 'DCascader', props: cascaderProps, emits: [], setup(props: CascaderProps, ctx) { + // popup弹出层 + const { menuShow, menuOpenClass, openPopup } = popupHandles() // 配置class - const rootClasses = getRootClass(props) - const menuShow = ref(false) - const cascaderClick = () => { - menuShow.value = !menuShow.value - } + const rootClasses = getRootClass(props, menuShow) + const {} = optionsHandles(props) + return () => (
    -
    +
    -
    - - {{ - li: - }} - +
    +
    + + {{ + li: () => + }} + +
    ) diff --git a/sites/.vitepress/config/sidebar.ts b/sites/.vitepress/config/sidebar.ts index cb299f29..232cc6a9 100644 --- a/sites/.vitepress/config/sidebar.ts +++ b/sites/.vitepress/config/sidebar.ts @@ -81,6 +81,10 @@ export default { "text": "Cascader 级联菜单", "link": "/components/cascader/" }, + { + "text": "DatePicker 日期选择器", + "link": "/components/date-picker/" + }, { "text": "Checkbox 复选框", "link": "/components/checkbox/", diff --git a/sites/components/cascader/index.md b/sites/components/cascader/index.md index 5478d019..9c5e3908 100644 --- a/sites/components/cascader/index.md +++ b/sites/components/cascader/index.md @@ -5,8 +5,115 @@ ```vue + ``` ::: \ No newline at end of file -- Gitee