From 6086e8ca09943c1a22a29d06c5d90a88ab23978c Mon Sep 17 00:00:00 2001 From: ganlyun <617621777@qq.com> Date: Tue, 26 Jun 2018 20:35:57 +0800 Subject: [PATCH 1/4] =?UTF-8?q?=E5=9F=BA=E6=9C=AC=E5=AE=9E=E7=8E=B0?= =?UTF-8?q?=E5=8A=9F=E8=83=BD=EF=BC=8C=E4=B8=8B=E4=B8=80=E6=AD=A5=EF=BC=9A?= =?UTF-8?q?=E5=8F=82=E7=85=A7react=E5=AE=9E=E7=8E=B0=E8=BF=9B=E4=B8=80?= =?UTF-8?q?=E6=AD=A5=E8=A7=A3=E8=80=A6=E6=96=B9=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/anchor/Anchor.vue | 205 +++++++++++++++++++++++++ components/anchor/AnchorLink.vue | 37 +++++ components/anchor/index.js | 6 + components/anchor/style/index.js | 2 + components/anchor/style/index.less | 72 +++++++++ examples/App.vue | 4 + examples/routers/anchor/demo/base.vue | 26 ++++ examples/routers/anchor/demo/fixed.vue | 23 +++ examples/routers/anchor/index.vue | 68 ++++++++ examples/routers/index.js | 5 + 10 files changed, 448 insertions(+) create mode 100644 components/anchor/Anchor.vue create mode 100644 components/anchor/AnchorLink.vue create mode 100644 components/anchor/index.js create mode 100644 components/anchor/style/index.js create mode 100644 components/anchor/style/index.less create mode 100644 examples/routers/anchor/demo/base.vue create mode 100644 examples/routers/anchor/demo/fixed.vue create mode 100644 examples/routers/anchor/index.vue diff --git a/components/anchor/Anchor.vue b/components/anchor/Anchor.vue new file mode 100644 index 0000000..c6f852b --- /dev/null +++ b/components/anchor/Anchor.vue @@ -0,0 +1,205 @@ + + + + diff --git a/components/anchor/AnchorLink.vue b/components/anchor/AnchorLink.vue new file mode 100644 index 0000000..d3a8cd5 --- /dev/null +++ b/components/anchor/AnchorLink.vue @@ -0,0 +1,37 @@ + + + + diff --git a/components/anchor/index.js b/components/anchor/index.js new file mode 100644 index 0000000..4e03c07 --- /dev/null +++ b/components/anchor/index.js @@ -0,0 +1,6 @@ +import Anchor from './Anchor' +import AnchorLink from './AnchorLink' +import './style' + +Anchor.Link = AnchorLink +export default Anchor diff --git a/components/anchor/style/index.js b/components/anchor/style/index.js new file mode 100644 index 0000000..cf31ed8 --- /dev/null +++ b/components/anchor/style/index.js @@ -0,0 +1,2 @@ +import '../../style/index.less' +import './index.less' diff --git a/components/anchor/style/index.less b/components/anchor/style/index.less new file mode 100644 index 0000000..6500494 --- /dev/null +++ b/components/anchor/style/index.less @@ -0,0 +1,72 @@ +@import "../../style/themes/default"; + +.@{ant-prefix}-anchor { + position: relative; + &-wrapper { + background-color: @component-background; + } + + &-ink { + position: absolute; + height: 100%; + left: 0; + top: 0; + &:before { + content: ' '; + position: relative; + width: 2px; + height: 100%; + display: block; + background-color: @border-color-split; + margin: 0 auto; + } + &-ball { + display: none; + position: absolute; + width: 9px; + height: 9px; + border-radius: 9px; + border: 3px solid @primary-color; + background-color: @component-background; + left: 50%; + transition: top .3s ease-in-out; + transform: translateX(-50%); + &.visible { + display: inline-block; + } + } + } + + &.fixed &-ink &-ink-ball { + display: none; + } + + &-link { + padding: 8px 0 8px 18px; + line-height: 1; + + &-title { + display: block; + position: relative; + transition: all .3s; + color: @text-color; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + margin-bottom: 8px; + + &:only-child { + margin-bottom: 0; + } + } + + &-active > &-title { + color: @primary-color; + } + } + + &-link &-link { + padding-top: 6px; + padding-bottom: 6px; + } +} diff --git a/examples/App.vue b/examples/App.vue index 5fcae00..d47dd72 100644 --- a/examples/App.vue +++ b/examples/App.vue @@ -203,6 +203,10 @@ export default { { title: 'Other', items: [ + { + title: 'Anchor 锚点', + route: 'anchor' + }, { title: 'BackTop 回到顶部', route: 'backtop' diff --git a/examples/routers/anchor/demo/base.vue b/examples/routers/anchor/demo/base.vue new file mode 100644 index 0000000..d63c916 --- /dev/null +++ b/examples/routers/anchor/demo/base.vue @@ -0,0 +1,26 @@ + + + diff --git a/examples/routers/anchor/demo/fixed.vue b/examples/routers/anchor/demo/fixed.vue new file mode 100644 index 0000000..232dfca --- /dev/null +++ b/examples/routers/anchor/demo/fixed.vue @@ -0,0 +1,23 @@ + + + + diff --git a/examples/routers/anchor/index.vue b/examples/routers/anchor/index.vue new file mode 100644 index 0000000..f5cceea --- /dev/null +++ b/examples/routers/anchor/index.vue @@ -0,0 +1,68 @@ + + + + + diff --git a/examples/routers/index.js b/examples/routers/index.js index cf6430c..a12dd12 100644 --- a/examples/routers/index.js +++ b/examples/routers/index.js @@ -29,6 +29,7 @@ import Steps from './steps' import TimePicker from './timepicker' import BackTop from './back-top' import Layout from './layout' +import Anchor from './anchor' Vue.use(Router) @@ -149,6 +150,10 @@ let router = new Router({ { path: '/layout', component: Layout + }, + { + path: '/anchor', + component: Anchor } ] }) From ae131f1c02c7d568772e6b628d528252d2ef0f21 Mon Sep 17 00:00:00 2001 From: ganlyun <617621777@qq.com> Date: Wed, 27 Jun 2018 11:04:21 +0800 Subject: [PATCH 2/4] completed, need some doc --- components/anchor/Anchor.vue | 68 +- components/anchor/AnchorLink.vue | 28 +- components/anchor/style/index.less | 4 + examples/routers/anchor/index.vue | 13 +- package-lock.json | 4840 ++++++++++++++-------------- 5 files changed, 2485 insertions(+), 2468 deletions(-) diff --git a/components/anchor/Anchor.vue b/components/anchor/Anchor.vue index c6f852b..a3b2f15 100644 --- a/components/anchor/Anchor.vue +++ b/components/anchor/Anchor.vue @@ -1,8 +1,8 @@