feat(img-preview): add imgPreview componnt

陈文彬
1 parent 2f268ca8
Showing 7 changed files with 119 additions and 138 deletions
package.json
src/components/Drawer/src/index.less
src/components/Preview/src/index.tsx
src/components/Preview/src/props.ts
src/router/menus/modules/demo/feat.ts
src/views/demo/feat/img-preview/index.vue
yarn.lock
@@ -26,11 +26,11 @@
     "lodash-es": "^4.17.15",
     "mockjs": "^1.1.0",
     "nprogress": "^0.2.0",
-    "path-to-regexp": "^6.1.0",
+    "path-to-regexp": "^6.2.0",
     "qrcode": "^1.4.4",
     "vue": "^3.0.0",
-    "vue-i18n": "^9.0.0-beta.3",
-    "vue-router": "^4.0.0-beta.12",
+    "vue-i18n": "^9.0.0-beta.4",
+    "vue-router": "^4.0.0-beta.13",
     "vuex": "^4.0.0-beta.4",
     "vuex-module-decorators": "^1.0.1",
     "zxcvbn": "^4.4.2"
@@ -51,8 +51,8 @@
     "@types/rollup-plugin-visualizer": "^2.6.0",
     "@types/shelljs": "^0.8.8",
     "@types/zxcvbn": "^4.4.0",
-    "@typescript-eslint/eslint-plugin": "^4.2.0",
-    "@typescript-eslint/parser": "^4.2.0",
+    "@typescript-eslint/eslint-plugin": "^4.4.0",
+    "@typescript-eslint/parser": "^4.4.0",
     "@vue/compiler-sfc": "^3.0.0",
     "autoprefixer": "^9.8.6",
     "babel-plugin-import": "^1.13.0",
@@ -63,7 +63,7 @@
     "eslint": "^7.10.0",
     "eslint-config-prettier": "^6.12.0",
     "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-vue": "^7.0.0-beta.4",
+    "eslint-plugin-vue": "^7.0.1",
     "fs-extra": "^9.0.1",
     "husky": "^4.3.0",
     "inquirer": "^7.3.3",
 @import (reference) '../../../design/index.less';
