Merge pull request #19 from bhabgs/master

添加自定义右键

package/vitevui/build/plugins.js

@@ -4,7 +4,7 @@
  * @Author: bhabgs
  * @Date: 2021-01-20 16:55:51
  * @LastEditors: bhabgs
- * @LastEditTime: 2021-02-23 11:08:58
+ * @LastEditTime: 2021-03-19 12:01:18
  */
 import typescript from '@rollup/plugin-typescript';
 import babel from '@rollup/plugin-babel';
@@ -18,7 +18,7 @@ const extensions = ['.ts', '.js', '.tsx'];
 
 export default [
   typescript({
-    lib: ['es5'], // , 'es6', 'dom'
+    lib: ['es5', 'dom'], // , 'es6', 'dom'
     target: 'es5',
     noEmitOnError: true,
   }),

package/vitevui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vitevui",
-  "version": "1.0.0-beta.7",
+  "version": "1.0.0-beta.8",
   "description": "vue3.0 ui",
   "main": "lib/index.js",
   "homepage": "https://bhabgs.github.io/vite-vui-docs/",

package/vitevui/src/directive/contextmenu/index.ts

@@ -0,0 +1,54 @@
+import { App } from 'vue';
+
+export default {
+  install(app: App) {
+    app.directive('contextmenu', {
+      beforeMount(el, b) {
+        const ul = document.createElement('ul');
+        ul.id = 'contextmenu_box';
+        const createdMenuElement = () => {
+          ul.className = 'contextmenu';
+          for (let i of b.value.menus) {
+            const text = document.createTextNode(i.name);
+            const li = document.createElement('li');
+
+            li.onclick = (e) => {
+              e.preventDefault();
+              b.value.callBack(i);
+            };
+            li.appendChild(text);
+            ul.appendChild(li);
+          }
+          el.appendChild(ul);
+        };
+        createdMenuElement();
+
+        el.style.position = 'relative';
+      },
+      mounted(el, b) {
+        let ul: HTMLElement;
+        setTimeout(() => {
+          ul = document.getElementById('contextmenu_box') as HTMLElement;
+        }, 10);
+
+        // 右键触发展示
+        el.addEventListener('contextmenu', (e: any) => {
+          const { x, y } = {
+            x: el.offsetLeft,
+            y: el.offsetTop,
+          };
+          e.preventDefault();
+          ul.className = 'contextmenu active';
+          ul.style.left = e.x - x + 'px';
+          ul.style.top = e.y - y + 'px';
+        });
+
+        // 单击box 隐藏
+        el.addEventListener('click', (e: any) => {
+          e.preventDefault();
+          ul.className = 'contextmenu';
+        });
+      },
+    });
+  },
+};

package/vitevui/src/directive/index.ts

@@ -0,0 +1,16 @@
+/*
+ * @abstract: JianJie
+ * @version: 0.0.1
+ * @Author: bhabgs
+ * @Date: 2021-03-18 11:52:08
+ * @LastEditors: bhabgs
+ * @LastEditTime: 2021-03-19 13:39:29
+ */
+import { App } from 'vue';
+import contextmenu from './contextmenu';
+
+export default {
+  install(app: App) {
+    app.use(contextmenu);
+  },
+};

package/vitevui/src/index.ts

@@ -4,9 +4,10 @@
  * @Author: bhabgs
  * @Date: 2021-01-05 14:05:58
  * @LastEditors: bhabgs
- * @LastEditTime: 2021-02-24 09:12:51
+ * @LastEditTime: 2021-03-18 11:59:35
  */
 import type { App } from 'vue';
+import directive from './directive';
 import type { baseObject } from './types';
 import viLayout from './layout/lay';
 import viLayoutHeader from './layout/lay_header';
@@ -27,6 +28,7 @@ const COMPS: baseObject = {
 const VERSION: string = '0.0.1';
 
 const install = (app: App) => {
+  app.use(directive);
   for (const key in COMPS) {
     app.use(COMPS[key]);
   }

package/vitevui/src/style/const.less

@@ -43,3 +43,20 @@
 @padding-md: @padding-base * 4;
 @padding-lg: @padding-base * 6;
 @padding-xl: @padding-base * 8;
+
+.create_rotate(@n, @i: 1) when (@i =< @n) {
+  .rotate@{i} {
+    transform: rotate(@i+0deg);
+  }
+  .create_rotate(@n, (@i + 1));
+}
+
+.create_animate(@n, @i: 1) when (@i =< @n) {
+  .animate@{i} {
+    transition: all @i*0.1 + 0s;
+  }
+  .create_animate(@n, (@i + 1));
+}
+
+.create_animate(10);
+.create_rotate(360);

package/vitevui/src/style/directive.less

@@ -0,0 +1,27 @@
+.contextmenu {
+  background-color: @white;
+  position: absolute;
+  opacity: 0;
+  margin: 0;
+  padding: 0;
+  width: 150px;
+  border-radius: 0.5rem;
+  z-index: -5;
+  .animate3();
+  &.active {
+    opacity: 1;
+    z-index: 99;
+  }
+  li {
+    list-style: none;
+    display: block;
+    font-size: 1.2rem;
+    padding: 0.3rem 1rem;
+    cursor: pointer;
+    .animate3();
+    &:hover {
+      color: @white;
+      background-color: @blue;
+    }
+  }
+}

package/vitevui/src/style/index.less

@@ -2,3 +2,4 @@
 @import './reset.less';
 @import './layout.less';
 @import './button.less';
+@import './directive.less';

package/vitevui/tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "jsx": "preserve",
     "jsxFactory": "VueTsxSupport",
-    "target": "esnext",
+    "target": "ES6",
     "module": "esnext",
     "strict": true,
     "importHelpers": true,
@@ -19,7 +19,7 @@
     "paths": {
       "@/*": ["./src/*"]
     },
-    "lib": ["esnext", "dom"],
+    "lib": ["esnext", "dom", "ES6"],
     "types": ["node"],
     "experimentalDecorators": true
   },