问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

谁有vue.js城市三级联动菜单啊

头像
Ming_Up
    34576384

    1.想做一个vue.js 的一个三级的城市下拉联动菜单,但是不知道没有数据，不知道怎么实现点击document实现菜单隐藏的效果，望大神指点！！！

    vue.js
    阅读 14.4k
    4 个回答
    得票最新
    头像
    mpccc
      61621228

      mint-ui上有省市区的吧选择吧

      头像
      agui1989
        4.6k17153196
        头像
        四月的桜和猫
          3.3k53055

          点击document实现菜单隐藏

          <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单选</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
    <style>
        #app{
            width: 500px;
            margin: auto;
            height:800px;
            border: 1px solid #2a6496;
        }
        .modal{
            background: rgba(0,0,0,.2);
        }
        .menu{
            width: 80%;
            height:100%;
            background: #fff;
            font-size: 20px;
            line-height: 400px;
        }


    </style>
</head>
<body>
<div id="app"  v-on:click.self="menu()" :class="{modal:(isMenu==true)}">
  <div class="menu" v-show="isMenu">
       我是菜单
  </div>
</div>
</body>
<script src="../../vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
   var vm= new Vue({
        el: "#app",
        data(){
            return{
                isMenu:true
            }
        },
        methods: {
         menu:function () {
             this.isMenu=false
         }
        }
    })
</script>
</html>
          头像
          已注销
            542
            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题