init commit

imaxing · Nov 3, 2022 · 876818a · 876818a
commit 876818a
Show file tree

Hide file tree

Showing 9 changed files with 627 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+.DS_Store
+node_modules
+dist
diff --git a/.npmrc b/.npmrc
@@ -0,0 +1 @@
+registry = "https://registry.npmjs.com/"
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 葛星
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,37 @@
+# 动态挂载 vue 示例
+
+> 无论是否选择了文件, 关闭后自动移除 input element
+
+#### Installtion
+
+```bash
+npm i dnamic-mount
+```
+
+#### Usage
+
+```js
+import Vue from "vue";
+import useDnamicMount from "use-dnamic-mount";
+
+Vue.use(useDnamicMount(), {
+  name: "$renderButton",
+  extend: {
+    data: () => ({ text: "" }),
+    render(h) {
+      return h("button", this.text);
+    },
+  },
+});
+
+this.$renderButton({ text: "hello world" });
+```
+
+#### Options
+
+| 参数名    | 说明                 | 默认值 |
+| --------- | -------------------- | ------ | -------------- |
+| name      | 方法名               | \*     | $dnamicMount   |
+| extend    | 挂载的组件 (必填)    | -      | -              |
+| nextTick  | 挂载后的回调         | -      | -              |
+| className | 挂载节点自定义 class | -      | dnamic-element |
diff --git a/index.html b/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
+    <script src="dist/index.umd.js"></script>
+    <style>
+      #app {
+        width: 400px;
+        height: 400px;
+        border: 1px solid #000;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app">
+      <button @click="handleTest">测试挂载</button>
+    </div>
+    <div id="message-app"></div>
+    <script>
+      const dnamicMount = useDnamicMount();
+      Vue.use(dnamicMount, {
+        name: "$message",
+        extend: {
+          data: () => ({ text: "" }),
+          render(h) {
+            return h("button", this.text);
+          },
+        },
+      });
+      new Vue({
+        el: "#app",
+        methods: {
+          handleTest() {
+            this.$message({ text: "哈哈哈" + Date.now() });
+          },
+        },
+      });
+    </script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "use-dnamic-mount",
+  "version": "1.0.0",
+  "main": "dist/index.esm.js",
+  "module": "dist/index.esm.js",
+  "browser": "dist/index.umd.js",
+  "dependencies": {},
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^11.0.1",
+    "@rollup/plugin-node-resolve": "^7.0.0",
+    "rollup": "^1.29.0",
+    "rollup-plugin-terser": "7.0.2"
+  },
+  "keywords": [
+    "dnamic mount",
+    "动态挂载vue组件"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c -w"
+  },
+  "files": [
+    "dist/index.esm.js",
+    "dist/index.umd.js",
+    "package.json",
+    "README.md"
+  ]
+}
diff --git a/rollup.config.js b/rollup.config.js
@@ -0,0 +1,24 @@
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import { terser } from "rollup-plugin-terser";
+import pkg from "./package.json";
+
+export default [
+  {
+    input: "src/main.js",
+    output: {
+      name: "useDnamicMount",
+      file: pkg.browser,
+      format: "umd",
+    },
+    plugins: [terser()],
+  },
+  {
+    input: "src/main.js",
+    output: [
+      { file: pkg.main, format: "cjs" },
+      { file: pkg.module, format: "es" },
+    ],
+    plugins: [resolve(), commonjs(), terser()],
+  },
+];
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,39 @@
+export default () => ({
+  install(Vue, config = {}) {
+    const {
+      name = "$dnamicMount",
+      className = "dnamic-element",
+      extend,
+      nextTick,
+    } = config;
+    if (!extend) return;
+    Vue.prototype[name] = (options) => {
+      const DnamicComponentConstructor = Vue.extend(extend);
+      const app = new DnamicComponentConstructor({
+        data: () => ({
+          ...options,
+          destroy: () => {
+            app.$el.remove();
+            app.$destroy();
+          },
+        }),
+      });
+
+      const div = document.createElement("div");
+      div.className = className;
+      document.body.appendChild(div);
+      app.$mount(div);
+
+      nextTick && app.$nextTick(nextTick);
+      return {
+        app,
+        close: () => app.close && app.close(),
+        component: () => app.$refs.component,
+        destroy: () => {
+          app.$el.remove();
+          app.$destroy();
+        },
+      };
+    };
+  },
+});