1.0.6, 把DOM挂载到了body下面

Author: javaLuo

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@vue/babel-preset-jsx"]
+}

dist/main.js

@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import App from './src/app.vue';
+import App from './src/app';
 
 Vue.config.productionTip = false;
 

example/main.js

@@ -21,11 +21,17 @@ export default {
   components: {
     AuthModelMy
   },
+  mounted() {
+    // AuthModelMy({
+    //   show: this.show
+    // });
+  },
   methods: {
     onTest() {
       this.show = true;
     },
     onTestClose() {
+      console.log("出发：", this.show);
       this.show = false;
     }
   }

example/src/app.vue

@@ -1,6 +1,6 @@
 {
   "name": "vue-puzzle-vcode",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "vue 滑动拼图验证码",
   "main": "dist/main.js",
   "scripts": {
@@ -33,6 +33,8 @@
     "@babel/plugin-transform-runtime": "^7.2.0",
     "@babel/polyfill": "^7.0.0",
     "@babel/runtime": "^7.2.0",
+    "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0-beta.3",
+    "@vue/babel-preset-jsx": "^1.0.0-beta.3",
     "autoprefixer": "^9.4.3",
     "babel-loader": "^8.0.4",
     "babel-plugin-import": "^1.11.0",

example/src/assets/1.jpg

@@ -1,6 +1,7 @@
 <template>
   <!-- 本体部分 -->
-  <div :class="['vue-puzzle-vcode', {'show': show}]"
+  <div :id="id"
+       :class="['vue-puzzle-vcode', {'show': show}]"
        @mousedown="onCloseMouseDown"
        @mouseup="onCloseMouseUp">
     <div class="vue-auth-box"
@@ -81,6 +82,7 @@ export default {
   },
   /** 父级参数 **/
   props: {
+    id: { type: String },
     canvasWidth: { type: Number, default: 310 }, // 主canvas的宽
     canvasHeight: { type: Number, default: 160 }, // 主canvas的高
     // 是否出现，由父级控制
@@ -105,12 +107,17 @@ export default {
 
   /** 生命周期 **/
   mounted() {
+    document.body.appendChild(this.$el);
     document.addEventListener("mousemove", this.onRangeMouseMove, false);
     document.addEventListener("mouseup", this.onRangeMouseUp, false);
+    if (this.show) {
+      document.body.classList.add("vue-puzzle-overflow");
+    }
     this.reset();
   },
   beforeDestroy() {
     clearTimeout(this.timer1);
+    document.body.removeChild(this.$el);
     document.removeEventListener("mousemove", this.onRangeMouseMove, false);
     document.removeEventListener("mouseup", this.onRangeMouseUp, false);
   },
@@ -120,7 +127,10 @@ export default {
     show(newV) {
       // 每次出现都应该重新初始化
       if (newV) {
+        document.body.classList.add("vue-puzzle-overflow");
         this.reset();
+      } else {
+        document.body.classList.remove("vue-puzzle-overflow");
       }
     }
   },
@@ -625,4 +635,7 @@ export default {
     }
   }
 }
+.vue-puzzle-overflow {
+  overflow: hidden !important;
+}
 </style>

package.json

@@ -1,2 +1,24 @@
-import App from './app.vue';
-export default App;
+// import Vue from 'vue';
+import Component from './app.vue';
+
+export default Component;
+// export default new Vue({
+//   props: {
+//     show: { type: Boolean, defalut: false },
+//   },
+//   beforeCreate() {
+//     const body = document.body;
+//     const bindPhone = document.getElementById('vue-puzzle-code-dom') || document.createElement('div');
+
+//     bindPhone.setAttribute('id', 'vue-puzzle-code-temp');
+//     body.appendChild(bindPhone);
+//   },
+//   render: h => {
+//     return h(Component, {
+//       props: {
+//         id: 'vue-puzzle-code-dom',
+//         show: show,
+//       },
+//     });
+//   },
+// }).$mount('#vue-puzzle-code-temp');

src/app.vue

@@ -14,7 +14,7 @@ module.exports = {
     publicPath: '/dist/',
     library: 'vue-puzzle-vcode',
     libraryTarget: 'umd',
-    umdNamedDefine: true,
+    // umdNamedDefine: true,
   },
   externals: {
     vue: 'vue',
@@ -28,7 +28,7 @@ module.exports = {
       },
       {
         // .js .jsx用babel解析
-        test: /\.js?$/,
+        test: /\.(js|jsx)?$/,
         use: ['babel-loader'],
         include: path.resolve(__dirname, 'src'),
       },