From 97d2f6d5d40145077c86c92bf30d63d07f20db4e Mon Sep 17 00:00:00 2001 From: tangwei Date: Fri, 6 Aug 2021 16:58:47 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E7=AC=AC=E4=B8=80=E6=AC=A1?= =?UTF-8?q?=E6=8F=90=E4=BA=A4=E7=9B=AE=E5=BD=95,=E5=8A=9F=E8=83=BD?= =?UTF-8?q?=E6=9C=AA=E5=AE=8C=E6=88=90,=E6=9A=82=E6=97=B6=E4=BF=9D?= =?UTF-8?q?=E5=AD=98=E5=9C=A8=E4=BB=93=E5=BA=93?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/vue-devui.ts | 4 +- sites/.vitepress/config/sidebar.ts | 6 ++ sites/components/anchor/index.md | 125 +++++++++++++++++++++++++++++ 3 files changed, 134 insertions(+), 1 deletion(-) create mode 100644 sites/components/anchor/index.md diff --git a/devui/vue-devui.ts b/devui/vue-devui.ts index eb082ecd..8101cdb9 100644 --- a/devui/vue-devui.ts +++ b/devui/vue-devui.ts @@ -6,7 +6,7 @@ import Panel from './panel/panel'; // 导航 import Tabs from './tabs/tabs'; - +import Anchor from './anchor/anchor'; // 反馈 import Alert from './alert/alert'; @@ -24,6 +24,7 @@ function install(app: App) { const packages = [ Button, Panel, Tabs, + Anchor, Alert, Checkbox, Radio, Switch, TagsInput, TextInput, Avatar, @@ -40,6 +41,7 @@ function install(app: App) { export { Button, Panel, Tabs, + Anchor, Alert, Checkbox, Radio, Switch, TagsInput, TextInput, Avatar, diff --git a/sites/.vitepress/config/sidebar.ts b/sites/.vitepress/config/sidebar.ts index cc9dc4fc..da2321e8 100644 --- a/sites/.vitepress/config/sidebar.ts +++ b/sites/.vitepress/config/sidebar.ts @@ -7,6 +7,12 @@ const sidebar = { { text: 'Button 按钮', link: '/components/button/' }, { text: 'Switch 开关', link: '/components/switch/' }, ] + }, + { + text: '导航', + children: [ + { text: 'Anchor 锚点', link: '/components/anchor/' }, + ] } ], } diff --git a/sites/components/anchor/index.md b/sites/components/anchor/index.md new file mode 100644 index 00000000..52af3c9e --- /dev/null +++ b/sites/components/anchor/index.md @@ -0,0 +1,125 @@ +# anchor 锚点 + +# 如何使用 + +在 module 中引入： + +```ts +import { AnchorModule } from 'ng-devui'; +``` + +在页面中使用： + +```html +
+
    +
  • anchorlink-one
    • +
  • anchorlink-two
    • +
  • anchorlink-three
    • +
  • anchorlink-four
    • +
