初步完成开发

README.md

@@ -1,3 +1,10 @@
+<!--
+ * @Author: isJDongYa
+ * @LastEditors: isJDongYa
+ * @Date: 2020-12-07 19:31:31
+ * @LastEditTime: 2020-12-08 16:02:18
+ * @Description: 
+-->
 # jd-moremsg
 
 ## Project setup
@@ -7,7 +14,7 @@ npm install
 
 ### Compiles and hot-reloads for development
 ```
-npm run serve
+npm run dev
 ```
 
 ### Compiles and minifies for production

src/App.vue → examples/App.vue

@@ -1,17 +1,21 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
+    <jd-moremsg text="bbbbb" :setup="{
+      background:'#ddd'
+    }"
+    :follow="true"
+    >
+      aaaa
+    </jd-moremsg>
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
-import HelloWorld from './components/HelloWorld.vue';
 
 @Component({
   components: {
-    HelloWorld,
+
   },
 })
 export default class App extends Vue {}

examples/main.ts

@@ -0,0 +1,19 @@
+/*
+ * @Author: isJDongYa
+ * @LastEditors: isJDongYa
+ * @Date: 2020-12-07 19:31:18
+ * @LastEditTime: 2020-12-08 12:58:26
+ * @Description: 
+ */
+import Vue from 'vue'
+import App from './App.vue'
+
+import Lib from '../lib'
+
+Vue.use(Lib)
+
+Vue.config.productionTip = false
+
+new Vue({
+  render: h => h(App),
+}).$mount('#app')

examples/shims-vue.d.ts

@@ -0,0 +1,11 @@
+/*
+ * @Author: isJDongYa
+ * @LastEditors: isJDongYa
+ * @Date: 2020-12-07 19:31:18
+ * @LastEditTime: 2020-12-08 10:10:14
+ * @Description: 
+ */
+declare module '*.vue' {
+  import Vue from 'vue'
+  export default Vue
+}

lib/MoreMsg/MoreMsg.vue

@@ -0,0 +1,148 @@
+<!--
+ * @Author: isJDongYa
+ * @LastEditors: isJDongYa
+ * @Date: 2020-12-07 16:32:14
+ * @LastEditTime: 2020-12-08 15:59:36
+ * @Description: 显示更多信息
+-->
+<template>
+  <div 
+    class="more-msg"
+    @mouseenter="showMoreText" 
+    @mouseleave="closeMoreText"
+    @mousemove="moveMoreText"
+  >
+    <slot></slot>
+    <div 
+      class="more-msg-contain" 
+      v-show="isShow"
+      ref="moreMsg"
+      :style="Object.assign(
+        {width: computedSetup.width, height: computedSetup.height, background: computedSetup.background },
+        position
+      )"
+    >
+      <slot name="custom"></slot>
+      {{ text }}
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { VueConstructor } from 'vue';
+import { Vue, Component, Prop } from 'vue-property-decorator'
+
+import { Setup } from '@lib/types'
+
+@Component
+export default class MoreMsg extends Vue {
+
+  private winWidth:number = document.body.clientWidth;
+  private winHeigh:number = document.body.clientHeight;
+  private isShow:boolean = false;
+  private timer:number = 0;
+  private position:{
+    left:string;
+    top:string;
+  } = {
+    left: '-40000px',
+    top: '-20000px',
+  };
+  private moreTextWidth:number = 0;
+  private moreTextHeight:number =  0;
+
+  public install: any = undefined;
+
+  private defaultSetup:Setup = {
+        duration: 3000,
+        width: 'auto',
+        height: 'auto',
+        background: '#fff'
+  }
+
+  @Prop({default: ''}) private text?:string;
+  @Prop({default: false}) private show?:boolean;
+  @Prop() 
+  private setup?:Setup;
+  @Prop({default: false}) private follow?:boolean;
+
+    public get computedSetup():Setup {
+      return Object.assign(this.defaultSetup, this.setup)
+    }
+
+
+    public showMoreText(e:MouseEvent):void {
+      const duration = this.computedSetup?.duration;
+      this.isShow = true;
+      this.$nextTick(() => {
+        this.moreTextWidth = (this.$refs.moreMsg as HTMLElement).offsetWidth
+        this.moreTextHeight = (this.$refs.moreMsg as HTMLElement).offsetHeight
+        this.isShow = false
+      })
+
+      this.timer = setTimeout(() => {
+        this.isShow = true  
+      }, duration);
+
+    };
+
+    public moveMoreText(e:MouseEvent):void {
+      if(this.follow) {
+        this.setPosition(e)
+      } else {
+        if (!this.isShow) {
+          this.setPosition(e)
+        }
+      }
+    };
+
+    public setPosition(e:MouseEvent):void {
+      let offset = 10
+      let isRight = true
+      let isBottom = true
+      if(this.winWidth < e.clientX + offset + this.moreTextWidth) {
+        isRight = false
+      }
+      if (this.winHeigh < e.clientY + offset + this.moreTextHeight) {
+        isBottom = false
+      }
+
+      if (isRight) {
+        this.position.left = e.clientX + offset + 'px'
+      } else {
+        this.position.left = e.clientX - this.moreTextWidth - offset + 'px'
+      }
+
+      if (isBottom) {
+        this.position.top = e.clientY + offset + 'px'
+      } else {
+        this.position.top = e.clientY - this.moreTextHeight - offset + 'px'
+      } 
+    };
+
+    public closeMoreText(e:MouseEvent):void {
+      if(this.timer) {
+        clearTimeout(this.timer)
+      }
+      this.isShow = false
+    };
+
+    public mounted():void {
+      window.addEventListener('resize' , () => {
+        this.winWidth = document.body.clientWidth
+        this.winHeigh = document.body.clientHeight
+      })
+    };
+
+}
+
+</script>
+<style lang="less" scoped>
+.more-msg-contain {
+  position: fixed;
+  border-radius: 8px;
+  font-size: 16px;
+  background-color: #fff;
+  padding: 10px;
+  overflow: hidden;
+}
+</style>

