diff --git a/docs/src/DocsApp.vue b/docs/src/DocsApp.vue index 9fcb9e8b4..c64ad2e5d 100644 --- a/docs/src/DocsApp.vue +++ b/docs/src/DocsApp.vue @@ -47,7 +47,38 @@ export default { } }, + mounted() { + this.showVersionTip(); + }, + methods: { + showVersionTip() { + const tip = window.localStorage.getItem('vantVersionTip'); + + if (!tip && this.$vantLang === 'zh-CN') { + const version = document.querySelector('.van-doc-header__version'); + version.insertAdjacentHTML('beforeend', ` +
+ 提示:你当前访问的是 Vant 2.0 版本文档,点此切换至旧版文档 +
+ +
+
+ `); + + const tip = document.querySelector('.doc-version-tip'); + const removeTip = event => { + event.stopPropagation(); + tip.parentNode.removeChild(tip); + }; + + tip.addEventListener('click', removeTip); + version.addEventListener('click', removeTip); + + window.localStorage.setItem('vantVersionTip', 1); + } + }, + onChangeDemoURL(url) { this.simulators = [this.simulators[0], url]; }, @@ -76,4 +107,65 @@ export default { margin-bottom: 20px; } } + +.doc-version-tip { + position: absolute; + top: 35px; + left: 50%; + z-index: 100; + box-sizing: border-box; + width: 300px; + margin-left: -150px; + padding: 15px; + color: #333; + text-align: left; + background-color: #fff; + border-radius: 6px; + box-shadow: 0 4px 12px #ebedf0; + transform-origin: top; + cursor: default; + animation: version-tip .25s cubic-bezier(0.175, 0.885, 0.32, 1.375); + + &::before { + position: absolute; + top: -4px; + left: 50%; + margin-left: -3px; + border: 6px solid; + border-color: transparent transparent white white; + transform: rotate(135deg); + content: ''; + } + + &__button { + width: 60px; + color: #fff; + font-size: 12px; + line-height: 24px; + background: #1889f9; + border: none; + border-radius: 15px; + cursor: pointer; + + &:hover { + background: darken(#1889f9, 10%); + } + + &:focus { + outline: none; + } + } + + @keyframes version-tip { + from { + transform: scaleY(0); + opacity: 0; + } + + to { + transform: scaleY(1); + opacity: 1; + } + } +}