站长资源网络编程

<div class="canvas" @mouseout ="update">
  {{ x }} - {{ y }}
</div>
new Vue({
el:".vue-app",
 data:{
  age: 25,
 x:0,
 y:0
 },
 methods:{
 add:function(inc){
  this.age += inc;
 },
 subtract:function(dec){
  this.age -= dec ;
 },
 update:function(event){
 // console.log(event);
  this.x = event.offsetX;
  this.y = event.offsetY;
 }
 }
}); 

<!-- 阻止事件继续传播 -->
<p v-on:mousemove.stop> Stop </p>
 
<!-- 点击事件将只会触发一次 -->
<button class=" btn btn-info" v-on:click.once="add(1)"> + + </button>
 
 <!--点击 A 链接弹出提示内容，不再重载页面 -->
<p><a v-on:click.prevent ="alert() " href="http://blog.023xs.cn" rel="external nofollow" >blog.023xs.cn</a></p>

<!-- 用户输入内容时，按下Enter 键才会触发事件 -->
<input v-on:keyup.enter="Email" type="text" class="form-control" placeholder="Email">
 
<!-- 用户输入内容时，按下删除”或“退格”键 键才会触发事件 -->
<input v-on:keyup.delete="Email" type="text" class="form-control" placeholder="Email">

 <div class="grid-content">
 <el-button 
　　　　v-for="(item,index) in items" :key="index" 
　　 @click="storageCount(item.id)" 
　　 @dblclick.native="storageDetail(item.id)" 
　　　 class="inline-cell" 
　　 :class="colors[item.status]">
   {{item.id}}</el-button>
 </div>

<script>
import desDialog from './dialog';
import detailDialog from './detailDialog';
var time = null; // 在这里定义time 为null 
export default {
 name: 'storeTable',
 components: {
 desDialog,
 detailDialog
 },
 props: ['providerid'],
 data() {
 return {
  colors: ['space', 'isBuy'],
  showDialog: false,
  showDialogT: false
 };
 },
 methods: {
　　// 单击事件函数
 storageCount(id) {
  clearTimeout(time); //首先清除计时器
  time = setTimeout(() => {
  this.showDialog = !this.showDialog; 
  const obj = {};
  obj.cutname = id;
  obj.providerid = this.providerid;
  this.$store.dispatch('GetStorageCount', obj);
  }, 300); //大概时间300ms
 },
　　// 双击事件函数，清除计时器，直接处理逻辑
 storageDetail(id) {
  clearTimeout(time); //清除
  this.showDialogT = !this.showDialogT;
  const obj = {};
  obj.cutname = id;
  obj.providerid = this.providerid;
  this.$store.dispatch('GetStorageDetail', obj);
 },
 close() {
  this.showDialog = false;
 },
 closeT() {
  this.showDialogT = false;
 }
 }
};
</script>