From 18866ec1a42c19492b17ee15eed23fa9b82fa7a7 Mon Sep 17 00:00:00 2001 From: fangliang Date: Wed, 20 Oct 2021 11:13:58 +0800 Subject: [PATCH] =?UTF-8?q?fixed=20d8b7e08=20from=20https://gitee.com/flxy?= =?UTF-8?q?1028/vue-devui/pulls/249=20docs(navSprit):=20=E6=96=B0=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E5=8D=A0=E4=BD=8D=20(=E5=AF=BC=E8=88=AA=E7=B2=BE?= =?UTF-8?q?=E7=81=B5)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/nav-sprite/index.ts | 17 ++++ devui/nav-sprite/src/nav-sprite-types.ts | 74 +++++++++++++++ devui/nav-sprite/src/nav-sprite.scss | 112 +++++++++++++++++++++++ devui/nav-sprite/src/nav-sprite.tsx | 11 +++ docs/components/nav-sprite/index.md | 9 ++ 5 files changed, 223 insertions(+) create mode 100644 devui/nav-sprite/index.ts create mode 100644 devui/nav-sprite/src/nav-sprite-types.ts create mode 100644 devui/nav-sprite/src/nav-sprite.scss create mode 100644 devui/nav-sprite/src/nav-sprite.tsx create mode 100644 docs/components/nav-sprite/index.md diff --git a/devui/nav-sprite/index.ts b/devui/nav-sprite/index.ts new file mode 100644 index 00000000..b3fbd5ab --- /dev/null +++ b/devui/nav-sprite/index.ts @@ -0,0 +1,17 @@ +import { App } from 'vue'; +import NavSprite from './src/nav-sprite'; + +NavSprite.install = function (app: App) { + app.component(NavSprite.name, NavSprite); +}; + +export { NavSprite }; + +export default { + title: 'NavSprite 导航精灵', + category: '导航', + status: '10%', + install(app: App): void { + app.use(NavSprite as any); + } +}; diff --git a/devui/nav-sprite/src/nav-sprite-types.ts b/devui/nav-sprite/src/nav-sprite-types.ts new file mode 100644 index 00000000..ef4293b0 --- /dev/null +++ b/devui/nav-sprite/src/nav-sprite-types.ts @@ -0,0 +1,74 @@ +import { PropType } from 'vue'; +export type SpriteMode = 'default' | 'sprite'; + +export interface SpriteOption { + top: string + left: string + zIndex: number +} +export interface NavMenu { + originEle: HTMLElement + label: string + level: number + scrollPosition: { + top: number + startLine: number + } +} +export const navSpriteProps = { + // // 爬取目录的容器 + target: { + type: HTMLElement + }, + // // 指定滚动的DOM + scrollTarget: { + type: HTMLElement, + }, + // // 矫正参数 + view: { + type: Object as () => { + top?: number + bottom?: number + }, + default: { top: 0, bottom: 0 } + }, + // // 支持锚点 + hashSupport: { + type: Boolean, + default: false + }, + mode: { + type: String as () => SpriteMode, + default: 'default' + }, + maxLevel: { + type: Number, + default: 3 + }, + title: { + type: String, + default: 'menu' + }, + // 缩进 + indent: { + type: Number, + default: 2 + }, + width: { + type: Number, + default: 300 + }, + height: { + type: Number, + default: 400 + }, + // sprite模式下的初始状态 + isOpen: { + type: Boolean, + default: true + }, + // sprite模式下的初始位置 + spriteOption: { + type: Object as () => SpriteOption, + } +} diff --git a/devui/nav-sprite/src/nav-sprite.scss b/devui/nav-sprite/src/nav-sprite.scss new file mode 100644 index 00000000..eb16092e --- /dev/null +++ b/devui/nav-sprite/src/nav-sprite.scss @@ -0,0 +1,112 @@ +@import '../../style/theme/color'; +@import '../../style/theme/variables'; +@import '../../style/theme/shadow'; +@import '../../styles-var/devui-var.scss'; + +.devui-is-sprite { + background-color: $devui-connected-overlay-bg; + box-shadow: $devui-shadow-length-connected-overlay $devui-shadow; + cursor: move; + padding: 0 16px 16px; + max-width: 300px; + + &.is-min { + display: flex; + align-items: center; + justify-content: center; + width: 40px !important; + height: 40px !important; + border-radius: 100%; + padding: 0; + + &:hover { + color: $devui-light-text; + background-color: $devui-brand; + } + + i { + cursor: pointer; + } + } + + .devui-nav-sprite-menus { + width: 100%; + height: 100%; + max-height: 240px; + } +} + +.devui-nav-sprite-content { + width: 100%; + height: 100%; + padding: 0 12px 16px 12px; + + .devui-nav-sprite-header { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + color: $devui-text; + line-height: 32px; + font-weight: bold; + font-size: $devui-font-size-card-title; + border-bottom: 1px solid $devui-dividing-line; + + .devui-nav-spiri-close { + cursor: pointer; + } + } +} + +.devui-nav-sprite-menus { + margin-top: 10px; + overflow-y: hidden; + height: calc(100% - 80px); + + &:hover { + overflow-y: auto; + } + + & > li { + list-style: none; + cursor: pointer; + height: 30px; + line-height: 30px; + font-size: $devui-font-size; + color: $devui-text; + position: relative; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + + a { + color: $devui-text; + } + + &.active { + a { + color: $devui-link; + } + + color: $devui-link; + } + + &:not(.disabled):hover { + color: $devui-list-item-hover-text; + } + + .nav-item { + a, + span { + &:hover { + color: $devui-list-item-hover-text; + } + } + } + } +} + +.devui-no-data { + line-height: 32px; + color: $devui-text; +} diff --git a/devui/nav-sprite/src/nav-sprite.tsx b/devui/nav-sprite/src/nav-sprite.tsx new file mode 100644 index 00000000..378e15c6 --- /dev/null +++ b/devui/nav-sprite/src/nav-sprite.tsx @@ -0,0 +1,11 @@ +import { defineComponent } from '@vue/runtime-core'; +import { navSpriteProps } from './nav-sprite-types'; + +export default defineComponent({ + name: 'DNavSprite', + props: navSpriteProps, + emits: ['afterNavInit'], + setup(props) { + return {}; + } +}); diff --git a/docs/components/nav-sprite/index.md b/docs/components/nav-sprite/index.md new file mode 100644 index 00000000..10fcbfff --- /dev/null +++ b/docs/components/nav-sprite/index.md @@ -0,0 +1,9 @@ +# NavSprite 导航精灵 + +导航精灵组件 + +### 何时使用 + +针对某块阅读区域生成阅读目录，提高阅读效率。 + +### 基本用法 -- Gitee