-@header-height: 50px;
+@header-height: 40px;
 @footer-height: 60px;
 .basic-drawer {
-import { defineComponent, ref, unref, computed, reactive, watch } from 'vue';
-
-import { FadeTransition } from '/@/components/Transition/index';
+import { defineComponent, ref, unref, computed, reactive, watchEffect } from 'vue';
 import { basicProps } from './props';
 import { Props } from './types';
@@ -11,9 +9,9 @@ import { CloseOutlined, LeftOutlined, RightOutlined } from &#39;@ant-design/icons-vu
 import resumeSvg from '/@/assets/svg/preview/resume.svg';
 import rotateSvg from '/@/assets/svg/preview/p-rotate.svg';
 import scaleSvg from '/@/assets/svg/preview/scale.svg';
-import unscaleSvg from '/@/assets/svg/preview/unscale.svg';
+import unScaleSvg from '/@/assets/svg/preview/unscale.svg';
 import loadingSvg from '/@/assets/images/loading.svg';
-import unrotateSvg from '/@/assets/svg/preview/unrotate.svg';
+import unRotateSvg from '/@/assets/svg/preview/unrotate.svg';
 enum StatueEnum {
   LOADING,
   DONE,
@@ -29,6 +27,7 @@ interface ImgState {
   status: StatueEnum;
   moveX: number;
   moveY: number;
+  show: boolean;
 }
 const prefixCls = 'img-preview';
@@ -46,7 +45,9 @@ export default defineComponent({
       currentIndex: 0,
       moveX: 0,
       moveY: 0,
+      show: props.show,
     });
+
     const wrapElRef = ref<HTMLDivElement | null>(null);
     const imgElRef = ref<HTMLImageElement | null>(null);
@@ -133,16 +134,15 @@ export default defineComponent({
     }
     // 关闭
-    function handleClose() {
-      const { instance } = props;
-      if (instance) {
-        instance.show = false;
-      }
+    function handleClose(e: MouseEvent) {
+      e && e.stopPropagation();
+      imgState.show = false;
       // 移除火狐浏览器下的鼠标滚动事件
       document.body.removeEventListener('DOMMouseScroll', scrollFunc);
       // 恢复火狐及Safari浏览器下的图片拖拽
       document.ondragstart = null;
     }
+
     // 图片复原
     function resume() {
       initState();
@@ -202,26 +202,15 @@ export default defineComponent({
       const { imageList } = props;
       return imageList.length > 1;
     });
-    watch(
-      () => props.show,
-      (show) => {
-        if (show) {
-          init();
-        }
-      },
-      {
-        immediate: true,
+
+    watchEffect(() => {
+      if (props.show) {
+        init();
       }
-    );
-    watch(
-      () => props.imageList,
-      () => {
+      if (props.imageList) {
         initState();
-      },
-      {
-        immediate: true,
       }
-    );
+    });
     const renderClose = () => {
       return (
@@ -247,7 +236,7 @@ export default defineComponent({
       return (
         <div class={`${prefixCls}__controller`}>
           <div class={`${prefixCls}__controller-item`} onClick={() => scaleFunc(-0.15)}>
-            <img src={unscaleSvg} />
+            <img src={unScaleSvg} />
           </div>
           <div class={`${prefixCls}__controller-item`} onClick={() => scaleFunc(0.15)}>
             <img src={scaleSvg} />
@@ -256,7 +245,7 @@ export default defineComponent({
             <img src={resumeSvg} />
           </div>
           <div class={`${prefixCls}__controller-item`} onClick={() => rotateFunc(-90)}>
-            <img src={unrotateSvg} />
+            <img src={unRotateSvg} />
           </div>
           <div class={`${prefixCls}__controller-item`} onClick={() => rotateFunc(90)}>
             <img src={rotateSvg} />
@@ -277,41 +266,32 @@ export default defineComponent({
     };
     return () => {
       return (
-        <FadeTransition>
-          {() =>
-            props.show && (
-              <div class={prefixCls} ref={wrapElRef} onMouseup={handleMouseUp}>
-                <div class={`${prefixCls}-content`}>
-                  <img
-                    width="32"
-                    src={loadingSvg}
-                    v-show={imgState.status === StatueEnum.LOADING}
-                    class={`${prefixCls}-image`}
-                  />
-                  <img
-                    v-show={imgState.status === StatueEnum.DONE}
-                    style={unref(getImageStyle)}
-                    class={`${prefixCls}-image`}
-                    ref={imgElRef}
-                    src={imgState.currentUrl}
-                    onMousedown={handleAddMoveListener}
-                  />
-                  <img
-                    width="32"
-                    src={loadingSvg}
-                    v-show={imgState.status === StatueEnum.LOADING}
-                    class={`${prefixCls}-image`}
-                  />
-                  {renderClose()}
-                  {renderIndex()}
-                  {renderController()}
-                  {renderArrow('left')}
-                  {renderArrow('right')}
-                </div>
-              </div>
-            )
-          }
-        </FadeTransition>
+        imgState.show && (
+          <div class={prefixCls} ref={wrapElRef} onMouseup={handleMouseUp}>
+            <div class={`${prefixCls}-content`}>
+              <img
+                width="32"
+                src={loadingSvg}
+                class={[
+                  `${prefixCls}-image`,
+                  imgState.status === StatueEnum.LOADING ? '' : 'hidden',
+                ]}
+              />
+              <img
+                style={unref(getImageStyle)}
+                class={[`${prefixCls}-image`, imgState.status === StatueEnum.DONE ? '' : 'hidden']}
+                ref={imgElRef}
+                src={imgState.currentUrl}
+                onMousedown={handleAddMoveListener}
+              />
+              {renderClose()}
+              {renderIndex()}
+              {renderController()}
+              {renderArrow('left')}
+              {renderArrow('right')}
+            </div>
+          </div>
+        )
       );
     };
   },
 import { PropType } from 'vue';
-import { Props } from './types';
 export const basicProps = {
   show: {
     type: Boolean as PropType<boolean>,
     default: false,
   },
-  instance: {
-    type: Object as PropType<Props>,
-    default: null,
-  },
   imageList: {
     type: [Array] as PropType<string[]>,
     default: null,
@@ -13,10 +13,10 @@ const menu: MenuModule = {
         path: '/context-menu',
         name: '右键菜单',
       },
-      // {
-      //   path: '/img-preview',
-      //   name: '图片预览',
-      // },
+      {
+        path: '/img-preview',
+        name: '图片预览',
+      },
       {
         path: '/i18n',
         name: '国际化',
@@ -4,6 +4,8 @@
     <div class="flex justify-center mt-4">
       <img :src="img" v-for="img in imgList" :key="img" class="mr-2" @click="handleClick(img)" />
     </div>
+    <Alert message="无预览图" type="info" />
+    <a-button @click="handlePreview" type="primary" class="mt-4">预览图片</a-button>
   </div>
 </template>
 <script lang="ts">
@@ -21,7 +23,11 @@
       function handleClick(img: string) {
         createImgPreview({ imageList: [img] });
       }
-      return { imgList, handleClick };
+
+      function handlePreview() {
+        createImgPreview({ imageList: imgList });
+      }
+      return { imgList, handleClick, handlePreview };
     },
   });
 </script>
@@ -803,61 +803,61 @@
   resolved "https://registry.npm.taobao.org/@types/zxcvbn/download/@types/zxcvbn-4.4.0.tgz#fbc1d941cc6d9d37d18405c513ba6b294f89b609"
   integrity sha1-+8HZQcxtnTfRhAXFE7prKU+Jtgk=
-"@typescript-eslint/eslint-plugin@^4.2.0":
-  version "4.3.0"
-  resolved "https://registry.npm.taobao.org/@typescript-eslint/eslint-plugin/download/@typescript-eslint/eslint-plugin-4.3.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40typescript-eslint%2Feslint-plugin%2Fdownload%2F%40typescript-eslint%2Feslint-plugin-4.3.0.tgz#1a23d904bf8ea248d09dc3761af530d90f39c8fa"
-  integrity sha1-GiPZBL+OokjQncN2GvUw2Q85yPo=
+"@typescript-eslint/eslint-plugin@^4.4.0":
+  version "4.4.0"
+  resolved "https://registry.npm.taobao.org/@typescript-eslint/eslint-plugin/download/@typescript-eslint/eslint-plugin-4.4.0.tgz?cache=0&sync_timestamp=1601919840869&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40typescript-eslint%2Feslint-plugin%2Fdownload%2F%40typescript-eslint%2Feslint-plugin-4.4.0.tgz#0321684dd2b902c89128405cf0385e9fe8561934"
+  integrity sha1-AyFoTdK5AsiRKEBc8Dhen+hWGTQ=
   dependencies:
-    "@typescript-eslint/experimental-utils" "4.3.0"
-    "@typescript-eslint/scope-manager" "4.3.0"
+    "@typescript-eslint/experimental-utils" "4.4.0"
+    "@typescript-eslint/scope-manager" "4.4.0"
     debug "^4.1.1"
     functional-red-black-tree "^1.0.1"
     regexpp "^3.0.0"
     semver "^7.3.2"
     tsutils "^3.17.1"
-"@typescript-eslint/experimental-utils@4.3.0":
-  version "4.3.0"
-  resolved "https://registry.npm.taobao.org/@typescript-eslint/experimental-utils/download/@typescript-eslint/experimental-utils-4.3.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40typescript-eslint%2Fexperimental-utils%2Fdownload%2F%40typescript-eslint%2Fexperimental-utils-4.3.0.tgz#3f3c6c508e01b8050d51b016e7f7da0e3aefcb87"
-  integrity sha1-PzxsUI4BuAUNUbAW5/faDjrvy4c=
+"@typescript-eslint/experimental-utils@4.4.0":
+  version "4.4.0"
+  resolved "https://registry.npm.taobao.org/@typescript-eslint/experimental-utils/download/@typescript-eslint/experimental-utils-4.4.0.tgz?cache=0&sync_timestamp=1601919839188&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40typescript-eslint%2Fexperimental-utils%2Fdownload%2F%40typescript-eslint%2Fexperimental-utils-4.4.0.tgz#62a05d3f543b8fc5dec4982830618ea4d030e1a9"
+  integrity sha1-YqBdP1Q7j8XexJgoMGGOpNAw4ak=
   dependencies:
     "@types/json-schema" "^7.0.3"
-    "@typescript-eslint/scope-manager" "4.3.0"
-    "@typescript-eslint/types" "4.3.0"
-    "@typescript-eslint/typescript-estree" "4.3.0"
+    "@typescript-eslint/scope-manager" "4.4.0"
+    "@typescript-eslint/types" "4.4.0"
+    "@typescript-eslint/typescript-estree" "4.4.0"
     eslint-scope "^5.0.0"
     eslint-utils "^2.0.0"
-"@typescript-eslint/parser@^4.2.0":
-  version "4.3.0"
-  resolved "https://registry.npm.taobao.org/@typescript-eslint/parser/download/@typescript-eslint/parser-4.3.0.tgz#684fc0be6551a2bfcb253991eec3c786a8c063a3"
-  integrity sha1-aE/AvmVRor/LJTmR7sPHhqjAY6M=
+"@typescript-eslint/parser@^4.4.0":
+  version "4.4.0"
+  resolved "https://registry.npm.taobao.org/@typescript-eslint/parser/download/@typescript-eslint/parser-4.4.0.tgz?cache=0&sync_timestamp=1601919839967&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40typescript-eslint%2Fparser%2Fdownload%2F%40typescript-eslint%2Fparser-4.4.0.tgz#65974db9a75f23b036f17b37e959b5f99b659ec0"
+  integrity sha1-ZZdNuadfI7A28Xs36Vm1+ZtlnsA=
   dependencies:
-    "@typescript-eslint/scope-manager" "4.3.0"
-    "@typescript-eslint/types" "4.3.0"
-    "@typescript-eslint/typescript-estree" "4.3.0"
+    "@typescript-eslint/scope-manager" "4.4.0"
+    "@typescript-eslint/types" "4.4.0"
+    "@typescript-eslint/typescript-estree" "4.4.0"
     debug "^4.1.1"
-"@typescript-eslint/scope-manager@4.3.0":
-  version "4.3.0"
-  resolved "https://registry.npm.taobao.org/@typescript-eslint/scope-manager/download/@typescript-eslint/scope-manager-4.3.0.tgz?cache=0&sync_timestamp=1601316727982&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40typescript-eslint%2Fscope-manager%2Fdownload%2F%40typescript-eslint%2Fscope-manager-4.3.0.tgz#c743227e087545968080d2362cfb1273842cb6a7"
-  integrity sha1-x0Mifgh1RZaAgNI2LPsSc4Qstqc=
+"@typescript-eslint/scope-manager@4.4.0":
+  version "4.4.0"
+  resolved "https://registry.npm.taobao.org/@typescript-eslint/scope-manager/download/@typescript-eslint/scope-manager-4.4.0.tgz#2f3dd27692a12cc9a046a90ba6a9d8cb7731190a"
+  integrity sha1-Lz3SdpKhLMmgRqkLpqnYy3cxGQo=
   dependencies:
-    "@typescript-eslint/types" "4.3.0"
-    "@typescript-eslint/visitor-keys" "4.3.0"
+    "@typescript-eslint/types" "4.4.0"
+    "@typescript-eslint/visitor-keys" "4.4.0"
-"@typescript-eslint/types@4.3.0":
-  version "4.3.0"
-  resolved "https://registry.npm.taobao.org/@typescript-eslint/types/download/@typescript-eslint/types-4.3.0.tgz?cache=0&sync_timestamp=1601314224991&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40typescript-eslint%2Ftypes%2Fdownload%2F%40typescript-eslint%2Ftypes-4.3.0.tgz#1f0b2d5e140543e2614f06d48fb3ae95193c6ddf"
-  integrity sha1-HwstXhQFQ+JhTwbUj7OulRk8bd8=
+"@typescript-eslint/types@4.4.0":
+  version "4.4.0"
+  resolved "https://registry.npm.taobao.org/@typescript-eslint/types/download/@typescript-eslint/types-4.4.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40typescript-eslint%2Ftypes%2Fdownload%2F%40typescript-eslint%2Ftypes-4.4.0.tgz#63440ef87a54da7399a13bdd4b82060776e9e621"
+  integrity sha1-Y0QO+HpU2nOZoTvdS4IGB3bp5iE=
-"@typescript-eslint/typescript-estree@4.3.0":
-  version "4.3.0"
-  resolved "https://registry.npm.taobao.org/@typescript-eslint/typescript-estree/download/@typescript-eslint/typescript-estree-4.3.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40typescript-eslint%2Ftypescript-estree%2Fdownload%2F%40typescript-eslint%2Ftypescript-estree-4.3.0.tgz#0edc1068e6b2e4c7fdc54d61e329fce76241cee8"
-  integrity sha1-DtwQaOay5Mf9xU1h4yn852JBzug=
+"@typescript-eslint/typescript-estree@4.4.0":
+  version "4.4.0"
+  resolved "https://registry.npm.taobao.org/@typescript-eslint/typescript-estree/download/@typescript-eslint/typescript-estree-4.4.0.tgz?cache=0&sync_timestamp=1601919838540&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40typescript-eslint%2Ftypescript-estree%2Fdownload%2F%40typescript-eslint%2Ftypescript-estree-4.4.0.tgz#16a2df7c16710ddd5406b32b86b9c1124b1ca526"
+  integrity sha1-FqLffBZxDd1UBrMrhrnBEkscpSY=
   dependencies:
-    "@typescript-eslint/types" "4.3.0"
-    "@typescript-eslint/visitor-keys" "4.3.0"
+    "@typescript-eslint/types" "4.4.0"
+    "@typescript-eslint/visitor-keys" "4.4.0"
     debug "^4.1.1"
     globby "^11.0.1"
     is-glob "^4.0.1"
@@ -865,12 +865,12 @@
     semver "^7.3.2"
     tsutils "^3.17.1"
-"@typescript-eslint/visitor-keys@4.3.0":
-  version "4.3.0"
-  resolved "https://registry.npm.taobao.org/@typescript-eslint/visitor-keys/download/@typescript-eslint/visitor-keys-4.3.0.tgz?cache=0&sync_timestamp=1601314225045&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40typescript-eslint%2Fvisitor-keys%2Fdownload%2F%40typescript-eslint%2Fvisitor-keys-4.3.0.tgz#0e5ab0a09552903edeae205982e8521e17635ae0"
-  integrity sha1-DlqwoJVSkD7eriBZguhSHhdjWuA=
+"@typescript-eslint/visitor-keys@4.4.0":
+  version "4.4.0"
+  resolved "https://registry.npm.taobao.org/@typescript-eslint/visitor-keys/download/@typescript-eslint/visitor-keys-4.4.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40typescript-eslint%2Fvisitor-keys%2Fdownload%2F%40typescript-eslint%2Fvisitor-keys-4.4.0.tgz#0a9118344082f14c0f051342a74b42dfdb012640"
+  integrity sha1-CpEYNECC8UwPBRNCp0tC39sBJkA=
   dependencies:
-    "@typescript-eslint/types" "4.3.0"
+    "@typescript-eslint/types" "4.4.0"
     eslint-visitor-keys "^2.0.0"
 "@vue/compiler-core@3.0.0":
@@ -2476,10 +2476,10 @@ eslint-plugin-prettier@^3.1.4:
   dependencies:
     prettier-linter-helpers "^1.0.0"
-eslint-plugin-vue@^7.0.0-beta.4:
-  version "7.0.0-beta.4"
-  resolved "https://registry.npm.taobao.org/eslint-plugin-vue/download/eslint-plugin-vue-7.0.0-beta.4.tgz?cache=0&sync_timestamp=1600834523329&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Feslint-plugin-vue%2Fdownload%2Feslint-plugin-vue-7.0.0-beta.4.tgz#aa13b946702c4de1b8f7c3467698185775b11fdb"
-  integrity sha1-qhO5RnAsTeG498NGdpgYV3WxH9s=
+eslint-plugin-vue@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.npm.taobao.org/eslint-plugin-vue/download/eslint-plugin-vue-7.0.1.tgz?cache=0&sync_timestamp=1601862810095&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Feslint-plugin-vue%2Fdownload%2Feslint-plugin-vue-7.0.1.tgz#8e69a9041bb9719c018f154fdcacbb17713e0240"
+  integrity sha1-jmmpBBu5cZwBjxVP3Ky7F3E+AkA=
   dependencies:
     eslint-utils "^2.1.0"
     natural-compare "^1.4.0"
@@ -5012,10 +5012,10 @@ path-to-regexp@^1.0.0:
   dependencies:
     isarray "0.0.1"
-path-to-regexp@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.npm.taobao.org/path-to-regexp/download/path-to-regexp-6.1.0.tgz#0b18f88b7a0ce0bfae6a25990c909ab86f512427"
-  integrity sha1-Cxj4i3oM4L+uaiWZDJCauG9RJCc=
+path-to-regexp@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.npm.taobao.org/path-to-regexp/download/path-to-regexp-6.2.0.tgz?cache=0&sync_timestamp=1601400247487&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpath-to-regexp%2Fdownload%2Fpath-to-regexp-6.2.0.tgz#f7b3803336104c346889adece614669230645f38"
+  integrity sha1-97OAMzYQTDRoia3s5hRmkjBkXzg=
 path-type@^1.0.0:
   version "1.1.0"
@@ -7028,15 +7028,15 @@ vue-eslint-parser@^7.1.0:
     esquery "^1.0.1"
     lodash "^4.17.15"
-vue-i18n@^9.0.0-beta.3:
-  version "9.0.0-beta.3"
-  resolved "https://registry.npm.taobao.org/vue-i18n/download/vue-i18n-9.0.0-beta.3.tgz#8abb78f5d57fb240edfd955b098dc267e33499f3"
-  integrity sha1-irt49dV/skDt/ZVbCY3CZ+M0mfM=
+vue-i18n@^9.0.0-beta.4:
+  version "9.0.0-beta.4"
+  resolved "https://registry.npm.taobao.org/vue-i18n/download/vue-i18n-9.0.0-beta.4.tgz#a6550f6be56fd617a8ab96e26aa305329f06da02"
+  integrity sha1-plUPa+Vv1heoq5biaqMFMp8G2gI=
-vue-router@^4.0.0-beta.12:
-  version "4.0.0-beta.12"
-  resolved "https://registry.npm.taobao.org/vue-router/download/vue-router-4.0.0-beta.12.tgz?cache=0&sync_timestamp=1601131068569&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-4.0.0-beta.12.tgz#873d1bbd16882ab2ae35973e3e691412104f3914"
-  integrity sha1-hz0bvRaIKrKuNZc+PmkUEhBPORQ=
+vue-router@^4.0.0-beta.13:
+  version "4.0.0-beta.13"
+  resolved "https://registry.npm.taobao.org/vue-router/download/vue-router-4.0.0-beta.13.tgz?cache=0&sync_timestamp=1601637432000&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-4.0.0-beta.13.tgz#4611d09a9e44f231cc401ecc294a7f2dcb30e6a6"
+  integrity sha1-RhHQmp5E8jHMQB7MKUp/Lcsw5qY=
 vue@^3.0.0, vue@^3.0.0-rc.5:
   version "3.0.0"