├── .babelrc ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── LICENSE ├── README.md ├── README_en.md ├── build └── gh-pages.js ├── docs ├── images │ ├── gallery.gif │ └── gallery.jpg └── usage.md ├── examples ├── App.vue ├── index.html ├── main.js └── webpack.config.js ├── package-lock.json ├── package.json ├── rollup.config.js ├── src ├── components │ ├── EffectDropdown.vue │ └── EffectDropdownItem.vue ├── index.js ├── styles │ ├── dropdown.styl │ ├── fonts │ │ ├── iconfont.eot │ │ ├── iconfont.svg │ │ ├── iconfont.ttf │ │ └── iconfont.woff │ ├── iconfont.styl │ ├── index.styl │ └── variables.styl └── utils │ └── index.js └── test ├── index.spec.js └── jest.conf.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { "modules": false }], 4 | "stage-3" 5 | ], 6 | "env": { 7 | "test": { 8 | "plugins": ["transform-es2015-modules-commonjs", "dynamic-import-node"] 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | build/*.js 2 | *.config.js 3 | dist/ 4 | test/ 5 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parser: 'babel-eslint', 4 | parserOptions: { 5 | sourceType: 'module' 6 | }, 7 | env: { 8 | browser: true, 9 | }, 10 | extends: 'airbnb-base', 11 | plugins: [ 12 | 'html' 13 | ], 14 | rules: { 15 | 'import/resolver': { 16 | node: { extensions: [ '.js', '.mjs' ] } 17 | }, 18 | 'import/extensions': ['error', 'always', { 19 | js: 'never', 20 | vue: 'never' 21 | }], 22 | 'import/no-extraneous-dependencies': ['error', { 23 | optionalDependencies: ['test/unit/index.js'] 24 | }], 25 | 'import/prefer-default-export': 0, 26 | 'space-before-function-paren': ['error', 'always'], 27 | 'consistent-return': 0, 28 | 'no-unused-expressions': ['error', { allowShortCircuit: true }], 29 | 'object-shorthand': ['error', 'always', { avoidQuotes: false }], 30 | 'max-len': ['error', 120], 31 | 'global-require': 0, 32 | 'import/no-dynamic-require': 0, 33 | semi: ['error', 'never'], 34 | 'no-restricted-syntax': [ 35 | 'error', 36 | 'ForInStatement', 37 | 'LabeledStatement', 38 | 'WithStatement', 39 | ], 40 | 'no-plusplus': ['error', { allowForLoopAfterthoughts: true }], 41 | 'class-methods-use-this': 0, 42 | 'object-curly-newline': ['error', { consistent: true }], 43 | }, 44 | globals: {} 45 | } 46 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | npm-debug.log 4 | yarn-error.log 5 | 6 | # Editor directories and files 7 | .idea 8 | *.suo 9 | *.ntvs* 10 | *.njsproj 11 | *.sln 12 | 13 | # package output 14 | dist/ 15 | sites/ 16 | coverage/ 17 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 XBT1 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 | # effect-dropdown-vue 2 | 3 | [![NPM version][badge-npm-version]][url-npm] 4 | [![Node version][badge-node-version]][url-npm] 5 | [![NPM download][badge-npm-download]][url-npm] 6 | ![Dependencies][badge-dependencies] 7 | ![License][badge-license] 8 | 9 | [![NPM][image-npm]][url-npm] 10 | 11 | Simple effects for Dropdown based on Vue.js。 12 | 13 | **中文 | [English](./README_en.md)** 14 | 15 | ## 安装 16 | 17 | ```bash 18 | $ npm i -S effect-dropdown-vue # yarn add effect-dropdown-vue 19 | ``` 20 | 21 | ## 概览 22 | 23 | ![概览](./docs/images/gallery.gif) 24 | 25 | [访问在线示例](https://xbt1.github.io/effect-dropdown-vue/) 26 | 27 | ## 使用 28 | 29 | 一个简单的例子 30 | 31 | ```javascript 32 | import EffectDropdown from 'effect-dropdown-vue' 33 | import 'effect-dropdown-vue/dist/index.css' 34 | 35 | Vue.use(EffectDropdown) 36 | ``` 37 | 38 | ```html 39 | 49 | ``` 50 | 51 | 详细使用方法见 [文档](./docs/usage.md) & [例子](./examples) 52 | 53 | ## React 54 | 55 | [查看 React 版本](https://xbt1.github.io/effect-dropdown-react/) 56 | 57 | ## 开发 58 | 59 | ```bash 60 | $ npm install 61 | $ npm run dev 62 | ``` 63 | 64 | ## 构建 65 | 66 | ```bash 67 | $ npm run build:package # 构建 npm 包 68 | $ npm run build:example # 构建示例站点 69 | $ npm run build # build:package & build:example 70 | ``` 71 | 72 | ## 更新日志 73 | 74 | 详见 [releases][url-releases] 75 | 76 | 77 | [badge-npm-version]: https://img.shields.io/npm/v/effect-dropdown-vue.svg 78 | [badge-node-version]: https://img.shields.io/node/v/effect-dropdown-vue.svg 79 | [badge-npm-download]: https://img.shields.io/npm/dt/effect-dropdown-vue.svg 80 | [badge-license]: https://img.shields.io/github/license/XBT1/effect-dropdown-vue.svg 81 | [badge-dependencies]: https://img.shields.io/david/dev/XBT1/effect-dropdown-vue.svg 82 | 83 | [url-npm]: https://npmjs.org/package/effect-dropdown-vue 84 | [url-dependencies]: https://david-dm.org/vkbansal/effect-dropdown-vue 85 | [url-releases]: https://github.com/XBT1/effect-dropdown-vue/releases 86 | 87 | [image-npm]: https://nodei.co/npm/effect-dropdown-vue.png 88 | -------------------------------------------------------------------------------- /README_en.md: -------------------------------------------------------------------------------- 1 | # effect-dropdown-vue 2 | 3 | [![NPM version][badge-npm-version]][url-npm] 4 | [![Node version][badge-node-version]][url-npm] 5 | [![NPM download][badge-npm-download]][url-npm] 6 | ![Dependencies][badge-dependencies] 7 | ![License][badge-license] 8 | 9 | [![NPM][image-npm]][url-npm] 10 | 11 | Simple effects for Dropdown based on Vue.js。 12 | 13 | **English | [中文](./README.md)** 14 | 15 | ## Installation 16 | 17 | ```bash 18 | $ npm i -S effect-dropdown-vue # yarn add effect-dropdown-vue 19 | ``` 20 | 21 | ## Gallery 22 | 23 | ![Gallery](./docs/images/gallery.gif) 24 | 25 | [Go to online examples](https://xbt1.github.io/effect-dropdown-vue/) 26 | 27 | ## Usage 28 | 29 | A simple example 30 | 31 | ```javascript 32 | import EffectDropdown from 'effect-dropdown-vue' 33 | import 'effect-dropdown-vue/dist/index.css' 34 | 35 | Vue.use(EffectDropdown) 36 | ``` 37 | 38 | ```html 39 | 49 | ``` 50 | 51 | See [usage](./docs/usage-en.md) & [examples](./examples) for more details. 52 | 53 | ## React 54 | 55 | [See React version](https://xbt1.github.io/effect-dropdown-react/) 56 | 57 | ## Develop 58 | 59 | ```bash 60 | $ npm install 61 | $ npm run dev 62 | ``` 63 | 64 | ## Build 65 | 66 | ```bash 67 | $ npm run build:package # Build for npm 68 | $ npm run build:example # Build for site 69 | $ npm run build # build:package & build:example 70 | ``` 71 | 72 | ## Changelog 73 | 74 | See [releases][url-releases] 75 | 76 | 77 | [badge-npm-version]: https://img.shields.io/npm/v/effect-dropdown-vue.svg 78 | [badge-node-version]: https://img.shields.io/node/v/effect-dropdown-vue.svg 79 | [badge-npm-download]: https://img.shields.io/npm/dt/effect-dropdown-vue.svg 80 | [badge-license]: https://img.shields.io/github/license/XBT1/effect-dropdown-vue.svg 81 | [badge-dependencies]: https://img.shields.io/david/dev/XBT1/effect-dropdown-vue.svg 82 | 83 | [url-npm]: https://npmjs.org/package/effect-dropdown-vue 84 | [url-dependencies]: https://david-dm.org/vkbansal/effect-dropdown-vue 85 | [url-releases]: https://github.com/XBT1/effect-dropdown-vue/releases 86 | 87 | [image-npm]: https://nodei.co/npm/effect-dropdown-vue.png 88 | -------------------------------------------------------------------------------- /build/gh-pages.js: -------------------------------------------------------------------------------- 1 | const ghpages = require('gh-pages') 2 | 3 | ghpages.publish('sites', (err) => { 4 | err && console.log(err) 5 | }) 6 | -------------------------------------------------------------------------------- /docs/images/gallery.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CyberNika/effect-dropdown-vue/dac10e3729b1f4e1549bdeaaee2de38a7332f28f/docs/images/gallery.gif -------------------------------------------------------------------------------- /docs/images/gallery.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CyberNika/effect-dropdown-vue/dac10e3729b1f4e1549bdeaaee2de38a7332f28f/docs/images/gallery.jpg -------------------------------------------------------------------------------- /docs/usage.md: -------------------------------------------------------------------------------- 1 | # effect-dropdown-vue 2 | 3 | ## 概览 4 | 5 | 包含如下组件： 6 | 7 | - [`EffectDropdown`](#effectdropdown) 8 | - [`EffectDropdownItem`](#effectdropdownitem) 9 | 10 | ## 组件 11 | 12 | ### `EffectDropdown` 13 | 14 | 根组件 15 | 16 | **Attributes** 17 | 18 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 19 | | ----------- | ---------------- | ------ | ----- | ---------- | 20 | | effect | 效果类型 | String | 见下 `EFFECT_LIST` | simple | 21 | | label | 标题 | String | -- | -- | 22 | | gutter | 激活时选项之间间隔 | Number | -- | 5 | 23 | | activeColor | 激活时主色 | String | 标准 css 颜色值 | #fc756f | 24 | | raiseLabel | 激活时 label 是否有 3d 效果 | Boolean | true / false | false | 25 | | autoHide | 点击外部或选项后是否自动隐藏 | Boolean | true / false | true | 26 | 27 | - `EFFECT_LIST` 取值 28 | - `simple`（默认） 29 | - `random` 30 | - `camber` 31 | - `stagger` 32 | - `fence` 33 | 34 | ### `EffectDropdownItem` 35 | 36 | 单个选项，只能在 `EffectDropdown` 下使用 37 | 38 | **Attributes** 39 | 40 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 41 | | ----------- | ----------- | ------- | ----- | ---------- | 42 | | label | 选项内容 | String | -- | -- | 43 | | disabled | 是否禁用 | Boolean | true / false | false | 44 | 45 | **Events** 46 | 47 | | 事件名称 | 说明 | 回调参数 | 48 | | ---------- | ----------------------- | ----------- | 49 | | click | 选项被点击时触发的事件 | 第一个参数是 `vm`, 第二个参数是该选项的 `event` | 50 | | mouseenter | 鼠标移动到选项上时触发的事件 | 第一个参数是 `vm`, 第二个参数是该选项的 `event` | 51 | | mouseleave | 鼠标从选项上离开时触发的事件 | 第一个参数是 `vm`, 第二个参数是该选项的 `event` | 52 | 53 | **Slots** 54 | 55 | | Slot 名 | 说明 | 56 | | -------- | ------------------ | 57 | | default | 选项内容 `label` 属性二选一 | 58 | 59 | ### 自定义样式 60 | 61 | 可自行根据 `classnames` 进行样式覆盖 62 | 63 | - `effect-dropdown`: 根元素 64 | - `effect-dropdown--active`: 根元素-激活状态 65 | - `effect-dropdown__label`: 标题 66 | - `effect-dropdown__label--raise`: 标题-激活时具有 3d 效果 67 | - `effect-dropdown__content`: 选项容器 68 | - `effect-dropdown-item`: 单个选项 69 | - `effect-dropdown-item--disabled`: 单个选项禁用状态 70 | - `effect-dropdown-item--simple`: 单个选项-simple 效果 71 | - `effect-dropdown-item--random`: 单个选项-random 效果 72 | - `effect-dropdown-item--camber`: 单个选项-camber 效果 73 | - `effect-dropdown-item--stagger`: 单个选项-stagger 效果 74 | - `effect-dropdown-item--fence`: 单个选项-fence 效果 75 | 76 | -------------------------------------------------------------------------------- /examples/App.vue: -------------------------------------------------------------------------------- 1 | 208 | 209 | 218 | 219 | 327 | 328 | 340 | -------------------------------------------------------------------------------- /examples/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | effect-dropdown 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | import EffectDropdown from '../src' 5 | import '../src/styles/index.styl' 6 | 7 | // import EffectDropdown from 'effect-dropdown-vue' 8 | // import 'effect-dropdown-vue/dist/index.css' 9 | 10 | Vue.use(EffectDropdown) 11 | 12 | new Vue({ // eslint-disable-line no-new 13 | el: '#app', 14 | render: h => h(App), 15 | }) 16 | -------------------------------------------------------------------------------- /examples/webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var webpack = require('webpack') 3 | 4 | module.exports = { 5 | entry: './examples/main.js', 6 | output: { 7 | path: path.resolve(__dirname, '../sites'), 8 | publicPath: '', 9 | filename: 'build.js' 10 | }, 11 | module: { 12 | rules: [ 13 | { 14 | test: /\.css$/, 15 | use: [ 16 | 'vue-style-loader', 17 | 'css-loader' 18 | ], 19 | }, 20 | { 21 | test: /\.styl$/, 22 | loader: 'style-loader!css-loader!stylus-loader', 23 | exclude: /node_modules/ 24 | }, 25 | { 26 | test: /\.vue$/, 27 | loader: 'vue-loader', 28 | }, 29 | { 30 | test: /\.js$/, 31 | loader: 'babel-loader', 32 | exclude: /node_modules/ 33 | }, 34 | { 35 | test: /\.(png|jpg|gif|svg)$/, 36 | loader: 'file-loader', 37 | options: { 38 | name: '[name].[ext]?[hash]' 39 | } 40 | }, 41 | { 42 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 43 | loader: 'url-loader', 44 | query: { 45 | limit: 10000, 46 | name: 'fonts/[name].[hash:7].[ext]' 47 | } 48 | } 49 | ] 50 | }, 51 | resolve: { 52 | alias: { 53 | 'vue$': 'vue/dist/vue.esm.js' 54 | }, 55 | extensions: ['*', '.js', '.vue', '.json'] 56 | }, 57 | devServer: { 58 | historyApiFallback: true, 59 | noInfo: true, 60 | overlay: true 61 | }, 62 | performance: { 63 | hints: false 64 | }, 65 | devtool: '#eval-source-map' 66 | } 67 | 68 | if (process.env.NODE_ENV === 'production') { 69 | module.exports.devtool = '#source-map' 70 | // http://vue-loader.vuejs.org/en/workflow/production.html 71 | module.exports.plugins = (module.exports.plugins || []).concat([ 72 | new webpack.DefinePlugin({ 73 | 'process.env': { 74 | NODE_ENV: '"production"' 75 | } 76 | }), 77 | new webpack.optimize.UglifyJsPlugin({ 78 | sourceMap: true, 79 | compress: { 80 | warnings: false 81 | } 82 | }), 83 | new webpack.LoaderOptionsPlugin({ 84 | minimize: true 85 | }) 86 | ]) 87 | } 88 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "effect-dropdown-vue", 3 | "description": "Simple effects for Dropdown based on Vue.js", 4 | "version": "1.0.1", 5 | "author": "XBT1 ", 6 | "license": "MIT", 7 | "main": "dist/index.common.js", 8 | "files": [ 9 | "src", 10 | "dist" 11 | ], 12 | "keywords": [ 13 | "vue", 14 | "dropdown", 15 | "vue-component", 16 | "vue-dropdown", 17 | "effects" 18 | ], 19 | "scripts": { 20 | "dev": "cross-env NODE_ENV=development webpack-dev-server --config examples/webpack.config.js --content-base examples/ --hot", 21 | "build": "npm run build:package & npm run build:example", 22 | "build:package": "rm -fr dist && rollup -c && stylus src/styles/index.styl --out dist", 23 | "build:example": "rm -fr sites && cross-env NODE_ENV=production webpack --config examples/webpack.config.js --progress --hide-modules && cp examples/index.html sites", 24 | "prepublishOnly": "npm run lint && npm run build:package", 25 | "lint": "eslint --ext .js,.vue src", 26 | "lint:fix": "eslint --ext .js,.vue src --fix", 27 | "test": "jest --config test/jest.conf.js --coverage", 28 | "ghpages": "npm run build:example && node build/gh-pages.js" 29 | }, 30 | "dependencies": { 31 | "vue": "^2.0.0" 32 | }, 33 | "devDependencies": { 34 | "babel-core": "^6.26.0", 35 | "babel-eslint": "^8.1.2", 36 | "babel-jest": "^22.0.4", 37 | "babel-loader": "^7.1.2", 38 | "babel-plugin-dynamic-import-node": "^1.2.0", 39 | "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0", 40 | "babel-preset-env": "^1.6.0", 41 | "babel-preset-stage-3": "^6.24.1", 42 | "cross-env": "^5.0.5", 43 | "css-loader": "^0.28.7", 44 | "eslint": "^4.14.0", 45 | "eslint-config-airbnb-base": "^12.1.0", 46 | "eslint-plugin-html": "^4.0.1", 47 | "eslint-plugin-import": "^2.8.0", 48 | "file-loader": "^1.1.6", 49 | "fs-extra": "^5.0.0", 50 | "gh-pages": "^1.1.0", 51 | "jest": "^22.0.4", 52 | "jest-serializer-vue": "^0.3.0", 53 | "rollup": "^0.52.3", 54 | "rollup-plugin-copy": "^0.2.3", 55 | "rollup-plugin-vue": "^3.0.0", 56 | "style-loader": "^0.19.1", 57 | "stylus": "^0.54.5", 58 | "stylus-loader": "^3.0.1", 59 | "url-loader": "^0.6.2", 60 | "vue-jest": "^1.4.0", 61 | "vue-loader": "^13.6.0", 62 | "vue-template-compiler": "^2.5.13", 63 | "webpack": "^3.10.0", 64 | "webpack-dev-server": "^2.9.7" 65 | }, 66 | "repository": { 67 | "type": "git", 68 | "url": "https://github.com/XBT1/effect-dropdown-vue.git" 69 | }, 70 | "bugs": { 71 | "url": "https://github.com/XBT1/effect-dropdown-vue/issues" 72 | }, 73 | "homepage": "https://github.com/XBT1/effect-dropdown-vue", 74 | "browserslist": [ 75 | "> 1%", 76 | "last 2 versions", 77 | "not ie <= 8" 78 | ], 79 | "engines": { 80 | "node": ">= 4.0.0", 81 | "npm": ">= 3.0.0" 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import vue from 'rollup-plugin-vue' 2 | import copy from 'rollup-plugin-copy' 3 | 4 | export default { 5 | input: 'src/index.js', 6 | output: { 7 | file: 'dist/index.common.js', 8 | format: 'cjs', 9 | exports: 'named', 10 | }, 11 | plugins: [ 12 | vue(), 13 | copy({ 14 | 'src/styles/fonts': 'dist/fonts', 15 | }), 16 | ], 17 | } 18 | -------------------------------------------------------------------------------- /src/components/EffectDropdown.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 116 | -------------------------------------------------------------------------------- /src/components/EffectDropdownItem.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 189 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import EffectDropdown from './components/EffectDropdown.vue' 2 | import EffectDropdownItem from './components/EffectDropdownItem.vue' 3 | 4 | // export { EffectDropdown } 5 | 6 | export default { 7 | install (Vue) { 8 | Vue.component(EffectDropdown.name, EffectDropdown) 9 | Vue.component(EffectDropdownItem.name, EffectDropdownItem) 10 | }, 11 | } 12 | -------------------------------------------------------------------------------- /src/styles/dropdown.styl: -------------------------------------------------------------------------------- 1 | 2 | dropdown-item-color = #bcbcbc 3 | 4 | $menu-item 5 | width: 100% 6 | height: menu-height 7 | background-color: #fff 8 | line-height: menu-height 9 | box-sizing: border-box 10 | cursor: pointer 11 | box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) 12 | 13 | $text-overflow 14 | white-space: nowrap 15 | text-overflow: ellipsis 16 | overflow: hidden 17 | 18 | .effect-dropdown 19 | position: relative 20 | display: inline-block 21 | width: menu-width 22 | color: #333 23 | text-align: left 24 | font-weight: 700 25 | 26 | &:not(.effect-dropdown--active) 27 | .effect-dropdown-item 28 | &:first-child 29 | box-shadow: none 30 | 31 | &.effect-dropdown--active 32 | .effect-dropdown__label-caret 33 | &::after 34 | transform: rotate(-90deg) 35 | 36 | .effect-dropdown-item--camber 37 | transform-origin: -200% 50% 38 | 39 | .effect-dropdown__label 40 | @extend $menu-item 41 | @extend $text-overflow 42 | 43 | position: relative 44 | display: inline-block 45 | padding: 0 menu-padding-horizontal 46 | color: #999 47 | z-index: 1500 48 | 49 | 50 | &.effect-dropdown__label--raise 51 | transition: transform .3s 52 | transform-origin: 50% 0% 53 | transform-style: preserve-3d 54 | 55 | &:active 56 | transform: rotateX(60deg) 57 | box-shadow: 0 1px 1px #ccc 58 | 59 | .effect-dropdown__label-caret 60 | position: absolute 61 | padding-left: 16px 62 | padding-right: 6px 63 | right: 10px 64 | 65 | &::before 66 | content: "" 67 | position: absolute 68 | left: 0 69 | top: 25% 70 | width: 1px 71 | height: 50% 72 | background-color: #ddd 73 | 74 | &::after 75 | display: inline-block 76 | transition: transform 0.3s 77 | transform: rotate(90deg) 78 | content: "\e622" 79 | 80 | .effect-dropdown__content 81 | padding-left: 0 82 | margin: 0 83 | width: 100% 84 | color: dropdown-item-color 85 | 86 | .effect-dropdown-item 87 | @extend $menu-item 88 | 89 | position: absolute 90 | top: 0 91 | left: 0 92 | transition: all 0.3s ease 93 | overflow: hidden 94 | 95 | .effect-dropdown-item__label 96 | @extend $text-overflow 97 | 98 | display: inline-block 99 | padding: 0 menu-padding-horizontal 100 | width: 100% 101 | box-sizing: border-box 102 | transition: all 0.2s linear 103 | 104 | & > * 105 | vertical-align: middle 106 | 107 | .effect-dropdown-item--disabled 108 | color: rgba(dropdown-item-color, 0.35) 109 | cursor: not-allowed 110 | -------------------------------------------------------------------------------- /src/styles/fonts/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CyberNika/effect-dropdown-vue/dac10e3729b1f4e1549bdeaaee2de38a7332f28f/src/styles/fonts/iconfont.eot -------------------------------------------------------------------------------- /src/styles/fonts/iconfont.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | Created by iconfont 9 | 10 | 11 | 12 | 13 | 21 | 22 | 23 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /src/styles/fonts/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CyberNika/effect-dropdown-vue/dac10e3729b1f4e1549bdeaaee2de38a7332f28f/src/styles/fonts/iconfont.ttf -------------------------------------------------------------------------------- /src/styles/fonts/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CyberNika/effect-dropdown-vue/dac10e3729b1f4e1549bdeaaee2de38a7332f28f/src/styles/fonts/iconfont.woff -------------------------------------------------------------------------------- /src/styles/iconfont.styl: -------------------------------------------------------------------------------- 1 | @font-face 2 | font-family: "effect-dropdown-iconfont" 3 | src: url("./fonts/iconfont.eot") 4 | src: url("./fonts/iconfont.eot#iefix") format("embedded-opentype"), 5 | url("./fonts/iconfont.woff") format("woff"), 6 | url("./fonts/iconfont.ttf") format("truetype"), 7 | url("./fonts/iconfont.svg") format("svg") 8 | 9 | .effect-dropdown-iconfont 10 | font-family: "effect-dropdown-iconfont" !important 11 | font-size: inherit 12 | font-style: normal 13 | -webkit-font-smoothing: antialiased 14 | -moz-osx-font-smoothing: grayscale 15 | -------------------------------------------------------------------------------- /src/styles/index.styl: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "iconfont"; 3 | @import "dropdown"; 4 | -------------------------------------------------------------------------------- /src/styles/variables.styl: -------------------------------------------------------------------------------- 1 | 2 | menu-width = 300px 3 | menu-height = 60px 4 | menu-padding-horizontal = 30px 5 | -------------------------------------------------------------------------------- /src/utils/index.js: -------------------------------------------------------------------------------- 1 | const getTransformValue = (key, value) => `${key}(${value})` 2 | 3 | export const transform = (values = {}) => { 4 | const result = [] 5 | 6 | Object.keys(values).forEach((key) => { 7 | const value = Array.isArray(values[key]) ? values[key].join(', ') : values[key] 8 | 9 | result.push(getTransformValue(key, value)) 10 | }) 11 | 12 | return result.join(' ') 13 | } 14 | 15 | export const assign = (...sources) => Object.assign({}, ...sources) 16 | -------------------------------------------------------------------------------- /test/index.spec.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | 3 | import EffectDropdown from '../src' 4 | // import '../src/styles/index.styl' 5 | 6 | Vue.use(EffectDropdown) 7 | 8 | describe('preprocessor', () => { 9 | it('test', () => { 10 | expect(1).toEqual(1) 11 | }) 12 | }) 13 | -------------------------------------------------------------------------------- /test/jest.conf.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | 3 | module.exports = { 4 | rootDir: path.resolve(__dirname, '../'), 5 | moduleFileExtensions: [ 6 | 'js', 7 | 'json', 8 | 'vue' 9 | ], 10 | transform: { 11 | '^.+\\.js$': '/node_modules/babel-jest', 12 | '.*\\.(vue)$': '/node_modules/vue-jest' 13 | }, 14 | snapshotSerializers: ['/node_modules/jest-serializer-vue'], 15 | mapCoverage: true, 16 | } 17 | --------------------------------------------------------------------------------