lib/MoreMsg/index.ts

@@ -0,0 +1,17 @@
+/*
+ * @Author: isJDongYa
+ * @LastEditors: isJDongYa
+ * @Date: 2020-12-07 20:12:17
+ * @LastEditTime: 2020-12-08 14:54:35
+ * @Description: 
+ */
+
+import { VueConstructor } from 'vue/types/vue';
+
+import MoreMsg from './MoreMsg.vue';
+
+ MoreMsg.install = (Vue: VueConstructor) => {
+  Vue.component('jd-'+MoreMsg.name.toLowerCase(), MoreMsg);
+ };
+
+ export default MoreMsg;

lib/index.ts

@@ -0,0 +1,35 @@
+/*
+ * @Author: isJDongYa
+ * @LastEditors: isJDongYa
+ * @Date: 2020-12-07 20:09:45
+ * @LastEditTime: 2020-12-08 11:51:47
+ * @Description: 
+ */
+import { ComponentOptions, VueConstructor } from 'vue';
+import MoreMsg from './MoreMsg';
+
+const components: {
+  [index:string]: VueConstructor
+} = {
+  MoreMsg
+};
+
+const install = (Vue:VueConstructor, options?:ComponentOptions<Vue>) => {
+
+  for (const key in components) {
+    if (components.hasOwnProperty(key)) {
+      const component = components[key];
+      Vue.component('jd-' + component.name.toLowerCase(), component)
+    }
+  }
+
+}
+
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue)
+}
+
+export default {
+  install,
+  ...components
+}

lib/types/index.d.ts

@@ -0,0 +1,26 @@
+/*
+ * @Author: isJDongYa
+ * @LastEditors: isJDongYa
+ * @Date: 2020-12-08 10:22:07
+ * @LastEditTime: 2020-12-08 14:06:44
+ * @Description: 
+ */
+
+import Vue from 'vue';
+import Vue, { ComponentOptions } from 'vue'
+
+declare module 'vue/types/vue' {
+  // 可以使用 `VueConstructor` 接口
+  // 来声明全局 property
+  interface VueConstructor {
+    install: (Vue:VueConstructor, options?: ComponentOptions<Vue>) => void;
+
+  }
+}
+
+export interface Setup {
+  duration?:number;
+  width?:string;
+  height?:string;
+  background?:string;
+}

package.json

@@ -1,11 +1,20 @@
 {
   "name": "jd-moremsg",
   "version": "0.1.0",
-  "private": true,
+  "main": "dist/common.umd.min.js",
+  "license": "MIT",
+  "private": false,
+  "author": "isJDongYa",
+  "description": "",
+  "keywords": ["vue", "more", "message", "component"],
+  "repository": {
+
+  },
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "dev": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "test:unit": "vue-cli-service test:unit"
+    "test:unit": "vue-cli-service test:unit",
+    "lib": "vue-cli-service build --target lib --name jd-moremsg --dest dist lib/index.js"
   },
   "dependencies": {
     "core-js": "^3.6.5",