这篇文章主要为大家详细介绍了 vue.js 下拉菜单组件的编写方法, 文中示例代码介绍的非常详细, 具有一定的参考价值, 感兴趣的小伙伴们可以参考一下
1, 入口页面 index.html
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>
- 可从外部关闭的下拉菜单
- </title>
- <link rel="stylesheet" type="text/CSS" href="style.css">
- </head>
- <body>
- <div id="app" v-cloak>
- <div v-clickoutside="handleClose">
- <button @click="show = !show">
- 点击显示下拉菜单
- </button>
- <div v-show="show">
- <p>
- 下拉框的内容, 点击外面区域可以关闭
- </p>
- </div>
- </div>
- </div>
- <script src="https://unpkg.com/vue/dist/vue.js">
- </script>
- <script src="clickoutside.js">
- </script>
- <script src="index.js">
- </script>
- </body>
- </HTML>
2, 根实例 index.JS
- var App = new Vue({
- el: '#app',
- data: {
- show: false
- },
- methods: {
- handleClose () {
- this.show = false;
- }
- }
- });
3, 下拉框组件 clickoutside.JS
- Vue.directive('clickoutside',{
- bind: function (el, binding, vnode) {
- function documentHandler(e) {
- if(el.contains(e.target)){
- return false;
- }
- if(binding.expression){
- binding.value(e);
- }
- }
- el.__vueClickOutside__ = documentHandler;
- document.addEventListener('click',documentHandler);
- },
- unbind: function (el, binding) {
- document.removeEventListener('click', el.__vueClickOutside__);
- delete el.__vueClickOutside__;
- }
- });
4, 样式表
- [v-cloak]{
- display: none;
- }
- .main{
- width: 125px;
- }
- button{
- display: block;
- width: 100%;
- color: #fff;
- background-color: #39f;
- border: 0;
- padding: 6px;
- text-align: center;
- font-size: 12px;
- border-radius: 4px;
- cursor: pointer;
- outline: none;
- position: relative;
- }
- button:active{
- top:1px;
- left: 1px;
- }
- .dropdown{
- width:100%;
- height: 150px;
- margin: 5px 0;
- font-size: 12px;
- background-color: #fff;
- border-radius: 4px;
- box-shadow: 0 1px 6px rgba(0,0,0,.2);
- }
- .dropdown p{
- display: inline-block;
- padding: 6px;
- }
来源: http://www.css88.com/qa/vue-js/15995.html