From 3ee85b7c7bc60f8d7eebebc3001f19abc2b2a90e Mon Sep 17 00:00:00 2001 From: MTrun <1262327911@qq.com> Date: Tue, 21 Dec 2021 10:06:03 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E6=8A=BD=E7=A6=BB=E5=BC=B9=E5=87=BA?= =?UTF-8?q?=E6=A1=86=20hoo=EF=BC=8C=E8=A7=A3=E5=86=B3bug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/AppleControlBtn/index.vue | 2 +- src/styles/common/_dark.scss | 4 +- src/styles/common/_light.scss | 4 +- src/styles/common/mixins/mixins.scss | 7 + src/styles/common/style.scss | 36 +++- src/utils/utils.ts | 40 ++++- .../project/items/components/Card/index.vue | 9 +- .../components/List/hooks/useData.hook.ts | 53 ++++++ .../components/List/hooks/useModal.hook.ts | 27 +++ .../project/items/components/List/index.vue | 64 +------ .../items/components/ModalCard/index.vue | 160 +++++++++--------- src/views/project/mtTemplate/index.vue | 7 +- 12 files changed, 265 insertions(+), 148 deletions(-) create mode 100644 src/views/project/items/components/List/hooks/useData.hook.ts create mode 100644 src/views/project/items/components/List/hooks/useModal.hook.ts diff --git a/src/components/AppleControlBtn/index.vue b/src/components/AppleControlBtn/index.vue index a1fe5ed7..26684db0 100644 --- a/src/components/AppleControlBtn/index.vue +++ b/src/components/AppleControlBtn/index.vue @@ -4,7 +4,7 @@
diff --git a/src/styles/common/_dark.scss b/src/styles/common/_dark.scss index b3ea51d0..8f7975e1 100644 --- a/src/styles/common/_dark.scss +++ b/src/styles/common/_dark.scss @@ -18,5 +18,7 @@ $dark: ( filter-color: $--filter-color-login-dark, // 物料市场背景 items-top-bg: - linear-gradient(180deg, $--color-dark-bg-1, rgba(23, 23, 26, 0)) + linear-gradient(180deg, $--color-dark-bg-1, rgba(23, 23, 26, 0)), + // hover 边框颜色 + hover-border-color: #55606e, ); diff --git a/src/styles/common/_light.scss b/src/styles/common/_light.scss index 98319ae9..efd66349 100644 --- a/src/styles/common/_light.scss +++ b/src/styles/common/_light.scss @@ -17,5 +17,7 @@ $light: ( linear-gradient(90deg, transparent 14px, $--color-dark-bg-5 0) ), //毛玻璃 - filter-color: $--filter-color-login-light + filter-color: $--filter-color-login-light, + // hover 边框颜色 + hover-border-color: $--color-light-fill-1 ); diff --git a/src/styles/common/mixins/mixins.scss b/src/styles/common/mixins/mixins.scss index 0ab68436..88f55771 100644 --- a/src/styles/common/mixins/mixins.scss +++ b/src/styles/common/mixins/mixins.scss @@ -65,3 +65,10 @@ border-color: themed($target); } } + +//获取边框颜色 +@mixin hover-border-color($target) { + @include themeify { + border: 1px solid themed($target); + } +} diff --git a/src/styles/common/style.scss b/src/styles/common/style.scss index 414af8ef..91fb84cc 100644 --- a/src/styles/common/style.scss +++ b/src/styles/common/style.scss @@ -44,27 +44,51 @@ // todo 使用 scss 循环写一套完整的 // margin .go-mt-0 { - margin-top: 0; + margin-top: 0!important; } .go-mb-0 { - margin-bottom: 0; + margin-bottom: 0!important; +} +.go-ml-0 { + margin-left: 0!important; } -.go-mx-0 { +.go-mr-0 { + margin-right: 0!important; +} + +.go-my-0 { @extend .go-mt-0; @extend .go-mb-0; } +.go-mx-0 { + @extend .go-ml-0; + @extend .go-mr-0; +} + .go-pt-0 { - padding-top: 0; + padding-top: 0!important; } .go-pb-0 { - padding-bottom: 0; + padding-bottom: 0!important; +} +.go-pl-0 { + padding-left: 0!important; } -.go-px-0 { +.go-pr-0 { + padding-right: 0!important; +} + +.go-py-0 { @extend .go-pt-0; @extend .go-pb-0; } + +.go-px-0 { + @extend .go-pl-0; + @extend .go-pr-0; +} diff --git a/src/utils/utils.ts b/src/utils/utils.ts index 12b22980..9690ad91 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -1,6 +1,7 @@ import { h } from 'vue' import { NIcon } from 'naive-ui' import screenfull from 'screenfull' +import debounce from 'lodash/debounce' /** * * 生成一个用不重复的ID @@ -28,6 +29,7 @@ export const renderIcon = (icon: any, set = {}) => { export const requireUrl = (path: string, name: string) => { return new URL(`${path}/${name}`, import.meta.url).href } + /** * * 获取错误处理图片，默认 404 图 * @param path @@ -36,7 +38,10 @@ export const requireUrl = (path: string, name: string) => { */ export const requireFallbackImg = (path?: string, name?: string) => { const url = path && name - return new URL(url?`${path}/${name}`: '../assets/images/exception/image-404.png', import.meta.url).href + return new URL( + url ? `${path}/${name}` : '../assets/images/exception/image-404.png', + import.meta.url + ).href } export const screenfullFn = (isFullscreen?: boolean, isEnabled?: boolean) => { @@ -53,3 +58,36 @@ export const screenfullFn = (isFullscreen?: boolean, isEnabled?: boolean) => { // TODO lang window['$message'].warning('您的浏览器不支持全屏功能！') } + +/** + * * 挂载监听 + * @returns url + */ +export const goAddEventListener = ( + target: EventTarget, + type: K, + listener: EventListenerOrEventListenerObject, + options?: boolean | AddEventListenerOptions | undefined +) => { + if(!target) return + target.addEventListener( + type, + debounce(listener, 300, { + leading: true, + trailing: false + }), + options + ) +} +/** + * * 卸载监听 + * @returns url + */ +export const goRemoveEventListener = ( + target: EventTarget, + type: K, + listener: EventListenerOrEventListenerObject +) => { + if(!target) return + target.removeEventListener(type, listener) +} diff --git a/src/views/project/items/components/Card/index.vue b/src/views/project/items/components/Card/index.vue index 8b8e96ea..50f2cf26 100644 --- a/src/views/project/items/components/Card/index.vue +++ b/src/views/project/items/components/Card/index.vue @@ -12,7 +12,7 @@ />
-
+
{ $contentHeight: 200px; @include go('items-list-card') { position: relative; + border-radius: $--border-radius-base; + border: 1px solid rgba(0, 0, 0, 0); + @extend .go-transition; + &:hover { + @include hover-border-color('hover-border-color'); + } .list-content { margin-top: 20px; margin-bottom: 5px; + cursor: pointer; border-radius: $--border-radius-base; @include background-point('background-point'); @extend .go-point-bg; diff --git a/src/views/project/items/components/List/hooks/useData.hook.ts b/src/views/project/items/components/List/hooks/useData.hook.ts new file mode 100644 index 00000000..3ece4143 --- /dev/null +++ b/src/views/project/items/components/List/hooks/useData.hook.ts @@ -0,0 +1,53 @@ +import { ref, Ref } from 'vue' +import { goDialog } from '@/utils' +import { DialogEnum } from '@/enums/pluginEnum' + +// 数据初始化 +export const useDataListInit = () => { + const list = ref([ + { + id: 1, + title: '物料1', + release: true + }, + { + id: 2, + title: '物料2', + release: false + }, + { + id: 3, + title: '物料3', + release: false + }, + { + id: 4, + title: '物料4', + release: false + }, + { + id: 5, + title: '物料5', + release: false + } + ]) + + // 删除 + const deleteHandle = (cardData: object, index: number) => { + goDialog({ + type: DialogEnum.delete, + promise: true, + onPositiveCallback: () => + new Promise(res => setTimeout(() => res(1), 1000)), + promiseResCallback: (e: any) => { + window.$message.success('删除成功') + list.value.splice(index, 1) + } + }) + } + + return { + list, + deleteHandle + } +} diff --git a/src/views/project/items/components/List/hooks/useModal.hook.ts b/src/views/project/items/components/List/hooks/useModal.hook.ts new file mode 100644 index 00000000..4bc1c79a --- /dev/null +++ b/src/views/project/items/components/List/hooks/useModal.hook.ts @@ -0,0 +1,27 @@ +import { ref, Ref } from 'vue' + +export const useModalDataInit = () => { + const modalShow = ref(false) + const modalData = ref(null) + + // 关闭 modal + const closeModal = () => { + modalShow.value = false + modalData.value = null + console.log('close') + } + + // 打开 modal + const resizeHandle = (cardData: Ref) => { + console.log(cardData) + modalShow.value = true + modalData.value = cardData + } + + return { + modalData, + modalShow, + closeModal, + resizeHandle + } +} diff --git a/src/views/project/items/components/List/index.vue b/src/views/project/items/components/List/index.vue index d3887026..024d9337 100644 --- a/src/views/project/items/components/List/index.vue +++ b/src/views/project/items/components/List/index.vue @@ -15,74 +15,22 @@ - +