From 7c958b624d640e03f61f2dc56f8c1e2ef27108b4 Mon Sep 17 00:00:00 2001 From: wangmingxi <1056935467@qq.com> Date: Fri, 1 Mar 2019 11:17:39 +0800 Subject: [PATCH 1/8] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E4=B8=A4=E4=B8=AA?= =?UTF-8?q?=E9=94=9A=E7=82=B9=E7=9B=B8=E5=85=B3=E7=9A=84=E5=8A=9F=E8=83=BD?= =?UTF-8?q?=EF=BC=8C=E4=BB=A5=E5=8F=8A=E4=B8=AD=E8=8B=B1=E6=96=87=E7=89=88?= =?UTF-8?q?=E7=9A=84=E4=BD=BF=E7=94=A8=E8=AF=B4=E6=98=8E=E3=80=82=E5=8A=9F?= =?UTF-8?q?=E8=83=BD=E5=A6=82=E4=B8=8B=EF=BC=9A=201.AnchorSmooth=EF=BC=9A?= =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E7=82=B9=E5=87=BBAnchorSmooth=E8=BF=87?= =?UTF-8?q?=E6=B8=A1=E5=88=B0=E7=9B=B8=E5=BA=94=E7=9A=84=E9=94=9A=E7=82=B9?= =?UTF-8?q?=EF=BC=9B=202.GoTop=EF=BC=9A=E5=8F=AF=E4=BB=A5=E5=AE=9A?= =?UTF-8?q?=E5=88=B6=E7=9A=84=E5=9B=9E=E9=A1=B6=E9=83=A8=E5=8A=9F=E8=83=BD?= =?UTF-8?q?=E6=8C=89=E9=92=AE=EF=BC=8C=E5=8C=85=E6=8B=AC=E6=8C=89=E9=92=AE?= =?UTF-8?q?=E7=9A=84=E5=87=BA=E7=8E=B0=E6=97=B6=E9=97=B4=EF=BC=8C=E5=9B=9E?= =?UTF-8?q?=E5=88=B0=E9=A1=B6=E9=83=A8=E6=97=B6=E6=89=A7=E8=A1=8C=E7=9A=84?= =?UTF-8?q?=E5=9B=9E=E8=B0=83=E5=87=BD=E6=95=B0=E3=80=82=20=E9=97=AE?= =?UTF-8?q?=E9=A2=98=EF=BC=9AGoTop=E7=BB=84=E4=BB=B6=E9=9C=80=E8=A6=81?= =?UTF-8?q?=E7=9A=84=E4=B8=80=E4=BA=9B=E6=A0=B7=E5=BC=8F=EF=BC=8C=E7=9B=B4?= =?UTF-8?q?=E6=8E=A5=E6=94=BE=E5=9C=A8=E4=BA=86anchor=E7=9B=AE=E5=BD=95?= =?UTF-8?q?=E4=B8=8B=EF=BC=8C=E6=B2=A1=E6=9C=89=E5=81=9A=E6=88=90=E9=BB=98?= =?UTF-8?q?=E8=AE=A4=E6=A0=B7=E5=BC=8F=EF=BC=8C=E4=BE=9B=E7=94=A8=E6=88=B7?= =?UTF-8?q?=E9=80=89=E6=8B=A9=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- site/docs/en-US/anchor-smooth.md | 86 ++++++++++++++++++++ site/docs/en-US/go-top.md | 120 ++++++++++++++++++++++++++++ site/docs/zh-CN/anchor-smooth.md | 85 ++++++++++++++++++++ site/docs/zh-CN/go-top.md | 114 ++++++++++++++++++++++++++ site/locales/en-US.js | 4 +- site/locales/zh-CN.js | 4 +- site/pages/anchor-smooth/index.jsx | 9 +++ site/pages/anchor-smooth/style.scss | 13 +++ site/pages/go-top/index.jsx | 9 +++ site/pages/go-top/style.scss | 5 ++ site/pages/index.jsx | 4 +- src/anchor/AnchorSmooth.jsx | 91 +++++++++++++++++++++ src/anchor/GoTop.jsx | 66 +++++++++++++++ src/anchor/index.js | 4 + src/anchor/style.css | 28 +++++++ src/index.js | 1 + 16 files changed, 640 insertions(+), 3 deletions(-) create mode 100644 site/docs/en-US/anchor-smooth.md create mode 100644 site/docs/en-US/go-top.md create mode 100644 site/docs/zh-CN/anchor-smooth.md create mode 100644 site/docs/zh-CN/go-top.md create mode 100644 site/pages/anchor-smooth/index.jsx create mode 100644 site/pages/anchor-smooth/style.scss create mode 100644 site/pages/go-top/index.jsx create mode 100644 site/pages/go-top/style.scss create mode 100644 src/anchor/AnchorSmooth.jsx create mode 100644 src/anchor/GoTop.jsx create mode 100644 src/anchor/index.js create mode 100644 src/anchor/style.css diff --git a/site/docs/en-US/anchor-smooth.md b/site/docs/en-US/anchor-smooth.md new file mode 100644 index 000000000..842eca806 --- /dev/null +++ b/site/docs/en-US/anchor-smooth.md @@ -0,0 +1,86 @@ +## AnchorSmooth + +A label slide to anchor point. + +### Basic usage + +Similar to the use of a tag, the attribute targetId is used to indicate the anchor that you want to reach. + +::: demo The AnchorSmooth component provides `targetId` attributes to point to ID elements that exist in the page and must have values. If the child element does not exist, `targetId` is used as the child element. +```js +render() { + return ( +
+
Here is the anchor#anchor0
+
+ + + Slide to anchor#anchor1 + +
+
+ ) +} +``` +::: + +### callback + +The attribute `onFinish` can bind a callback function and execute the callback function after reaching the anchor point. + +::: demo In the AnchorSmooth component, you can set the `onFinish` callback function that completes the sliding, and then call the `onFinish` function when it reaches the anchor. +```js +render() { + return ( +
+
+ Here is the anchor#anchor1 +
+ console.log("Arrive at anchor2")}> + Go to the anchor with ID anchor2 and execute the callback function + +
+ ) +} +``` +::: + +### set title + +The` title` property tells the user the anchor to go when the mouse moves in. + +::: demo Use the `title` attribute to describe an anchor. +```js +render() { + return ( +
+
+ Here is the anchor#anchor2 +
+ console.log("Arrive at anchor0")}> + To the anchor with ID anchor0, containing title + +
+ ) +} +``` +::: + +### Attributes + +| Attribute | Description | Type | Accepted Values | Default | +|---------- |-------------- |---------- |-------------------------------- |-------- | +| **targetId** | Anchor target **REQUIRED** | string | — | — | +| title | title | string | — | — | + +### Events + +| Event Name | Description | Parameters | +|---------- |-------- |---------- | +| onFinish | fires when anchor is arrived | — | + diff --git a/site/docs/en-US/go-top.md b/site/docs/en-US/go-top.md new file mode 100644 index 000000000..ccc7b5b02 --- /dev/null +++ b/site/docs/en-US/go-top.md @@ -0,0 +1,120 @@ +## GoTop + +In a long page, you can go back to the top of the page by clicking on the button from the bottom to the top. + +### Basic usage + +Usually the top-back button appears in the lower right corner of the page, so it is recommended to modify the `right`, `bottom` attributes for positioning; if there are special needs, you can also modify the `left`, `top` attributes. + +::: demo In the GoTop component, you can modify the `right` and `bottom` attributes with the default values of right: 50px and bottom: 50px. +```js +render() { + return ( +
+

Basic usage: The first button in the lower right corner

+ +
+ ) +} +``` +::: + +### Property `showheight` + +Usually the top button will not appear when the rolling distance is 0. We can define the height of the scrollbar when the button appears by the attribute `showheight`, with the default value of 300, per unit px. If the scroll distance is greater than 300, the display button will fade in; if the scroll distance is less than 300, the hidden button will fade out. + +::: demo In the GoTop component, you can modify the showheight property to specify the scroll distance of the scrollbar, default value: 300; type: number. + +```js +render() { + return ( +
+

+ A button appears when the scroll distance is 200 px: + the second button in the lower right corner +

+ +
+ ) +} +``` + +::: + +### With icon + +By default, the `el-icon-caret-top` in elementUI can be used to replace the default icon by setting sub-elements. + +::: demo By setting the` children` attribute to display GoTop's icon, you can more effectively show the user your display intentions. +```js +render() { + return ( +
+

With icon：The third button in the lower right corner

+ + + +
+ ) +} +``` +::: + +### Sliding time and callback function + +Customize the time used to complete the sliding, attribute: `time`, default value: 300, unit: Ms. + +::: demo In the GoTop component, you can set the `time` needed to complete the sliding and call an `onFinish` callback function when you reach the anchor. + +```js +render() { + return ( +
+

+ Custom sliding time and callback function: + The fourth button in the lower right corner +

+ console.log("go to top")}/> +
+ ) +} +``` + +::: + +### Set title + +The` title` property tells the user the anchor to go when the mouse moves in. + +::: demo Use the `title` attribute to describe an anchor. + +```js +render() { + return ( +
+

Title: the fifth button in the lower right corner

+ +
+ ) +} +``` + +::: + +### Attributes +| Attribute | Description | Type | Accepted Values | Default | +|---------- |-------------- |---------- |-------------------------------- |-------- | +| showheight | Scrollbar Scroll Distance Threshold, Unit PX | number | — | 300 | +| time | The time required to reach the top, unit MS | number | — | 300 | +| title | title | string | — | — | +| right | Distance to the rightof the page | string | — | 50px | +| bottom | Distance to the bottom of the page | string | — | 50px | +| top | Distance to the top of the page | string | — | — | +| left | Distance to the left of the page | string | — | — | + +### Events + +| Event Name | Description | Parameters | +| ---------- | ---------------------------- | ---------- | +| onFinish | fires when anchor is arrived | — | \ No newline at end of file diff --git a/site/docs/zh-CN/anchor-smooth.md b/site/docs/zh-CN/anchor-smooth.md new file mode 100644 index 000000000..c4494b998 --- /dev/null +++ b/site/docs/zh-CN/anchor-smooth.md @@ -0,0 +1,85 @@ +## AnchorSmooth 滑向锚点 + +用于a标签滑向锚点。 + +### 基本用法 + +和a标签用法类似，使用属性`targetId`表明想到达的锚点。 + +::: demo AnchorSmooth 组件提供`targetId`属性指向页面中**存在id元素**，必须值。若子元素不存在，则使用`targetId`当作子元素。 +```js +render() { + return ( +
+
这里是锚点#anchor0
+
+ + + 滑动到锚点anchor1 + +
+
+ ) +} +``` +::: + +### 回调函数 + +属性`onFinish`可在绑定一个回调函数，在到达锚点后执行回调函数。 + +::: demo 在 AnchorSmooth 组件中，你可以设置完成滑动完成的回调函数`onFinish`，到达锚点之后会调用`onFinish`函数。 +```js +render() { + return ( +
+
+ 这里是锚点#anchor1 +
+ console.log("Arrive at anchor2")}> + 到id为anchor2的锚点，并执行回调函数 + +
+ ) +} +``` +::: + +### 设置标题 + +`title`属性，鼠标移入时告诉用户即将去的锚点。 + +::: demo 使用`title`属性来描述一个锚点。 +```js +render() { + return ( +
+
+ 这里是锚点#anchor2 +
+ console.log("Arrive at anchor0")}> + 到id为anchor0的锚点，包含title + +
+ ) +} +``` +::: + +### Attributes + +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +|---------- |-------------- |---------- |-------------------------------- |-------- | +| **targetId** | 锚点目标，页面中需要有对应id，**必选参数** | string | — | — | +| title | 辅助性文字 | string | — | — | + +### Events + +| 事件名称 | 说明 | 回调参数 | +|---------- |-------- |---------- | +| onFinish | 锚点到达时的回调函数 | — | diff --git a/site/docs/zh-CN/go-top.md b/site/docs/zh-CN/go-top.md new file mode 100644 index 000000000..22e2d94ae --- /dev/null +++ b/site/docs/zh-CN/go-top.md @@ -0,0 +1,114 @@ +## GoTop 回顶部 + +长页面中从底部回到顶部的按钮，点击可以回到页面顶部。 + +### 基本用法 + +通常回顶部按钮出现在页面的右下角，因此建议修改`right`，`bottom`属性进行定位；若有特殊需求，也可以修改`left` ，`top`属性。 + +::: demo 在 GoTop组件中，你可以修改`right`，`bottom`属性，默认值为right:50px;bottom:50px;。 +```js +render() { + return ( +
+

基本用法：右下角按钮第一个

+ +
+ ) +} +``` +::: + +### 出现时机 + +一般回顶部按钮，不会在滚动距离为0时出现。我们可以通过属性`showheight` 来定义按钮出现时滚动条的高度，默认值为300，单位px。滚动距离大于300，会淡入显示按钮；小于300，会淡出隐藏按钮。 + +::: demo 在 GoTop组件中，你可以修改`showheight`属性，指定滚动条的滚动距离，默认值：300;类型：number。 + +```js +render() { + return ( +
+

在滚动距离为200px时出现按钮：右下角按钮第二个

+ +
+ ) +} +``` + +::: + +### 替换 icon + +GoTop 组件中，默认使用elementUI中的el-icon-caret-top，可以通过设置子元素的方式，替换默认icon图标。 + +::: demo 通过设置`children`属性来显示 GoTop 的 icon，这能更有效地向用户展示你的显示意图。 +```js +render() { + return ( +
+

替换 icon：右下角按钮第三个

+ + + +
+ ) +} +``` +::: + +### 滑动时间和回调函数 + +自定义完成滑动所用的时间，属性:` time`，默认值: 300，单位: ms。 + +::: demo 在 GoTop 组件中，你可以设置完成滑动所用的时间`time`，到达锚点之后会调用一个的`onFinish`的回调函数。`time`属性决定完成滑动所用的时间，接受`number`，默认为300。 + +```js +render() { + return ( +
+

自定义滑动时间和回调函数：右下角按钮第四个

+ console.log("go to top")}/> +
+ ) +} +``` + +::: + +### title + +包含标题，鼠标移入时告诉用户即将去的锚点。 + +::: demo 使用`title`属性来描述一个锚点。 + +```js +render() { + return ( +
+

title：右下角按钮第五个

+ +
+ ) +} +``` + +::: + +### Attributes +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +|---------- |-------------- |---------- |-------------------------------- |-------- | +| showheight | 滚动条滚动距离阈值，单位px | number | — | 300 | +| time | 到达描点所需要的时间，单位ms | number | — | 300 | +| title | title | string | — | — | +| right | 到页面右边的距离 | string | — | 50px | +| bottom | 到页面底端的距离 | string | — | 50px | +| top | 到页面顶端的距离 | string | — | — | +| left | 到页面左边的距离 | string | — | — | + +### Events + +| 事件名称 | 说明 | 回调参数 | +| -------- | -------------------------- | -------- | +| onFinish | 滚动条到达顶部时的回调函数 | — | \ No newline at end of file diff --git a/site/locales/en-US.js b/site/locales/en-US.js index 37bfc3dd0..9bfa7a186 100644 --- a/site/locales/en-US.js +++ b/site/locales/en-US.js @@ -45,7 +45,9 @@ module.exports = { 'popover': 'Popover', 'card': 'Card', 'carousel': 'Carousel', - 'collapse': 'Collapse' + 'collapse': 'Collapse', + 'anchor-smooth':'AnchorSmooth', + 'go-top':'GoTop' }, misc: { 'guide': 'Guide', diff --git a/site/locales/zh-CN.js b/site/locales/zh-CN.js index 4bc9b2b32..4feac10dc 100644 --- a/site/locales/zh-CN.js +++ b/site/locales/zh-CN.js @@ -45,7 +45,9 @@ module.exports = { 'popover': 'Popover 弹出框', 'card': 'Card 卡片', 'carousel': 'Carousel 走马灯', - 'collapse': 'Collapse 折叠面板' + 'collapse': 'Collapse 折叠面板', + 'anchor-smooth':'AnchorSmooth 滑向锚点', + 'go-top':'GoTop 回顶部' }, misc: { 'guide': '指南', diff --git a/site/pages/anchor-smooth/index.jsx b/site/pages/anchor-smooth/index.jsx new file mode 100644 index 000000000..5794c1b1f --- /dev/null +++ b/site/pages/anchor-smooth/index.jsx @@ -0,0 +1,9 @@ +import Markdown from '../../../libs/markdown'; + +import './style.scss'; + +export default class AnchorSmooth extends Markdown { + document(locale) { + return require(`../../docs/${locale}/anchor-smooth.md`); + } +} diff --git a/site/pages/anchor-smooth/style.scss b/site/pages/anchor-smooth/style.scss new file mode 100644 index 000000000..9a9c0b820 --- /dev/null +++ b/site/pages/anchor-smooth/style.scss @@ -0,0 +1,13 @@ +.demo-anchorsmooth{ + + .anchor-point{ + color: #20a0ff; + height: 50px; + line-height: 50px; + } + + .anchor-group a{ + margin-right: 100px; + } + +} diff --git a/site/pages/go-top/index.jsx b/site/pages/go-top/index.jsx new file mode 100644 index 000000000..8e0c27a03 --- /dev/null +++ b/site/pages/go-top/index.jsx @@ -0,0 +1,9 @@ +import Markdown from '../../../libs/markdown'; + +import './style.scss'; + +export default class GoTop extends Markdown { + document(locale) { + return require(`../../docs/${locale}/go-top.md`); + } +} diff --git a/site/pages/go-top/style.scss b/site/pages/go-top/style.scss new file mode 100644 index 000000000..ea3b29b46 --- /dev/null +++ b/site/pages/go-top/style.scss @@ -0,0 +1,5 @@ +.demo-gotop { + h3{ + color: #20a0ff; + } +} diff --git a/site/pages/index.jsx b/site/pages/index.jsx index 5bfb46530..7768dc7b6 100644 --- a/site/pages/index.jsx +++ b/site/pages/index.jsx @@ -58,7 +58,9 @@ export default { 'popover': require('./popover'), 'card': require('./card'), 'carousel': require('./carousel'), - 'collapse': require('./collapse') + 'collapse': require('./collapse'), + 'anchor-smooth':require('./anchor-smooth'), + 'go-top':require('./go-top') } } } diff --git a/src/anchor/AnchorSmooth.jsx b/src/anchor/AnchorSmooth.jsx new file mode 100644 index 000000000..9dabf9799 --- /dev/null +++ b/src/anchor/AnchorSmooth.jsx @@ -0,0 +1,91 @@ +/* @flow */ + +import React from 'react'; +import {Component, PropTypes} from '../../libs'; + + +const doNothing = () => undefined; + +function goTarget(targetTop, time = 300, callback = doNothing) { + let interval = 10; + time = Math.max(time, 100); + let initTop = document.documentElement.scrollTop || document.body.scrollTop; + let total = Math.ceil(time / interval); + let speed = (targetTop - initTop) / total; + let timer = null; + let count = 1; + + if (speed === 0) { + return; + } + + function goMove() { + if (count >= total) { + window.scrollTo(0, targetTop); + clearInterval(timer); + callback && callback(); + return; + } + window.scrollTo(0, speed * count + initTop); + count++; + } + + timer = setInterval(goMove, interval); +} + +export default class AnchorSmooth extends Component { + constructor() { + super(...arguments); + this.onClick = this.onClick.bind(this); + } + + onClick(e) { + e.preventDefault(); + let targetDom = document.getElementById(this.props.targetId); + if(targetDom && targetDom.scrollIntoView){ + targetDom.scrollIntoView({ + behavior:'smooth', + block:'start', + inline:'nearest' + }); + this.props.onFinish && this.props.onFinish(); + }else{ + let targetTop = targetDom ? targetDom.offsetTop : 0; + goTarget(targetTop, this.props.time,this.props.onFinish); + } + } + + + shouldComponentUpdate(nextProps) { + for (let key of Object.keys(nextProps)) { + if (nextProps[key] !== this.props[key]) { + return true; + } + } + for (let key of Object.keys(this.props)) { + if (this.props[key] !== nextProps[key]) { + return true; + } + } + return false; + } + + render() { + const {targetId, children, ...other} = this.props; + return ( + {children || targetId} + ) + } +} + +AnchorSmooth.propTypes = { + targetId: PropTypes.string, + time: PropTypes.number, + onFinish:PropTypes.func +}; + +AnchorSmooth.defaultProps = { + time: 300 +}; + diff --git a/src/anchor/GoTop.jsx b/src/anchor/GoTop.jsx new file mode 100644 index 000000000..78b325d56 --- /dev/null +++ b/src/anchor/GoTop.jsx @@ -0,0 +1,66 @@ +/* @flow */ + +import React from 'react'; +import {Component,PropTypes} from '../../libs'; +import AnchorSmooth from './AnchorSmooth'; +import './style.css'; + +export default class GoTop extends Component { + + constructor() { + super(...arguments); + this.state = {show: false}; + this.showAnchor = this.showAnchor.bind(this); + } + + showAnchor() { + let scrollY = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; + let show = scrollY >= this.props.showheight; + if (this.state.show !== show) { + this.setState({ + show + }); + } + } + + componentDidMount() { + this.showAnchor(); + window.addEventListener("scroll", this.showAnchor) + } + + componentWillUnmount() { + window.removeEventListener("scroll", this.showAnchor); + } + + render() { + const {children,bottom, right, top, left, ...other} = this.props; + return ( +
+ + {children || } + +
+ ) + } +} + +GoTop.propTypes = { + showheight:PropTypes.number, + bottom:PropTypes.string, + top:PropTypes.string, + left:PropTypes.string, + right:PropTypes.string +}; + +GoTop.defaultProps = { + showheight:300 +}; diff --git a/src/anchor/index.js b/src/anchor/index.js new file mode 100644 index 000000000..44ce0f1fa --- /dev/null +++ b/src/anchor/index.js @@ -0,0 +1,4 @@ +import AnchorSmooth from './AnchorSmooth'; +import GoTop from './GoTop'; + +export {AnchorSmooth,GoTop}; \ No newline at end of file diff --git a/src/anchor/style.css b/src/anchor/style.css new file mode 100644 index 000000000..d10558340 --- /dev/null +++ b/src/anchor/style.css @@ -0,0 +1,28 @@ +.el-anchor__top-wrapper { + position: fixed; + bottom: 50px; + right: 50px; + z-index: 99; + transition: opacity 0.2s linear 0s, visibility 0s linear 0.2s; +} + +.el-anchor__top { + border-radius: 50%; + width: 50px; + height: 50px; + background-color: #58b7ff; + display: block; + text-align: center; + line-height: 50px; + opacity: 0.4; + transition: opacity 0.3s linear 0s; +} + +.el-anchor__top:hover { + opacity: 1; +} + +.el-anchor__top i { + color: #ffffff; + font-size: 22px; +} \ No newline at end of file diff --git a/src/index.js b/src/index.js index fdbac9308..a1b0a46f5 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,7 @@ export { default as i18n } from './locale'; export { default as Alert } from './alert'; +export { AnchorSmooth, GoTop} from './anchor'; export { default as Button } from './button'; export { default as Card } from './card'; export { default as Layout } from './layout'; From 02b498bf04627d2bdf4475b1b3fe8495a82394cd Mon Sep 17 00:00:00 2001 From: wangmingxi <1056935467@qq.com> Date: Fri, 1 Mar 2019 14:43:30 +0800 Subject: [PATCH 2/8] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E4=B8=A4=E4=B8=AA?= =?UTF-8?q?=E9=94=9A=E7=82=B9=E7=9B=B8=E5=85=B3=E7=9A=84=E5=8A=9F=E8=83=BD?= =?UTF-8?q?=EF=BC=8C=E4=BB=A5=E5=8F=8A=E4=B8=AD=E8=8B=B1=E6=96=87=E7=89=88?= =?UTF-8?q?=E7=9A=84=E4=BD=BF=E7=94=A8=E8=AF=B4=E6=98=8E=E3=80=82=E5=8A=9F?= =?UTF-8?q?=E8=83=BD=E5=A6=82=E4=B8=8B=EF=BC=9A=201.AnchorSmooth=EF=BC=9A?= =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E7=82=B9=E5=87=BBAnchorSmooth=E8=BF=87?= =?UTF-8?q?=E6=B8=A1=E5=88=B0=E7=9B=B8=E5=BA=94=E7=9A=84=E9=94=9A=E7=82=B9?= =?UTF-8?q?=EF=BC=9B=202.GoTop=EF=BC=9A=E5=8F=AF=E4=BB=A5=E5=AE=9A?= =?UTF-8?q?=E5=88=B6=E7=9A=84=E5=9B=9E=E9=A1=B6=E9=83=A8=E5=8A=9F=E8=83=BD?= =?UTF-8?q?=E6=8C=89=E9=92=AE=EF=BC=8C=E5=8C=85=E6=8B=AC=E6=8C=89=E9=92=AE?= =?UTF-8?q?=E7=9A=84=E5=87=BA=E7=8E=B0=E6=97=B6=E9=97=B4=EF=BC=8C=E5=9B=9E?= =?UTF-8?q?=E5=88=B0=E9=A1=B6=E9=83=A8=E6=97=B6=E6=89=A7=E8=A1=8C=E7=9A=84?= =?UTF-8?q?=E5=9B=9E=E8=B0=83=E5=87=BD=E6=95=B0=E3=80=82=20=E9=97=AE?= =?UTF-8?q?=E9=A2=98=EF=BC=9AGoTop=E7=BB=84=E4=BB=B6=E9=9C=80=E8=A6=81?= =?UTF-8?q?=E7=9A=84=E4=B8=80=E4=BA=9B=E6=A0=B7=E5=BC=8F=EF=BC=8C=E7=9B=B4?= =?UTF-8?q?=E6=8E=A5=E6=94=BE=E5=9C=A8=E4=BA=86anchor=E7=9B=AE=E5=BD=95?= =?UTF-8?q?=E4=B8=8B=EF=BC=8C=E6=B2=A1=E6=9C=89=E5=81=9A=E6=88=90=E9=BB=98?= =?UTF-8?q?=E8=AE=A4=E6=A0=B7=E5=BC=8F=EF=BC=8C=E4=BE=9B=E7=94=A8=E6=88=B7?= =?UTF-8?q?=E9=80=89=E6=8B=A9=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/anchor/AnchorSmooth.jsx | 68 +++++++++++++++++++------------------ src/anchor/GoTop.jsx | 12 +++---- 2 files changed, 41 insertions(+), 39 deletions(-) diff --git a/src/anchor/AnchorSmooth.jsx b/src/anchor/AnchorSmooth.jsx index 9dabf9799..b6255a86e 100644 --- a/src/anchor/AnchorSmooth.jsx +++ b/src/anchor/AnchorSmooth.jsx @@ -3,22 +3,28 @@ import React from 'react'; import {Component, PropTypes} from '../../libs'; +export function getScrollTop() { + let html = document.documentElement || {scrollTop : 0}; + let body = document.body || {scrollTop : 0}; + return window.pageYOffset || + html ? html.scrollTop : + body ? body.scrollTop : 0; +} -const doNothing = () => undefined; - -function goTarget(targetTop, time = 300, callback = doNothing) { +function goTarget(targetTop, time = 300, callback) { let interval = 10; time = Math.max(time, 100); - let initTop = document.documentElement.scrollTop || document.body.scrollTop; + let initTop = getScrollTop(); let total = Math.ceil(time / interval); let speed = (targetTop - initTop) / total; - let timer = null; - let count = 1; if (speed === 0) { return; } + let count = 1; + let timer = setInterval(goMove, interval); + function goMove() { if (count >= total) { window.scrollTo(0, targetTop); @@ -30,50 +36,46 @@ function goTarget(targetTop, time = 300, callback = doNothing) { count++; } - timer = setInterval(goMove, interval); } export default class AnchorSmooth extends Component { - constructor() { - super(...arguments); - this.onClick = this.onClick.bind(this); - } - onClick(e) { + onClick(e: SyntheticEvent) { e.preventDefault(); let targetDom = document.getElementById(this.props.targetId); - if(targetDom && targetDom.scrollIntoView){ + if (targetDom && targetDom.scrollIntoView) { targetDom.scrollIntoView({ - behavior:'smooth', - block:'start', - inline:'nearest' + behavior: 'smooth', + block: 'start', + inline: 'nearest' }); this.props.onFinish && this.props.onFinish(); - }else{ + } else { let targetTop = targetDom ? targetDom.offsetTop : 0; - goTarget(targetTop, this.props.time,this.props.onFinish); + goTarget(targetTop, this.props.time, this.props.onFinish); } } - shouldComponentUpdate(nextProps) { - for (let key of Object.keys(nextProps)) { - if (nextProps[key] !== this.props[key]) { - return true; - } - } - for (let key of Object.keys(this.props)) { - if (this.props[key] !== nextProps[key]) { - return true; - } - } - return false; - } + // shouldComponentUpdate(nextProps) { + // const propsKeys = Object.keys(this.props); + // const nextPropsKeys = Object.keys(nextProps); + // + // if (propsKeys.length !== nextPropsKeys.length) { + // return true; + // } + // for (const key of propsKeys) { + // if (this.props[key] !== nextProps[key]) { + // return true; + // } + // } + // return false; + // } render() { const {targetId, children, ...other} = this.props; return ( - {children || targetId} ) } @@ -82,7 +84,7 @@ export default class AnchorSmooth extends Component { AnchorSmooth.propTypes = { targetId: PropTypes.string, time: PropTypes.number, - onFinish:PropTypes.func + onFinish: PropTypes.func }; AnchorSmooth.defaultProps = { diff --git a/src/anchor/GoTop.jsx b/src/anchor/GoTop.jsx index 78b325d56..1e395701c 100644 --- a/src/anchor/GoTop.jsx +++ b/src/anchor/GoTop.jsx @@ -2,7 +2,7 @@ import React from 'react'; import {Component,PropTypes} from '../../libs'; -import AnchorSmooth from './AnchorSmooth'; +import AnchorSmooth,{getScrollTop} from './AnchorSmooth'; import './style.css'; export default class GoTop extends Component { @@ -10,11 +10,11 @@ export default class GoTop extends Component { constructor() { super(...arguments); this.state = {show: false}; - this.showAnchor = this.showAnchor.bind(this); + this.$showAnchor = this.showAnchor.bind(this); } showAnchor() { - let scrollY = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; + let scrollY = getScrollTop(); let show = scrollY >= this.props.showheight; if (this.state.show !== show) { this.setState({ @@ -24,12 +24,12 @@ export default class GoTop extends Component { } componentDidMount() { - this.showAnchor(); - window.addEventListener("scroll", this.showAnchor) + this.$showAnchor(); + window.addEventListener("scroll", this.$showAnchor) } componentWillUnmount() { - window.removeEventListener("scroll", this.showAnchor); + window.removeEventListener("scroll", this.$showAnchor); } render() { From 33db6a43a461ef3869ce5416bd3cf4e762558a29 Mon Sep 17 00:00:00 2001 From: wangmingxi <1056935467@qq.com> Date: Fri, 1 Mar 2019 14:52:51 +0800 Subject: [PATCH 3/8] =?UTF-8?q?[AnchorSmooth,GoTop]:=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E4=B8=A4=E4=B8=AA=E9=94=9A=E7=82=B9=E7=9B=B8=E5=85=B3=E7=9A=84?= =?UTF-8?q?=E5=8A=9F=E8=83=BD=EF=BC=8C=E4=BB=A5=E5=8F=8A=E4=B8=AD=E8=8B=B1?= =?UTF-8?q?=E6=96=87=E7=89=88=E7=9A=84=E4=BD=BF=E7=94=A8=E8=AF=B4=E6=98=8E?= =?UTF-8?q?=E3=80=82=E5=8A=9F=E8=83=BD=E5=A6=82=E4=B8=8B=EF=BC=9A=201.Anch?= =?UTF-8?q?orSmooth=EF=BC=9A=E5=AE=9E=E7=8E=B0=E7=82=B9=E5=87=BBAnchorSmoo?= =?UTF-8?q?th=E6=BB=91=E5=8A=A8=E5=88=B0=E7=9B=B8=E5=BA=94=E7=9A=84?= =?UTF-8?q?=E9=94=9A=E7=82=B9=EF=BC=8C=E8=80=8C=E4=B8=8D=E6=98=AF=E7=9B=B4?= =?UTF-8?q?=E6=8E=A5=E8=B7=B3=E8=BD=AC=EF=BC=9B=202.GoTop=EF=BC=9A?= =?UTF-8?q?=E5=8F=AF=E4=BB=A5=E5=AE=9A=E5=88=B6=E7=9A=84=E5=9B=9E=E9=A1=B6?= =?UTF-8?q?=E9=83=A8=E5=8A=9F=E8=83=BD=E6=8C=89=E9=92=AE=EF=BC=8C=E5=8C=85?= =?UTF-8?q?=E6=8B=AC=E6=8C=89=E9=92=AE=E7=9A=84=E5=87=BA=E7=8E=B0=E6=97=B6?= =?UTF-8?q?=E9=97=B4=EF=BC=8C=E5=9B=9E=E5=88=B0=E9=A1=B6=E9=83=A8=E6=97=B6?= =?UTF-8?q?=E6=89=A7=E8=A1=8C=E7=9A=84=E5=9B=9E=E8=B0=83=E5=87=BD=E6=95=B0?= =?UTF-8?q?=E3=80=82=20=E9=97=AE=E9=A2=98=EF=BC=9AGoTop=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E9=9C=80=E8=A6=81=E7=9A=84=E4=B8=80=E4=BA=9B=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=EF=BC=8C=E7=9B=B4=E6=8E=A5=E6=94=BE=E5=9C=A8=E4=BA=86anchor?= =?UTF-8?q?=E7=9B=AE=E5=BD=95=E4=B8=8B=EF=BC=8C=E6=B2=A1=E6=9C=89=E5=81=9A?= =?UTF-8?q?=E6=88=90=E9=BB=98=E8=AE=A4=E6=A0=B7=E5=BC=8F=EF=BC=8C=E4=BE=9B?= =?UTF-8?q?=E7=94=A8=E6=88=B7=E9=80=89=E6=8B=A9=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/anchor/GoTop.jsx | 21 ++++++++++----------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/src/anchor/GoTop.jsx b/src/anchor/GoTop.jsx index 1e395701c..7ca7dbbd4 100644 --- a/src/anchor/GoTop.jsx +++ b/src/anchor/GoTop.jsx @@ -1,8 +1,8 @@ /* @flow */ import React from 'react'; -import {Component,PropTypes} from '../../libs'; -import AnchorSmooth,{getScrollTop} from './AnchorSmooth'; +import {Component, PropTypes} from '../../libs'; +import AnchorSmooth, {getScrollTop} from './AnchorSmooth'; import './style.css'; export default class GoTop extends Component { @@ -33,7 +33,7 @@ export default class GoTop extends Component { } render() { - const {children,bottom, right, top, left, ...other} = this.props; + const {children, bottom, right, top, left, ...other} = this.props; return (
- + {children || }
@@ -54,13 +53,13 @@ export default class GoTop extends Component { } GoTop.propTypes = { - showheight:PropTypes.number, - bottom:PropTypes.string, - top:PropTypes.string, - left:PropTypes.string, - right:PropTypes.string + showheight: PropTypes.number, + bottom: PropTypes.string, + top: PropTypes.string, + left: PropTypes.string, + right: PropTypes.string }; GoTop.defaultProps = { - showheight:300 + showheight: 300 }; From 3ca5d17d0a2cf4952998d60222a747c5c0f9b631 Mon Sep 17 00:00:00 2001 From: wangmingxi <1056935467@qq.com> Date: Fri, 1 Mar 2019 15:51:33 +0800 Subject: [PATCH 4/8] =?UTF-8?q?[AnchorSmooth]:onClick=E5=87=BD=E6=95=B0?= =?UTF-8?q?=E6=B5=8B=E8=AF=95=E4=B8=8D=E9=80=9A=E8=BF=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/anchor/AnchorSmooth.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/anchor/AnchorSmooth.jsx b/src/anchor/AnchorSmooth.jsx index b6255a86e..c1c9edfcb 100644 --- a/src/anchor/AnchorSmooth.jsx +++ b/src/anchor/AnchorSmooth.jsx @@ -40,7 +40,7 @@ function goTarget(targetTop, time = 300, callback) { export default class AnchorSmooth extends Component { - onClick(e: SyntheticEvent) { + onClick(e){ e.preventDefault(); let targetDom = document.getElementById(this.props.targetId); if (targetDom && targetDom.scrollIntoView) { From a9b9bb9e4480051b32a63dfa2a89142eb8177cc7 Mon Sep 17 00:00:00 2001 From: wangmingxi <1056935467@qq.com> Date: Fri, 1 Mar 2019 16:01:36 +0800 Subject: [PATCH 5/8] =?UTF-8?q?onClick()=E6=B5=8B=E8=AF=95=E4=B8=8D?= =?UTF-8?q?=E9=80=9A=E8=BF=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/anchor/AnchorSmooth.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/anchor/AnchorSmooth.jsx b/src/anchor/AnchorSmooth.jsx index c1c9edfcb..5ffdcb6b4 100644 --- a/src/anchor/AnchorSmooth.jsx +++ b/src/anchor/AnchorSmooth.jsx @@ -40,7 +40,7 @@ function goTarget(targetTop, time = 300, callback) { export default class AnchorSmooth extends Component { - onClick(e){ + onClick(e: SyntheticEvent): void{ e.preventDefault(); let targetDom = document.getElementById(this.props.targetId); if (targetDom && targetDom.scrollIntoView) { From 8a5e97c59ed3a32bc45eb8c6ecb8dfd3aba8947a Mon Sep 17 00:00:00 2001 From: wangmingxi <1056935467@qq.com> Date: Fri, 1 Mar 2019 17:01:52 +0800 Subject: [PATCH 6/8] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=8F=82=E6=95=B0?= =?UTF-8?q?=E6=B3=9B=E5=9E=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/anchor/AnchorSmooth.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/anchor/AnchorSmooth.jsx b/src/anchor/AnchorSmooth.jsx index 5ffdcb6b4..32c482627 100644 --- a/src/anchor/AnchorSmooth.jsx +++ b/src/anchor/AnchorSmooth.jsx @@ -40,7 +40,7 @@ function goTarget(targetTop, time = 300, callback) { export default class AnchorSmooth extends Component { - onClick(e: SyntheticEvent): void{ + onClick(e: SyntheticEvent): void{ e.preventDefault(); let targetDom = document.getElementById(this.props.targetId); if (targetDom && targetDom.scrollIntoView) { From c8fc0180adf62a110b9c309c2f9c883585c049db Mon Sep 17 00:00:00 2001 From: wangmingxi <1056935467@qq.com> Date: Fri, 1 Mar 2019 17:03:21 +0800 Subject: [PATCH 7/8] =?UTF-8?q?webpack=202=E4=B8=AD=E4=B8=8D=E5=85=81?= =?UTF-8?q?=E8=AE=B8=E6=B7=B7=E7=94=A8import=E5=92=8C=20module.exports=20,?= =?UTF-8?q?=20=E7=BB=9F=E4=B8=80=E6=94=B9=E6=88=90ES6=E7=9A=84=E6=96=B9?= =?UTF-8?q?=E5=BC=8F=E7=BC=96=E5=86=99=E5=8D=B3=E5=8F=AF.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- site/pages/input/custom-item.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/pages/input/custom-item.jsx b/site/pages/input/custom-item.jsx index 436752e58..b2967a42b 100644 --- a/site/pages/input/custom-item.jsx +++ b/site/pages/input/custom-item.jsx @@ -16,4 +16,4 @@ CustomItem.propTypes = { item: PropTypes.object }; -module.exports = CustomItem; +export default CustomItem; From cc87674a9d10f50690480ef20c29d720996f0de2 Mon Sep 17 00:00:00 2001 From: wangmingxi <1056935467@qq.com> Date: Fri, 1 Mar 2019 17:10:12 +0800 Subject: [PATCH 8/8] =?UTF-8?q?=E5=8F=96=E6=B6=88=E5=AF=BC=E5=85=A5?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/anchor/GoTop.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/anchor/GoTop.jsx b/src/anchor/GoTop.jsx index 7ca7dbbd4..4bf6d5f84 100644 --- a/src/anchor/GoTop.jsx +++ b/src/anchor/GoTop.jsx @@ -3,7 +3,7 @@ import React from 'react'; import {Component, PropTypes} from '../../libs'; import AnchorSmooth, {getScrollTop} from './AnchorSmooth'; -import './style.css'; +// import './style.css'; export default class GoTop extends Component {