移除 vue-click-outside & 完善示例

CyberNika · Nov 4, 2017 · f43eb55 · f43eb55
1 parent 3dde06b
commit f43eb55
Show file tree

Hide file tree

Showing 16 changed files with 454 additions and 65 deletions.
diff --git a/examples/App.vue b/examples/App.vue
@@ -1,38 +1,87 @@
 <template>
   <div id="app">
-    <v-contextmenu ref="contextmenu">
-      <v-contextmenu-item @click="handleClick">菜单1</v-contextmenu-item>
-      <v-contextmenu-item @click="handleClick">菜单2</v-contextmenu-item>
+    <header>
+      <h1>v-contextmenu</h1>
 
-      <v-contextmenu-item divider></v-contextmenu-item>
+      <p>适用于 Vue 2.0 的 ContextMenu 组件。</p>
+    </header>
 
-      <v-contextmenu-submenu title="子菜单">
-        <v-contextmenu-item @click="handleClick">菜单3</v-contextmenu-item>
+    <nav>
+      <h3>示例</h3>
+      <ul class="nav-list">
+        <li
+          :key="item.id"
+          :class="{
+            'nav-item': true,
+            'active': item.id === currentExample,
+          }"
+          @click="changeExample(item.id)"
+          v-for="item of examples">
+          {{ item.label }}
+        </li>
+      </ul>
+    </nav>
 
-        <v-contextmenu-item divider></v-contextmenu-item>
-
-        <v-contextmenu-submenu title="子菜单">
-          <v-contextmenu-item @click="handleClick">菜单5</v-contextmenu-item>
-        </v-contextmenu-submenu>
-
-        <v-contextmenu-item @click="handleClick">菜单4</v-contextmenu-item>
-      </v-contextmenu-submenu>
-    </v-contextmenu>
-
-    <div class="box" v-contextmenu:contextmenu></div>
+    <main class="showground">
+      <div class="example-title">
+        「{{ exampleTitle }}」示例
+      </div>
+      <component :is="currentExample"></component>
+    </main>
   </div>
 </template>
 
 <script>
-  import '../dist'
-  import '../dist/assets/styles/index.css'
+  import Simple from './Simple.vue'
+  import Submenu from './Submenu.vue'
+  import Divider from './Divider.vue'
+  import CustomerShow from './CustomerShow.vue'
+  import CustomerEvent from './CustomerEvent.vue'
 
   export default {
     name: 'app',
 
+    components: {
+      Simple,
+      Submenu,
+      Divider,
+      CustomerShow,
+      CustomerEvent,
+    },
+
+    computed: {
+      exampleTitle () {
+        return this.examples.find(item => item.id === this.currentExample).label
+      },
+    },
+
+    data () {
+      return {
+        currentExample: window.location.hash.slice(1) || 'simple',
+
+        examples: [{
+          id: 'simple',
+          label: '基础菜单',
+        }, {
+          id: 'divider',
+          label: '分割线',
+        }, {
+          id: 'submenu',
+          label: '子菜单',
+        }, {
+          id: 'customerEvent',
+          label: '自定义事件',
+        }, {
+          id: 'customerShow',
+          label: '手动显示',
+        }],
+      }
+    },
+
     methods: {
-      handleClick (event, vm) {
-        console.log(event, vm)
+      changeExample (value) {
+        this.currentExample = value
+        window.location.hash = value
       },
     },
   }
@@ -45,4 +94,78 @@
     background-color: #f2f2f2;
     border: 1px solid #eee;
   }
+
+  .nav-list {
+    padding: 0 8px;
+    margin: 0;
+    border-radius: 2px;
+    background-color: #ef5350;
+    white-space: nowrap;
+    overflow-x: auto;
+    list-style: none;
+  }
+
+  .nav-item {
+    position: relative;
+    display: inline-block;
+    padding: 8px;
+    color: rgba(255, 255, 255, 0.75);
+    cursor: pointer;
+  }
+
+  .nav-item:hover,
+  .nav-item.active {
+    font-weight: normal;
+    color: #fff;
+  }
+
+  .nav-item + .nav-item::before {
+    content: "";
+    position: absolute;
+    top: 12px;
+    left: 0;
+    width: 0;
+    height: 18px;
+    border-left: 1px solid rgba(222, 222, 222, 0.5);
+  }
+
+  .showground {
+    margin-top: 20px;
+    border-radius: 2px;
+    overflow: hidden;
+  }
+
+  .example-title {
+    height: 36px;
+    border-bottom: 1px solid #e2e2e2;
+    line-height: 36px;
+    text-align: center;
+    background-color: #e8e8e8;
+  }
+</style>
+
+<style>
+  body {
+    color: #333;
+    font-weight: lighter;
+    font-size: 16px;
+    line-height: 1.5;
+  }
+
+  ::selection {
+    color: #fff;
+    background-color: #ef5350;
+  }
+
+  .box {
+    background-color: #f2f2f2;
+    /*border-radius: 2px;*/
+    height: 80px;
+    line-height: 80px;
+    text-align: center;
+  }
+
+  .box + .box {
+    border-top: 1px solid #e2e2e2;
+  }
 </style>
