├── .editorconfig ├── .gitignore ├── .npmignore ├── .postcssrc.js ├── LICENSE ├── README.md ├── build ├── webpack.base.conf.js ├── webpack.dev.conf.js └── webpack.prod.conf.js ├── dist └── index.js ├── example ├── dist │ └── index.js └── src │ ├── components │ ├── doo.vue │ └── foo.vue │ ├── demo.vue │ ├── index.js │ └── style │ └── demo.css ├── index.html ├── package-lock.json ├── package.json └── src ├── index.js └── quickMenu.vue /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | 4 | # Editor directories and files 5 | .idea 6 | *.suo 7 | *.ntvs* 8 | *.njsproj 9 | *.sln 10 | 11 | 12 | .babelrc 13 | 14 | 15 | README.md 16 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .DS_STORE 2 | node_modules 3 | .gitignore 4 | .npmignore 5 | .babelrc 6 | build 7 | example 8 | webpack.config.js 9 | index.html 10 | 11 | 12 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | // to edit target browsers: use "browserslist" field in package.json 6 | "autoprefixer": {} 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 neverland 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-quick-menu [![NPM version](https://img.shields.io/npm/v/vue-quick-menu.svg)](https://www.npmjs.com/package/vue-quick-menu) 2 | 3 | > This is web navigation component base on vue2.0+. It can be used in both PC and mobile. 4 | [demo](https://ashleylv.github.io/vue-quick-menu/index.html) 5 | 6 | ## Installation 7 | 8 | ``` bash 9 | npm install vue-quick-menu --save 10 | ``` 11 | 12 | ## Usage 13 | ``` xml 14 | 15 | ``` 16 | 17 | ``` javascript 18 | import Vue from 'vue' 19 | import quickMenu from 'vue-quick-menu' 20 | 21 | export default { 22 | ... 23 | components: { 24 | quickMenu 25 | }, 26 | ... 27 | } 28 | ``` 29 | ## Props 30 | 31 | Property|Type|Default|Description 32 | ---|---|---|--- 33 | menuCount|Number|4|The number of menu item，option(2,3,4) 34 | menuUrlList|Array|-|An array of Object of link of each menu item, like {`isLink`:true,`url`:`\foo`} 35 | iconClass|Array|-|An array of icon class of each menu item 36 | position|top-left,top-right,bottom-left or bottom-right|top-left|The position of quick menu 37 | backgroundColor|String|#009dc7|The background color of quick menu 38 | color|String|#ffffff|The color of quick menu icon 39 | isOpenNewTab|Boolean|false|If the menu will open a new tab after click 40 | 41 | 42 | ## Event 43 | 44 | ### process 45 | Emitted when click a submenu which is not a link, the param is the index of the submenu. 46 | -------------------------------------------------------------------------------- /build/webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | const webpack = require("webpack"); 2 | 3 | module.exports = { 4 | module: { 5 | rules: [ 6 | { 7 | test: /\.js$/, 8 | use: [ 9 | { 10 | loader: "babel-loader", 11 | options: { 12 | presets: ["es2015", "stage-0"] 13 | } 14 | } 15 | ] 16 | }, 17 | { 18 | test: /\.vue$/, 19 | use: ["vue-loader"] 20 | } 21 | ] 22 | }, 23 | performance: { 24 | hints: false 25 | }, 26 | resolve: { 27 | extensions: [".webpack.js", ".js", ".vue", ".ts"] 28 | }, 29 | plugins: [new webpack.optimize.ModuleConcatenationPlugin()] 30 | }; 31 | -------------------------------------------------------------------------------- /build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const merge = require("webpack-merge"); 3 | const baseWebpackConfig = require("./webpack.base.conf"); 4 | 5 | module.exports = merge(baseWebpackConfig, { 6 | entry: { 7 | index: "./example/src/index.js" 8 | }, 9 | output: { 10 | path: path.resolve(__dirname, "../example/dist"), 11 | publicPath: "example/dist/", 12 | filename: "[name].js" 13 | }, 14 | devServer: { 15 | contentBase: "./", 16 | compress: true, 17 | port: 3000, 18 | stats: { 19 | assets: true, 20 | children: false, 21 | chunks: false, 22 | hash: false, 23 | modules: false, 24 | publicPath: false, 25 | timings: false, 26 | version: false, 27 | warnings: true, 28 | colors: { 29 | green: "\u001b[32m" 30 | } 31 | } 32 | } 33 | }); 34 | -------------------------------------------------------------------------------- /build/webpack.prod.conf.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const webpack = require("webpack"); 3 | const merge = require("webpack-merge"); 4 | const baseWebpackConfig = require("./webpack.base.conf"); 5 | require("shelljs/global"); 6 | 7 | env.NODE_ENV = "production"; 8 | 9 | module.exports = merge(baseWebpackConfig, { 10 | entry: { 11 | index: "./src/index.js" 12 | }, 13 | output: { 14 | path: path.resolve(__dirname, "../dist"), 15 | publicPath: "dist/", 16 | filename: "[name].js", 17 | libraryTarget: "commonjs2" 18 | }, 19 | plugins: [ 20 | new webpack.DefinePlugin({ 21 | "process.env": { 22 | NODE_ENV: JSON.stringify("production") 23 | } 24 | }) 25 | ] 26 | }); 27 | -------------------------------------------------------------------------------- /dist/index.js: -------------------------------------------------------------------------------- 1 | module.exports=function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="dist/",t(t.s=0)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(1),o=function(e){return e&&e.__esModule?e:{default:e}}(r);t.default=o.default},function(e,t,n){"use strict";function r(e){n(2)}Object.defineProperty(t,"__esModule",{value:!0});var o={name:"quickMenu",props:{menuCount:{type:Number,required:!0,default:4},iconClass:{type:Array,required:!0},menuUrlList:{type:Array,required:!0},backgroundColor:{type:String,default:"#20babb"},color:{type:String,default:"#fff"},isOpenNewTab:{type:Boolean,default:!1},position:{type:String,default:"top-left"}},computed:{openNewTab:function(){return this.isOpenNewTab?"_blank":"_self"},quickMenuStyle:function(){var e={top:"30px"},t={bottom:"30px"},n={left:"30px"},r={right:"30px"},o=this.isTop?e:t;return Object.assign(o,this.isLeft?n:r),Object.assign(o,{transform:this.isLeft?"rotate(-180deg)":"rotate(180deg)"}),o},menuStyle:function(){return{backgroundColor:this.backgroundColor,color:this.color}},subMenuStyle:function(){return{backgroundColor:this.backgroundColor,color:this.color}},isTop:function(){return!!~this.position.toLowerCase().indexOf("top")},isLeft:function(){return!!~this.position.toLowerCase().indexOf("left")}},data:function(){return{menuSize:60,subMenu4:[[["0","-160"],["-80","-138.6"],["-138.6","-80"],["-160","0"]],[["0","-160"],["80","-138.6"],["138.6","-80"],["160","0"]],[["0","160"],["138.6","80"],["80","138.6"],["160","0"]],[["-160","0"],["-138.6","80"],["-80","138.6"],["0","160"]]],subMenu3:[[["-160","0"],["-113","-113"],["0","-160"]],[["0","-160"],["113","-113"],["160","0"]],[["0","160"],["113","113"],["160","0"]],[["-160","0"],["-113","113"],["0","160"]]],subMenu2:[[["-160","0"],["0","-160"]],[["0","-160"],["160","0"]],[["0","160"],["160","0"]],[["-160","0"],["0","160"]]]}},methods:{getSubMenu:function(e){var t=4===this.menuCount?this.subMenu4:3===this.menuCount?this.subMenu3:this.subMenu2;return t=this.isTop&&this.isLeft?t[2]:this.isTop&&!this.isLeft?t[1]:!this.isTop&&this.isLeft?t[3]:t[0],{top:t[e][0]+"px",left:t[e][1]+"px"}},toggleMenu:function(e){var t=this.$refs.quickMenu,n=this.$refs.icon;~t.className.indexOf(" active")?(t.className=t.className.replace(" active",""),n.forEach(function(e,t){e.className=e.className.replace(" menu-animate","")})):(t.className+=" active",n.forEach(function(e,t){e.className+=" menu-animate"}))},mouseEnterSubMenu:function(e){"A"===e.target.tagName?e.target.style.backgroundColor=this.lightenColor(this.backgroundColor,20):"I"===e.target.tagName&&(e.target.parentElement.style.backgroundColor=this.lightenColor(this.backgroundColor,20))},mouseOutSubMenu:function(e){"A"===e.target.tagName?e.target.style.backgroundColor=this.backgroundColor:"I"===e.target.tagName&&(e.target.parentElement.style.backgroundColor=this.backgroundColor)},lightenColor:function(e,t){var n=!1;"#"===e[0]&&(e=e.slice(1),n=!0);var r=parseInt(e,16),o=(r>>16)+t;o>255?o=255:o<0&&(o=0);var a=(r>>8&255)+t;a>255?a=255:a<0&&(a=0);var i=(255&r)+t;return i>255?i=255:i<0&&(i=0),(n?"#":"")+(i|a<<8|o<<16).toString(16)}}},a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{ref:"quickMenu",staticClass:"quick-menu",style:e.quickMenuStyle},[e._l(e.menuCount,function(t){return n("div",{staticClass:"sub-menu",style:e.getSubMenu(t-1)},[n("a",{style:e.subMenuStyle,attrs:{href:e.menuUrlList[t-1],target:e.openNewTab},on:{mouseover:function(t){t.stopPropagation(),e.mouseEnterSubMenu(t)},mouseout:function(t){t.stopPropagation(),e.mouseOutSubMenu(t)}}},[n("i",{ref:"icon",refInFor:!0,class:e.iconClass[t-1]})])])}),e._v(" "),n("div",{staticClass:"menu",style:e.menuStyle},[n("div",{staticClass:"core-menu",on:{click:e.toggleMenu}},[n("div",{staticClass:"bar"})])])],2)},i=[],s={render:a,staticRenderFns:i},u=s,c=n(7),l=r,f=c(o,u,l,null,null);t.default=f.exports},function(e,t,n){var r=n(3);"string"==typeof r&&(r=[[e.i,r,""]]),r.locals&&(e.exports=r.locals);n(5)("b2d07e2a",r,!0)},function(e,t,n){t=e.exports=n(4)(void 0),t.push([e.i,'.menu-animate{-webkit-animation:bounce 1s linear 1s;animation:bounce 1s linear 1s}.quick-menu{position:fixed;right:30px}.quick-menu,.quick-menu>.menu{color:#fff;width:60px;height:60px;transition:all 1s ease}.quick-menu>.menu{display:block;position:absolute;border-radius:50%!important;text-align:center;box-shadow:0 3px 10px rgba(0,0,0,.23),0 3px 10px rgba(0,0,0,.16)}.quick-menu>.menu .core-menu{width:100%;height:100%;position:absolute;left:0;top:0;width:60px;height:60px;-webkit-transform:rotate(180deg);transform:rotate(180deg);transition:all 1s ease}.quick-menu>.menu .core-menu .bar{top:35%;margin-top:-1.5px;left:16px}.quick-menu>.menu .core-menu .bar,.quick-menu>.menu .core-menu .bar:after,.quick-menu>.menu .core-menu .bar:before{transition:all 1s ease;width:28px;height:3px;background:#fff;position:absolute;-webkit-transform-origin:0 50%;transform-origin:0 50%}.quick-menu>.menu .core-menu .bar:after,.quick-menu>.menu .core-menu .bar:before{content:"";left:0}.quick-menu>.menu .core-menu .bar:before{margin-top:30%}.quick-menu>.menu .core-menu .bar:after{margin-top:60%}.quick-menu .sub-menu{box-sizing:border-box;position:absolute;width:60px;height:60px;font-size:30px;text-align:center;border-radius:50%!important}.quick-menu .sub-menu a{outline:none;text-decoration:none;display:inline-block;border-radius:50%!important;width:100%;height:100%}.quick-menu .sub-menu a i{outline:none;font-size:30px;margin-top:12px;background:transparent}.quick-menu .sub-menu a i:before{vertical-align:middle}.quick-menu .sub-menu a:hover{cursor:pointer}.quick-menu.active{-webkit-transform:rotate(0deg)!important;transform:rotate(0deg)!important}.quick-menu.active .menu{-webkit-transform:scale(.7);transform:scale(.7)}.quick-menu.active .menu .bar{top:50%;margin-top:-1.5px;left:50%;margin-left:-12px;-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(405deg);transform:rotate(405deg)}.quick-menu.active .menu .bar:before{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(-450deg);transform:rotate(-450deg);margin-top:0}.quick-menu.active .menu .bar:after{opacity:0}@-webkit-keyframes bounce{0%,to{-webkit-transform:translateY(0)}10%{-webkit-transform:translateY(6px)}30%{-webkit-transform:translateY(-4px)}70%{-webkit-transform:translateY(3px)}90%{-webkit-transform:translateY(-2px)}}@keyframes bounce{0%,to{-webkit-transform:translateY(0);transform:translateY(0)}10%{-webkit-transform:translateY(6px);transform:translateY(6px)}30%{-webkit-transform:translateY(-4px);transform:translateY(-4px)}70%{-webkit-transform:translateY(3px);transform:translateY(3px)}90%{-webkit-transform:translateY(-2px);transform:translateY(-2px)}}',""])},function(e,t,n){"use strict";function r(e,t){var n=e[1]||"",r=e[3];if(!r)return n;if(t&&"function"==typeof btoa){var a=o(r);return[n].concat(r.sources.map(function(e){return"/*# sourceURL="+r.sourceRoot+e+" */"})).concat([a]).join("\n")}return[n].join("\n")}function o(e){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e))))+" */"}e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var n=r(t,e);return t[2]?"@media "+t[2]+"{"+n+"}":n}).join("")},t.i=function(e,n){"string"==typeof e&&(e=[[null,e,""]]);for(var r={},o=0;on.parts.length&&(r.parts.length=n.parts.length)}else{for(var i=[],o=0;o 2 |
3 | component {{doo}} 4 |
5 | 6 | -------------------------------------------------------------------------------- /example/src/components/foo.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /example/src/demo.vue: -------------------------------------------------------------------------------- 1 | 160 | 161 | 202 | 203 | 207 | -------------------------------------------------------------------------------- /example/src/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import VueRouter from 'vue-router' 3 | import Demo from './demo.vue' 4 | import doo from './components/doo.vue' 5 | import foo from './components/foo.vue' 6 | 7 | Vue.use(VueRouter) 8 | const routes = [ 9 | { path: '/foo', component: foo }, 10 | { path: '/doo', component: doo } 11 | ] 12 | const router = new VueRouter({ 13 | routes 14 | }) 15 | new Vue({ 16 | el: '#demo', 17 | router, 18 | render: h => h(Demo) 19 | }); 20 | -------------------------------------------------------------------------------- /example/src/style/demo.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v3.0.2 | MIT License | git.io/normalize */ 2 | /** 1. Set default font family to sans-serif. 2. Prevent iOS text size adjust after orientation change, without disabling user zoom. */ 3 | html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } 4 | 5 | /** Remove default margin. */ 6 | body { margin: 0; } 7 | 8 | /* HTML5 display definitions ========================================================================== */ 9 | /** Correct `block` display not defined for any HTML5 element in IE 8/9. Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. Correct `block` display not defined for `main` in IE 11. */ 10 | article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } 11 | 12 | /** 1. Correct `inline-block` display not defined in IE 8/9. 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */ 13 | audio, canvas, progress, video { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } 14 | 15 | /** Prevent modern browsers from displaying `audio` without controls. Remove excess height in iOS 5 devices. */ 16 | audio:not([controls]) { display: none; height: 0; } 17 | 18 | /** Address `[hidden]` styling not present in IE 8/9/10. Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. */ 19 | [hidden], template { display: none; } 20 | 21 | /* Links ========================================================================== */ 22 | /** Remove the gray background color from active links in IE 10. */ 23 | a { background-color: transparent; } 24 | 25 | /** Improve readability when focused and also mouse hovered in all browsers. */ 26 | a:active, a:hover { outline: 0; } 27 | 28 | /* Text-level semantics ========================================================================== */ 29 | /** Address styling not present in IE 8/9/10/11, Safari, and Chrome. */ 30 | abbr[title] { border-bottom: 1px dotted; } 31 | 32 | /** Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */ 33 | b, strong { font-weight: bold; } 34 | 35 | /** Address styling not present in Safari and Chrome. */ 36 | dfn { font-style: italic; } 37 | 38 | /** Address variable `h1` font-size and margin within `section` and `article` contexts in Firefox 4+, Safari, and Chrome. */ 39 | h1 { font-size: 2em; margin: 0.67em 0; } 40 | 41 | /** Address styling not present in IE 8/9. */ 42 | mark { background: #ff0; color: #000; } 43 | 44 | /** Address inconsistent and variable font size in all browsers. */ 45 | small { font-size: 80%; } 46 | 47 | /** Prevent `sub` and `sup` affecting `line-height` in all browsers. */ 48 | sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } 49 | 50 | sup { top: -0.5em; } 51 | 52 | sub { bottom: -0.25em; } 53 | 54 | /* Embedded content ========================================================================== */ 55 | /** Remove border when inside `a` element in IE 8/9/10. */ 56 | img { border: 0; } 57 | 58 | /** Correct overflow not hidden in IE 9/10/11. */ 59 | svg:not(:root) { overflow: hidden; } 60 | 61 | /* Grouping content ========================================================================== */ 62 | /** Address margin not present in IE 8/9 and Safari. */ 63 | figure { margin: 1em 40px; } 64 | 65 | /** Address differences between Firefox and other browsers. */ 66 | hr { box-sizing: content-box; height: 0; } 67 | 68 | /** Contain overflow in all browsers. */ 69 | pre { overflow: auto; } 70 | 71 | /** Address odd `em`-unit font size rendering in all browsers. */ 72 | code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } 73 | 74 | /* Forms ========================================================================== */ 75 | /** Known limitation: by default, Chrome and Safari on OS X allow very limited styling of `select`, unless a `border` property is set. */ 76 | /** 1. Correct color not being inherited. Known issue: affects color of disabled elements. 2. Correct font properties not being inherited. 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */ 77 | button, input, optgroup, select, textarea { color: inherit; /* 1 */ font: inherit; /* 2 */ margin: 0; /* 3 */ } 78 | 79 | /** Address `overflow` set to `hidden` in IE 8/9/10/11. */ 80 | button { overflow: visible; } 81 | 82 | /** Address inconsistent `text-transform` inheritance for `button` and `select`. All other form control elements do not inherit `text-transform` values. Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. Correct `select` style inheritance in Firefox. */ 83 | button, select { text-transform: none; } 84 | 85 | /** 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls. 2. Correct inability to style clickable `input` types in iOS. 3. Improve usability and consistency of cursor style between image-type `input` and others. */ 86 | button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ } 87 | 88 | /** Re-set default cursor for disabled elements. */ 89 | button[disabled], html input[disabled] { cursor: default; } 90 | 91 | /** Remove inner padding and border in Firefox 4+. */ 92 | button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } 93 | 94 | /** Address Firefox 4+ setting `line-height` on `input` using `!important` in the UA stylesheet. */ 95 | input { line-height: normal; } 96 | 97 | /** It's recommended that you don't attempt to style these elements. Firefox's implementation doesn't respect box-sizing, padding, or width. 1. Address box sizing set to `content-box` in IE 8/9/10. 2. Remove excess padding in IE 8/9/10. */ 98 | input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } 99 | 100 | /** Fix the cursor style for Chrome's increment/decrement buttons. For certain `font-size` values of the `input`, it causes the cursor style of the decrement button to change from `default` to `text`. */ 101 | input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } 102 | 103 | /** 1. Address `appearance` set to `searchfield` in Safari and Chrome. 2. Address `box-sizing` set to `border-box` in Safari and Chrome (include `-moz` to future-proof). */ 104 | input[type="search"] { -webkit-appearance: textfield; /* 1 */ /* 2 */ box-sizing: content-box; } 105 | 106 | /** Remove inner padding and search cancel button in Safari and Chrome on OS X. Safari (but not Chrome) clips the cancel button when the search input has padding (and `textfield` appearance). */ 107 | input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } 108 | 109 | /** Define consistent border, margin, and padding. */ 110 | fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } 111 | 112 | /** 1. Correct `color` not being inherited in IE 8/9/10/11. 2. Remove padding so people aren't caught out if they zero out fieldsets. */ 113 | legend { border: 0; /* 1 */ padding: 0; /* 2 */ } 114 | 115 | /** Remove default vertical scrollbar in IE 8/9/10/11. */ 116 | textarea { overflow: auto; } 117 | 118 | /** Don't inherit the `font-weight` (applied by a rule above). NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */ 119 | optgroup { font-weight: bold; } 120 | 121 | /* Tables ========================================================================== */ 122 | /** Remove most spacing between table cells. */ 123 | table { border-collapse: collapse; border-spacing: 0; } 124 | 125 | td, th { padding: 0; } 126 | 127 | .highlight table td { padding: 5px; } 128 | 129 | .highlight table pre { margin: 0; } 130 | 131 | .highlight .cm { color: #999988; font-style: italic; } 132 | 133 | .highlight .cp { color: #999999; font-weight: bold; } 134 | 135 | .highlight .c1 { color: #999988; font-style: italic; } 136 | 137 | .highlight .cs { color: #999999; font-weight: bold; font-style: italic; } 138 | 139 | .highlight .c, .highlight .cd { color: #999988; font-style: italic; } 140 | 141 | .highlight .err { color: #a61717; background-color: #e3d2d2; } 142 | 143 | .highlight .gd { color: #000000; background-color: #ffdddd; } 144 | 145 | .highlight .ge { color: #000000; font-style: italic; } 146 | 147 | .highlight .gr { color: #aa0000; } 148 | 149 | .highlight .gh { color: #999999; } 150 | 151 | .highlight .gi { color: #000000; background-color: #ddffdd; } 152 | 153 | .highlight .go { color: #888888; } 154 | 155 | .highlight .gp { color: #555555; } 156 | 157 | .highlight .gs { font-weight: bold; } 158 | 159 | .highlight .gu { color: #aaaaaa; } 160 | 161 | .highlight .gt { color: #aa0000; } 162 | 163 | .highlight .kc { color: #000000; font-weight: bold; } 164 | 165 | .highlight .kd { color: #000000; font-weight: bold; } 166 | 167 | .highlight .kn { color: #000000; font-weight: bold; } 168 | 169 | .highlight .kp { color: #000000; font-weight: bold; } 170 | 171 | .highlight .kr { color: #000000; font-weight: bold; } 172 | 173 | .highlight .kt { color: #445588; font-weight: bold; } 174 | 175 | .highlight .k, .highlight .kv { color: #000000; font-weight: bold; } 176 | 177 | .highlight .mf { color: #009999; } 178 | 179 | .highlight .mh { color: #009999; } 180 | 181 | .highlight .il { color: #009999; } 182 | 183 | .highlight .mi { color: #009999; } 184 | 185 | .highlight .mo { color: #009999; } 186 | 187 | .highlight .m, .highlight .mb, .highlight .mx { color: #009999; } 188 | 189 | .highlight .sb { color: #d14; } 190 | 191 | .highlight .sc { color: #d14; } 192 | 193 | .highlight .sd { color: #d14; } 194 | 195 | .highlight .s2 { color: #d14; } 196 | 197 | .highlight .se { color: #d14; } 198 | 199 | .highlight .sh { color: #d14; } 200 | 201 | .highlight .si { color: #d14; } 202 | 203 | .highlight .sx { color: #d14; } 204 | 205 | .highlight .sr { color: #009926; } 206 | 207 | .highlight .s1 { color: #d14; } 208 | 209 | .highlight .ss { color: #990073; } 210 | 211 | .highlight .s { color: #d14; } 212 | 213 | .highlight .na { color: #008080; } 214 | 215 | .highlight .bp { color: #999999; } 216 | 217 | .highlight .nb { color: #0086B3; } 218 | 219 | .highlight .nc { color: #445588; font-weight: bold; } 220 | 221 | .highlight .no { color: #008080; } 222 | 223 | .highlight .nd { color: #3c5d5d; font-weight: bold; } 224 | 225 | .highlight .ni { color: #800080; } 226 | 227 | .highlight .ne { color: #990000; font-weight: bold; } 228 | 229 | .highlight .nf { color: #990000; font-weight: bold; } 230 | 231 | .highlight .nl { color: #990000; font-weight: bold; } 232 | 233 | .highlight .nn { color: #555555; } 234 | 235 | .highlight .nt { color: #000080; } 236 | 237 | .highlight .vc { color: #008080; } 238 | 239 | .highlight .vg { color: #008080; } 240 | 241 | .highlight .vi { color: #008080; } 242 | 243 | .highlight .nv { color: #008080; } 244 | 245 | .highlight .ow { color: #000000; font-weight: bold; } 246 | 247 | .highlight .o { color: #000000; font-weight: bold; } 248 | 249 | .highlight .w { color: #bbbbbb; } 250 | 251 | .highlight { background-color: #f8f8f8; } 252 | 253 | * { box-sizing: border-box; } 254 | 255 | body { padding: 0; margin: 0; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.5; color: #606c71; } 256 | 257 | a { color: #1e6bb8; text-decoration: none; } 258 | a:hover { text-decoration: underline; } 259 | 260 | .btn { display: inline-block; margin-bottom: 1rem; color: rgba(255, 255, 255, 0.7); background-color: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); border-style: solid; border-width: 1px; border-radius: 0.3rem; transition: color 0.2s, background-color 0.2s, border-color 0.2s; } 261 | .btn:hover { color: rgba(255, 255, 255, 0.8); text-decoration: none; background-color: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.3); } 262 | .btn + .btn { margin-left: 1rem; } 263 | @media screen and (min-width: 64em) { .btn { padding: 0.75rem 1rem; } } 264 | @media screen and (min-width: 42em) and (max-width: 64em) { .btn { padding: 0.6rem 0.9rem; font-size: 0.9rem; } } 265 | @media screen and (max-width: 42em) { .btn { display: block; width: 100%; padding: 0.75rem; font-size: 0.9rem; } 266 | .btn + .btn { margin-top: 1rem; margin-left: 0; } } 267 | 268 | .page-header { color: #fff; text-align: center; background-color: #159957; background-image: linear-gradient(120deg, #155799, #159957); } 269 | @media screen and (min-width: 64em) { .page-header { padding: 5rem 6rem; } } 270 | @media screen and (min-width: 42em) and (max-width: 64em) { .page-header { padding: 3rem 4rem; } } 271 | @media screen and (max-width: 42em) { .page-header { padding: 2rem 1rem; } } 272 | 273 | .project-name { margin-top: 0; margin-bottom: 0.1rem; } 274 | @media screen and (min-width: 64em) { .project-name { font-size: 3.25rem; } } 275 | @media screen and (min-width: 42em) and (max-width: 64em) { .project-name { font-size: 2.25rem; } } 276 | @media screen and (max-width: 42em) { .project-name { font-size: 1.75rem; } } 277 | 278 | .project-tagline { margin-bottom: 2rem; font-weight: normal; opacity: 0.7; } 279 | @media screen and (min-width: 64em) { .project-tagline { font-size: 1.25rem; } } 280 | @media screen and (min-width: 42em) and (max-width: 64em) { .project-tagline { font-size: 1.15rem; } } 281 | @media screen and (max-width: 42em) { .project-tagline { font-size: 1rem; } } 282 | 283 | .main-content { word-wrap: break-word; } 284 | .main-content :first-child { margin-top: 0; } 285 | @media screen and (min-width: 64em) { .main-content { max-width: 64rem; padding: 2rem 6rem; margin: 0 auto; font-size: 1.1rem; } } 286 | @media screen and (min-width: 42em) and (max-width: 64em) { .main-content { padding: 2rem 4rem; font-size: 1.1rem; } } 287 | @media screen and (max-width: 42em) { .main-content { padding: 2rem 1rem; font-size: 1rem; } } 288 | .main-content img { max-width: 100%; } 289 | .main-content h1, .main-content h2, .main-content h3, .main-content h4, .main-content h5, .main-content h6 { margin-top: 2rem; margin-bottom: 1rem; font-weight: normal; color: #159957; } 290 | .main-content p { margin-bottom: 1em; } 291 | .main-content code { padding: 2px 4px; font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 0.9rem; color: #567482; background-color: #f3f6fa; border-radius: 0.3rem; } 292 | .main-content pre { padding: 0.8rem; margin-top: 0; margin-bottom: 1rem; font: 1rem Consolas, "Liberation Mono", Menlo, Courier, monospace; color: #567482; word-wrap: normal; background-color: #f3f6fa; border: solid 1px #dce6f0; border-radius: 0.3rem; } 293 | .main-content pre > code { padding: 0; margin: 0; font-size: 0.9rem; color: #567482; word-break: normal; white-space: pre; background: transparent; border: 0; } 294 | .main-content .highlight { margin-bottom: 1rem; } 295 | .main-content .highlight pre { margin-bottom: 0; word-break: normal; } 296 | .main-content .highlight pre, .main-content pre { padding: 0.8rem; overflow: auto; font-size: 0.9rem; line-height: 1.45; border-radius: 0.3rem; -webkit-overflow-scrolling: touch; } 297 | .main-content pre code, .main-content pre tt { display: inline; max-width: initial; padding: 0; margin: 0; overflow: initial; line-height: inherit; word-wrap: normal; background-color: transparent; border: 0; } 298 | .main-content pre code:before, .main-content pre code:after, .main-content pre tt:before, .main-content pre tt:after { content: normal; } 299 | .main-content ul, .main-content ol { margin-top: 0; } 300 | .main-content blockquote { padding: 0 1rem; margin-left: 0; color: #819198; border-left: 0.3rem solid #dce6f0; } 301 | .main-content blockquote > :first-child { margin-top: 0; } 302 | .main-content blockquote > :last-child { margin-bottom: 0; } 303 | .main-content table { display: block; width: 100%; overflow: auto; word-break: normal; word-break: keep-all; -webkit-overflow-scrolling: touch; } 304 | .main-content table th { font-weight: bold; } 305 | .main-content table th, .main-content table td { padding: 0.5rem 1rem; } 306 | .main-content .props th, .main-content .props td {border:1px solid #dce6f0; } 307 | .main-content dl { padding: 0; } 308 | .main-content dl dt { padding: 0; margin-top: 1rem; font-size: 1rem; font-weight: bold; } 309 | .main-content dl dd { padding: 0; margin-bottom: 1rem; } 310 | .main-content hr { height: 2px; padding: 0; margin: 1rem 0; background-color: #eff0f1; border: 0; } 311 | 312 | .site-footer { padding-top: 2rem; margin-top: 2rem; border-top: solid 1px #eff0f1; } 313 | @media screen and (min-width: 64em) { .site-footer { font-size: 1rem; } } 314 | @media screen and (min-width: 42em) and (max-width: 64em) { .site-footer { font-size: 1rem; } } 315 | @media screen and (max-width: 42em) { .site-footer { font-size: 0.9rem; } } 316 | 317 | .site-footer-owner { display: block; font-weight: bold; } 318 | 319 | .site-footer-credits { color: #819198; } 320 | select{min-width: 194px} -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | vue-quick-menu 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-quick-menu", 3 | "version": "1.0.6", 4 | "description": "This is web navigation component base on Vue.js", 5 | "author": "ashleylv ", 6 | "private": false, 7 | "main": "dist/index.js", 8 | "scripts": { 9 | "dev": "node_modules/.bin/webpack-dev-server --config ./build/webpack.dev.conf.js", 10 | "build:doc": "webpack -p --hide-modules --config ./build/webpack.dev.conf.js", 11 | "build": "webpack -p --hide-modules --config ./build/webpack.prod.conf.js", 12 | "release": "bash ./build/release.sh" 13 | }, 14 | "dependencies": { 15 | "font-awesome": "^4.7.0", 16 | "less": "^2.7.2", 17 | "less-loader": "^4.0.5", 18 | "style-loader": "^0.18.2", 19 | "vue": "^2.3.3" 20 | }, 21 | "devDependencies": { 22 | "babel-core": "^6.24.1", 23 | "babel-loader": "^7.0.0", 24 | "babel-preset-es2015": "^6.24.1", 25 | "babel-preset-stage-0": "^6.24.1", 26 | "css-loader": "^0.28.0", 27 | "del": "^3.0.0", 28 | "shelljs": "^0.7.7", 29 | "vue-loader": "^13.0.2", 30 | "vue-template-compiler": "^2.3.0", 31 | "webpack": "^3.3.0", 32 | "webpack-dev-server": "^2.4.5", 33 | "webpack-merge": "^4.1.0", 34 | "vue-router": "^2.8.1" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import quickMenu from './quickMenu.vue' 2 | export default quickMenu; -------------------------------------------------------------------------------- /src/quickMenu.vue: -------------------------------------------------------------------------------- 1 | 20 | 173 | --------------------------------------------------------------------------------