需求是通过点击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. SIM300命令参考

    开机命令   AT+CFUN=1,1          //此命令可以开启simcom模块的大部分功能,一般在初始化模块的时候都要写上: AT&F                        ...

  2. Tkinter之Label

    最近要弄弄以前想弄的东东了, 所以图形界面不可少,,TKinter, 就用它了, 简单,满足要求. #coding: utf8 from Tkinter import * def tklabel(ev ...

  3. CODEVS——T 1297 硬币

    http://www.codevs.cn/problem/1297/  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解       题目描述 Descrip ...

  4. 完毕port模型

    完毕port模型过程例如以下: 1.调用CreateIoCompletionPort函数创建完毕port. HANDLE CompletionPort=CreateIoCompletionStatus ...

  5. 使用excel进行数据挖掘(2)----分析关键影响因素

    使用excel进行数据挖掘(2)----分析关键影响因素 在配置环境后,能够使用excel进行数据挖掘. 环境配置问题可參阅: http://blog.csdn.net/xinxing__8185/a ...

  6. SE955 激光扫描头设置 通过SSI串口进行设置

    扫描头是能够进行配置的,使其支持与禁用某些条码类型,设置有两种方式,一种是扫一下相应的设置条码,还有一种是通过SSI(simple serial interface)来设置,以下就讲一下SSI的设置方 ...

  7. 公布IOS产品被拒后怎样再上传新公布包

    问题描写叙述: 前两天提交公司产品2.0.7版本号到苹果审核,昨天提示被拒绝. 被拒原因就不描写叙述了. 我们经过改动后.又一次打包上传,但是怎么也提交不了.由于在苹果后台上已经存在2.0.7版本号的 ...

  8. Android中验证输入是否为汉字及手机号,邮箱验证,IP地址可用port号验证

    1,验证是否为汉字 // 验证昵称 private boolean verifyNickname() { String nickname = edt_username.getText().toStri ...

  9. 关系型数据库与HBase的数据储存方式差别

    现在Bigtable型(列族)数据库应用越来越广,功能也非常强大. 可是非常多人还是把它当做关系型数据库在使用,用原来关系型数据库的思维建表.存储.查询. 本文以hbase举例讲述数据模式的变化. 传 ...

  10. hdu 1235 统计同成绩学生人数

    import java.util.Scanner; public class Main { public static void main(String[] args) { Scanner sc = ...