[Doc] add doc version tip

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', `
+          <div class="doc-version-tip">
+            提示：你当前访问的是 Vant 2.0 版本文档，点此切换至旧版文档
+            <div style="text-align: right;">
+              <button class="doc-version-tip__button">好哒</button>
+            </div>
+          </div>
+        `);
+
+        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;
+    }
+  }
+}
 </style>