需求是通过点击body页面,在其他地方就关闭这个<div>菜单,给这个div一个id:problemList,但是点击我打开的按钮,不关闭。

created () {
document.onclick = function () {
  // 要关闭的div的id (problemList)
document.getElementById('problemList').style.display = 'none'
}
},

点击按钮打开模态框的方法要写个阻止冒泡事件,不然会点不开

getItme() 是点击打开div的事件

// 控制问题列表的显示和关闭
getItme (e, num) {
this.stopEvent(e)
document.getElementById('problemList').style.display = 'block'
},

  

vue自己写了一个div菜单,点击按钮展开,点击其他地方关闭这个div菜单的更多相关文章

  1. 用vue.js写的一个瀑布流的组件

    用vue.js写的一个瀑布流的组件:https://segmentfault.com/a/1190000010741319 https://www.jianshu.com/p/db3cadc03402

  2. 使用 vue 仿写的一个购物商城

    在学习了 vue 之后,决定做一个小练习,仿写了一个有关购物商城的小项目.下面就对项目做一个简单的介绍. 项目源码: github 项目的目录结构 -assets 与项目有关的静态资源,包括 css, ...

  3. vue 自己写的一个日历

    样式: //quanbu全部代码 <template> <div class="priceListContent clearfix"> <!-- 顶部 ...

  4. vue elementui 写的一个后台管理页面模板

    https://github.com/PanJiaChen/vue-element-admin

  5. 原生js写的一个弧形菜单插件

    弧形菜单是一种半弧式或者全弧形菜单,是一种不同于传统横向或者竖向菜单形式的菜单.最近在网上看到好多人写出了这种效果,于是也尝试自己写了一个. 实现方式:原生态js 主要结构: 1.参数合并 var d ...

  6. vue element-ui怎样提炼一个自己写的js当作公共js

    vue element-ui怎样提炼一个自己写的js当作公共js请教一下各位大神,我刚刚触摸vue element-ui几天,写的一个清晰检索的input框,现在需当作项目公共的部分,可遭需的html ...

  7. 自己写的一个Vue

    下面这里是我自己写的一个小型的vue,原理就是proxy: //Proxy天生没有prototype,因此要加上,不然extends会报错 Proxy.prototype = Proxy.protot ...

  8. Vue.js写一个SPA登录页面的过程

    技术栈 vue.js 主框架 vuex 状态管理 vue-router 路由管理 一般过程 在一般的登录过程中,一种前端方案是: 检查状态:进入页面时或者路由变化时检查是否有登录状态(保存在cooki ...

  9. 如何写好一个vue组件,老夫的一年经验全在这了【转】 v-bind="$attrs" 和 v-on="$listeners"

    如何写好一个vue组件,老夫的一年经验全在这了 一个适用性良好的组件,一种是可配置项很多,另一种就是容易覆写,从而扩展功能 Vue 组件的 API 来自三部分——prop.事件和插槽: prop 允许 ...

随机推荐

  1. 利用Socket 客户端---->服务端 传送文件到指定路径,并返回一个友好的回馈

    首先盲写的一个传输文件的方法,但测试发现了一个非常不容易发现的问题,这里先说明一下. 错误的代码如下: package com.TCP.java; import java.io.File; impor ...

  2. [bzoj1614][Usaco2007Jan]Telephone Lines 架设电话线_二分答案_最短路

    Telephone Lines bzoj-1614 Usaco-2007Jan 题目大意:给你一个n个点m条边的带边权无向图,求最短路.可以选取k条边免费. 注释:$1\le n\le 10^3$,$ ...

  3. sqldependency类轮询功能

    System.Data.SqlClient.SqlDependency类为我们提供了一个关于sql2005的很好的功能 ,虽然这个东西限制有很多很多,但还是有很实用价值的. 我们先看一个演示例子: 例 ...

  4. 在AIX下面查询上一次命令

    在AIX下面查询上一次命令 输入 r 或者 set -o vi 用vi的操作找上一次命令: 学习了: http://blog.itpub.net/66634/viewspace-1000843/ ht ...

  5. LNMP一键安装包 V1.1 公布

    LNMP一键安装包 是一个用Linux Shell编写的能够为CentOS/RadHat.Debian/Ubuntu VPS(VDS)或独立主机安装LNMP(Nginx.MySQL/MariaDB.P ...

  6. 64位只有一种调用约定stdcall

    procedure TForm2.Button1Click(Sender: TObject); function EnumWindowsProc(Ahwnd: hwnd; AlParam: lPara ...

  7. hdu 1002(大数)

    A + B Problem II Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  8. hdoj--3339--In Action(最短路+01背包)

    In Action Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total ...

  9. 【CQOI 2009】 余数之和

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1257 [算法] k mod i = k - [k / i] * i 所以 (k mo ...

  10. html/css常用合集

    1. 消除inline-block元素间的换行间隙问题: {font-size:0;} 兼容IE6/7浏览器的方法:letter-spacing属性.   2.让两个inline-block的div顶 ...