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;
+ }
+ }
+}