+
+
+ anchorlink-one +
+
+ anchorlink-two +
+
+ anchorlink-three +
+
+ anchorlink-four +
+
+
+``` + +```ts +// using router (cross-route), anchorName means your own anchor +this.router.navigateByUrl('../xx/xxx#anchorName'); +this.router.navigate(['/xxx'], { fragment: 'anchorName' }); + +// using router (at the same level), anchorName means your own anchor +this.router.navigateByUrl('#anchorName'); +this.router.navigate([], { fragment: 'anchorName' }); +``` +# dAnchor + +定义一个锚点。 +## dAnchor 参数 + +| 参数 | 类型 | 默认 | 说明 | 跳转 Demo |全局配置项| +| :----------------: | :----------: | :------: | :--: | :---------------------------------------------------: | ---------------------------- | +| dAnchor | `string` | -- | 必选，设置一个锚点的名字 | [基本用法](demo#basic-usage) | +| anchorActive | `string` | -- | 可选，锚点处于激活状态的时候，模块生效对应的 css 类名 | [基本用法](demo#basic-usage) | + +## dAnchor 锚点激活事件 + +自动会给锚点加上以下类对应不同激活的对象。 + +| css 类名 | 代表意义 | +| :---------------------------: | :--------------------: | +| anchor-active-by-anchor-link | 点击锚点链接激活 | +| anchor-active-by-scroll | 容器滚动到锚点位置激活 | +| anchor-active-by-click-inside | 点击锚点内部内容激活 | +| anchor-active-by-initial | 初始化滚动条位置激活 | + +# dAnchorLink + +定义一个锚点的链接，点击链接会滑动到锚点，锚点处于页面顶部的时候也会激活链接的 class。 + +## dAnchorLink 参数 + +| 参数 | 类型 | 默认 | 说明 | 跳转 Demo |全局配置项| +| :----------------: | :----------: | :------: | :--: | :---------------------------------------------------: | ---------------------------- | +| dAnchorLink | `string` | -- | 必选，点击滑动的目标锚点的名字 | [基本用法](demo#basic-usage) | +| anchorActive | `string` | -- | 可选，锚点处于激活状态的时候，链接生效对应的 css 类名 | [基本用法](demo#basic-usage) | + +# dAnchorBox + +必须有一个容器，否则功能无法使用。 + +定义一个扫描锚点的容器，放在 dAnchor 与 dAnchorLink 的公共父节点上，用于锚点和链接之间的通信。 + +## dAnchorBox 参数 + +| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | +| :-----------: | :----------------------------: | :-------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------: | ---------------------------------- | +| view | `{top?:number,bottom?:number}` | {top:0,bottom:0} | 可选，用于可视区域的调整，比如顶部有固定位置的头部等，数值对应被遮挡的顶部或底部的高度 | [基本用法](demo#basic-usage) | +| defaultAnchor | `string` | -- | 可选，进入页面后默认被激活的锚点链接，一般设置为第一个锚点，如果不设置，那么第一个锚点需要在滑动到顶部位置的时候才能激活链接 | [基本用法](demo#basic-usage) | +| scrollTarget | `HTMLElement` | document.documentElement(document.body) | 可选，设置要发生滚动的容器，一般为滚动条所在容器，为主页面的滚动条时候可以不设置 | [更换滚动容器](demo#scroll-target) | + +# dAnchorHashSupport + +dAnchorBox 辅助指令。 +## dAnchorHashSupport 参数 + +以下参数为高级配置参数，一般不需要使用，只需要直接使用 dAnchorHashSupport。 + +| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | +| :--------------------------: | :-------: | :---: | :-----------------------------------------------------------------------------------: | ---------------------------------- | +| updateUrlWhenAnchorActive | `boolean` | true | 可选，当激活 anchor 的时候更新 url，用于处理复杂场景, 默认为 true 即可 | [支持 url 锚点](demo#support-hash) | +| scrollToAnchorByHashOnlyInit | `boolean` | false | 可选，true 为只有初始化的时候接收来自路由的 fragment 字段变化并接收，用于处理复杂场景 | [支持 url 锚点](demo#support-hash) | + +dAnchorHashSupport 指令搭配 dAnchorBox 使用， 可以绑定路由的 hash fragment， 举例 xxx.xxx/xxx#foo, foo 字段为哈希字段。 +跳转哈希字段可以使用 anchor 组件，路由 navigate，routerLink 的 fragment 字段等。 + +# 注意事项 + +注意不可和 ng6.1 以上路由模块自带的 RouterScoller 混用， routerlScroller 会滚动到传统的 id 锚点。 +单独使用 RouterScroller 可以通过配置路由模块。 + +```ts +@NgModule({ + // ...... + imports: [ + // ...... + RouterModule.forRoot(routes, { + anchorScrolling: 'enabled', // 该策略与锚点组件的dAnchorHashSupport指令相冲突 + }), + ], + // ...... +}) +export class DemoModule {} +``` -- Gitee From 2651205fcc4d3e318f3c82b133d86b8c710db5df Mon Sep 17 00:00:00 2001 From: tangwei Date: Mon, 9 Aug 2021 16:39:41 +0800 Subject: [PATCH 2/2] =?UTF-8?q?feat:=20merge=E5=89=8D=E6=9A=82=E5=AD=981?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/anchor/anchor.tsx | 14 ++++++++++++-- devui/anchor/d-anchor-box.tsx | 4 ++++ devui/anchor/d-anchor-link.tsx | 4 ++++ devui/anchor/d-anchor.tsx | 4 ++++ devui/anchor/index.tsx | 19 +++++++++++++++++++ sites/components/anchor/index.md | 24 +++++++++++++++++++++++- src/main.ts | 13 +++++-------- 7 files changed, 71 insertions(+), 11 deletions(-) create mode 100644 devui/anchor/d-anchor-box.tsx create mode 100644 devui/anchor/d-anchor-link.tsx create mode 100644 devui/anchor/d-anchor.tsx create mode 100644 devui/anchor/index.tsx diff --git a/devui/anchor/anchor.tsx b/devui/anchor/anchor.tsx index 6a7920be..4b1eb992 100644 --- a/devui/anchor/anchor.tsx +++ b/devui/anchor/anchor.tsx @@ -1,12 +1,22 @@ import { defineComponent } from 'vue' export default defineComponent({ - name: 'd-anchor', + name: 'DAnchor', + directives: { + focus: { + // 指令的定义 + mounted(el) { + el.focus() + } + } + }, props: { }, setup(props, ctx) { return () => { - return
devui-anchor
+ return ( + + ) } } }) \ No newline at end of file diff --git a/devui/anchor/d-anchor-box.tsx b/devui/anchor/d-anchor-box.tsx new file mode 100644 index 00000000..2dcce109 --- /dev/null +++ b/devui/anchor/d-anchor-box.tsx @@ -0,0 +1,4 @@ +export default { + +}; + \ No newline at end of file diff --git a/devui/anchor/d-anchor-link.tsx b/devui/anchor/d-anchor-link.tsx new file mode 100644 index 00000000..2dcce109 --- /dev/null +++ b/devui/anchor/d-anchor-link.tsx @@ -0,0 +1,4 @@ +export default { + +}; + \ No newline at end of file diff --git a/devui/anchor/d-anchor.tsx b/devui/anchor/d-anchor.tsx new file mode 100644 index 00000000..29d55c35 --- /dev/null +++ b/devui/anchor/d-anchor.tsx @@ -0,0 +1,4 @@ +export default (app:any) => { + //自定义组件 + +} \ No newline at end of file diff --git a/devui/anchor/index.tsx b/devui/anchor/index.tsx new file mode 100644 index 00000000..27a0c268 --- /dev/null +++ b/devui/anchor/index.tsx @@ -0,0 +1,19 @@ +// import dAnchor from './dAnchor' +// const directives = { +// 'dAnchor': dAnchor, +// 'dAnchorBox': dAnchor, +// 'dAnchorLink': dAnchor +// }; + +// export default { +// install: function(Vue) { +// const app = Vue.createApp({}) +// for (let key in directives) { +// if (directives.hasOwnProperty(key)) { +// app.directive(key, directives[key]); +// } +// } +// } +// }; + + \ No newline at end of file diff --git a/sites/components/anchor/index.md b/sites/components/anchor/index.md index 52af3c9e..5eefa06e 100644 --- a/sites/components/anchor/index.md +++ b/sites/components/anchor/index.md @@ -7,7 +7,29 @@ ```ts import { AnchorModule } from 'ng-devui'; ``` - + + 在页面中使用： ```html diff --git a/src/main.ts b/src/main.ts index b59e0a2b..f1abccc9 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,11 +1,8 @@ + import { createApp } from 'vue' -// TypeScript error? Run VSCode command -// TypeScript: Select TypeScript version - > Use Workspace Version -import App from './app.vue' -import appRoutes from './app.route' - +import App from './App.vue' +import './index.css' const app = createApp(App) - -app.use(appRoutes) - + app.mount('#app') + \ No newline at end of file -- Gitee