From 3c9033ea752c7f39f45561f8e4eafd78f7a142c9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Chttpxiaobocom=E2=80=9D?= <731653765@qq.com> Date: Thu, 28 Oct 2021 21:28:41 +0800 Subject: [PATCH 01/23] =?UTF-8?q?fix(slider):=E8=BF=9B=E8=A1=8C=E4=BB=A3?= =?UTF-8?q?=E7=A0=81=E5=90=88=E5=B9=B6/=E5=B0=86=E6=96=87=E6=A1=A3?= =?UTF-8?q?=E7=9A=84=E6=96=87=E6=A1=88=E6=94=B9=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/vue-devui.ts | 181 +++++++++++ docs/.vitepress/config/sidebar.ts | 293 ++++++++++++++++++ .../devui-vue/docs/components/slider/index.md | 2 +- 3 files changed, 475 insertions(+), 1 deletion(-) create mode 100644 devui/vue-devui.ts create mode 100644 docs/.vitepress/config/sidebar.ts diff --git a/devui/vue-devui.ts b/devui/vue-devui.ts new file mode 100644 index 00000000..9392e32e --- /dev/null +++ b/devui/vue-devui.ts @@ -0,0 +1,181 @@ +import type { App } from 'vue' + +import AccordionInstall, { Accordion } from './accordion' +import AlertInstall, { Alert } from './alert' +import AnchorInstall, { Anchor } from './anchor' +import AvatarInstall, { Avatar } from './avatar' +import BadgeInstall, { Badge } from './badge' +import BreadcrumbInstall, { Breadcrumb } from './breadcrumb' +import ButtonInstall, { Button } from './button' +import CardInstall, { Card } from './card' +import CarouselInstall, { Carousel } from './carousel' +import CascaderInstall, { Cascader } from './cascader' +import CheckboxInstall, { Checkbox } from './checkbox' +import DatePickerInstall, { DatePicker, StickSlider } from './date-picker' +import DrawerInstall, { Drawer } from './drawer' +import EditableSelectInstall, { EditableSelect, EditableSelectOption } from './editable-select' +import FullscreenInstall, { Fullscreen } from './fullscreen' +import IconInstall, { Icon } from './icon' +import ImagePreviewInstall, { ImagePreviewDirective, ImagePreviewService } from './image-preview' +import InputInstall, { Input } from './input' +import InputNumberInstall, { InputNumber } from './input-number' +import LayoutInstall, { Layout, Content, Header, Footer, Aside } from './layout' +import LoadingInstall, { LoadingService, Loading } from './loading' +import ModalInstall, { Modal } from './modal' +import NavSpriteInstall, { NavSprite } from './nav-sprite' +import OverlayInstall, { FlexibleOverlay, FixedOverlay } from './overlay' +import PaginationInstall, { Pagination } from './pagination' +import PanelInstall, { Panel } from './panel' +import PopoverInstall, { Popover } from './popover' +import ProgressInstall, { Progress } from './progress' +import QuadrantDiagramInstall, { QuadrantDiagram } from './quadrant-diagram' +import RadioInstall, { Radio, RadioGroup } from './radio' +import RateInstall, { Rate } from './rate' +import RippleInstall, { RippleDirective } from './ripple' +import SearchInstall, { Search } from './search' +import SelectInstall, { Select } from './select' +import SkeletonInstall, { Skeleton } from './skeleton' +import SliderInstall, { Slider } from './slider' +import SplitterInstall, { Splitter } from './splitter' +import StatusInstall, { Status } from './status' +import StepsGuideInstall, { StepsGuide } from './steps-guide' +import StickyInstall, { Sticky } from './sticky' +import SwitchInstall, { Switch } from './switch' +import TableInstall, { Table, Column } from './table' +import TabsInstall, { Tabs } from './tabs' +import TagInputInstall, { TagInput } from './tag-input' +import TimeAxisInstall, { TimeAxis } from './time-axis' +import TimePickerInstall, { TimePicker } from './time-picker' +import ToastInstall, { Toast, ToastService } from './toast' +import TooltipInstall, { Tooltip } from './tooltip' +import TransferInstall, { Transfer } from './transfer' +import TreeInstall, { Tree } from './tree' +import UploadInstall, { Upload, MultiUpload } from './upload' + +const installs = [ + AccordionInstall, + AlertInstall, + AnchorInstall, + AvatarInstall, + BadgeInstall, + BreadcrumbInstall, + ButtonInstall, + CardInstall, + CarouselInstall, + CascaderInstall, + CheckboxInstall, + DatePickerInstall, + DrawerInstall, + EditableSelectInstall, + FullscreenInstall, + IconInstall, + ImagePreviewInstall, + InputInstall, + InputNumberInstall, + LayoutInstall, + LoadingInstall, + ModalInstall, + NavSpriteInstall, + OverlayInstall, + PaginationInstall, + PanelInstall, + PopoverInstall, + ProgressInstall, + QuadrantDiagramInstall, + RadioInstall, + RateInstall, + RippleInstall, + SearchInstall, + SelectInstall, + SkeletonInstall, + SliderInstall, + SplitterInstall, + StatusInstall, + StepsGuideInstall, + StickyInstall, + SwitchInstall, + TableInstall, + TabsInstall, + TagInputInstall, + TimeAxisInstall, + TimePickerInstall, + ToastInstall, + TooltipInstall, + TransferInstall, + TreeInstall, + UploadInstall +] + +export { + Accordion, + Alert, + Anchor, + Avatar, + Badge, + Breadcrumb, + Button, + Card, + Carousel, + Cascader, + Checkbox, + DatePicker, + StickSlider, + Drawer, + EditableSelect, + EditableSelectOption, + Fullscreen, + Icon, + ImagePreviewDirective, + ImagePreviewService, + Input, + InputNumber, + Layout, + Content, + Header, + Footer, + Aside, + LoadingService, + Loading, + Modal, + NavSprite, + FlexibleOverlay, + FixedOverlay, + Pagination, + Panel, + Popover, + Progress, + QuadrantDiagram, + Radio, + RadioGroup, + Rate, + RippleDirective, + Search, + Select, + Skeleton, + Slider, + Splitter, + Status, + StepsGuide, + Sticky, + Switch, + Table, + Column, + Tabs, + TagInput, + TimeAxis, + TimePicker, + Toast, + ToastService, + Tooltip, + Transfer, + Tree, + Upload, + MultiUpload +} + +export default { + version: '0.0.1', + install(app: App): void { + installs.forEach((p) => app.use(p as any)) + } +} diff --git a/docs/.vitepress/config/sidebar.ts b/docs/.vitepress/config/sidebar.ts new file mode 100644 index 00000000..89cbe870 --- /dev/null +++ b/docs/.vitepress/config/sidebar.ts @@ -0,0 +1,293 @@ +export default { + '/': [ + { + "text": "快速开始", + "link": "/" + }, + { + "text": "通用", + "children": [ + { + "text": "Button 按钮", + "link": "/components/button/", + "status": "已完成" + }, + { + "text": "Fullscreen 全屏", + "link": "/components/fullscreen/", + "status": "已完成" + }, + { + "text": "Icon 图标", + "link": "/components/icon/", + "status": "已完成" + }, + { + "text": "Overlay 遮罩层", + "link": "/components/overlay/", + "status": "已完成" + }, + { + "text": "Panel 面板", + "link": "/components/panel/", + "status": "100%" + }, + { + "text": "Ripple 水波纹", + "link": "/components/ripple/", + "status": "已完成" + }, + { + "text": "Search 搜索框", + "link": "/components/search/", + "status": "已完成" + }, + { + "text": "Status 状态", + "link": "/components/status/", + "status": "已完成" + }, + { + "text": "Sticky 便贴", + "link": "/components/sticky/", + "status": "50%" + } + ] + }, + { + "text": "导航", + "children": [ + { + "text": "Accordion 手风琴", + "link": "/components/accordion/", + "status": "10%" + }, + { + "text": "Anchor 锚点", + "link": "/components/anchor/", + "status": "50%" + }, + { + "text": "Breadcrumb 面包屑", + "link": "/components/breadcrumb/", + "status": "50%" + }, + { + "text": "NavSprite 导航精灵", + "link": "/components/nav-sprite/", + "status": "10%" + }, + { + "text": "Pagination 分页", + "link": "/components/pagination/", + "status": "已完成" + }, + { + "text": "StepsGuide 操作指引", + "link": "/components/steps-guide/", + "status": "50%" + }, + { + "text": "Tabs 选项卡", + "link": "/components/tabs/", + "status": "60%" + } + ] + }, + { + "text": "反馈", + "children": [ + { + "text": "Alert 警告", + "link": "/components/alert/", + "status": "已完成" + }, + { + "text": "Drawer 抽屉板", + "link": "/components/drawer/", + "status": "10%" + }, + { + "text": "Loading 加载提示", + "link": "/components/loading/", + "status": "已完成" + }, + { + "text": "Modal 弹窗", + "link": "/components/modal/", + "status": "已完成" + }, + { + "text": "Popover 悬浮提示", + "link": "/components/popover/", + "status": "已完成" + }, + { + "text": "Toast 全局提示", + "link": "/components/toast/", + "status": "已完成" + }, + { + "text": "Tooltip提示", + "link": "/components/tooltip/", + "status": "50%" + } + ] + }, + { + "text": "数据录入", + "children": [ + { + "text": "Cascader 级联菜单", + "link": "/components/cascader/", + "status": "10%" + }, + { + "text": "Checkbox 复选框", + "link": "/components/checkbox/", + "status": "已完成" + }, + { + "text": "DatePicker 日期选择器", + "link": "/components/date-picker/", + "status": "50%" + }, + { + "text": "EditableSelect 可输入下拉选择框", + "link": "/components/editable-select/", + "status": "10%" + }, + { + "text": "Input 输入框", + "link": "/components/input/", + "status": "已完成" + }, + { + "text": "InputNumber 数字输入框", + "link": "/components/input-number/", + "status": "50%" + }, + { + "text": "Radio 单选框", + "link": "/components/radio/", + "status": "已完成" + }, + { + "text": "Select 下拉框", + "link": "/components/select/", + "status": "10%" + }, + { + "text": "Slider 滑块", + "link": "/components/slider/", + "status": "80%" + }, + { + "text": "Switch 开关", + "link": "/components/switch/", + "status": "已完成" + }, + { + "text": "TagInput 标签输入框", + "link": "/components/tag-input/", + "status": "已完成" + }, + { + "text": "TimePicker 时间选择器", + "link": "/components/time-picker/", + "status": "80%" + }, + { + "text": "Transfer 穿梭框", + "link": "/components/transfer/", + "status": "10%" + }, + { + "text": "Upload 上传", + "link": "/components/upload/", + "status": "80%" + } + ] + }, + { + "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": "80%" + }, + { + "text": "ImagePreview 图片预览", + "link": "/components/image-preview/", + "status": "已完成" + }, + { + "text": "Progress 进度条", + "link": "/components/progress/", + "status": "已完成" + }, + { + "text": "QuadrantDiagram 象限图", + "link": "/components/quadrant-diagram/", + "status": "10%" + }, + { + "text": "Rate 评分", + "link": "/components/rate/", + "status": "已完成" + }, + { + "text": "Skeleton 骨架屏", + "link": "/components/skeleton/", + "status": "已完成" + }, + { + "text": "Table 表格", + "link": "/components/table/", + "status": "10%" + }, + { + "text": "TimeAxis 时间轴", + "link": "/components/time-axis/", + "status": "10%" + }, + { + "text": "Tree 树", + "link": "/components/tree/", + "status": "20%" + } + ] + }, + { + "text": "布局", + "children": [ + { + "text": "Layout 布局", + "link": "/components/layout/", + "status": "已完成" + }, + { + "text": "Splitter 分割器", + "link": "/components/splitter/", + "status": "已完成" + } + ] + } + ] +} diff --git a/packages/devui-vue/docs/components/slider/index.md b/packages/devui-vue/docs/components/slider/index.md index e8af1c72..d44bbe6c 100644 --- a/packages/devui-vue/docs/components/slider/index.md +++ b/packages/devui-vue/docs/components/slider/index.md @@ -123,7 +123,7 @@ export default defineComponent({ ::: -### 异定制 Popover 的显示内容 +### 定制 Popover 的显示内容 通过 tipsRenderer 参数传入函数定制 Popover 内的显示内容。 :::demo -- Gitee From 1e855b9accd5a937d0e7f2c9d69046b6848fa1bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Chttpxiaobocom=E2=80=9D?= <731653765@qq.com> Date: Thu, 28 Oct 2021 21:28:41 +0800 Subject: [PATCH 02/23] =?UTF-8?q?fix(slider):=E8=BF=9B=E8=A1=8C=E4=BB=A3?= =?UTF-8?q?=E7=A0=81=E5=90=88=E5=B9=B6/=E5=B0=86=E6=96=87=E6=A1=A3?= =?UTF-8?q?=E7=9A=84=E6=96=87=E6=A1=88=E6=94=B9=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit fix(slider):添加文档确失的结尾标签 fix(slider): 优化拖拽体验,在灰色背景条上拖动鼠标,滑块跟着移动 --- devui/vue-devui.ts | 181 +++++++++++ docs/.vitepress/config/sidebar.ts | 293 ++++++++++++++++++ packages/devui-vue/devui/dragdrop/index.ts | 4 +- ...le.directive.ts => draggable-directive.ts} | 0 ...le.directive.ts => droppable-directive.ts} | 0 packages/devui-vue/devui/slider/index.ts | 2 +- .../devui-vue/devui/slider/src/slider.tsx | 18 +- .../devui-vue/docs/components/slider/index.md | 17 +- 8 files changed, 497 insertions(+), 18 deletions(-) create mode 100644 devui/vue-devui.ts create mode 100644 docs/.vitepress/config/sidebar.ts rename packages/devui-vue/devui/dragdrop/src/{draggable.directive.ts => draggable-directive.ts} (100%) rename packages/devui-vue/devui/dragdrop/src/{droppable.directive.ts => droppable-directive.ts} (100%) diff --git a/devui/vue-devui.ts b/devui/vue-devui.ts new file mode 100644 index 00000000..9392e32e --- /dev/null +++ b/devui/vue-devui.ts @@ -0,0 +1,181 @@ +import type { App } from 'vue' + +import AccordionInstall, { Accordion } from './accordion' +import AlertInstall, { Alert } from './alert' +import AnchorInstall, { Anchor } from './anchor' +import AvatarInstall, { Avatar } from './avatar' +import BadgeInstall, { Badge } from './badge' +import BreadcrumbInstall, { Breadcrumb } from './breadcrumb' +import ButtonInstall, { Button } from './button' +import CardInstall, { Card } from './card' +import CarouselInstall, { Carousel } from './carousel' +import CascaderInstall, { Cascader } from './cascader' +import CheckboxInstall, { Checkbox } from './checkbox' +import DatePickerInstall, { DatePicker, StickSlider } from './date-picker' +import DrawerInstall, { Drawer } from './drawer' +import EditableSelectInstall, { EditableSelect, EditableSelectOption } from './editable-select' +import FullscreenInstall, { Fullscreen } from './fullscreen' +import IconInstall, { Icon } from './icon' +import ImagePreviewInstall, { ImagePreviewDirective, ImagePreviewService } from './image-preview' +import InputInstall, { Input } from './input' +import InputNumberInstall, { InputNumber } from './input-number' +import LayoutInstall, { Layout, Content, Header, Footer, Aside } from './layout' +import LoadingInstall, { LoadingService, Loading } from './loading' +import ModalInstall, { Modal } from './modal' +import NavSpriteInstall, { NavSprite } from './nav-sprite' +import OverlayInstall, { FlexibleOverlay, FixedOverlay } from './overlay' +import PaginationInstall, { Pagination } from './pagination' +import PanelInstall, { Panel } from './panel' +import PopoverInstall, { Popover } from './popover' +import ProgressInstall, { Progress } from './progress' +import QuadrantDiagramInstall, { QuadrantDiagram } from './quadrant-diagram' +import RadioInstall, { Radio, RadioGroup } from './radio' +import RateInstall, { Rate } from './rate' +import RippleInstall, { RippleDirective } from './ripple' +import SearchInstall, { Search } from './search' +import SelectInstall, { Select } from './select' +import SkeletonInstall, { Skeleton } from './skeleton' +import SliderInstall, { Slider } from './slider' +import SplitterInstall, { Splitter } from './splitter' +import StatusInstall, { Status } from './status' +import StepsGuideInstall, { StepsGuide } from './steps-guide' +import StickyInstall, { Sticky } from './sticky' +import SwitchInstall, { Switch } from './switch' +import TableInstall, { Table, Column } from './table' +import TabsInstall, { Tabs } from './tabs' +import TagInputInstall, { TagInput } from './tag-input' +import TimeAxisInstall, { TimeAxis } from './time-axis' +import TimePickerInstall, { TimePicker } from './time-picker' +import ToastInstall, { Toast, ToastService } from './toast' +import TooltipInstall, { Tooltip } from './tooltip' +import TransferInstall, { Transfer } from './transfer' +import TreeInstall, { Tree } from './tree' +import UploadInstall, { Upload, MultiUpload } from './upload' + +const installs = [ + AccordionInstall, + AlertInstall, + AnchorInstall, + AvatarInstall, + BadgeInstall, + BreadcrumbInstall, + ButtonInstall, + CardInstall, + CarouselInstall, + CascaderInstall, + CheckboxInstall, + DatePickerInstall, + DrawerInstall, + EditableSelectInstall, + FullscreenInstall, + IconInstall, + ImagePreviewInstall, + InputInstall, + InputNumberInstall, + LayoutInstall, + LoadingInstall, + ModalInstall, + NavSpriteInstall, + OverlayInstall, + PaginationInstall, + PanelInstall, + PopoverInstall, + ProgressInstall, + QuadrantDiagramInstall, + RadioInstall, + RateInstall, + RippleInstall, + SearchInstall, + SelectInstall, + SkeletonInstall, + SliderInstall, + SplitterInstall, + StatusInstall, + StepsGuideInstall, + StickyInstall, + SwitchInstall, + TableInstall, + TabsInstall, + TagInputInstall, + TimeAxisInstall, + TimePickerInstall, + ToastInstall, + TooltipInstall, + TransferInstall, + TreeInstall, + UploadInstall +] + +export { + Accordion, + Alert, + Anchor, + Avatar, + Badge, + Breadcrumb, + Button, + Card, + Carousel, + Cascader, + Checkbox, + DatePicker, + StickSlider, + Drawer, + EditableSelect, + EditableSelectOption, + Fullscreen, + Icon, + ImagePreviewDirective, + ImagePreviewService, + Input, + InputNumber, + Layout, + Content, + Header, + Footer, + Aside, + LoadingService, + Loading, + Modal, + NavSprite, + FlexibleOverlay, + FixedOverlay, + Pagination, + Panel, + Popover, + Progress, + QuadrantDiagram, + Radio, + RadioGroup, + Rate, + RippleDirective, + Search, + Select, + Skeleton, + Slider, + Splitter, + Status, + StepsGuide, + Sticky, + Switch, + Table, + Column, + Tabs, + TagInput, + TimeAxis, + TimePicker, + Toast, + ToastService, + Tooltip, + Transfer, + Tree, + Upload, + MultiUpload +} + +export default { + version: '0.0.1', + install(app: App): void { + installs.forEach((p) => app.use(p as any)) + } +} diff --git a/docs/.vitepress/config/sidebar.ts b/docs/.vitepress/config/sidebar.ts new file mode 100644 index 00000000..89cbe870 --- /dev/null +++ b/docs/.vitepress/config/sidebar.ts @@ -0,0 +1,293 @@ +export default { + '/': [ + { + "text": "快速开始", + "link": "/" + }, + { + "text": "通用", + "children": [ + { + "text": "Button 按钮", + "link": "/components/button/", + "status": "已完成" + }, + { + "text": "Fullscreen 全屏", + "link": "/components/fullscreen/", + "status": "已完成" + }, + { + "text": "Icon 图标", + "link": "/components/icon/", + "status": "已完成" + }, + { + "text": "Overlay 遮罩层", + "link": "/components/overlay/", + "status": "已完成" + }, + { + "text": "Panel 面板", + "link": "/components/panel/", + "status": "100%" + }, + { + "text": "Ripple 水波纹", + "link": "/components/ripple/", + "status": "已完成" + }, + { + "text": "Search 搜索框", + "link": "/components/search/", + "status": "已完成" + }, + { + "text": "Status 状态", + "link": "/components/status/", + "status": "已完成" + }, + { + "text": "Sticky 便贴", + "link": "/components/sticky/", + "status": "50%" + } + ] + }, + { + "text": "导航", + "children": [ + { + "text": "Accordion 手风琴", + "link": "/components/accordion/", + "status": "10%" + }, + { + "text": "Anchor 锚点", + "link": "/components/anchor/", + "status": "50%" + }, + { + "text": "Breadcrumb 面包屑", + "link": "/components/breadcrumb/", + "status": "50%" + }, + { + "text": "NavSprite 导航精灵", + "link": "/components/nav-sprite/", + "status": "10%" + }, + { + "text": "Pagination 分页", + "link": "/components/pagination/", + "status": "已完成" + }, + { + "text": "StepsGuide 操作指引", + "link": "/components/steps-guide/", + "status": "50%" + }, + { + "text": "Tabs 选项卡", + "link": "/components/tabs/", + "status": "60%" + } + ] + }, + { + "text": "反馈", + "children": [ + { + "text": "Alert 警告", + "link": "/components/alert/", + "status": "已完成" + }, + { + "text": "Drawer 抽屉板", + "link": "/components/drawer/", + "status": "10%" + }, + { + "text": "Loading 加载提示", + "link": "/components/loading/", + "status": "已完成" + }, + { + "text": "Modal 弹窗", + "link": "/components/modal/", + "status": "已完成" + }, + { + "text": "Popover 悬浮提示", + "link": "/components/popover/", + "status": "已完成" + }, + { + "text": "Toast 全局提示", + "link": "/components/toast/", + "status": "已完成" + }, + { + "text": "Tooltip提示", + "link": "/components/tooltip/", + "status": "50%" + } + ] + }, + { + "text": "数据录入", + "children": [ + { + "text": "Cascader 级联菜单", + "link": "/components/cascader/", + "status": "10%" + }, + { + "text": "Checkbox 复选框", + "link": "/components/checkbox/", + "status": "已完成" + }, + { + "text": "DatePicker 日期选择器", + "link": "/components/date-picker/", + "status": "50%" + }, + { + "text": "EditableSelect 可输入下拉选择框", + "link": "/components/editable-select/", + "status": "10%" + }, + { + "text": "Input 输入框", + "link": "/components/input/", + "status": "已完成" + }, + { + "text": "InputNumber 数字输入框", + "link": "/components/input-number/", + "status": "50%" + }, + { + "text": "Radio 单选框", + "link": "/components/radio/", + "status": "已完成" + }, + { + "text": "Select 下拉框", + "link": "/components/select/", + "status": "10%" + }, + { + "text": "Slider 滑块", + "link": "/components/slider/", + "status": "80%" + }, + { + "text": "Switch 开关", + "link": "/components/switch/", + "status": "已完成" + }, + { + "text": "TagInput 标签输入框", + "link": "/components/tag-input/", + "status": "已完成" + }, + { + "text": "TimePicker 时间选择器", + "link": "/components/time-picker/", + "status": "80%" + }, + { + "text": "Transfer 穿梭框", + "link": "/components/transfer/", + "status": "10%" + }, + { + "text": "Upload 上传", + "link": "/components/upload/", + "status": "80%" + } + ] + }, + { + "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": "80%" + }, + { + "text": "ImagePreview 图片预览", + "link": "/components/image-preview/", + "status": "已完成" + }, + { + "text": "Progress 进度条", + "link": "/components/progress/", + "status": "已完成" + }, + { + "text": "QuadrantDiagram 象限图", + "link": "/components/quadrant-diagram/", + "status": "10%" + }, + { + "text": "Rate 评分", + "link": "/components/rate/", + "status": "已完成" + }, + { + "text": "Skeleton 骨架屏", + "link": "/components/skeleton/", + "status": "已完成" + }, + { + "text": "Table 表格", + "link": "/components/table/", + "status": "10%" + }, + { + "text": "TimeAxis 时间轴", + "link": "/components/time-axis/", + "status": "10%" + }, + { + "text": "Tree 树", + "link": "/components/tree/", + "status": "20%" + } + ] + }, + { + "text": "布局", + "children": [ + { + "text": "Layout 布局", + "link": "/components/layout/", + "status": "已完成" + }, + { + "text": "Splitter 分割器", + "link": "/components/splitter/", + "status": "已完成" + } + ] + } + ] +} diff --git a/packages/devui-vue/devui/dragdrop/index.ts b/packages/devui-vue/devui/dragdrop/index.ts index 6ab57151..b203021a 100644 --- a/packages/devui-vue/devui/dragdrop/index.ts +++ b/packages/devui-vue/devui/dragdrop/index.ts @@ -1,6 +1,6 @@ import type { App } from 'vue' -import DraggableDirective from './src/draggable.directive' -import DroppableDirective from './src/droppable.directive' +import DraggableDirective from './src/draggable-directive' +import DroppableDirective from './src/droppable-directive' export { DraggableDirective, DroppableDirective } diff --git a/packages/devui-vue/devui/dragdrop/src/draggable.directive.ts b/packages/devui-vue/devui/dragdrop/src/draggable-directive.ts similarity index 100% rename from packages/devui-vue/devui/dragdrop/src/draggable.directive.ts rename to packages/devui-vue/devui/dragdrop/src/draggable-directive.ts diff --git a/packages/devui-vue/devui/dragdrop/src/droppable.directive.ts b/packages/devui-vue/devui/dragdrop/src/droppable-directive.ts similarity index 100% rename from packages/devui-vue/devui/dragdrop/src/droppable.directive.ts rename to packages/devui-vue/devui/dragdrop/src/droppable-directive.ts diff --git a/packages/devui-vue/devui/slider/index.ts b/packages/devui-vue/devui/slider/index.ts index 8138b2ba..f4596b77 100644 --- a/packages/devui-vue/devui/slider/index.ts +++ b/packages/devui-vue/devui/slider/index.ts @@ -10,7 +10,7 @@ export { Slider } export default { title: 'Slider 滑块', category: '数据录入', - status: '80%', + status: '已完成', install(app: App): void { app.use(Slider as any) } diff --git a/packages/devui-vue/devui/slider/src/slider.tsx b/packages/devui-vue/devui/slider/src/slider.tsx index 0e4fc5f3..36197948 100644 --- a/packages/devui-vue/devui/slider/src/slider.tsx +++ b/packages/devui-vue/devui/slider/src/slider.tsx @@ -40,10 +40,10 @@ export default defineComponent({ const sliderWidth = sliderRunway.value.clientWidth; currentPosition.value = (sliderWidth * (inputValue.value - props.min)) / (props.max - props.min); }); - function handleonMousedown(event: MouseEvent) { + function handleButtonMousedown(event: MouseEvent) { popoverShow.value = true; //props.disabled状态是不能点击拖拽的 - if (props.disabled || props.disabled) return; + if (props.disabled) return; //阻止默认事件 event.preventDefault(); dragStart(event); @@ -98,7 +98,6 @@ export default defineComponent({ const steps = Math.round(newPosition / LengthPerStep); //实际的偏移像素 const value: number = steps * LengthPerStep; - //要是刚好划过半段切刚好超出最大长度的情况进行限定 if (Math.round(value) >= sliderWidth) { currentPosition.value = sliderWidth; @@ -115,12 +114,13 @@ export default defineComponent({ currentPosition.value = newPosition; ctx.emit('update:modelValue', inputValue.value); } - //当点击滑动条时, - function handleClick(event) { + //当在滑动条触发鼠标事件时处理, + function handleRunwayMousedown(event) { if (!props.disabled && isClick) { startX = event.target.getBoundingClientRect().left; const currentX = event.clientX; setPostion(currentX - startX); + handleButtonMousedown(event); } else { return; } @@ -160,13 +160,17 @@ export default defineComponent({ return () => (
{/* 整个的长度 */} -
+
(popoverShow.value = false)} + > {/* 滑动后左边的进度条 */}
(popoverShow.value = true)} onMouseout={() => (popoverShow.value = false)} >
diff --git a/packages/devui-vue/docs/components/slider/index.md b/packages/devui-vue/docs/components/slider/index.md index e8af1c72..98cf1b23 100644 --- a/packages/devui-vue/docs/components/slider/index.md +++ b/packages/devui-vue/docs/components/slider/index.md @@ -123,19 +123,20 @@ export default defineComponent({ ::: -### 异定制 Popover 的显示内容 +### 定制 Popover 的显示内容 -通过 tipsRenderer 参数传入函数定制 Popover 内的显示内容。 +通过 tipsRenderer 参数传入定制 Popover 内的显示内容。 :::demo ```vue + + +``` + +::: + +## API + +### Props + +| 参数 | 类型 | 默认值 | 说明 | 可选值 | 跳转至 Demo | +| :---: | :------: | :-----: | :----------------: | :------------------------------: | :---------------: | +| type | `string` | defalut | 可选，标签的类型 | `success\|info\|warning\|danger` | [示例](#基本用法) | +| color | `string` | '' | 可选，标签的主题色 | | | + +### Event + +| 名称 | 说明 | +| :------------ | --------------------------------- | +| tagDelete | 删除 tag 的时候触发的事件 | +| checkedChange | tag 的 check 状态改变时触发的事件 | -- Gitee From 6d4ae7aa94b7f706d3d225644fd6753c28444d95 Mon Sep 17 00:00:00 2001 From: codedance Date: Sun, 7 Nov 2021 20:51:44 +0800 Subject: [PATCH 06/23] =?UTF-8?q?feat(tag):=20=E5=88=9B=E5=BB=BATag?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=8C=E5=88=9D=E6=AD=A5=E5=AE=8C=E6=88=90?= =?UTF-8?q?=E7=AE=80=E5=8D=95=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui-vue/devui/tag/__tests__/tag.spec.ts | 8 ++++ .../devui-vue/devui/{tags => tag}/index.ts | 14 +++---- .../devui/{tags => tag}/src/hooks/index.ts | 0 .../devui/{tags => tag}/src/hooks/useStyle.ts | 5 +-- .../tags-types.ts => tag/src/tag-types.ts} | 7 +--- .../{tags/src/tags.scss => tag/src/tag.scss} | 42 ++++++------------- .../{tags/src/tags.tsx => tag/src/tag.tsx} | 20 +++------ .../devui/tags/__tests__/tags.spec.ts | 8 ---- .../docs/components/{tags => tag}/index.md | 14 +++---- 9 files changed, 44 insertions(+), 74 deletions(-) create mode 100644 packages/devui-vue/devui/tag/__tests__/tag.spec.ts rename packages/devui-vue/devui/{tags => tag}/index.ts (30%) rename packages/devui-vue/devui/{tags => tag}/src/hooks/index.ts (100%) rename packages/devui-vue/devui/{tags => tag}/src/hooks/useStyle.ts (53%) rename packages/devui-vue/devui/{tags/src/tags-types.ts => tag/src/tag-types.ts} (64%) rename packages/devui-vue/devui/{tags/src/tags.scss => tag/src/tag.scss} (56%) rename packages/devui-vue/devui/{tags/src/tags.tsx => tag/src/tag.tsx} (50%) delete mode 100644 packages/devui-vue/devui/tags/__tests__/tags.spec.ts rename packages/devui-vue/docs/components/{tags => tag}/index.md (81%) diff --git a/packages/devui-vue/devui/tag/__tests__/tag.spec.ts b/packages/devui-vue/devui/tag/__tests__/tag.spec.ts new file mode 100644 index 00000000..9db389e4 --- /dev/null +++ b/packages/devui-vue/devui/tag/__tests__/tag.spec.ts @@ -0,0 +1,8 @@ +import { mount } from '@vue/test-utils' +import { Tag } from '../index' + +describe('tag test', () => { + it('tag init render', async () => { + // todo + }) +}) diff --git a/packages/devui-vue/devui/tags/index.ts b/packages/devui-vue/devui/tag/index.ts similarity index 30% rename from packages/devui-vue/devui/tags/index.ts rename to packages/devui-vue/devui/tag/index.ts index 5b728441..43310285 100644 --- a/packages/devui-vue/devui/tags/index.ts +++ b/packages/devui-vue/devui/tag/index.ts @@ -1,17 +1,17 @@ import type { App } from 'vue' -import Tags from './src/tags' +import Tag from './src/tag' -Tags.install = function(app: App): void { - app.component(Tags.name, Tags) +Tag.install = function (app: App): void { + app.component(Tag.name, Tag) } -export { Tags } +export { Tag } export default { - title: 'Tags 标签', + title: 'Tag 标签', category: '数据展示', - status: undefined, // TODO: 组件若开发完成则填入"已完成"，并删除该注释 + status: '20%', // TODO: 组件若开发完成则填入"已完成"，并删除该注释 install(app: App): void { - app.use(Tags as any) + app.use(Tag as any) } } diff --git a/packages/devui-vue/devui/tags/src/hooks/index.ts b/packages/devui-vue/devui/tag/src/hooks/index.ts similarity index 100% rename from packages/devui-vue/devui/tags/src/hooks/index.ts rename to packages/devui-vue/devui/tag/src/hooks/index.ts diff --git a/packages/devui-vue/devui/tags/src/hooks/useStyle.ts b/packages/devui-vue/devui/tag/src/hooks/useStyle.ts similarity index 53% rename from packages/devui-vue/devui/tags/src/hooks/useStyle.ts rename to packages/devui-vue/devui/tag/src/hooks/useStyle.ts index 44df8343..2dbb29d7 100644 --- a/packages/devui-vue/devui/tags/src/hooks/useStyle.ts +++ b/packages/devui-vue/devui/tag/src/hooks/useStyle.ts @@ -1,10 +1,9 @@ import { computed } from 'vue' -import { tagsProps, TagsProps } from '../tags-types' +import { tagProps, TagProps } from '../tag-types' -export default function (props: TagsProps) { +export default function (props: TagProps) { return computed(() => { const { type } = props - console.log(type, 'type') return `devui-tag devui-tag-${type || 'default'}` }) diff --git a/packages/devui-vue/devui/tags/src/tags-types.ts b/packages/devui-vue/devui/tag/src/tag-types.ts similarity index 64% rename from packages/devui-vue/devui/tags/src/tags-types.ts rename to packages/devui-vue/devui/tag/src/tag-types.ts index 81795c2e..f8fd95a5 100644 --- a/packages/devui-vue/devui/tags/src/tags-types.ts +++ b/packages/devui-vue/devui/tag/src/tag-types.ts @@ -2,10 +2,7 @@ import type { PropType, ExtractPropTypes } from 'vue' export type tagType = 'primary' | 'success' | 'warning' | 'danger' -export const tagsProps = { - /* test: { - type: Object as PropType<{ xxx: xxx }> - } */ +export const tagProps = { type: { type: String as PropType, default: '' @@ -16,4 +13,4 @@ export const tagsProps = { } } as const -export type TagsProps = ExtractPropTypes +export type TagProps = ExtractPropTypes diff --git a/packages/devui-vue/devui/tags/src/tags.scss b/packages/devui-vue/devui/tag/src/tag.scss similarity index 56% rename from packages/devui-vue/devui/tags/src/tags.scss rename to packages/devui-vue/devui/tag/src/tag.scss index 7d69624f..bd3e3c7a 100644 --- a/packages/devui-vue/devui/tags/src/tags.scss +++ b/packages/devui-vue/devui/tag/src/tag.scss @@ -1,22 +1,11 @@ -@import '../../style/mixins/index'; -@import '../../style/theme/color'; -@import '../../style/theme/variables'; -@import '../../style/theme/font'; -@import '../../style/theme/corner'; +@import '@devui/styles-var/devui-var'; $devui-tag-normal-config: ( - // text: ( - // color: $devui-brand-active - // ), - // text-dark: ( - // color: $devui-brand-active - // ), - default: - ( - border: 0, - color: $devui-text, - background-color: $devui-default-bg // background-color: $devui-label-bg - ), + default: ( + border: 0, + color: $devui-text, + background-color: $devui-default-bg + ), primary: ( color: $devui-primary, background-color: $devui-primary-bg, @@ -27,17 +16,11 @@ $devui-tag-normal-config: ( background-color: $devui-success-bg, border-color: $devui-success-line ), - // info: ( - // color: $devui-info, - // background-color: $devui-info-bg, - // border-color: $devui-info-line - // ), - warning: - ( - color: $devui-warning, - background-color: $devui-warning-bg, - border-color: $devui-warning-line - ), + warning: ( + color: $devui-warning, + background-color: $devui-warning-bg, + border-color: $devui-warning-line + ), danger: ( color: $devui-danger, background-color: $devui-danger-bg, @@ -45,7 +28,7 @@ $devui-tag-normal-config: ( ) ); -.devui-tags { +.devui-tag { display: inline-block; margin: 4px; @@ -57,7 +40,6 @@ $devui-tag-normal-config: ( line-height: 20px; border: 1px solid; border-radius: $devui-border-radius; - // border-color: inherit; display: block; align-items: center; position: relative; diff --git a/packages/devui-vue/devui/tags/src/tags.tsx b/packages/devui-vue/devui/tag/src/tag.tsx similarity index 50% rename from packages/devui-vue/devui/tags/src/tags.tsx rename to packages/devui-vue/devui/tag/src/tag.tsx index caa04616..a04ac737 100644 --- a/packages/devui-vue/devui/tags/src/tags.tsx +++ b/packages/devui-vue/devui/tag/src/tag.tsx @@ -1,19 +1,19 @@ import { defineComponent, ref, toRefs, computed } from 'vue' -import { tagsProps, TagsProps } from './tags-types' +import { tagProps, TagProps } from './tag-types' import { useStyle } from './hooks' -import './tags.scss' +import './tag.scss' // 类型声明 export default defineComponent({ - name: 'DTags', - props: tagsProps, + name: 'DTag', + props: tagProps, emits: [], - setup(props: TagsProps, { slots }) { + setup(props: TagProps, { slots }) { //获取type对应样式 const tagClass = useStyle(props) return () => ( -
+
{slots.default?.()} @@ -21,11 +21,3 @@ export default defineComponent({ ) } }) -/* - - -
-default color - - -*/ diff --git a/packages/devui-vue/devui/tags/__tests__/tags.spec.ts b/packages/devui-vue/devui/tags/__tests__/tags.spec.ts deleted file mode 100644 index cb291e37..00000000 --- a/packages/devui-vue/devui/tags/__tests__/tags.spec.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { mount } from '@vue/test-utils'; -import { Tags } from '../index'; - -describe('tags test', () => { - it('tags init render', async () => { - // todo - }) -}) diff --git a/packages/devui-vue/docs/components/tags/index.md b/packages/devui-vue/docs/components/tag/index.md similarity index 81% rename from packages/devui-vue/docs/components/tags/index.md rename to packages/devui-vue/docs/components/tag/index.md index 330549eb..c96b6238 100644 --- a/packages/devui-vue/docs/components/tags/index.md +++ b/packages/devui-vue/docs/components/tag/index.md @@ -1,4 +1,4 @@ -# Tags 标签 +# Tag 标签 标签展示组件。 @@ -12,11 +12,11 @@ ```vue + ``` ::: @@ -73,17 +86,33 @@

mm:HH:ss

- +

hh:mm

- +

MM:ss

- +
+ ``` ::: @@ -111,11 +140,6 @@ export default defineComponent({ setup(props,ctx){ let slotDemo = ref(null) - // 返回选中的时间 - const selectedTimeChage =(timeValue)=>{ - console.log(timeValue) - } - const chooseTime = ()=>{ let timeObj ={ time:'23', -- Gitee From f2196c5acd5147019f17e5f04e41ff2d43b1aaef Mon Sep 17 00:00:00 2001 From: Dreamer <154239735@qq.com> Date: Sun, 7 Nov 2021 02:26:57 +0000 Subject: [PATCH 08/23] =?UTF-8?q?=E5=88=A0=E9=99=A4=E6=96=87=E4=BB=B6=20pa?= =?UTF-8?q?ckages/devui-vue/devui/card/=5F=5Ftests=5F=5F/=5F=5Fsnapshots?= =?UTF-8?q?=5F=5F/card.spec.ts.snap?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../__tests__/__snapshots__/card.spec.ts.snap | 39 ------------------- 1 file changed, 39 deletions(-) delete mode 100644 packages/devui-vue/devui/card/__tests__/__snapshots__/card.spec.ts.snap diff --git a/packages/devui-vue/devui/card/__tests__/__snapshots__/card.spec.ts.snap b/packages/devui-vue/devui/card/__tests__/__snapshots__/card.spec.ts.snap deleted file mode 100644 index 76e8d750..00000000 --- a/packages/devui-vue/devui/card/__tests__/__snapshots__/card.spec.ts.snap +++ /dev/null @@ -1,39 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`card should render correctly 1`] = ` -
- -
- -
-
- -
-
- -
-
-
- -
- -
-
- -
-
-`; -- Gitee From 360104711a208a074bc54bd025e249e834b5bf35 Mon Sep 17 00:00:00 2001 From: Dreamer <154239735@qq.com> Date: Sun, 7 Nov 2021 02:36:49 +0000 Subject: [PATCH 09/23] update packages/devui-vue/devui/time-picker/index.ts. --- packages/devui-vue/devui/time-picker/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/devui-vue/devui/time-picker/index.ts b/packages/devui-vue/devui/time-picker/index.ts index e61fb3e2..85c682ab 100644 --- a/packages/devui-vue/devui/time-picker/index.ts +++ b/packages/devui-vue/devui/time-picker/index.ts @@ -10,7 +10,7 @@ export { TimePicker } export default { title: 'TimePicker 时间选择器', category: '数据录入', - status: '已完成', // TODO: 组件若开发完成则填入"已完成"，并删除该注释 + status: '90%', // TODO: 组件若开发完成则填入"已完成"，并删除该注释 install(app: App): void { app.use(TimePicker as any) } -- Gitee From 5a452e9f97e24cc958f5ac334b184598dedd3176 Mon Sep 17 00:00:00 2001 From: edentan Date: Mon, 8 Nov 2021 13:47:47 +0800 Subject: [PATCH 10/23] =?UTF-8?q?feat(grid):=20=E5=88=9D=E6=AD=A5=E5=AE=8C?= =?UTF-8?q?=E6=88=90grid=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui/grid/__tests__/grid.spec.ts | 8 + packages/devui-vue/devui/grid/index.ts | 22 ++ packages/devui-vue/devui/grid/src/col.scss | 64 ++++ packages/devui-vue/devui/grid/src/col.tsx | 35 ++ .../devui-vue/devui/grid/src/grid-types.ts | 70 ++++ packages/devui-vue/devui/grid/src/row.scss | 19 ++ packages/devui-vue/devui/grid/src/row.tsx | 69 ++++ packages/devui-vue/devui/grid/src/use-grid.ts | 47 +++ .../devui-vue/devui/grid/src/use-screen.ts | 84 +++++ .../devui-vue/docs/components/grid/index.md | 316 ++++++++++++++++++ 10 files changed, 734 insertions(+) create mode 100644 packages/devui-vue/devui/grid/__tests__/grid.spec.ts create mode 100644 packages/devui-vue/devui/grid/index.ts create mode 100644 packages/devui-vue/devui/grid/src/col.scss create mode 100644 packages/devui-vue/devui/grid/src/col.tsx create mode 100644 packages/devui-vue/devui/grid/src/grid-types.ts create mode 100644 packages/devui-vue/devui/grid/src/row.scss create mode 100644 packages/devui-vue/devui/grid/src/row.tsx create mode 100644 packages/devui-vue/devui/grid/src/use-grid.ts create mode 100644 packages/devui-vue/devui/grid/src/use-screen.ts create mode 100644 packages/devui-vue/docs/components/grid/index.md diff --git a/packages/devui-vue/devui/grid/__tests__/grid.spec.ts b/packages/devui-vue/devui/grid/__tests__/grid.spec.ts new file mode 100644 index 00000000..fa33b976 --- /dev/null +++ b/packages/devui-vue/devui/grid/__tests__/grid.spec.ts @@ -0,0 +1,8 @@ +import { mount } from '@vue/test-utils'; +import { Row } from '../index'; + +describe('grid test', () => { + it('grid init render', async () => { + // todo + }) +}) diff --git a/packages/devui-vue/devui/grid/index.ts b/packages/devui-vue/devui/grid/index.ts new file mode 100644 index 00000000..cb957715 --- /dev/null +++ b/packages/devui-vue/devui/grid/index.ts @@ -0,0 +1,22 @@ +import type { App } from 'vue' +import Row from './src/row' +import Col from './src/col' + +Row.install = function(app: App): void { + app.component(Row.name, Row) +} + +Col.install = function(app: App): void { + app.component(Col.name, Col) +} +export { Row, Col } + +export default { + title: 'Grid 栅格', + category: '布局', + status: '已完成', + install(app: App): void { + app.use(Col as any) + app.use(Row as any) + } +} diff --git a/packages/devui-vue/devui/grid/src/col.scss b/packages/devui-vue/devui/grid/src/col.scss new file mode 100644 index 00000000..2381135f --- /dev/null +++ b/packages/devui-vue/devui/grid/src/col.scss @@ -0,0 +1,64 @@ +.devui-col { + position: relative; + max-width: 100%; + min-height: 1px; +} + +@function percentage ($i, $sum: 24) { + @return $i / $sum * 100%; } + +.devui-col-span-0 { + display: none; +} + +@for $i from 1 to 24 { + .devui-col-offset-#{$i} { + margin-left: percentage($i); + } + .devui-col-pull-#{$i} { + right: percentage($i); + } + .devui-col-push-#{$i} { + left: percentage($i); + } + .devui-col-span-#{$i} { + display: block; + flex: 0 0 percentage($i); + width: percentage($i); + } + .devui-col-xs-offset-#{$i} { + margin-left: percentage($i); + } + .devui-col-xs-pull-#{$i} { + right: percentage($i); + } + .devui-col-xs-push-#{$i} { + left: percentage($i); + } + .devui-col-xs-span-#{$i} { + display: block; + flex: 0 0 percentage($i); + width: percentage($i); + } +} + +@each $size, $value in (sm, 576), (md, 768), (lg, 992), (xl, 1200), (xxl, 1600) { + @media screen and (min-width: #{$value}px) { + @for $i from 1 to 24 { + .devui-col-#{$size}-offset-#{$i} { + margin-left: percentage($i); + } + .devui-col-#{$size}-pull-#{$i} { + right: percentage($i); + } + .devui-col-#{$size}-push-#{$i} { + left: percentage($i); + } + .devui-col-#{$size}-span-#{$i} { + display: block; + flex: 0 0 percentage($i); + width: percentage($i); + } + } + } +} diff --git a/packages/devui-vue/devui/grid/src/col.tsx b/packages/devui-vue/devui/grid/src/col.tsx new file mode 100644 index 00000000..596cb8a7 --- /dev/null +++ b/packages/devui-vue/devui/grid/src/col.tsx @@ -0,0 +1,35 @@ +import { defineComponent, computed, CSSProperties, Ref, inject } from 'vue' +import { colProps, ColProps } from './grid-types' +import { useSize, CLASS_PREFIX, useColClassNames } from './use-grid' +import './col.scss' + + +export default defineComponent({ + name: 'DCol', + props: colProps, + setup (props: ColProps, { slots }) { + + const formatFlex = (flex: typeof props.flex) => { + if (typeof flex === 'number') { + return `${flex} ${flex} auto` + } + if (/^\d+(\.\d+)?(px|rem|em|%)$/.test(flex)) { + return `0 0 ${flex}` + } + return flex + } + + const colClassNames= useColClassNames(props) + + const sizeClassNames = useSize(props) + + const colStyle = computed(() => ({ + flex: formatFlex(props.flex), + order: props.order + })) + + const gutterStyle = inject>('gutterStyle') + + return () =>
{slots.default?.()}
+ } +}) diff --git a/packages/devui-vue/devui/grid/src/grid-types.ts b/packages/devui-vue/devui/grid/src/grid-types.ts new file mode 100644 index 00000000..a6491cf2 --- /dev/null +++ b/packages/devui-vue/devui/grid/src/grid-types.ts @@ -0,0 +1,70 @@ +import type { PropType, ExtractPropTypes } from 'vue' + +export type Align = 'top' | 'middle' | 'bottom' + +export type Justify = 'start' | 'end' | 'center' | 'around' | 'between' + +export interface GutterScreenSizes { + xs?: number | number[] + sm: number | number[] + md: number | number[] + lg: number | number[] + xl: number | number[] + xxl: number | number[] +} + +export const rowProps = { + align: { + type: String as PropType, + default: 'top' + }, + gutter: { + type: [Number, Object, Array] as PropType, + default: 0 + }, + justify: { + type: String as PropType, + default: 'start' + }, + wrap: { + type: Boolean as PropType, + default: false + } +} as const + +export type RowProps = ExtractPropTypes + +const screenSizesProp = [Number, Object] as PropType + +export const screenSizes = { + xs: screenSizesProp, + sm: screenSizesProp, + md: screenSizesProp, + lg: screenSizesProp, + xl: screenSizesProp, + xxl: screenSizesProp, +} as const + +const numberProp = Number as PropType + +export const colPropsBaseStyle = { + flex: [String, Number] as PropType, + order: numberProp, +} as const + +export const colPropsBaseClass = { + offset: numberProp, + pull: numberProp, + push: numberProp, + span: numberProp +} as const + +export type ColPropsBaseStyle = ExtractPropTypes + +export type ColPropsBaseClass = ExtractPropTypes + +export type ScreenSizes = ExtractPropTypes + +export const colProps = { ...colPropsBaseStyle, ...colPropsBaseClass, ...screenSizes} + +export type ColProps = ExtractPropTypes diff --git a/packages/devui-vue/devui/grid/src/row.scss b/packages/devui-vue/devui/grid/src/row.scss new file mode 100644 index 00000000..b5b3df4a --- /dev/null +++ b/packages/devui-vue/devui/grid/src/row.scss @@ -0,0 +1,19 @@ +.devui-row { + display: flex; +} + +.devui-row-wrap { + flex-wrap: wrap; +} + +@each $prefix, $value in (top, flex-start), (middle, center), (bottom, flex-end) { + .devui-row-align-#{$prefix} { + align-items: $value; + } +} + +@each $prefix, $value in (start, flex-start), (center, center), (end, flex-end), (around, space-around), (between, space-between) { + .devui-row-justify-#{$prefix} { + justify-content: $value; + } +} diff --git a/packages/devui-vue/devui/grid/src/row.tsx b/packages/devui-vue/devui/grid/src/row.tsx new file mode 100644 index 00000000..6e6bb5b3 --- /dev/null +++ b/packages/devui-vue/devui/grid/src/row.tsx @@ -0,0 +1,69 @@ +import { defineComponent, computed, ref, Ref, CSSProperties, onMounted, onUnmounted, provide } from 'vue' +import { rowProps, RowProps } from './grid-types' +import { formatClass } from './use-grid' +import { responesScreen, Screen, RESULT_SCREEN, removeSubscribeCb } from './use-screen' +import './row.scss' + +const CLASS_PREFIX = 'devui-row' + +export default defineComponent({ + name: 'DRow', + props: rowProps, + emits: [], + setup(props: RowProps, { slots }) { + const gutterScreenSize = ref({}) + + const rowClass = computed(() => { + const alignClass = formatClass(`${CLASS_PREFIX}-align`, props.align) + const justifyClass = formatClass(`${CLASS_PREFIX}-justify`, props.justify) + const wrapClass = props.wrap ? ` ${CLASS_PREFIX}-wrap` : '' + return `${alignClass}${justifyClass}${wrapClass}` + }) + + let token + + onMounted(() => { + token = responesScreen(screen => { + gutterScreenSize.value = screen + }) + }) + + onUnmounted(() => { + removeSubscribeCb(token) + }) + + const gutterStyle = computed(() => { + if (!props.gutter) { + return {} + } + let currentGutter = [0, 0] + if (Array.isArray(props.gutter)) { + currentGutter = props.gutter as number[] + } else if (typeof props.gutter === 'number') { + currentGutter = [props.gutter as number, 0] + } else { + RESULT_SCREEN.some(size => { + const gzs = props.gutter[size] + if (gutterScreenSize.value[size] && gzs) { + if (typeof gzs === 'number') { + currentGutter = [gzs, 0] + } else { + currentGutter = gzs + } + return true + } + return false + }) + } + const paddingLeft = `${(currentGutter[0] || 0) / 2}px` + const paddingRight = `${(currentGutter[0] || 0) / 2}px` + const paddingTop = `${(currentGutter[1] || 0) / 2}px` + const paddingBottom = `${(currentGutter[1] || 0) / 2}px` + return { paddingLeft, paddingRight, paddingTop, paddingBottom } + }) + + provide>('gutterStyle', gutterStyle) + + return () =>
{slots.default?.()}
+ } +}) diff --git a/packages/devui-vue/devui/grid/src/use-grid.ts b/packages/devui-vue/devui/grid/src/use-grid.ts new file mode 100644 index 00000000..a303a362 --- /dev/null +++ b/packages/devui-vue/devui/grid/src/use-grid.ts @@ -0,0 +1,47 @@ +import { computed } from 'vue' +import { ScreenSizes, ColPropsBaseClass, screenSizes, colPropsBaseClass } from './grid-types' + +export const CLASS_PREFIX = 'devui-col' + +export function formatClass (prefix: string, val: number | string | undefined) { + return val !== undefined ? ` ${prefix}-${val}` : '' +} + +export function useColClassNames (props: ColPropsBaseClass) { + return computed(() => { + const spanClass = formatClass(`${CLASS_PREFIX}-span`, props.span) + const offsetClass = formatClass(`${CLASS_PREFIX}-offset`, props.offset) + const pullClass = formatClass(`${CLASS_PREFIX}-pull`, props.pull) + const pushClass = formatClass(`${CLASS_PREFIX}-push`, props.push) + return `${spanClass}${offsetClass}${pullClass}${pushClass}` + }) +} + +function setSpace (val:string) { + return val && ` ${val.trim()} ` +} + +export function useSize (colSizes: ScreenSizes) { + const keys = Object.keys(colSizes).filter(key => key in screenSizes) as (keyof ScreenSizes)[] + return computed(() => { + return keys.reduce((total, key) => { + const valueType = typeof colSizes[key] + + if (valueType === 'number') { + total = `${setSpace(total)}${CLASS_PREFIX}-${key}-span-${colSizes[key]}` + } else if (valueType === 'object') { + const colSizesKeys = Object.keys(colSizes[key]) as (keyof ColPropsBaseClass)[] + const sum = colSizesKeys.filter(item => item in colPropsBaseClass).reduce((tot, k) => { + if (typeof colSizes[key][k] !== 'number') { + return '' + } else { + tot = `${setSpace(tot)}${CLASS_PREFIX}-${key}-${k}-${colSizes[key][k]}` + } + return tot + }, '') + total = `${setSpace(total)}${sum}` + } + return total + }, '') + }) +} diff --git a/packages/devui-vue/devui/grid/src/use-screen.ts b/packages/devui-vue/devui/grid/src/use-screen.ts new file mode 100644 index 00000000..98d86f99 --- /dev/null +++ b/packages/devui-vue/devui/grid/src/use-screen.ts @@ -0,0 +1,84 @@ + +export const RESULT_SCREEN = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'] + +const screenMedias = { + xs: 'screen and (max-width: 575px)', + sm: 'screen and (min-width: 576px)', + md: 'screen and (min-width: 768px)', + lg: 'screen and (min-width: 992px)', + xl: 'screen and (min-width: 1200px)', + xxl: 'screen and (min-width: 1600px)', +} as const + +export interface Screen { + xs?: boolean + sm?: boolean + md?: boolean + lg?: boolean + xl?: boolean + xxl?: boolean +} + +export type ScreenMediasKey = keyof typeof screenMedias +type SubscribeCb = (screen: Screen) => void + +const subscribers = new Map() +let subUid = -1 +const screen: Screen = {} +const results: { + [key: string]: { + res: MediaQueryList + listener: (this: MediaQueryList, ev: MediaQueryListEvent) => void + } + } = {}; + +export function responesScreen (func: SubscribeCb) { + if (!subscribers.size) { + register() + } + subUid += 1 + subscribers.set(subUid, func) + func({ ...screen }) + return subUid +} + +export function removeSubscribeCb (id: number) { + subscribers.delete(id) + if (subscribers.size === 0) { + unRegister() + } +} + +function register () { + Object.keys(screenMedias).forEach(key => { + const result = window.matchMedia(screenMedias[key]) + if (result.matches) { + screen[key as ScreenMediasKey] = true + dispatch() + } + const listener = e => { + screen[key as ScreenMediasKey] = e.matches + dispatch() + } + result.addEventListener('change', listener) + + results[key] = { + res: result, + listener + } + }) +} + +function unRegister () { + Object.keys(screenMedias).forEach(key => { + const handler = results[key] + handler.res.removeEventListener('change', handler.listener) + }) + subscribers.clear() +} + +function dispatch () { + subscribers.forEach(value => { + value({ ...screen }) + }) +} diff --git a/packages/devui-vue/docs/components/grid/index.md b/packages/devui-vue/docs/components/grid/index.md new file mode 100644 index 00000000..2a67551b --- /dev/null +++ b/packages/devui-vue/docs/components/grid/index.md @@ -0,0 +1,316 @@ +# Grid 栅格 + +24栅格系统。 +### 何时使用 + +需要使用弹性布局时，并且需要适配不同的屏幕时，使用grid组件。 + + +### 基本用法 + +基础栅格 + +:::demo 使用 Row 和 Col组件，可以创建一个基本的栅格系统，Col必须放在Row里面。 + +```vue + + + +``` + +::: + +### 对齐 + +垂直对齐和水平对齐 + +:::demo 使用Row的align属性和justify属性子元素垂直对齐和水平对齐。 + +```vue + + +``` + +::: + + +### 子元素的间隔 + +栅格之间的间隔可以用Row的gutter属性 + +:::demo :gutter="10" 子元素左右间隔为 5px；:gutter="[10, 20]" 子元素左右间隔为5px，上下间隔为10px；需要适配屏幕宽度的情况，:gutter="{ xs: 10, sm: 20, md: [20, 10], lg: [30, 20], xl: [40, 30], xxl: [50, 40] }" + +```vue + + + +``` + +::: + +### flex填充 + +Col的flex属性支持flex填充。 + +:::demo + +```vue + +``` + +::: + +### 左右偏移 + +使用Col的offset、pull和push来使子元素左右偏移。 + +:::demo 列偏移。使用 offset 可以将列向右侧偏。例如，offset={4} 将元素向右侧偏移了 4 个列（column）的宽度；offset、pull、push也可以内嵌到。 + +```vue + +``` + +::: + +### 响应式布局 + +预设六个响应尺寸：xs sm md lg xl xxl。 + +:::demo 参照 Bootstrap 的 [响应式设计](https://getbootstrap.com/docs/3.4/css/)。 + +```vue + +``` + +::: + +### 栅格排序 + +列排序。通过使用order、 push 和 pull 类就可以改变列（column）的顺。 + +:::demo 参照 Bootstrap 的 [响应式设计](https://getbootstrap.com/docs/3.4/css/)。 + +```vue + +``` + +::: + +### d-grid + +d-row 参数 + +| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | 全局配置项 | +| ---- | ---- | ---- | ---- | --------- | --------- | +| align | `string` | `'top'` | flex 布局下的垂直对齐方式：`'top'`，`'middle'`，`'bottom'` | [垂直对齐](#垂直对齐) | | +| justify | `string` | `'start'` | flex 布局下的垂直对齐方式：`'start'`，`'end'`，`'center'`，`'space-around'`，`'space-between'` | [垂直对齐](#垂直对齐) | | +| gutter | `number\|array\|object` | 0 | 栅格间隔，数值形式：水平间距。对象形式支持响应式： { xs: 8, sm: 16, md: 24}。数组形式：[水平间距, 垂直间距]。 | [对齐](#对齐) | | +| wrap | `boolean` | false | 是否自动换行 | | | + +d-col 参数 + +| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | 全局配置项 | +| ---- | ---- | ---- | ---- | --------- | --------- | +| span | `number` | - | 栅格占位格数，为 0 时相当于 display: none | [基本用法](#基本用法) | | +| flex | `string\|number` | - | flex 布局填充 | [flex填充](#flex填充) | | +| offset | `number` | - | 栅格左侧的间隔格数，间隔内不可以有栅格 | [左右偏移](#左右偏移) | +| pull | `number` | - | 栅格向左移动格数 | [左右偏移](#左右偏移)、[栅格排序](#栅格排序) | +| push | `number` | - | 栅格向右移动格数 | [左右偏移](#左右偏移)、[栅格排序](#栅格排序) | +| order | `number` | - | 栅格顺序，flex 布局模式下有效 | [栅格排序](#栅格排序) | +| xs | `number\|object` | - | <576px 响应式栅格，可为栅格数或一个包含其他属性的对象 | [栅格排序](#栅格排序) | +| sm | `number\|object` | - | >=576px 响应式栅格，可为栅格数或一个包含其他属性的对象 | [响应式布局](#响应式布局) | +| md | `number\|object` | - | >=768px 响应式栅格，可为栅格数或一个包含其他属性的对象 | [响应式布局](#响应式布局) | +| lg | `number\|object` | - | >=992px 响应式栅格，可为栅格数或一个包含其他属性的对象 | [响应式布局](#响应式布局) | +| xl | `number\|object` | - | >=1200px 响应式栅格，可为栅格数或一个包含其他属性的对象 | [响应式布局](#响应式布局) | +| xxl | `number\|object` | - | >=1600px 响应式栅格，可为栅格数或一个包含其他属性的对象 | [响应式布局](#响应式布局) | \ No newline at end of file -- Gitee From b511331c87ee1783742fba26ed3b8eb518bda61c Mon Sep 17 00:00:00 2001 From: ElsaOOo Date: Mon, 8 Nov 2021 10:06:58 +0800 Subject: [PATCH 11/23] =?UTF-8?q?docs:=20demo=E6=96=87=E6=A1=A3=E6=94=B9?= =?UTF-8?q?=E6=88=90=E5=B1=95=E5=BC=80/=E6=94=B6=E8=B5=B7=E7=9A=84?= =?UTF-8?q?=E6=A0=BC=E5=BC=8F,=E5=B1=95=E7=A4=BA=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=92=8Cng=E5=AE=98=E7=BD=91=E4=B8=80?= =?UTF-8?q?=E8=87=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../docs/components/tooltip/index.md | 115 ++++++++---------- 1 file changed, 48 insertions(+), 67 deletions(-) diff --git a/packages/devui-vue/docs/components/tooltip/index.md b/packages/devui-vue/docs/components/tooltip/index.md index 489df085..8ae9d482 100644 --- a/packages/devui-vue/docs/components/tooltip/index.md +++ b/packages/devui-vue/docs/components/tooltip/index.md @@ -8,93 +8,74 @@ ### 基本用法 -:::demo我们可以通过控制属性`position`来控制tooltip的显示位置，`position`取值有4个，分别是`top`、`right`、`bottom`、`left`。通过属性`content`控制tooltip提示框的内容。 - - - - - - - - +:::demo ```vue -``` - -```css -.example { - height: 50px; - width: 60px; - background: cornflowerblue; - margin-top: 30px; + ``` + ::: ### 延时触发 -鼠标移入的时长超过 [mouseEnterDelay] 毫秒之后才会触发，以防止用户无意划过导致的闪现，默认值是150毫秒；鼠标移出之后，再经过[mouseLeaveDelay]毫秒后，toolTip组件才会隐藏，默认值是100毫秒。 +鼠标移入的时长超过 [mouseEnterDelay] 毫秒之后才会触发，以防止用户无意划过导致的闪现，默认值是 150 毫秒；鼠标移出之后，再经过[mouseLeaveDelay]毫秒后，toolTip 组件才会隐藏，默认值是 100 毫秒。 -:::demo 通过`mouseEnterDelay`属性来控制tooltip提示框的`延迟显示`（默认是100ms），`mouseLeaveDelay`属性来控制tooltip提示框的`延迟消失`（默认是150ms） -
MouseEnter delay 500ms
 +:::demo -
MouseLeave delay 1000ms
 ```vue ``` -```css -.customCss { - width: fit-content; - height: 30px; - padding: 10px; - display: flex; - justify-content: center; - align-items: center; - color: #fff; - background: cornflowerblue; -} -.customCss-leave { - width: fit-content; - height: 30px; - padding: 10px; - display: flex; - justify-content: center; - align-items: center; - color: #252b3a; - background: #fff; -} -``` ::: ### Tooltip Api -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | 全局配置项 | -| :---------: | :------: | :-------: | :----------------------- | --------------------------------- | --------- | -| content | `string|DOMString` | -- | 必选，tooltip显示内容 | [基本用法](#基本用法) || -| position | `PositionType | PositionType[]` | ['top', 'right', 'bottom', 'left'] | 可选，tooltip显示位置 | [基本用法](#基本用法) || -| showAnimation | `boolean` | true | 可选，是否显示划出动画 | |✔| -| mouseEnterDelay | `number` | 150 | 可选，鼠标移入后延时多少才显示Tooltip，单位是ms | [基本用法](#延时触发) || -| mouseLeaveDelay | `number` | 100 | 可选，鼠标移出后延时多少才隐藏Tooltip，单位是ms | [基本用法](#延时触发) || +| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | 全局配置项 | +| :-------------: | :----------------------------: | :--------------------------------: | :------------------------------------------------ | --------------------- | ---------- | +| content | `string\|DOMString` | -- | 必选，tooltip 显示内容 | [基本用法](#基本用法) | | +| position | `PositionType\|PositionType[]` | ['top', 'right', 'bottom', 'left'] | 可选，tooltip 显示位置 | [基本用法](#基本用法) | | +| showAnimation | `boolean` | true | 可选，是否显示划出动画 | | ✔ | +| mouseEnterDelay | `number` | 150 | 可选，鼠标移入后延时多少才显示 Tooltip，单位是 ms | [延时触发](#延时触发) | +| mouseLeaveDelay | `number` | 100 | 可选，鼠标移出后延时多少才隐藏 Tooltip，单位是 ms | [延时触发](#延时触发) | -- Gitee From 549d452e15d64afbadc778f3b85d91853d112153 Mon Sep 17 00:00:00 2001 From: panyongxu Date: Mon, 1 Nov 2021 12:58:43 +0800 Subject: [PATCH 12/23] feat: add [readTip] component --- .../devui/read-tip/__tests__/read-tip.spec.ts | 8 +++ packages/devui-vue/devui/read-tip/index.ts | 19 +++++++ .../devui/read-tip/src/read-tip-directive.ts | 10 ++++ .../devui/read-tip/src/read-tip-types.ts | 9 +++ .../devui/read-tip/src/read-tip.scss | 3 + .../devui-vue/devui/read-tip/src/read-tip.tsx | 14 +++++ .../docs/components/read-tip/index.md | 55 +++++++++++++++++++ 7 files changed, 118 insertions(+) create mode 100644 packages/devui-vue/devui/read-tip/__tests__/read-tip.spec.ts create mode 100644 packages/devui-vue/devui/read-tip/index.ts create mode 100644 packages/devui-vue/devui/read-tip/src/read-tip-directive.ts create mode 100644 packages/devui-vue/devui/read-tip/src/read-tip-types.ts create mode 100644 packages/devui-vue/devui/read-tip/src/read-tip.scss create mode 100644 packages/devui-vue/devui/read-tip/src/read-tip.tsx create mode 100644 packages/devui-vue/docs/components/read-tip/index.md diff --git a/packages/devui-vue/devui/read-tip/__tests__/read-tip.spec.ts b/packages/devui-vue/devui/read-tip/__tests__/read-tip.spec.ts new file mode 100644 index 00000000..fae43c0e --- /dev/null +++ b/packages/devui-vue/devui/read-tip/__tests__/read-tip.spec.ts @@ -0,0 +1,8 @@ +import { mount } from '@vue/test-utils'; +import { ReadTip, ReadTipDirective } from '../index'; + +describe('read-tip test', () => { + it('read-tip init render', async () => { + // todo + }) +}) diff --git a/packages/devui-vue/devui/read-tip/index.ts b/packages/devui-vue/devui/read-tip/index.ts new file mode 100644 index 00000000..30a52ade --- /dev/null +++ b/packages/devui-vue/devui/read-tip/index.ts @@ -0,0 +1,19 @@ +import type { App } from 'vue' +import ReadTip from './src/read-tip' +import ReadTipDirective from './src/read-tip-directive' + +ReadTip.install = function(app: App): void { + app.component(ReadTip.name, ReadTip) +} + +export { ReadTip, ReadTipDirective } + +export default { + title: 'ReadTip 阅读提示', + category: '反馈', + status: undefined, // TODO: 组件若开发完成则填入"已完成"，并删除该注释 + install(app: App): void { + app.use(ReadTip as any) + app.directive('ReadTip', ReadTipDirective) + } +} diff --git a/packages/devui-vue/devui/read-tip/src/read-tip-directive.ts b/packages/devui-vue/devui/read-tip/src/read-tip-directive.ts new file mode 100644 index 00000000..788dde30 --- /dev/null +++ b/packages/devui-vue/devui/read-tip/src/read-tip-directive.ts @@ -0,0 +1,10 @@ +// can export function. +export default { + // created() { }, + // beforeMount() { }, + // mounted() { }, + // beforeUpdate() { }, + // updated() { }, + // beforeUnmount() { }, + // unmounted() { } +} diff --git a/packages/devui-vue/devui/read-tip/src/read-tip-types.ts b/packages/devui-vue/devui/read-tip/src/read-tip-types.ts new file mode 100644 index 00000000..f4d190bc --- /dev/null +++ b/packages/devui-vue/devui/read-tip/src/read-tip-types.ts @@ -0,0 +1,9 @@ +import type { PropType, ExtractPropTypes } from 'vue' + +export const readTipProps = { + /* test: { + type: Object as PropType<{ xxx: xxx }> + } */ +} as const + +export type ReadTipProps = ExtractPropTypes diff --git a/packages/devui-vue/devui/read-tip/src/read-tip.scss b/packages/devui-vue/devui/read-tip/src/read-tip.scss new file mode 100644 index 00000000..6efc8f91 --- /dev/null +++ b/packages/devui-vue/devui/read-tip/src/read-tip.scss @@ -0,0 +1,3 @@ +.devui-read-tip { + // +} diff --git a/packages/devui-vue/devui/read-tip/src/read-tip.tsx b/packages/devui-vue/devui/read-tip/src/read-tip.tsx new file mode 100644 index 00000000..e462a922 --- /dev/null +++ b/packages/devui-vue/devui/read-tip/src/read-tip.tsx @@ -0,0 +1,14 @@ +import { defineComponent } from 'vue' +import { readTipProps, ReadTipProps } from './read-tip-types' +import './read-tip.scss' + +export default defineComponent({ + name: 'DReadTip', + props: readTipProps, + emits: [], + setup(props: ReadTipProps, ctx) { + return () => { + return (
) + } + } +}) diff --git a/packages/devui-vue/docs/components/read-tip/index.md b/packages/devui-vue/docs/components/read-tip/index.md new file mode 100644 index 00000000..a0608944 --- /dev/null +++ b/packages/devui-vue/docs/components/read-tip/index.md @@ -0,0 +1,55 @@ +# ReadTip 阅读提示 + +// todo 组件描述 + +### 何时使用 + +// todo 使用时机描述 + + +### 基本用法 +// todo 用法描述 +:::demo // todo 展开代码的内部描述 + +```vue + + + + + +``` + +::: + +### d-read-tip + +d-read-tip 参数 + +| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | 全局配置项 | +| ---- | ---- | ---- | ---- | --------- | --------- | +| | | | | | | +| | | | | | | +| | | | | | | + +d-read-tip 事件 + +| 事件 | 类型 | 说明 | 跳转 Demo | +| ---- | ---- | ---- | --------- | +| | | | | +| | | | | +| | | | | + -- Gitee From 0efcf6700faf4f5fb903f4532b4cfbe48488cc55 Mon Sep 17 00:00:00 2001 From: panyongxu Date: Mon, 1 Nov 2021 17:46:16 +0800 Subject: [PATCH 13/23] =?UTF-8?q?feat:=20=E5=88=9D=E6=AD=A5[read-tip]?= =?UTF-8?q?=E6=8F=90=E7=A4=BA=E6=96=87=E6=A1=88=E5=B1=95=E7=A4=BA=E5=87=BA?= =?UTF-8?q?=E6=9D=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui/read-tip/src/read-tip-template.tsx | 26 +++ .../devui/read-tip/src/read-tip-types.ts | 44 ++++ .../devui/read-tip/src/read-tip.scss | 203 +++++++++++++++++- .../devui-vue/devui/read-tip/src/read-tip.tsx | 61 +++++- .../docs/components/read-tip/index.md | 134 +++++++++--- 5 files changed, 441 insertions(+), 27 deletions(-) create mode 100644 packages/devui-vue/devui/read-tip/src/read-tip-template.tsx diff --git a/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx b/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx new file mode 100644 index 00000000..099354b4 --- /dev/null +++ b/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx @@ -0,0 +1,26 @@ +import { defineComponent, ref, onMounted } from 'vue' +import { readTipProps, ReadTipProps, } from './read-tip-types' +import './read-tip.scss' + +export default defineComponent({ + name: 'DReadTip', + props: readTipProps, + emits: [], + setup(props: ReadTipProps, ctx) { + + + return () => { + return ( +
+
+ {props.defaultTemplateProps.title} +
+
+ {props.defaultTemplateProps.content} +
+
+ + ) + } + } +}) diff --git a/packages/devui-vue/devui/read-tip/src/read-tip-types.ts b/packages/devui-vue/devui/read-tip/src/read-tip-types.ts index f4d190bc..4a61f9f9 100644 --- a/packages/devui-vue/devui/read-tip/src/read-tip-types.ts +++ b/packages/devui-vue/devui/read-tip/src/read-tip-types.ts @@ -4,6 +4,50 @@ export const readTipProps = { /* test: { type: Object as PropType<{ xxx: xxx }> } */ + readTipOptions : { + type : Object as PropType + }, + defaultTemplateProps : { + type : Object as PropType + } } as const +export type DefaultTemplateProps = { + title?: string + content?: string +} + +export interface ReadTipOptions { + trigger?: 'hover' | 'click' + showAnimate?: boolean + mouseenterTime?: number + mouseleaveTime?: number + position?: 'top' | 'bottom' + overlayClassName?: string + appendToBody?: boolean + rules: ReadTipRules +} + +export type ReadTipRules = ReadTipRule | ReadTipRule[]; + +export interface ReadTipRule { + key?: string + selector: string + trigger?: 'hover' | 'click' + title?: string + content?: string + showAnimate?: boolean + mouseenterTime?: number + mouseleaveTime?: number + position?: 'top' | 'bottom' + overlayClassName?: string + appendToBody?: boolean + //customData与template搭配使用，customData为传入模板的上下文，可以自定义模板内容 + // dataFn?: ({ + // element, + // rule: ReadTipRule, + // }) => Observable<{ title?: string; content?: string; template?: TemplateRef; customData?: any }> +} + + export type ReadTipProps = ExtractPropTypes diff --git a/packages/devui-vue/devui/read-tip/src/read-tip.scss b/packages/devui-vue/devui/read-tip/src/read-tip.scss index 6efc8f91..079da1c2 100644 --- a/packages/devui-vue/devui/read-tip/src/read-tip.scss +++ b/packages/devui-vue/devui/read-tip/src/read-tip.scss @@ -1,3 +1,204 @@ +@import '../../style/theme/color'; +@import '../../style/theme/variables'; +@import '../../style/mixins/index'; +@import '../../style/theme/shadow'; +@import '../../style/theme/corner'; +@import '../../style/core/_font'; +// @import '../../style/core/z-index'; .devui-read-tip { - // + position: relative; +} + +.read-tip-container { + font-size: $devui-font-size; + position: absolute; + top: 0; + left: 0; + line-height: 1.5; + border: none; + border-radius: $devui-border-radius-feedback; + // z-index: $devui-z-index-pop-up; + background-color: $devui-feedback-overlay-bg; + color: $devui-feedback-overlay-text; + overflow-wrap: break-word; + padding: 10px; +} + +:host.devui-popover { + font-size: $devui-font-size; + position: absolute; + top: 0; + left: 0; + line-height: 1.5; + border: none; + border-radius: $devui-border-radius-feedback; + // z-index: $devui-z-index-pop-up; + background-color: $devui-feedback-overlay-bg; + color: $devui-feedback-overlay-text; + overflow-wrap: break-word; + + > .arrow { + border-width: 8px; + + &, + &::after { + position: absolute; + display: block; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + } + + &::after { + content: ''; + } + } + + &.top > .arrow { + transform: translateX(-50%); + border-bottom-width: 0; + border-top-color: $devui-feedback-overlay-bg; + bottom: -8px; + } + + &.right > .arrow { + left: -8px; + margin-top: -8px; + border-left-width: 0; + border-right-color: $devui-feedback-overlay-bg; + } + + &.bottom > .arrow { + transform: translateX(-50%); + border-top-width: 0; + border-bottom-color: $devui-feedback-overlay-bg; + top: -8px; + } + + &.left > .arrow { + right: -8px; + margin-top: -8px; + border-right-width: 0; + border-left-color: $devui-feedback-overlay-bg; + } + + &.bias-left > .arrow { + left: 14px; + } + + &.bias-right > .arrow { + right: 14px; + } + + &.bias-top > .arrow { + top: 13px; + } + + &.bias-bottom > .arrow { + bottom: 5px; + } + + &.bias-horizontal-center > .arrow { + left: 50%; + } + + &.bias-vertical-center > .arrow { + top: 50%; + } + + &.top { + margin-top: -8px; + box-shadow: $devui-shadow-length-feedback-overlay $devui-shadow; + } + + &.bottom { + margin-top: 8px; + box-shadow: $devui-shadow-length-feedback-overlay $devui-shadow; + } + + &.left { + margin-left: -8px; + box-shadow: $devui-shadow-length-feedback-overlay $devui-shadow; + } + + &.right { + margin-left: 8px; + box-shadow: $devui-shadow-length-feedback-overlay $devui-shadow; + } +} + +.devui-popover-content { + padding: 4px 12px; + + .read-tip-container { + .title { + font-size: $devui-font-size-page-title; + } + + .content { + font-size: $devui-font-size; + } + } +} + +.devui-popover-icon { + display: block; + position: absolute; + left: 10px; + top: 6px; + + svg.devui-icon { + width: 16px; + height: 16px; + } +} + +.devui-popover-main-content.with-icon { + text-indent: 20px; +} + +.devui-icon.devui-icon-success > g { + & > path { + fill: $devui-success; + } + + & > circle, + & > polygon { + fill: $devui-light-text; + } +} + +.devui-icon.devui-icon-warning > g { + & > polygon { + fill: $devui-light-text; + } + + & > path { + fill: $devui-warning; + } +} + +.devui-icon.devui-icon-info > g { + & > g { + fill: $devui-info; + } + + & > circle { + fill: $devui-light-text; + } +} + +.devui-icon.devui-icon-error > g { + & > path { + fill: $devui-danger; + } + + & > circle { + fill: $devui-light-text; + } +} + +.devui-popover-content { + padding: 4px 12px; } diff --git a/packages/devui-vue/devui/read-tip/src/read-tip.tsx b/packages/devui-vue/devui/read-tip/src/read-tip.tsx index e462a922..c01b4ada 100644 --- a/packages/devui-vue/devui/read-tip/src/read-tip.tsx +++ b/packages/devui-vue/devui/read-tip/src/read-tip.tsx @@ -1,14 +1,71 @@ -import { defineComponent } from 'vue' +import { defineComponent, ref, onMounted, reactive } from 'vue' import { readTipProps, ReadTipProps } from './read-tip-types' import './read-tip.scss' +import TipsTemplate from './read-tip-template'; export default defineComponent({ name: 'DReadTip', props: readTipProps, emits: [], setup(props: ReadTipProps, ctx) { + + const readTip = ref(null) + + const init = (rules, trigger = 'hover') => { + rules.map(rule => { + rule.status = false + trigger = rule.trigger || trigger + const dom = document.querySelector(rule.selector); + dom.style.position = 'relative' + if (trigger === 'hover') { + dom.addEventListener('mouseenter', () => { + rule.status = true + }) + dom.addEventListener('mouseleave', () => { + rule.status = false + }) + } + + if (trigger === 'click') { + dom.addEventListener('click', () => { + rule.status = true + }) + // dom.addEventListener('mouseleave', () => { + // rule.status = false + // }) + } + }) + return rules + } + + const rules = (rules) => { + if (rules === null) return + if (typeof rules === 'object' && !Array.isArray(rules)) { + rules = [rules] + } + rules = [...rules] + Array.isArray(rules) && rules.map(rule => { + rule.status = false + }) + return rules + } + const refRules = reactive(rules(props.readTipOptions.rules)) + + onMounted(() => { + init(refRules, props.readTipOptions.trigger || 'click') + }) return () => { - return (
) + return (
+ { + ctx.slots?.default() + } + {(refRules).map(rule => (rule.status && + // + + // + ) + )} +
) } } }) diff --git a/packages/devui-vue/docs/components/read-tip/index.md b/packages/devui-vue/docs/components/read-tip/index.md index a0608944..12c9d029 100644 --- a/packages/devui-vue/docs/components/read-tip/index.md +++ b/packages/devui-vue/docs/components/read-tip/index.md @@ -1,35 +1,127 @@ # ReadTip 阅读提示 -// todo 组件描述 +阅读提示组件。 ### 何时使用 -// todo 使用时机描述 +当html文档中需要对特定内容进行提示时使用。 ### 基本用法 -// todo 用法描述 -:::demo // todo 展开代码的内部描述 +通过设置selector选择需要显示readtip的元素，传入title和content设置显示的内容。 +:::demo ```vue - +``` + +::: + +### 包括多个提示的readtip +传入多个rule，设置不同元素的readtip显示模式。 +:::demo + +```vue + + + + + ``` @@ -39,17 +131,11 @@ export default defineComponent({ d-read-tip 参数 -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | 全局配置项 | -| ---- | ---- | ---- | ---- | --------- | --------- | -| | | | | | | -| | | | | | | -| | | | | | | +| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | 全局配置项 | +| -------------------- | ------------------ | ---- | ------------------------------- | ---------------------- | ---------- | +| readTipOptions | ReadTipOptions | -- | 必选，配置提示选项 | 基本用法 | -- | +| readTipOptions.rules | ReadTipRules | -- | 必选，配置 readtip 内容 | 包括多个提示的 readtip | -- | +| contentTemplate | `TemplateRef` | -- | 可选，传入模板显示 readtip 内容 | 传入模板显示内容 | -- | -d-read-tip 事件 -| 事件 | 类型 | 说明 | 跳转 Demo | -| ---- | ---- | ---- | --------- | -| | | | | -| | | | | -| | | | | -- Gitee From ecc32cb566622b1d6fd9c1302d4d6d85377d39e9 Mon Sep 17 00:00:00 2001 From: panyongxu Date: Mon, 1 Nov 2021 17:56:57 +0800 Subject: [PATCH 14/23] fix: [read-tip] bug --- packages/devui-vue/devui/read-tip/src/read-tip.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/devui-vue/devui/read-tip/src/read-tip.tsx b/packages/devui-vue/devui/read-tip/src/read-tip.tsx index c01b4ada..a27d2809 100644 --- a/packages/devui-vue/devui/read-tip/src/read-tip.tsx +++ b/packages/devui-vue/devui/read-tip/src/read-tip.tsx @@ -28,6 +28,9 @@ export default defineComponent({ if (trigger === 'click') { dom.addEventListener('click', () => { + rules.forEach(element => { + element.status = false + }); rule.status = true }) // dom.addEventListener('mouseleave', () => { -- Gitee From 0b6ad4e7fbae86176defe3676f04f57395f1d1fd Mon Sep 17 00:00:00 2001 From: panyongxu Date: Tue, 2 Nov 2021 13:35:02 +0800 Subject: [PATCH 15/23] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=20[read-tip]?= =?UTF-8?q?=20=E7=82=B9=E5=87=BB=E5=85=B6=E4=BB=96=E5=8C=BA=E5=9F=9F?= =?UTF-8?q?=E5=8F=96=E6=B6=88=E5=B1=95=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui-vue/devui/read-tip/src/read-tip.tsx | 21 ++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) diff --git a/packages/devui-vue/devui/read-tip/src/read-tip.tsx b/packages/devui-vue/devui/read-tip/src/read-tip.tsx index a27d2809..a4c82c61 100644 --- a/packages/devui-vue/devui/read-tip/src/read-tip.tsx +++ b/packages/devui-vue/devui/read-tip/src/read-tip.tsx @@ -19,7 +19,7 @@ export default defineComponent({ dom.style.position = 'relative' if (trigger === 'hover') { dom.addEventListener('mouseenter', () => { - rule.status = true + show(dom, rule) }) dom.addEventListener('mouseleave', () => { rule.status = false @@ -31,8 +31,17 @@ export default defineComponent({ rules.forEach(element => { element.status = false }); - rule.status = true + show(dom, rule) }) + document.addEventListener('click', (e :any) => { + rules.forEach(element => { + element.status = false + if(element.selector.indexOf(e.target.className) != -1) { + show(dom, element) + } + }); + + },false) // dom.addEventListener('mouseleave', () => { // rule.status = false // }) @@ -40,7 +49,9 @@ export default defineComponent({ }) return rules } - + function show(dom, rule) { + rule.status = true + } const rules = (rules) => { if (rules === null) return if (typeof rules === 'object' && !Array.isArray(rules)) { @@ -63,9 +74,9 @@ export default defineComponent({ ctx.slots?.default() } {(refRules).map(rule => (rule.status && - // + // - // + // ) )}
) -- Gitee From 918dc35867dc2884285221d402d8f119d04e312a Mon Sep 17 00:00:00 2001 From: panyongxu Date: Wed, 3 Nov 2021 17:31:11 +0800 Subject: [PATCH 16/23] =?UTF-8?q?feat(readtip):=20=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=E9=80=9A=E8=BF=87css=E6=9D=A5=E6=8E=A7=E5=88=B6=E6=8F=90?= =?UTF-8?q?=E7=A4=BA=E6=A1=86=E7=9A=84=E4=BD=8D=E7=BD=AE=EF=BC=8C=E7=9B=AE?= =?UTF-8?q?=E5=89=8D=E6=94=AF=E6=8C=81=20=E4=B8=8A=E4=B8=8B=E5=B7=A6?= =?UTF-8?q?=E5=8F=B3=E5=B1=95=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui-vue/devui/popover/src/popover.tsx | 15 +- .../devui/read-tip/src/read-tip-template.tsx | 12 +- .../devui/read-tip/src/read-tip-types.ts | 3 + .../devui/read-tip/src/read-tip.scss | 205 ++++-------------- .../devui-vue/devui/read-tip/src/read-tip.tsx | 81 ++++--- .../docs/components/read-tip/index.md | 7 +- 6 files changed, 122 insertions(+), 201 deletions(-) diff --git a/packages/devui-vue/devui/popover/src/popover.tsx b/packages/devui-vue/devui/popover/src/popover.tsx index f467f8b8..d0b367c3 100644 --- a/packages/devui-vue/devui/popover/src/popover.tsx +++ b/packages/devui-vue/devui/popover/src/popover.tsx @@ -16,7 +16,7 @@ const popTypeClass = { export default defineComponent({ name: 'DPopover', - + directives: { clickoutside: clickoutsideDirective }, @@ -81,7 +81,11 @@ export default defineComponent({ setup(props, ctx) { const { slots } = ctx; const visible = ref(props.visible); - const { position, content, zIndex, trigger, popType, popoverStyle, mouseEnterDelay, mouseLeaveDelay, showAnimation, popMaxWidth } = toRefs(props); + const { + position, content, zIndex, trigger, popType, + popoverStyle, mouseEnterDelay, mouseLeaveDelay, + showAnimation, popMaxWidth + } = toRefs(props); const style: CSSProperties = { zIndex: zIndex.value, ...popoverStyle.value } const isClick = trigger.value === 'click' const iconType = reactive(popTypeClass[popType.value]) @@ -110,7 +114,12 @@ export default defineComponent({ 'devui-popover-isVisible': visible.value } ]} > -
+
{slots.reference?.()}
diff --git a/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx b/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx index 099354b4..25aa07f6 100644 --- a/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx +++ b/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx @@ -1,17 +1,17 @@ -import { defineComponent, ref, onMounted } from 'vue' +import { defineComponent, ref, onMounted, Teleport } from 'vue' import { readTipProps, ReadTipProps, } from './read-tip-types' import './read-tip.scss' export default defineComponent({ - name: 'DReadTip', + name: 'DReadTipTemplate', props: readTipProps, emits: [], setup(props: ReadTipProps, ctx) { - - return () => { return ( -
+ +
+
{props.defaultTemplateProps.title}
@@ -19,6 +19,8 @@ export default defineComponent({ {props.defaultTemplateProps.content}
+ + ) } diff --git a/packages/devui-vue/devui/read-tip/src/read-tip-types.ts b/packages/devui-vue/devui/read-tip/src/read-tip-types.ts index 4a61f9f9..9bbfb6e7 100644 --- a/packages/devui-vue/devui/read-tip/src/read-tip-types.ts +++ b/packages/devui-vue/devui/read-tip/src/read-tip-types.ts @@ -15,6 +15,9 @@ export const readTipProps = { export type DefaultTemplateProps = { title?: string content?: string + top?: number + selector: string + position: string } export interface ReadTipOptions { diff --git a/packages/devui-vue/devui/read-tip/src/read-tip.scss b/packages/devui-vue/devui/read-tip/src/read-tip.scss index 079da1c2..e113de16 100644 --- a/packages/devui-vue/devui/read-tip/src/read-tip.scss +++ b/packages/devui-vue/devui/read-tip/src/read-tip.scss @@ -9,26 +9,17 @@ position: relative; } -.read-tip-container { - font-size: $devui-font-size; - position: absolute; - top: 0; - left: 0; - line-height: 1.5; - border: none; - border-radius: $devui-border-radius-feedback; - // z-index: $devui-z-index-pop-up; - background-color: $devui-feedback-overlay-bg; - color: $devui-feedback-overlay-text; - overflow-wrap: break-word; - padding: 10px; +.source { + overflow: initial; } -:host.devui-popover { +.read-tip-container { font-size: $devui-font-size; position: absolute; - top: 0; - left: 0; + width: max-content; + height: max-content; + // top: 0; + // left: 0; line-height: 1.5; border: none; border-radius: $devui-border-radius-feedback; @@ -36,169 +27,53 @@ background-color: $devui-feedback-overlay-bg; color: $devui-feedback-overlay-text; overflow-wrap: break-word; + padding: 10px; + z-index: 50; - > .arrow { - border-width: 8px; - - &, - &::after { - position: absolute; - display: block; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - } - - &::after { - content: ''; - } - } - - &.top > .arrow { - transform: translateX(-50%); - border-bottom-width: 0; - border-top-color: $devui-feedback-overlay-bg; - bottom: -8px; - } - - &.right > .arrow { - left: -8px; - margin-top: -8px; - border-left-width: 0; - border-right-color: $devui-feedback-overlay-bg; - } - - &.bottom > .arrow { - transform: translateX(-50%); - border-top-width: 0; - border-bottom-color: $devui-feedback-overlay-bg; - top: -8px; - } - - &.left > .arrow { - right: -8px; - margin-top: -8px; - border-right-width: 0; - border-left-color: $devui-feedback-overlay-bg; - } - - &.bias-left > .arrow { - left: 14px; - } - - &.bias-right > .arrow { - right: 14px; - } - - &.bias-top > .arrow { - top: 13px; - } - - &.bias-bottom > .arrow { - bottom: 5px; - } - - &.bias-horizontal-center > .arrow { - left: 50%; - } - - &.bias-vertical-center > .arrow { - top: 50%; + .after { + content: ''; + width: 12px; + height: 12px; + transform: rotate(45deg); + position: absolute; + background-color: $devui-feedback-overlay-bg; } - + // 定位 top &.top { - margin-top: -8px; - box-shadow: $devui-shadow-length-feedback-overlay $devui-shadow; - } + top: -60px; + left: 0; - &.bottom { - margin-top: 8px; - box-shadow: $devui-shadow-length-feedback-overlay $devui-shadow; + .after { + bottom: -4px; + } } + // 定位 left &.left { - margin-left: -8px; - box-shadow: $devui-shadow-length-feedback-overlay $devui-shadow; - } - - &.right { - margin-left: 8px; - box-shadow: $devui-shadow-length-feedback-overlay $devui-shadow; - } -} + right: calc(100% + 10px); + top: -2px; -.devui-popover-content { - padding: 4px 12px; - - .read-tip-container { - .title { - font-size: $devui-font-size-page-title; + .after { + right: -4px; } - - .content { - font-size: $devui-font-size; - } - } -} - -.devui-popover-icon { - display: block; - position: absolute; - left: 10px; - top: 6px; - - svg.devui-icon { - width: 16px; - height: 16px; - } -} - -.devui-popover-main-content.with-icon { - text-indent: 20px; -} - -.devui-icon.devui-icon-success > g { - & > path { - fill: $devui-success; - } - - & > circle, - & > polygon { - fill: $devui-light-text; - } -} - -.devui-icon.devui-icon-warning > g { - & > polygon { - fill: $devui-light-text; } - & > path { - fill: $devui-warning; - } -} - -.devui-icon.devui-icon-info > g { - & > g { - fill: $devui-info; - } + // 定位 right + &.right { + left: calc(100% + 10px); + top: -2px; - & > circle { - fill: $devui-light-text; + .after { + left: -4px; + } } -} -.devui-icon.devui-icon-error > g { - & > path { - fill: $devui-danger; - } + // 定位 bottom + &.bottom { + top: calc(100% + 10px); - & > circle { - fill: $devui-light-text; + .after { + top: -4px; + } } } - -.devui-popover-content { - padding: 4px 12px; -} diff --git a/packages/devui-vue/devui/read-tip/src/read-tip.tsx b/packages/devui-vue/devui/read-tip/src/read-tip.tsx index a4c82c61..2d5582d8 100644 --- a/packages/devui-vue/devui/read-tip/src/read-tip.tsx +++ b/packages/devui-vue/devui/read-tip/src/read-tip.tsx @@ -1,5 +1,5 @@ -import { defineComponent, ref, onMounted, reactive } from 'vue' -import { readTipProps, ReadTipProps } from './read-tip-types' +import { defineComponent, ref, onMounted, reactive, Teleport, } from 'vue' +import { readTipProps, ReadTipProps, ReadTipOptions } from './read-tip-types' import './read-tip.scss' import TipsTemplate from './read-tip-template'; @@ -8,18 +8,31 @@ export default defineComponent({ props: readTipProps, emits: [], setup(props: ReadTipProps, ctx) { - + // 默认配置 + const defaultOptions: ReadTipOptions = { + trigger: 'hover', + showAnimate: false, + mouseenterTime: 100, + mouseleaveTime: 100, + position: 'top', + overlayClassName: '', + appendToBody: true, + rules: { selector: null }, + }; + const tempTop = ref(0) + const options = { ...defaultOptions, ...props.readTipOptions } + const defaultSlot = ref(null) const readTip = ref(null) - + const init = (rules, trigger = 'hover') => { rules.map(rule => { rule.status = false trigger = rule.trigger || trigger - const dom = document.querySelector(rule.selector); + const dom = defaultSlot.value.querySelector(rule.selector); dom.style.position = 'relative' if (trigger === 'hover') { dom.addEventListener('mouseenter', () => { - show(dom, rule) + show(dom, rule, ) }) dom.addEventListener('mouseleave', () => { rule.status = false @@ -33,15 +46,15 @@ export default defineComponent({ }); show(dom, rule) }) - document.addEventListener('click', (e :any) => { - rules.forEach(element => { - element.status = false - if(element.selector.indexOf(e.target.className) != -1) { - show(dom, element) - } - }); - - },false) + // document.addEventListener('click', (e: any) => { + // rules.forEach(element => { + // element.status = false + // if (element.selector.indexOf(e.target.className) != -1) { + // show(dom, element) + // } + // }); + + // }, false) // dom.addEventListener('mouseleave', () => { // rule.status = false // }) @@ -50,7 +63,12 @@ export default defineComponent({ return rules } function show(dom, rule) { + const top = dom.offsetTop + // console.log("🚀 ~ file: read-tip.tsx ~ line 66 ~ show ~ top", top) + const t = document.querySelector('.read-tip-container') + // t = t >= 0 ? -t - 50 : t rule.status = true + tempTop.value = top - 60 } const rules = (rules) => { if (rules === null) return @@ -63,20 +81,33 @@ export default defineComponent({ }) return rules } - const refRules = reactive(rules(props.readTipOptions.rules)) + const refRules = reactive(rules(options.rules)) onMounted(() => { - init(refRules, props.readTipOptions.trigger || 'click') + init(refRules, options.trigger) + // console.log("🚀 ~ file: read-tip.tsx ~ line 25 ~ setup ~ defaultSlot", defaultSlot.value) + }) return () => { - return (
- { - ctx.slots?.default() - } - {(refRules).map(rule => (rule.status && - // - - // + return (
+
{ + console.log(e,'.readtip-target') + // var a = e.target.querySelector('.readtip-target') + // console.log("🚀 ~ file: read-tip.tsx ~ line 98 ~ return ~ a", a) + }} + > + { + ctx.slots?.default() + } +
+ + {(refRules).map(rule => ( +
+ {rule.status && } +
) )}
) diff --git a/packages/devui-vue/docs/components/read-tip/index.md b/packages/devui-vue/docs/components/read-tip/index.md index 12c9d029..7ae1bef7 100644 --- a/packages/devui-vue/docs/components/read-tip/index.md +++ b/packages/devui-vue/docs/components/read-tip/index.md @@ -27,6 +27,7 @@ const readTipOptions = { trigger: 'click', rules: { trigger: 'hover', + position:'top', selector: '.readtip-target', title: 'Name: Jack', content: 'This is Jack\'s profile', @@ -84,13 +85,13 @@ const readTipOptions = { rules: [ { selector: '.first-content', - position: 'left', + position: 'top', title: 'This Is the First Title', content: 'Lorem ipsum dolor sit amet, consectetur ad.', }, { selector: '.second-content', - position: 'top-left', + position: 'left', title: 'This Is the Second Title', content: 'Class aptent taciti sociosqu ad litora torquent per conubia nostra', overlayClassName: 'child-class', @@ -98,7 +99,7 @@ const readTipOptions = { { trigger: 'hover', selector: '.third-content', - position: 'bottom-left', + position: 'right', title: 'This Is the Third Title', content: 'Aenean libero urna, scelerisque tincidunt', }, -- Gitee From 21d28513fdcb8a3e6d1b6c117059742c27ecdd31 Mon Sep 17 00:00:00 2001 From: panyongxu Date: Wed, 3 Nov 2021 17:44:57 +0800 Subject: [PATCH 17/23] =?UTF-8?q?feat(readTip):=20=E6=9B=B4=E6=96=B0?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=BC=80=E5=8F=91=E7=8A=B6=E6=80=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/devui/read-tip/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/devui-vue/devui/read-tip/index.ts b/packages/devui-vue/devui/read-tip/index.ts index 30a52ade..d369dc31 100644 --- a/packages/devui-vue/devui/read-tip/index.ts +++ b/packages/devui-vue/devui/read-tip/index.ts @@ -11,7 +11,7 @@ export { ReadTip, ReadTipDirective } export default { title: 'ReadTip 阅读提示', category: '反馈', - status: undefined, // TODO: 组件若开发完成则填入"已完成"，并删除该注释 + status: '5%', // TODO: 组件若开发完成则填入"已完成"，并删除该注释 install(app: App): void { app.use(ReadTip as any) app.directive('ReadTip', ReadTipDirective) -- Gitee From f1ff02b9f424f6be01904e8943b16794b31c4e16 Mon Sep 17 00:00:00 2001 From: panyongxu Date: Thu, 4 Nov 2021 13:53:54 +0800 Subject: [PATCH 18/23] =?UTF-8?q?feat(readTip):=20=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=E9=BC=A0=E6=A0=87=E7=82=B9=E5=87=BB=E5=92=8C=E9=BC=A0=E6=A0=87?= =?UTF-8?q?=E7=A7=BB=E5=85=A5=E7=A7=BB=E5=87=BA=E4=BA=8B=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui/read-tip/src/read-tip-types.ts | 28 +++--- .../devui-vue/devui/read-tip/src/read-tip.tsx | 86 ++++++++++--------- .../docs/components/read-tip/index.md | 2 +- 3 files changed, 61 insertions(+), 55 deletions(-) diff --git a/packages/devui-vue/devui/read-tip/src/read-tip-types.ts b/packages/devui-vue/devui/read-tip/src/read-tip-types.ts index 9bbfb6e7..9d69d1d3 100644 --- a/packages/devui-vue/devui/read-tip/src/read-tip-types.ts +++ b/packages/devui-vue/devui/read-tip/src/read-tip-types.ts @@ -1,31 +1,31 @@ import type { PropType, ExtractPropTypes } from 'vue' export const readTipProps = { - /* test: { - type: Object as PropType<{ xxx: xxx }> - } */ - readTipOptions : { - type : Object as PropType + readTipOptions: { + type: Object as PropType }, - defaultTemplateProps : { - type : Object as PropType + defaultTemplateProps: { + type: Object as PropType } } as const -export type DefaultTemplateProps = { +export type Position = 'top' | 'left' | 'right' | 'bottom' +export type Trigger = 'hover' | 'click' + +export type DefaultTemplateProps = { title?: string content?: string top?: number - selector: string - position: string + selector?: string + position?: string } export interface ReadTipOptions { - trigger?: 'hover' | 'click' + trigger?: Trigger showAnimate?: boolean mouseenterTime?: number mouseleaveTime?: number - position?: 'top' | 'bottom' + position?: Position overlayClassName?: string appendToBody?: boolean rules: ReadTipRules @@ -36,13 +36,13 @@ export type ReadTipRules = ReadTipRule | ReadTipRule[]; export interface ReadTipRule { key?: string selector: string - trigger?: 'hover' | 'click' + trigger?: Trigger title?: string content?: string showAnimate?: boolean mouseenterTime?: number mouseleaveTime?: number - position?: 'top' | 'bottom' + position?: Position overlayClassName?: string appendToBody?: boolean //customData与template搭配使用，customData为传入模板的上下文，可以自定义模板内容 diff --git a/packages/devui-vue/devui/read-tip/src/read-tip.tsx b/packages/devui-vue/devui/read-tip/src/read-tip.tsx index 2d5582d8..9b3d1d15 100644 --- a/packages/devui-vue/devui/read-tip/src/read-tip.tsx +++ b/packages/devui-vue/devui/read-tip/src/read-tip.tsx @@ -1,4 +1,4 @@ -import { defineComponent, ref, onMounted, reactive, Teleport, } from 'vue' +import { defineComponent, ref, onMounted, reactive, Teleport, onUnmounted } from 'vue' import { readTipProps, ReadTipProps, ReadTipOptions } from './read-tip-types' import './read-tip.scss' import TipsTemplate from './read-tip-template'; @@ -20,56 +20,43 @@ export default defineComponent({ rules: { selector: null }, }; const tempTop = ref(0) + // 合并基础配置 const options = { ...defaultOptions, ...props.readTipOptions } const defaultSlot = ref(null) const readTip = ref(null) - + const onMouseenter = (rule) => () => { + setTimeout(() => { + rule.status = true + }, rule.mouseenterTime || options.mouseenterTime); + } + const onMouseleave = (rule) => () => { + setTimeout(() => { + rule.status = false + }, rule.mouseleaveTime || options.mouseleaveTime); + } + const init = (rules, trigger = 'hover') => { rules.map(rule => { rule.status = false trigger = rule.trigger || trigger const dom = defaultSlot.value.querySelector(rule.selector); dom.style.position = 'relative' - if (trigger === 'hover') { - dom.addEventListener('mouseenter', () => { - show(dom, rule, ) - }) - dom.addEventListener('mouseleave', () => { - rule.status = false - }) - } - - if (trigger === 'click') { - dom.addEventListener('click', () => { - rules.forEach(element => { - element.status = false - }); - show(dom, rule) - }) - // document.addEventListener('click', (e: any) => { - // rules.forEach(element => { - // element.status = false - // if (element.selector.indexOf(e.target.className) != -1) { - // show(dom, element) - // } - // }); - // }, false) - // dom.addEventListener('mouseleave', () => { - // rule.status = false - // }) + if (trigger === 'hover') { + dom.addEventListener('mouseenter', onMouseenter(rule)) + dom.addEventListener('mouseleave', onMouseleave(rule)) } }) return rules } function show(dom, rule) { const top = dom.offsetTop - // console.log("🚀 ~ file: read-tip.tsx ~ line 66 ~ show ~ top", top) - const t = document.querySelector('.read-tip-container') + // const t = document.querySelector('.read-tip-container') // t = t >= 0 ? -t - 50 : t rule.status = true - tempTop.value = top - 60 + // tempTop.value = top - 60 } + // 把传入的props.rules统一转为数组对象格式 const rules = (rules) => { if (rules === null) return if (typeof rules === 'object' && !Array.isArray(rules)) { @@ -82,20 +69,39 @@ export default defineComponent({ return rules } const refRules = reactive(rules(options.rules)) - + const clickFn = () => { + refRules.forEach(element => { + element.status = false + }) + } onMounted(() => { init(refRules, options.trigger) - // console.log("🚀 ~ file: read-tip.tsx ~ line 25 ~ setup ~ defaultSlot", defaultSlot.value) + // 点击其他位置 关闭弹框 + document.addEventListener('click', clickFn, true) + + }) + onUnmounted(() => { + // 取消事件 + document.removeEventListener('click', clickFn) }) + + // 添加点击事件 当前元素是click事件目标则弹框展示 + const onClick = (e: Event) => { + for (const rule of refRules) { + const dom = defaultSlot.value.querySelector(rule.selector); + if (dom === e.target) { + console.log(1); + show(dom, rule) + return + } + } + } + return () => { return (
-
{ - console.log(e,'.readtip-target') - // var a = e.target.querySelector('.readtip-target') - // console.log("🚀 ~ file: read-tip.tsx ~ line 98 ~ return ~ a", a) - }} +
{ ctx.slots?.default() diff --git a/packages/devui-vue/docs/components/read-tip/index.md b/packages/devui-vue/docs/components/read-tip/index.md index 7ae1bef7..65a42b2e 100644 --- a/packages/devui-vue/docs/components/read-tip/index.md +++ b/packages/devui-vue/docs/components/read-tip/index.md @@ -99,7 +99,7 @@ const readTipOptions = { { trigger: 'hover', selector: '.third-content', - position: 'right', + position: 'bottom', title: 'This Is the Third Title', content: 'Aenean libero urna, scelerisque tincidunt', }, -- Gitee From 59ea06ea165e041fa744cdf8195f4e84c06d6014 Mon Sep 17 00:00:00 2001 From: panyongxu Date: Fri, 5 Nov 2021 09:21:54 +0800 Subject: [PATCH 19/23] =?UTF-8?q?fix(readTip):=20=E7=9B=AE=E5=89=8D?= =?UTF-8?q?=E9=87=87=E7=94=A8=E6=8A=8A=E5=BC=B9=E6=A1=86=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E5=88=B0=E7=9B=AE=E6=A0=87=E5=85=83=E7=B4=A0=E4=B9=8B=E5=86=85?= =?UTF-8?q?=E6=9D=A5=E5=AE=9A=E4=BD=8D=EF=BC=8C=E8=B7=9Fag=E7=89=88?= =?UTF-8?q?=E6=9C=AC=E4=B8=8D=E7=AC=A6=E5=90=88=EF=BC=8C=E5=87=86=E5=A4=87?= =?UTF-8?q?=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui/read-tip/src/read-tip-template.tsx | 35 ++++-- .../devui/read-tip/src/read-tip-types.ts | 4 +- .../devui-vue/devui/read-tip/src/read-tip.tsx | 116 ++++++++++++++++-- .../docs/components/read-tip/index.md | 18 +++ 4 files changed, 149 insertions(+), 24 deletions(-) diff --git a/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx b/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx index 25aa07f6..9dca323b 100644 --- a/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx +++ b/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx @@ -7,20 +7,35 @@ export default defineComponent({ props: readTipProps, emits: [], setup(props: ReadTipProps, ctx) { + // console.log(ctx.slots?.default()); + + const query = props.defaultTemplateProps?.id ? `#${props.defaultTemplateProps.id}` : props.defaultTemplateProps.selector return () => { return ( - -
- -
- {props.defaultTemplateProps.title} -
-
- {props.defaultTemplateProps.content} + +
+ + { + // ctx.slots?.comp ? ctx.slots?.comp() : + ( + <> +
+ {props.defaultTemplateProps.title} +
+
+ {props.defaultTemplateProps.content} +
+ + ) + } + + + + +
-
- + ) } diff --git a/packages/devui-vue/devui/read-tip/src/read-tip-types.ts b/packages/devui-vue/devui/read-tip/src/read-tip-types.ts index 9d69d1d3..35cc1577 100644 --- a/packages/devui-vue/devui/read-tip/src/read-tip-types.ts +++ b/packages/devui-vue/devui/read-tip/src/read-tip-types.ts @@ -5,7 +5,7 @@ export const readTipProps = { type: Object as PropType }, defaultTemplateProps: { - type: Object as PropType + type: Object as PropType } } as const @@ -18,6 +18,8 @@ export type DefaultTemplateProps = { top?: number selector?: string position?: string + id? : string + temp: string } export interface ReadTipOptions { diff --git a/packages/devui-vue/devui/read-tip/src/read-tip.tsx b/packages/devui-vue/devui/read-tip/src/read-tip.tsx index 9b3d1d15..2c7e2d56 100644 --- a/packages/devui-vue/devui/read-tip/src/read-tip.tsx +++ b/packages/devui-vue/devui/read-tip/src/read-tip.tsx @@ -2,6 +2,7 @@ import { defineComponent, ref, onMounted, reactive, Teleport, onUnmounted } from import { readTipProps, ReadTipProps, ReadTipOptions } from './read-tip-types' import './read-tip.scss' import TipsTemplate from './read-tip-template'; +import { template } from 'lodash-es'; export default defineComponent({ name: 'DReadTip', @@ -26,12 +27,21 @@ export default defineComponent({ const readTip = ref(null) const onMouseenter = (rule) => () => { setTimeout(() => { + if (rule.id) { + const a = refRules.find(u => u.id === rule.id) + a.status = true + } rule.status = true }, rule.mouseenterTime || options.mouseenterTime); } const onMouseleave = (rule) => () => { setTimeout(() => { + if (rule.id) { + const a = refRules.find(u => u.id === rule.id) + a.status = false + } rule.status = false + }, rule.mouseleaveTime || options.mouseleaveTime); } @@ -39,13 +49,27 @@ export default defineComponent({ rules.map(rule => { rule.status = false trigger = rule.trigger || trigger - const dom = defaultSlot.value.querySelector(rule.selector); - dom.style.position = 'relative' + const doms = defaultSlot.value.querySelectorAll(rule.selector); + [...doms].map((dom, index) => { + dom.style.position = 'relative' + + let newRule = reactive({ + id: null + }) + if (index > 0) { + newRule = { ...rule } + dom.id = rule.selector.slice(1) + index + newRule.id = rule.selector.slice(1) + index + rules.push(newRule) + } + console.log('newRule', newRule); + + if (trigger === 'hover') { + dom.addEventListener('mouseenter', onMouseenter(newRule.id ? newRule : rule,)) + dom.addEventListener('mouseleave', onMouseleave(newRule.id ? newRule : rule)) + } + }) - if (trigger === 'hover') { - dom.addEventListener('mouseenter', onMouseenter(rule)) - dom.addEventListener('mouseleave', onMouseleave(rule)) - } }) return rules } @@ -89,15 +113,66 @@ export default defineComponent({ // 添加点击事件 当前元素是click事件目标则弹框展示 const onClick = (e: Event) => { for (const rule of refRules) { - const dom = defaultSlot.value.querySelector(rule.selector); - if (dom === e.target) { - console.log(1); - show(dom, rule) - return + const doms = defaultSlot.value.querySelectorAll(rule.selector); + for (const dom of doms) { + if (doms.length > 1) { + if (dom === e.target && rule.id) { + show(dom, rule) + return + + } else if (dom === e.target && !rule.id && !dom.id) { + show(dom, rule) + return + } + + } else + + if (dom === e.target) { + console.log(2); + show(dom, rule) + return + } else { + rule.status = false + } } + } - } + return + console.log('.refRules.length', refRules.length) + for (let index = 0; index < refRules.length; index++) { + const element = refRules[index]; + // console.log("🚀 ~ file: read-tip.tsx ~ line 126 ~ onClick ~ element", element) + console.log('🚀 ~ file: read-tip.tsx ~ line 126 ~ onClick ~ index', index) + const doms = defaultSlot.value.querySelectorAll(element.selector); + console.log('🚀 ~ file: read-tip.tsx ~ line 130 ~ onClick ~ doms', doms.length) + // [...doms].map((dom, index) => { + // // console.log("🚀 ~ file: read-tip.tsx ~ line 121 ~ [...doms].map ~ dom", dom.id,rule.id) + + // if(element.id === dom.id ) { + // console.log(1); + + // } + // // console.log("🚀 ~ file: read-tip.tsx ~ line 102 ~ onClick ~ rule", rule.id) + // // if (dom === e.target && rule.id) { + // // console.log(1); + // // show(dom, rule) + // // } + // // console.log("🚀 ~ file: read-tip.tsx ~ line 111 ~ [...doms].map ~ dom", dom,rule) + // }) + if (doms.length > 1) { + for (let index = 0; index < doms.length; index++) { + const dom = doms[index]; + console.log('🚀 ~ file: read-tip.tsx ~ line 144 ~ onClick ~ dom', { dom }, dom, element) + if (element.id === dom.id) { + console.log(1); + show(dom, element) + } + } + } + + } + } return () => { return (
+ {/* + + */} + {(refRules).map(rule => (
- {rule.status && } + {/* {rule.status && temp(rule)} */} + {rule.status && ( + + + {/* + */} + {/*
+ {ctx.slots?.contentTemplate && ctx.slots?.contentTemplate()} +
*/} + ) + + }
) )} diff --git a/packages/devui-vue/docs/components/read-tip/index.md b/packages/devui-vue/docs/components/read-tip/index.md index 65a42b2e..dd75f0b0 100644 --- a/packages/devui-vue/docs/components/read-tip/index.md +++ b/packages/devui-vue/docs/components/read-tip/index.md @@ -18,6 +18,9 @@

Set selector to display readtip

The following is the target you want to show readtip

@Jack + @@ -123,6 +126,21 @@ const readTipOptions = { .readtip-target:hover { text-decoration: underline; } + +.first-content { + font-weight: bold; + margin-bottom: 4px; + cursor: pointer; +} + +.second-content { + font-weight: bold; + cursor: pointer; +} + +.third-content { + cursor: pointer; +} ``` -- Gitee From c3ceb328eff38fe1c77a50f71455ff477894c933 Mon Sep 17 00:00:00 2001 From: panyongxu Date: Sat, 6 Nov 2021 23:09:12 +0800 Subject: [PATCH 20/23] =?UTF-8?q?fix:=20[readTip]=20=E5=88=A0=E9=99=A4?= =?UTF-8?q?=E6=97=A0=E7=94=A8=E6=B3=A8=E9=87=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui/read-tip/src/read-tip-template.tsx | 2 - .../devui-vue/devui/read-tip/src/read-tip.tsx | 40 ------------------- 2 files changed, 42 deletions(-) diff --git a/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx b/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx index 9dca323b..3f5566de 100644 --- a/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx +++ b/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx @@ -7,8 +7,6 @@ export default defineComponent({ props: readTipProps, emits: [], setup(props: ReadTipProps, ctx) { - // console.log(ctx.slots?.default()); - const query = props.defaultTemplateProps?.id ? `#${props.defaultTemplateProps.id}` : props.defaultTemplateProps.selector return () => { return ( diff --git a/packages/devui-vue/devui/read-tip/src/read-tip.tsx b/packages/devui-vue/devui/read-tip/src/read-tip.tsx index 2c7e2d56..e6b31612 100644 --- a/packages/devui-vue/devui/read-tip/src/read-tip.tsx +++ b/packages/devui-vue/devui/read-tip/src/read-tip.tsx @@ -2,7 +2,6 @@ import { defineComponent, ref, onMounted, reactive, Teleport, onUnmounted } from import { readTipProps, ReadTipProps, ReadTipOptions } from './read-tip-types' import './read-tip.scss' import TipsTemplate from './read-tip-template'; -import { template } from 'lodash-es'; export default defineComponent({ name: 'DReadTip', @@ -24,7 +23,6 @@ export default defineComponent({ // 合并基础配置 const options = { ...defaultOptions, ...props.readTipOptions } const defaultSlot = ref(null) - const readTip = ref(null) const onMouseenter = (rule) => () => { setTimeout(() => { if (rule.id) { @@ -62,7 +60,6 @@ export default defineComponent({ newRule.id = rule.selector.slice(1) + index rules.push(newRule) } - console.log('newRule', newRule); if (trigger === 'hover') { dom.addEventListener('mouseenter', onMouseenter(newRule.id ? newRule : rule,)) @@ -75,10 +72,7 @@ export default defineComponent({ } function show(dom, rule) { const top = dom.offsetTop - // const t = document.querySelector('.read-tip-container') - // t = t >= 0 ? -t - 50 : t rule.status = true - // tempTop.value = top - 60 } // 把传入的props.rules统一转为数组对象格式 const rules = (rules) => { @@ -137,41 +131,7 @@ export default defineComponent({ } } - return - console.log('.refRules.length', refRules.length) - for (let index = 0; index < refRules.length; index++) { - const element = refRules[index]; - // console.log("🚀 ~ file: read-tip.tsx ~ line 126 ~ onClick ~ element", element) - console.log('🚀 ~ file: read-tip.tsx ~ line 126 ~ onClick ~ index', index) - const doms = defaultSlot.value.querySelectorAll(element.selector); - console.log('🚀 ~ file: read-tip.tsx ~ line 130 ~ onClick ~ doms', doms.length) - - // [...doms].map((dom, index) => { - // // console.log("🚀 ~ file: read-tip.tsx ~ line 121 ~ [...doms].map ~ dom", dom.id,rule.id) - - // if(element.id === dom.id ) { - // console.log(1); - - // } - // // console.log("🚀 ~ file: read-tip.tsx ~ line 102 ~ onClick ~ rule", rule.id) - // // if (dom === e.target && rule.id) { - // // console.log(1); - // // show(dom, rule) - // // } - // // console.log("🚀 ~ file: read-tip.tsx ~ line 111 ~ [...doms].map ~ dom", dom,rule) - // }) - if (doms.length > 1) { - for (let index = 0; index < doms.length; index++) { - const dom = doms[index]; - console.log('🚀 ~ file: read-tip.tsx ~ line 144 ~ onClick ~ dom', { dom }, dom, element) - if (element.id === dom.id) { - console.log(1); - show(dom, element) - } - } - } - } } return () => { return (
-- Gitee From a301a6b488e177a34ab45045b9f6400c14a9e3c3 Mon Sep 17 00:00:00 2001 From: panyongxu Date: Mon, 8 Nov 2021 09:50:10 +0800 Subject: [PATCH 21/23] =?UTF-8?q?fix:=20[readTip]=20=E5=88=A0=E9=99=A4?= =?UTF-8?q?=E6=97=A0=E7=94=A8=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui/read-tip/src/read-tip-template.tsx | 4 ++-- packages/devui-vue/devui/read-tip/src/read-tip.tsx | 14 ++------------ 2 files changed, 4 insertions(+), 14 deletions(-) diff --git a/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx b/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx index 3f5566de..46feb18a 100644 --- a/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx +++ b/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx @@ -27,9 +27,9 @@ export default defineComponent({ ) } - + {/* - + */}
diff --git a/packages/devui-vue/devui/read-tip/src/read-tip.tsx b/packages/devui-vue/devui/read-tip/src/read-tip.tsx index e6b31612..fe36f3fc 100644 --- a/packages/devui-vue/devui/read-tip/src/read-tip.tsx +++ b/packages/devui-vue/devui/read-tip/src/read-tip.tsx @@ -143,23 +143,13 @@ export default defineComponent({ }
- {/* - - */} {(refRules).map(rule => (
- {/* {rule.status && temp(rule)} */} - {rule.status && ( - - - {/* - */} - {/*
- {ctx.slots?.contentTemplate && ctx.slots?.contentTemplate()} -
*/} + {rule.status && ( + ) } -- Gitee From 1a6e6fccf572a02a5b03557221074000ae585761 Mon Sep 17 00:00:00 2001 From: panyongxu Date: Mon, 8 Nov 2021 17:41:42 +0800 Subject: [PATCH 22/23] =?UTF-8?q?feat:=20[readTip]=E5=A2=9E=E5=8A=A0?= =?UTF-8?q?=E6=A8=A1=E6=9D=BF=E6=9B=BF=E6=8D=A2=E5=8A=9F=E8=83=BD=20?= =?UTF-8?q?=E5=B9=B6=E4=B8=94=E6=9B=B4=E6=96=B0=E5=BC=80=E5=8F=91=E5=AE=8C?= =?UTF-8?q?=E6=88=90=E7=8A=B6=E6=80=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/devui/read-tip/index.ts | 6 ++---- .../devui/read-tip/src/read-tip-template.tsx | 21 ++++++++++++++----- .../devui/read-tip/src/read-tip-types.ts | 1 + .../devui-vue/devui/read-tip/src/read-tip.tsx | 11 +++++----- .../docs/components/read-tip/index.md | 3 ++- 5 files changed, 27 insertions(+), 15 deletions(-) diff --git a/packages/devui-vue/devui/read-tip/index.ts b/packages/devui-vue/devui/read-tip/index.ts index d369dc31..d8435332 100644 --- a/packages/devui-vue/devui/read-tip/index.ts +++ b/packages/devui-vue/devui/read-tip/index.ts @@ -1,19 +1,17 @@ import type { App } from 'vue' import ReadTip from './src/read-tip' -import ReadTipDirective from './src/read-tip-directive' ReadTip.install = function(app: App): void { app.component(ReadTip.name, ReadTip) } -export { ReadTip, ReadTipDirective } +export { ReadTip, } export default { title: 'ReadTip 阅读提示', category: '反馈', - status: '5%', // TODO: 组件若开发完成则填入"已完成"，并删除该注释 + status: '20%', // TODO: 组件若开发完成则填入"已完成"，并删除该注释 install(app: App): void { app.use(ReadTip as any) - app.directive('ReadTip', ReadTipDirective) } } diff --git a/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx b/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx index 46feb18a..9ef7afb9 100644 --- a/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx +++ b/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx @@ -8,13 +8,24 @@ export default defineComponent({ emits: [], setup(props: ReadTipProps, ctx) { const query = props.defaultTemplateProps?.id ? `#${props.defaultTemplateProps.id}` : props.defaultTemplateProps.selector + + const temp = ref(null) + onMounted(() => { + // 当定位为top展示时 元素定位高度需要计算弹窗的高度 + if(props.defaultTemplateProps.position == 'top') { + temp.value.style.top = (- temp.value.offsetHeight - 10) + 'px' + } + }) return () => { return ( -
+
{ - // ctx.slots?.comp ? ctx.slots?.comp() : + props.defaultTemplateProps.contentTemplate ? ctx.slots?.default() : ( <>
@@ -27,9 +38,9 @@ export default defineComponent({ ) } - {/* - - */} + {/* { + ctx.slots?.default() + } */}
diff --git a/packages/devui-vue/devui/read-tip/src/read-tip-types.ts b/packages/devui-vue/devui/read-tip/src/read-tip-types.ts index 35cc1577..422d2990 100644 --- a/packages/devui-vue/devui/read-tip/src/read-tip-types.ts +++ b/packages/devui-vue/devui/read-tip/src/read-tip-types.ts @@ -20,6 +20,7 @@ export type DefaultTemplateProps = { position?: string id? : string temp: string + contentTemplate: boolean } export interface ReadTipOptions { diff --git a/packages/devui-vue/devui/read-tip/src/read-tip.tsx b/packages/devui-vue/devui/read-tip/src/read-tip.tsx index fe36f3fc..74333c4d 100644 --- a/packages/devui-vue/devui/read-tip/src/read-tip.tsx +++ b/packages/devui-vue/devui/read-tip/src/read-tip.tsx @@ -47,6 +47,7 @@ export default defineComponent({ rules.map(rule => { rule.status = false trigger = rule.trigger || trigger + rule.contentTemplate = !!(ctx.slots.contentTemplate) const doms = defaultSlot.value.querySelectorAll(rule.selector); [...doms].map((dom, index) => { dom.style.position = 'relative' @@ -122,7 +123,6 @@ export default defineComponent({ } else if (dom === e.target) { - console.log(2); show(dom, rule) return } else { @@ -134,7 +134,7 @@ export default defineComponent({ } return () => { - return (
+ return (
@@ -143,13 +143,14 @@ export default defineComponent({ }
- {(refRules).map(rule => (
- {rule.status && ( - + {rule.status && ( + { + rule.contentTemplate && ctx.slots?.contentTemplate() + } ) } diff --git a/packages/devui-vue/docs/components/read-tip/index.md b/packages/devui-vue/docs/components/read-tip/index.md index dd75f0b0..0d94d587 100644 --- a/packages/devui-vue/docs/components/read-tip/index.md +++ b/packages/devui-vue/docs/components/read-tip/index.md @@ -29,7 +29,7 @@ import { defineComponent } from 'vue' const readTipOptions = { trigger: 'click', rules: { - trigger: 'hover', + trigger: 'click', position:'top', selector: '.readtip-target', title: 'Name: Jack', @@ -72,6 +72,7 @@ const readTipOptions = {

Click here to display second content

Hover here to display third content

Another third content with same class name

+
-- Gitee From cd455b274cd25197c6b01a43601912d2722912a3 Mon Sep 17 00:00:00 2001 From: panyongxu Date: Mon, 8 Nov 2021 18:01:35 +0800 Subject: [PATCH 23/23] =?UTF-8?q?docs:=20[readTip]=20=E5=AE=8C=E5=96=84?= =?UTF-8?q?=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/devui/read-tip/index.ts | 2 +- .../docs/components/read-tip/index.md | 35 ++++++++++++++++++- 2 files changed, 35 insertions(+), 2 deletions(-) diff --git a/packages/devui-vue/devui/read-tip/index.ts b/packages/devui-vue/devui/read-tip/index.ts index d8435332..db1b532c 100644 --- a/packages/devui-vue/devui/read-tip/index.ts +++ b/packages/devui-vue/devui/read-tip/index.ts @@ -10,7 +10,7 @@ export { ReadTip, } export default { title: 'ReadTip 阅读提示', category: '反馈', - status: '20%', // TODO: 组件若开发完成则填入"已完成"，并删除该注释 + status: '30%', // TODO: 组件若开发完成则填入"已完成"，并删除该注释 install(app: App): void { app.use(ReadTip as any) } diff --git a/packages/devui-vue/docs/components/read-tip/index.md b/packages/devui-vue/docs/components/read-tip/index.md index 0d94d587..d3c4c955 100644 --- a/packages/devui-vue/docs/components/read-tip/index.md +++ b/packages/devui-vue/docs/components/read-tip/index.md @@ -19,7 +19,7 @@

The following is the target you want to show readtip

@Jack @@ -159,3 +159,36 @@ d-read-tip 参数 +``` +export interface ReadTipOptions { + trigger?: 'hover' | 'click'; // 默认值是 hover + showAnimate?: boolean; // 默认值是 false + mouseenterTime?: number; // 默认值是 100 + mouseleaveTime?: number; // 默认值是 100 + position?: PositionType | PositionType[]; // 默认值是 'top' + overlayClassName?: string; // 默认值为空字符串 + appendToBody?: boolean; // 默认值为true + rules: ReadTipRules; +} +export type ReadTipRules = ReadTipRule | ReadTipRule[]; + +export interface ReadTipRule { + key?: string; + selector: string; + trigger?: 'hover' | 'click'; // 可以继承自 ReadTipOptions + title?: string; + content?: string; + showAnimate?: boolean; // 可以继承自 ReadTipOptions + mouseenterTime?: number; // 可以继承自 ReadTipOptions + mouseleaveTime?: number; // 可以继承自 ReadTipOptions + position?: PositionType | PositionType[]; // 可以继承自 ReadTipOptions + overlayClassName?: string; // 可以继承自 ReadTipOptions + appendToBody?: boolean; //可以继承自 ReadTipOtions + //customData与template搭配使用，customData为传入模板的上下文，可以自定义模板内容 + dataFn?: ({ + element, + rule: ReadTipRule, + }) => Observable<{ title?: string; content?: string; template?: TemplateRef; customData?: any }>; +} +``` + -- Gitee