diff --git a/examples/CustomerEvent.vue b/examples/CustomerEvent.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="example">
+    <v-contextmenu ref="contextmenu" event-type="click">
+      <v-contextmenu-item @click="handleClick">菜单1</v-contextmenu-item>
+      <v-contextmenu-item @click="handleClick">菜单2</v-contextmenu-item>
+      <v-contextmenu-item @click="handleClick">菜单3</v-contextmenu-item>
+    </v-contextmenu>
+
+    <v-contextmenu ref="dbContextmenu" event-type="dblclick">
+      <v-contextmenu-item @click="handleClick">菜单1</v-contextmenu-item>
+      <v-contextmenu-item divider></v-contextmenu-item>
+      <v-contextmenu-item @click="handleClick">菜单2</v-contextmenu-item>
+      <v-contextmenu-item @click="handleClick">菜单3</v-contextmenu-item>
+    </v-contextmenu>
+
+    <!-- <v-contextmenu ref="touchContextmenu" event-type="touchstart">
+      <v-contextmenu-item>菜单1</v-contextmenu-item>
+      <v-contextmenu-item @click="handleClick">菜单2</v-contextmenu-item>
+      <v-contextmenu-item @click="handleClick">菜单3</v-contextmenu-item>
+    </v-contextmenu> -->
+
+    <div class="box" v-contextmenu:contextmenu>
+      左键点击此区域
+    </div>
+
+    <div class="box" v-contextmenu:dbContextmenu>
+      左键双击此区域
+    </div>
+
+    <!-- <div class="box" v-contextmenu:touchContextmenu>
+      触摸此区域
+    </div> -->
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'CustomerEvent',
+
+    methods: {
+      handleClick (event, vm) {
+        alert(`「${vm.$slots.default[0].text}」被点击啦！`)
+      },
+      handleShow () {
+        console.log('show')
+      },
+    },
+  }
+</script>
+
+<style scoped>
+  .box {
+    width: 100%;
+  }
+</style>
diff --git a/examples/CustomerShow.vue b/examples/CustomerShow.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="example">
+    <div class="buttons">
+      <button type="button" @click="handleShow">显示</button>
+      <button type="button" @click="handleHide">隐藏</button>
+    </div>
+    <div class="box" ref="box">
+      展示区域
+
+      <v-contextmenu ref="contextmenu">
+        <v-contextmenu-item>菜单1</v-contextmenu-item>
+        <v-contextmenu-item divider></v-contextmenu-item>
+        <v-contextmenu-item>菜单2</v-contextmenu-item>
+        <v-contextmenu-item>菜单3</v-contextmenu-item>
+      </v-contextmenu>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'CustomerShow',
+
+    methods: {
+      handleShow () {
+        const postition = {
+          top: Math.random() * this.$refs.box.clientHeight,
+          left: Math.random() * this.$refs.box.clientWidth,
+        }
+        this.$refs.contextmenu.show(postition)
+      },
+      handleHide() {
+        this.$refs.contextmenu.hide()
+      },
+    },
+  }
+</script>
+
+<style scoped>
+  .buttons {
+    padding: 5px 10px;
+    background-color: #f2f2f2;
+  }
+
+  .box {
+    position: relative;
+    width: 100%;
+    height: 120px;
+    line-height: 120px;
+  }
+</style>
diff --git a/examples/Divider.vue b/examples/Divider.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="example">
+    <v-contextmenu ref="contextmenu">
+      <v-contextmenu-item @click="handleClick">菜单1-1</v-contextmenu-item>
+      <v-contextmenu-item @click="handleClick">菜单1-2</v-contextmenu-item>
+
+      <v-contextmenu-item divider></v-contextmenu-item>
+
+      <v-contextmenu-item @click="handleClick">菜单2-1</v-contextmenu-item>
+      <v-contextmenu-item @click="handleClick">菜单2-2</v-contextmenu-item>
+
+      <v-contextmenu-item divider></v-contextmenu-item>
+
+      <v-contextmenu-item @click="handleClick">菜单3-1</v-contextmenu-item>
+    </v-contextmenu>
+
+    <div class="box" v-contextmenu:contextmenu>
+      右键点击此区域
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'Divider',
+
+    methods: {
+      handleClick (event, vm) {
+        console.log(event, vm)
+      },
+    },
+  }
+</script>
+
+<style scoped>
+  .box {
+    width: 100%;
+  }
+</style>
diff --git a/examples/Simple.vue b/examples/Simple.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="example">
+    <v-contextmenu ref="contextmenu">
+      <v-contextmenu-item @click="handleClick">菜单1</v-contextmenu-item>
+      <v-contextmenu-item @click="handleClick">菜单2</v-contextmenu-item>
+      <v-contextmenu-item @click="handleClick">菜单3</v-contextmenu-item>
+    </v-contextmenu>
+
+    <div class="box" v-contextmenu:contextmenu>
+      右键点击此区域
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'Simple',
+
+    methods: {
+      handleClick (event, vm) {
+        alert(`「${vm.$slots.default[0].text}」被点击啦！`)
+      },
+    },
+  }
+</script>
+
+<style scoped>
+  .box {
+    width: 100%;
+  }
+</style>