├── .babelrc
├── .editorconfig
├── .gitignore
├── .npmignore
├── .postcssrc.js
├── README.md
├── build
    ├── build.js
    ├── check-versions.js
    ├── logo.png
    ├── utils.js
    ├── vue-loader.conf.js
    ├── webpack.base.conf.js
    ├── webpack.dev.conf.js
    └── webpack.prod.conf.js
├── config
    ├── dev.env.js
    ├── index.js
    └── prod.env.js
├── index.html
├── package-lock.json
├── package.json
├── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   ├── HelloWorld.vue
    │   ├── expand.js
    │   └── yCircleMenu.vue
    ├── devMain.js
    ├── images
    │   ├── ani.gif
    │   ├── ani02.gif
    │   ├── ani03.gif
    │   ├── ani04.gif
    │   ├── bottom.gif
    │   ├── cirecle.gif
    │   ├── colors.PNG
    │   ├── demo.png
    │   ├── index.gif
    │   ├── left.gif
    │   ├── mask.gif
    │   ├── middle-around.gif
    │   ├── middle.gif
    │   ├── right.gif
    │   └── top.gif
    └── npmMain.js
└── static
    ├── .gitkeep
    └── img
        └── dic.png


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     ["env", {
 4 |       "modules": false,
 5 |       "targets": {
 6 |         "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
 7 |       }
 8 |     }],
 9 |     "stage-2"
10 |   ],
11 |   "plugins": ["transform-vue-jsx", "transform-runtime"]
12 | }
13 | 


--------------------------------------------------------------------------------
/.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 | /preview/
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | dist/
 8 | # Editor directories and files
 9 | .idea
10 | .vscode
11 | *.suo
12 | *.ntvs*
13 | *.njsproj
14 | *.sln
15 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | /config/
 4 | build/
 5 | index.html
 6 | .*
 7 | npm-debug.log*
 8 | yarn-debug.log*
 9 | yarn-error.log*
10 | 
11 | # Editor directories and files
12 | .idea
13 | .vscode
14 | *.suo
15 | *.ntvs*
16 | *.njsproj
17 | *.sln
18 | 


--------------------------------------------------------------------------------
/.postcssrc.js:
--------------------------------------------------------------------------------
 1 | // https://github.com/michael-ciniawsky/postcss-load-config
 2 | 
 3 | module.exports = {
 4 |   "plugins": {
 5 |     "postcss-import": {},
 6 |     "postcss-url": {},
 7 |     // to edit target browsers: use "browserslist" field in package.json
 8 |     "autoprefixer": {}
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # y-circle-menu
 2 | 
 3 | 
 4 | [DEMO](https://ymbo.github.io/yCircleMenu/preview/index.html "yCircleMenu")
 5 | 
 6 | ## Install
 7 | >npm install  y-circle-menu
 8 | 
 9 | ## Usage
10 | ```javascript
11 | <template>
12 | 	<yCircleMenu 
13 |           :columns='columns' 
14 |           :circleOr='circleOr' 
15 |           :direc='direc'
16 |           :itemO='itemO'
17 |           :completeCircle='completeCircle'
18 |           :duration='duration'
19 |           :delay='delay'
20 |           :isClose='isClose==0?false:true'
21 |           :offset=offset
22 |           >
23 |         <Button type="warning" slot="button" >开关</Button>
24 | 	</yCircleMenu>
25 | </template>
26 | 
27 | <script>
28 | 	import yCircleMenu from 'y-circle-menu'
29 | 	import  'y-circle-menu/dist/yCircleMenu.min.css'
30 | ...
31 | </script>
32 | ```
33 | 
34 | ## configuration
35 | 
36 | [在线配置](https://ymbo.github.io/yCircleMenu/preview/index.html "y-circle-menu")
37 | 
38 | ![说明](https://github.com/YMBo/yCircleMenu/blob/master/static/img/dic.png)  
39 | 
40 | | 配置项 | 描述 | 参数 | 默认 | 类型
41 | | ------ | ------ |------- | ------ |-------|
42 | | circleOr | 生成圆半径附加值,放大缩小圆可用| 任意数值 | 0 | Number
43 | | direc   | 所有item排布的区域 | top/right/bottom/left | top | String
44 | | itemO  |item原点位置  | o/top/right/bottom/left | o(中心) | String 
45 | | itemO  |item原点位置  | o/top/right/bottom/left | o | String 
46 | | completeCircle | 是否为整圆,比较自由,1表示整圆 |1/0.5/0.25....|0.5(半圆) |  Number/String
47 | | duration| item执行时间单位秒| 任意大于0的数字 | 0.5 |Number/String
48 | | delay| 每个item之间的延迟时间，每个item依次累加 单位秒|任意大于0的数字 | 0.01|Number
49 | |isClose| 自动收起| ture/false|false| Boolean 
50 | |offset| 生成圆整体的偏移量（px）| 格式{x:0,y:0} | {x:0,y:0} | Object 
51 | 


--------------------------------------------------------------------------------
/build/build.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | require('./check-versions')()
 3 | 
 4 | process.env.NODE_ENV = 'production'
 5 | 
 6 | const ora = require('ora')
 7 | const rm = require('rimraf')
 8 | const path = require('path')
 9 | const chalk = require('chalk')
10 | const webpack = require('webpack')
11 | const config = require('../config')
12 | const webpackConfig = require('./webpack.prod.conf')
13 | 
14 | const spinner = ora('building for production...')
15 | spinner.start()
16 | 
17 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
18 |     if (err) throw err
19 |     webpack(webpackConfig, (err, stats) => {
20 |         spinner.stop()
21 |         if (err) throw err
22 |         process.stdout.write(stats.toString({
23 |             colors: true,
24 |             modules: false,
25 |             children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
26 |             chunks: false,
27 |             chunkModules: false
28 |         }) + '\n\n')
29 | 
30 |         if (stats.hasErrors()) {
31 |             console.log(chalk.red('  Build failed with errors.\n'))
32 |             process.exit(1)
33 |         }
34 | 
35 |         console.log(chalk.cyan('  Build complete.\n'))
36 |         console.log(chalk.yellow(
37 |             '  Tip: built files are meant to be served over an HTTP server.\n' +
38 |             '  Opening index.html over file:// won\'t work.\n'
39 |         ))
40 |     })
41 | })


--------------------------------------------------------------------------------
/build/check-versions.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | const chalk = require('chalk')
 3 | const semver = require('semver')
 4 | const packageConfig = require('../package.json')
 5 | const shell = require('shelljs')
 6 | 
 7 | function exec (cmd) {
 8 |   return require('child_process').execSync(cmd).toString().trim()
 9 | }
10 | 
11 | const versionRequirements = [
12 |   {
13 |     name: 'node',
14 |     currentVersion: semver.clean(process.version),
15 |     versionRequirement: packageConfig.engines.node
16 |   }
17 | ]
18 | 
19 | if (shell.which('npm')) {
20 |   versionRequirements.push({
21 |     name: 'npm',
22 |     currentVersion: exec('npm --version'),
23 |     versionRequirement: packageConfig.engines.npm
24 |   })
25 | }
26 | 
27 | module.exports = function () {
28 |   const warnings = []
29 | 
30 |   for (let i = 0; i < versionRequirements.length; i++) {
31 |     const mod = versionRequirements[i]
32 | 
33 |     if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
34 |       warnings.push(mod.name + ': ' +
35 |         chalk.red(mod.currentVersion) + ' should be ' +
36 |         chalk.green(mod.versionRequirement)
37 |       )
38 |     }
39 |   }
40 | 
41 |   if (warnings.length) {
42 |     console.log('')
43 |     console.log(chalk.yellow('To use this template, you must update following to modules:'))
44 |     console.log()
45 | 
46 |     for (let i = 0; i < warnings.length; i++) {
47 |       const warning = warnings[i]
48 |       console.log('  ' + warning)
49 |     }
50 | 
51 |     console.log()
52 |     process.exit(1)
53 |   }
54 | }
55 | 


--------------------------------------------------------------------------------
/build/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YMBo/yCircleMenu/94d8d4b00899a7bc5141c80590002f8c25c8e3e1/build/logo.png


--------------------------------------------------------------------------------
/build/utils.js:
--------------------------------------------------------------------------------
  1 | 'use strict'
  2 | const path = require('path')
  3 | const config = require('../config')
  4 | const ExtractTextPlugin = require('extract-text-webpack-plugin')
  5 | const packageConfig = require('../package.json')
  6 | 
  7 | exports.assetsPath = function(_path) {
  8 |     const assetsSubDirectory = process.env.NODE_ENV === 'production' ?
  9 |         config.build.assetsSubDirectory :
 10 |         config.dev.assetsSubDirectory
 11 | 
 12 |     return path.posix.join(assetsSubDirectory, _path)
 13 | }
 14 | 
 15 | exports.cssLoaders = function(options) {
 16 |     options = options || {}
 17 | 
 18 |     const cssLoader = {
 19 |         loader: 'css-loader',
 20 |         options: {
 21 |             sourceMap: options.sourceMap
 22 |         }
 23 |     }
 24 | 
 25 |     const postcssLoader = {
 26 |         loader: 'postcss-loader',
 27 |         options: {
 28 |             sourceMap: options.sourceMap
 29 |         }
 30 |     }
 31 | 
 32 |     // generate loader string to be used with extract text plugin
 33 |     function generateLoaders(loader, loaderOptions) {
 34 |         const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
 35 | 
 36 |         if (loader) {
 37 |             loaders.push({
 38 |                 loader: loader + '-loader',
 39 |                 options: Object.assign({}, loaderOptions, {
 40 |                     sourceMap: options.sourceMap
 41 |                 })
 42 |             })
 43 |         }
 44 | 
 45 |         // Extract CSS when that option is specified
 46 |         // (which is the case during production build)
 47 |         if (options.extract) {
 48 |             return ExtractTextPlugin.extract({
 49 |                 use: loaders,
 50 |                 fallback: 'vue-style-loader',
 51 |                 publicPath: '../../'
 52 |             })
 53 |         } else {
 54 |             return ['vue-style-loader'].concat(loaders)
 55 |         }
 56 |     }
 57 | 
 58 |     // https://vue-loader.vuejs.org/en/configurations/extract-css.html
 59 |     return {
 60 |         css: generateLoaders(),
 61 |         postcss: generateLoaders(),
 62 |         less: generateLoaders('less'),
 63 |         sass: generateLoaders('sass', { indentedSyntax: true }),
 64 |         scss: generateLoaders('sass'),
 65 |         stylus: generateLoaders('stylus'),
 66 |         styl: generateLoaders('stylus')
 67 |     }
 68 | }
 69 | 
 70 | // Generate loaders for standalone style files (outside of .vue)
 71 | exports.styleLoaders = function(options) {
 72 |     const output = []
 73 |     const loaders = exports.cssLoaders(options)
 74 | 
 75 |     for (const extension in loaders) {
 76 |         const loader = loaders[extension]
 77 |         output.push({
 78 |             test: new RegExp('\\.' + extension + '$'),
 79 |             use: loader
 80 |         })
 81 |     }
 82 | 
 83 |     return output
 84 | }
 85 | 
 86 | exports.createNotifierCallback = () => {
 87 |     const notifier = require('node-notifier')
 88 | 
 89 |     return (severity, errors) => {
 90 |         if (severity !== 'error') return
 91 | 
 92 |         const error = errors[0]
 93 |         const filename = error.file && error.file.split('!').pop()
 94 | 
 95 |         notifier.notify({
 96 |             title: packageConfig.name,
 97 |             message: severity + ': ' + error.name,
 98 |             subtitle: filename || '',
 99 |             icon: path.join(__dirname, 'logo.png')
100 |         })
101 |     }
102 | }


--------------------------------------------------------------------------------
/build/vue-loader.conf.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | const utils = require('./utils')
 3 | const config = require('../config')
 4 | const isProduction = process.env.NODE_ENV === 'production'
 5 | const sourceMapEnabled = isProduction
 6 |   ? config.build.productionSourceMap
 7 |   : config.dev.cssSourceMap
 8 | 
 9 | module.exports = {
10 |   loaders: utils.cssLoaders({
11 |     sourceMap: sourceMapEnabled,
12 |     extract: isProduction
13 |   }),
14 |   cssSourceMap: sourceMapEnabled,
15 |   cacheBusting: config.dev.cacheBusting,
16 |   transformToRequire: {
17 |     video: ['src', 'poster'],
18 |     source: 'src',
19 |     img: 'src',
20 |     image: 'xlink:href'
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/build/webpack.base.conf.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | const path = require('path')
 3 | const utils = require('./utils')
 4 | const config = require('../config')
 5 | const vueLoaderConfig = require('./vue-loader.conf')
 6 | 
 7 | function resolve(dir) {
 8 |     return path.join(__dirname, '..', dir)
 9 | }
10 | 
11 | 
12 | 
13 | module.exports = {
14 |     context: path.resolve(__dirname, '../'),
15 |     output: {
16 |         path: config.build.assetsRoot,
17 |         filename: '[name].js',
18 |         publicPath: process.env.NODE_ENV === 'production' ?
19 |             config.build.assetsPublicPath : config.dev.assetsPublicPath
20 |     },
21 |     resolve: {
22 |         extensions: ['.js', '.vue', '.json'],
23 |         alias: {
24 |             'vue$': 'vue/dist/vue.esm.js',
25 |             '@': resolve('src'),
26 |         }
27 |     },
28 |     module: {
29 |         rules: [{
30 |                 test: /\.less$/,
31 |                 use: [{
32 |                     loader: "style-loader"
33 |                 }, {
34 |                     loader: "css-loader!"
35 |                 }, {
36 |                     loader: "less-loader"
37 |                 }, ]
38 | 
39 |             },
40 |             {
41 |                 test: /\.vue$/,
42 |                 loader: 'vue-loader',
43 |                 options: vueLoaderConfig
44 |             },
45 |             {
46 |                 test: /\.js$/,
47 |                 loader: 'babel-loader',
48 |                 include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
49 |             },
50 |             {
51 |                 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
52 |                 loader: 'url-loader',
53 |                 options: {
54 |                     limit: 10000,
55 |                     name: utils.assetsPath('img/[name].[hash:7].[ext]')
56 |                 }
57 |             },
58 |             {
59 |                 test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
60 |                 loader: 'url-loader',
61 |                 options: {
62 |                     limit: 10000,
63 |                     name: utils.assetsPath('media/[name].[hash:7].[ext]')
64 |                 }
65 |             },
66 |             {
67 |                 test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
68 |                 loader: 'url-loader',
69 |                 options: {
70 |                     limit: 10000,
71 |                     name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
72 |                 }
73 |             }
74 |         ]
75 |     },
76 |     node: {
77 |         // prevent webpack from injecting useless setImmediate polyfill because Vue
78 |         // source contains it (although only uses it if it's native).
79 |         setImmediate: false,
80 |         // prevent webpack from injecting mocks to Node native modules
81 |         // that does not make sense for the client
82 |         dgram: 'empty',
83 |         fs: 'empty',
84 |         net: 'empty',
85 |         tls: 'empty',
86 |         child_process: 'empty'
87 |     }
88 | }


--------------------------------------------------------------------------------
/build/webpack.dev.conf.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | const utils = require('./utils')
 3 | const webpack = require('webpack')
 4 | const config = require('../config')
 5 | const merge = require('webpack-merge')
 6 | const path = require('path')
 7 | const baseWebpackConfig = require('./webpack.base.conf')
 8 | const CopyWebpackPlugin = require('copy-webpack-plugin')
 9 | const HtmlWebpackPlugin = require('html-webpack-plugin')
10 | const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
11 | const portfinder = require('portfinder')
12 | 
13 | const HOST = process.env.HOST
14 | const PORT = process.env.PORT && Number(process.env.PORT)
15 | 
16 | const devWebpackConfig = merge(baseWebpackConfig, {
17 |     entry: {
18 |         app: './src/devMain.js'
19 |     },
20 |     module: {
21 |         rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
22 |     },
23 |     // cheap-module-eval-source-map is faster for development
24 |     devtool: config.dev.devtool,
25 | 
26 |     // these devServer options should be customized in /config/index.js
27 |     devServer: {
28 |         clientLogLevel: 'warning',
29 |         historyApiFallback: {
30 |             rewrites: [
31 |                 { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
32 |             ],
33 |         },
34 |         hot: true,
35 |         contentBase: false, // since we use CopyWebpackPlugin.
36 |         compress: true,
37 |         host: HOST || config.dev.host,
38 |         port: PORT || config.dev.port,
39 |         open: config.dev.autoOpenBrowser,
40 |         overlay: config.dev.errorOverlay ? { warnings: false, errors: true } : false,
41 |         publicPath: config.dev.assetsPublicPath,
42 |         proxy: config.dev.proxyTable,
43 |         quiet: true, // necessary for FriendlyErrorsPlugin
44 |         watchOptions: {
45 |             poll: config.dev.poll,
46 |         }
47 |     },
48 |     plugins: [
49 |         new webpack.DefinePlugin({
50 |             'process.env': require('../config/dev.env')
51 |         }),
52 |         new webpack.HotModuleReplacementPlugin(),
53 |         new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
54 |         new webpack.NoEmitOnErrorsPlugin(),
55 |         // https://github.com/ampedandwired/html-webpack-plugin
56 |         new HtmlWebpackPlugin({
57 |             filename: 'index.html',
58 |             template: 'index.html',
59 |             inject: true
60 |         }),
61 |         // copy custom static assets
62 |         new CopyWebpackPlugin([{
63 |             from: path.resolve(__dirname, '../static'),
64 |             to: config.dev.assetsSubDirectory,
65 |             ignore: ['.*']
66 |         }])
67 |     ]
68 | })
69 | 
70 | module.exports = new Promise((resolve, reject) => {
71 |     portfinder.basePort = process.env.PORT || config.dev.port
72 |     portfinder.getPort((err, port) => {
73 |         if (err) {
74 |             reject(err)
75 |         } else {
76 |             // publish the new Port, necessary for e2e tests
77 |             process.env.PORT = port
78 |                 // add port to devServer config
79 |             devWebpackConfig.devServer.port = port
80 | 
81 |             // Add FriendlyErrorsPlugin
82 |             devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
83 |                 compilationSuccessInfo: {
84 |                     messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
85 |                 },
86 |                 onErrors: config.dev.notifyOnErrors ?
87 |                     utils.createNotifierCallback() : undefined
88 |             }))
89 | 
90 |             resolve(devWebpackConfig)
91 |         }
92 |     })
93 | })


--------------------------------------------------------------------------------
/build/webpack.prod.conf.js:
--------------------------------------------------------------------------------
  1 | 'use strict'
  2 | const path = require('path')
  3 | const utils = require('./utils')
  4 | const webpack = require('webpack')
  5 | const config = require('../config')
  6 | const merge = require('webpack-merge')
  7 | const baseWebpackConfig = require('./webpack.base.conf')
  8 | const CopyWebpackPlugin = require('copy-webpack-plugin')
  9 | const HtmlWebpackPlugin = require('html-webpack-plugin')
 10 | const ExtractTextPlugin = require('extract-text-webpack-plugin')
 11 | const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
 12 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 13 | 
 14 | const env = require('../config/prod.env')
 15 | const PREVIEW = process.env.PREVIEW == 'preview';
 16 | 
 17 | let output = PREVIEW ? {
 18 |     path: config.build.assetsRoot,
 19 |     filename: utils.assetsPath('js/[name].[chunkhash].js'),
 20 |     chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
 21 | } : {
 22 |     path: config.build.assetsRoot,
 23 |     filename: 'yCircleMenu.min.js',
 24 |     library: 'yCircleMenu',
 25 |     libraryTarget: 'umd'
 26 | }
 27 | let plugin = PREVIEW ? [
 28 |     new HtmlWebpackPlugin({
 29 |         filename: config.build.index,
 30 |         template: 'index.html',
 31 |         inject: true,
 32 |         minify: {
 33 |             removeComments: true,
 34 |             collapseWhitespace: true,
 35 |             removeAttributeQuotes: true
 36 |                 // more options:
 37 |                 // https://github.com/kangax/html-minifier#options-quick-reference
 38 |         },
 39 |         // necessary to consistently work with multiple chunks via CommonsChunkPlugin
 40 |         chunksSortMode: 'dependency'
 41 |     }),
 42 |     new webpack.optimize.CommonsChunkPlugin({
 43 |         name: 'vendor',
 44 |         minChunks(module) {
 45 |             // any required modules inside node_modules are extracted to vendor
 46 |             return (
 47 |                 module.resource &&
 48 |                 /\.js$/.test(module.resource) &&
 49 |                 module.resource.indexOf(
 50 |                     path.join(__dirname, '../node_modules')
 51 |                 ) === 0
 52 |             )
 53 |         }
 54 |     }),
 55 |     new webpack.optimize.CommonsChunkPlugin({
 56 |         name: 'manifest',
 57 |         minChunks: Infinity
 58 |     }),
 59 |     new webpack.optimize.CommonsChunkPlugin({
 60 |         name: 'app',
 61 |         async: 'vendor-async',
 62 |         children: true,
 63 |         minChunks: 3
 64 |     }),
 65 | ] : []
 66 | 
 67 | let externals = PREVIEW ? {} : {
 68 |     externals: {
 69 |         vue: {
 70 |             root: 'Vue',
 71 |             commonjs: 'vue',
 72 |             commonjs2: 'vue',
 73 |             amd: 'vue'
 74 |         },
 75 |     },
 76 | }
 77 | const webpackConfig = merge(baseWebpackConfig, {
 78 |     entry: {
 79 |         app: PREVIEW ? './src/devMain.js' : './src/npmMain.js'
 80 |     },
 81 |     module: {
 82 |         rules: utils.styleLoaders({
 83 |             sourceMap: config.build.productionSourceMap,
 84 |             extract: true,
 85 |             usePostCSS: true
 86 |         })
 87 |     },
 88 |     devtool: config.build.productionSourceMap ? config.build.devtool : false,
 89 |     // output: {
 90 |     //     path: config.build.assetsRoot,
 91 |     //     filename: utils.assetsPath('js/[name].[chunkhash].js'),
 92 |     //     chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
 93 |     // },
 94 |     output: output,
 95 | 
 96 |     ...externals,
 97 |     plugins: [
 98 |         // http://vuejs.github.io/vue-loader/en/workflow/production.html
 99 |         new webpack.DefinePlugin({
100 |             'process.env': env
101 |         }),
102 |         new UglifyJsPlugin({
103 |             uglifyOptions: {
104 |                 compress: {
105 |                     warnings: false
106 |                 }
107 |             },
108 |             sourceMap: config.build.productionSourceMap,
109 |             parallel: true
110 |         }),
111 |         // extract css into its own file
112 |         new ExtractTextPlugin({
113 |             // filename: utils.assetsPath('css/[name].[contenthash].css'),
114 |             filename: PREVIEW ? utils.assetsPath('css/[name].[contenthash].css') : 'yCircleMenu.min.css',
115 |             // Setting the following option to `false` will not extract CSS from codesplit chunks.
116 |             // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
117 |             // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, 
118 |             // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
119 |             allChunks: true,
120 |         }),
121 |         // Compress extracted CSS. We are using this plugin so that possible
122 |         // duplicated CSS from different components can be deduped.
123 |         new OptimizeCSSPlugin({
124 |             cssProcessorOptions: config.build.productionSourceMap ? { safe: true, map: { inline: false } } : { safe: true }
125 |         }),
126 |         // generate dist index.html with correct asset hash for caching.
127 |         // you can customize output by editing /index.html
128 |         // see https://github.com/ampedandwired/html-webpack-plugin
129 | 
130 | 
131 |         ...plugin,
132 |         // keep module.id stable when vendor modules does not change
133 |         new webpack.HashedModuleIdsPlugin(),
134 |         // enable scope hoisting
135 |         new webpack.optimize.ModuleConcatenationPlugin(),
136 |         // split vendor js into its own file
137 |         // extract webpack runtime and module manifest to its own file in order to
138 |         // prevent vendor hash from being updated whenever app bundle is updated
139 | 
140 |         // npm
141 |         // new webpack.optimize.CommonsChunkPlugin({
142 |         //     name: 'manifest',
143 |         //     minChunks: Infinity
144 |         // }),
145 |         // npm
146 | 
147 |         // This instance extracts shared chunks from code splitted chunks and bundles them
148 |         // in a separate chunk, similar to the vendor chunk
149 |         // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
150 |         // npm不分割
151 |         // new webpack.optimize.CommonsChunkPlugin({
152 |         //     name: 'app',
153 |         //     async: 'vendor-async',
154 |         //     children: true,
155 |         //     minChunks: 3
156 |         // }),
157 | 
158 |         // copy custom static assets
159 | 
160 |         // new CopyWebpackPlugin([{
161 |         //     from: path.resolve(__dirname, '../static'),
162 |         //     to: config.build.assetsSubDirectory,
163 |         //     ignore: ['.*']
164 |         // }])
165 |     ]
166 | })
167 | 
168 | if (config.build.productionGzip) {
169 |     const CompressionWebpackPlugin = require('compression-webpack-plugin')
170 | 
171 |     webpackConfig.plugins.push(
172 |         new CompressionWebpackPlugin({
173 |             asset: '[path].gz[query]',
174 |             algorithm: 'gzip',
175 |             test: new RegExp(
176 |                 '\\.(' +
177 |                 config.build.productionGzipExtensions.join('|') +
178 |                 ')$'
179 |             ),
180 |             threshold: 10240,
181 |             minRatio: 0.8
182 |         })
183 |     )
184 | }
185 | 
186 | if (config.build.bundleAnalyzerReport) {
187 |     const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
188 |     webpackConfig.plugins.push(new BundleAnalyzerPlugin())
189 | }
190 | 
191 | module.exports = webpackConfig


--------------------------------------------------------------------------------
/config/dev.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const merge = require('webpack-merge')
3 | const prodEnv = require('./prod.env')
4 | 
5 | module.exports = merge(prodEnv, {
6 |   NODE_ENV: '"development"'
7 | })
8 | 


--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | // Template version: 1.3.1
 3 | // see http://vuejs-templates.github.io/webpack for documentation.
 4 | 
 5 | const path = require('path')
 6 | const PREVIEW = process.env.PREVIEW == 'preview';
 7 | module.exports = {
 8 |     dev: {
 9 | 
10 |         // Paths
11 |         assetsSubDirectory: 'static',
12 |         assetsPublicPath: '/',
13 |         proxyTable: {},
14 | 
15 |         // Various Dev Server settings
16 |         host: '0.0.0.0', // can be overwritten by process.env.HOST
17 |         port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
18 |         autoOpenBrowser: false,
19 |         errorOverlay: true,
20 |         notifyOnErrors: true,
21 |         poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
22 | 
23 | 
24 |         /**
25 |          * Source Maps
26 |          */
27 | 
28 |         // https://webpack.js.org/configuration/devtool/#development
29 |         devtool: 'cheap-module-eval-source-map',
30 | 
31 |         // If you have problems debugging vue-files in devtools,
32 |         // set this to false - it *may* help
33 |         // https://vue-loader.vuejs.org/en/options.html#cachebusting
34 |         cacheBusting: true,
35 | 
36 |         cssSourceMap: true
37 |     },
38 | 
39 |     build: {
40 |         // Template for index.html
41 |         index: PREVIEW ? path.resolve(__dirname, '../preview/index.html') : path.resolve(__dirname, '../dist/index.html'),
42 |         // Paths
43 |         assetsRoot: PREVIEW ? path.resolve(__dirname, '../preview') : path.resolve(__dirname, '../dist'),
44 |         assetsSubDirectory: 'static',
45 |         assetsPublicPath: '',
46 | 
47 |         /**
48 |          * Source Maps
49 |          */
50 | 
51 |         productionSourceMap: true,
52 |         // https://webpack.js.org/configuration/devtool/#production
53 |         devtool: '#source-map',
54 | 
55 |         // Gzip off by default as many popular static hosts such as
56 |         // Surge or Netlify already gzip all static assets for you.
57 |         // Before setting to `true`, make sure to:
58 |         // npm install --save-dev compression-webpack-plugin
59 |         productionGzip: false,
60 |         productionGzipExtensions: ['js', 'css'],
61 | 
62 |         // Run the build command with an extra argument to
63 |         // View the bundle analyzer report after build finishes:
64 |         // `npm run build --report`
65 |         // Set to `true` or `false` to always turn it on or off
66 |         bundleAnalyzerReport: process.env.npm_config_report
67 |     }
68 | }


--------------------------------------------------------------------------------
/config/prod.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | module.exports = {
3 |   NODE_ENV: '"production"'
4 | }
5 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 6 |     <title>my-com</title>
 7 |   </head>
 8 |   <body>
 9 |     <div id="app"></div>
10 |     <!-- built files will be auto injected -->
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "y-circle-menu",
 3 |     "version": "1.0.6",
 4 |     "description": "vue圆形展开菜单",
 5 |     "author": "https://github.com/YMBo",
 6 |     "homepage": "https://github.com/YMBo/yCircleMenu",
 7 |     "private": false,
 8 |     "license": "ISC",
 9 |     "keywords": [
10 |         "circle",
11 |         "menu",
12 |         "vueCircle",
13 |         "vueCircleMenu",
14 |         "CircleMenu",
15 |         "circleButton"
16 |     ],
17 |     "files": [
18 |         "dist",
19 |         "packages"
20 |     ],
21 |     "main": "dist/yCircleMenu.min.js",
22 |     "scripts": {
23 |         "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
24 |         "build": " node build/build.js",
25 |         "preview": "cross-env PREVIEW=preview node build/build.js"
26 |     },
27 |     "dependencies": {
28 |         "iview": "^3.1.3",
29 |         "less": "^3.8.1",
30 |         "less-loader": "^4.1.0",
31 |         "vue": "^2.5.2",
32 |         "vue-highlight.js": "^2.2.0",
33 |         "vue-highlightjs": "^1.3.3",
34 |         "vue-router": "^3.0.1"
35 |     },
36 |     "devDependencies": {
37 |         "autoprefixer": "^7.1.2",
38 |         "babel-core": "^6.22.1",
39 |         "babel-helper-vue-jsx-merge-props": "^2.0.3",
40 |         "babel-loader": "^7.1.1",
41 |         "babel-plugin-syntax-jsx": "^6.18.0",
42 |         "babel-plugin-transform-runtime": "^6.22.0",
43 |         "babel-plugin-transform-vue-jsx": "^3.5.0",
44 |         "babel-preset-env": "^1.3.2",
45 |         "babel-preset-stage-2": "^6.22.0",
46 |         "chalk": "^2.0.1",
47 |         "copy-webpack-plugin": "^4.0.1",
48 |         "cross": "^1.0.0",
49 |         "cross-env": "^5.2.0",
50 |         "css-loader": "^0.28.0",
51 |         "extract-text-webpack-plugin": "^3.0.0",
52 |         "file-loader": "^1.1.4",
53 |         "friendly-errors-webpack-plugin": "^1.6.1",
54 |         "html-webpack-plugin": "^2.30.1",
55 |         "node-notifier": "^5.1.2",
56 |         "optimize-css-assets-webpack-plugin": "^3.2.0",
57 |         "ora": "^1.2.0",
58 |         "portfinder": "^1.0.13",
59 |         "postcss-import": "^11.0.0",
60 |         "postcss-loader": "^2.0.8",
61 |         "postcss-url": "^7.2.1",
62 |         "rimraf": "^2.6.0",
63 |         "semver": "^5.3.0",
64 |         "shelljs": "^0.7.6",
65 |         "uglifyjs-webpack-plugin": "^1.1.1",
66 |         "url-loader": "^0.5.8",
67 |         "vue-loader": "^13.3.0",
68 |         "vue-style-loader": "^3.0.1",
69 |         "vue-template-compiler": "^2.5.2",
70 |         "webpack": "^3.6.0",
71 |         "webpack-bundle-analyzer": "^2.9.0",
72 |         "webpack-dev-server": "^2.9.1",
73 |         "webpack-merge": "^4.1.0"
74 |     },
75 |     "engines": {
76 |         "node": ">= 6.0.0",
77 |         "npm": ">= 3.0.0"
78 |     },
79 |     "browserslist": [
80 |         "> 1%",
81 |         "last 2 versions",
82 |         "not ie <= 8"
83 |     ]
84 | }
85 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <HelloWorld/>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import HelloWorld from '@/components/HelloWorld'
 9 | export default {
10 |   name: 'App',
11 |   components:{
12 |     HelloWorld
13 |   }
14 | }
15 | </script>
16 | 
17 | <style>
18 | #app {
19 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
20 |   -webkit-font-smoothing: antialiased;
21 |   -moz-osx-font-smoothing: grayscale;
22 |   color: #2c3e50;
23 | }
24 | </style>
25 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YMBo/yCircleMenu/94d8d4b00899a7bc5141c80590002f8c25c8e3e1/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <div>
  3 |     <Card style="width:400px;margin:10px;position:absolute">
  4 |         <Form :label-width="240">
  5 |           <FormItem label="circleOr：生成圆半径附加值,放大缩小圆可用（默认0）">
  6 |               <InputNumber v-model="circleOr"></InputNumber>
  7 |           </FormItem>
  8 |           <FormItem label="direc：所有item排布的区域（默认top）">
  9 |               <Select v-model="direc">
 10 |                 <Option value="top">top</Option>
 11 |                 <Option value="right">right</Option>
 12 |                 <Option value="bottom">bottom</Option>
 13 |                 <Option value="left">left</Option>
 14 |             </Select>
 15 |           </FormItem>
 16 |           <FormItem label="itemO：item原点位置（默认o）">
 17 |               <Select v-model="itemO">
 18 |                 <Option value="top">top</Option>
 19 |                 <Option value="right">right</Option>
 20 |                 <Option value="bottom">bottom</Option>
 21 |                 <Option value="left">left</Option>
 22 |                 <Option value="o">o（中心）</Option>
 23 |             </Select>
 24 |           </FormItem>
 25 |           <FormItem label="completeCircle：是否为整圆（默认半圆）">
 26 |               <Select v-model="completeCircle">
 27 |                 <Option value="1">1（整圆）</Option>
 28 |                 <Option value="0.5">0.5（半圆）</Option>
 29 |                 <Option value="0.25">0.25（1/4圆）</Option>
 30 |                 <Option value="0.125">0.125（1/8圆）</Option>
 31 |             </Select>
 32 |           </FormItem>
 33 |           <FormItem label="duration：item执行时间 单位秒（默认0.5）">
 34 |               <InputNumber :step="0.1" v-model="duration" :min="0"></InputNumber>
 35 |           </FormItem>
 36 |           <FormItem label="delay：每个item之间的延迟时间 单位秒（默认0.01，每个item依次累加）">
 37 |               <InputNumber :step="0.01" v-model="delay" :min="0"></InputNumber>
 38 |           </FormItem>
 39 |           <FormItem label="isClose:点击空白区域收起（默认false）">
 40 |               <Select v-model="isClose">
 41 |                 <Option value="1">是</Option>
 42 |                 <Option value="0">否</Option>
 43 |             </Select>
 44 |           </FormItem>
 45 |           <FormItem label="offset:生成圆整体的偏移（px）">
 46 |               <span>
 47 |                   X轴：<InputNumber  v-model="offset.x"></InputNumber>
 48 |               </span>
 49 |               <div>
 50 |                   Y轴：<InputNumber v-model="offset.y"></InputNumber>
 51 |               </div>
 52 |           </FormItem>
 53 |         <span style="color:red;text-align:left">
 54 |           tip:参数变动后，重新点击开关即可<br/>
 55 |           如果遇到比如日历组件弹出内容被别的item元素遮挡，可通过<br/>
 56 |           .y-box-item>.item:nth-child(6){<br/>
 57 |               z-index: 555;<br/>
 58 |           }<br/>
 59 |           这种方式定制item格式
 60 |         </span>
 61 |         
 62 |       </Form>
 63 |   <Button @click="value4 = true" type="primary">查看代码</Button>
 64 |     </Card>
 65 |     <!-- <pre v-highlightjs><code class="javascript"> {{this.str}}</code></pre> -->
 66 |     <span class="hello" ref="code">
 67 |       <yCircleMenu 
 68 |             ref="menu"
 69 |           :columns='columns' 
 70 |           :circleOr='circleOr' 
 71 |           :direc='direc'
 72 |           :itemO='itemO'
 73 |           :completeCircle='completeCircle'
 74 |           :duration='duration'
 75 |           :delay='delay'
 76 |           :isClose='isClose==0?false:true'
 77 |           :offset=offset
 78 |           >
 79 |         <Button type="warning" slot="button" >开关</Button>
 80 |       </yCircleMenu>
 81 |   </span>
 82 |         <Drawer :closable="false" width="640" v-model="value4">
 83 |             <div class="demo-drawer-profile">
 84 |               <highlight-code lang="vue" :code='code'>
 85 |               </highlight-code>
 86 |             <Divider />
 87 |             <Divider />
 88 |             </div>
 89 |         </Drawer>
 90 | </div>
 91 | </template>
 92 | 
 93 | <script>
 94 | import yCircleMenu from "./yCircleMenu.vue";
 95 | let code = `
 96 | <yCircleMenu 
 97 |     ref="menu"
 98 |     :columns='columns' 
 99 |     :circleOr='circleOr' 
100 |     :direc='direc'
101 |     :itemO='itemO'
102 |     :completeCircle='completeCircle'
103 |     :duration='duration'
104 |     :delay='delay'
105 |     :isClose='isClose==0?false:true'
106 |     :offset=offset
107 |     >
108 | <Button type="warning" slot="button" >开关</Button>
109 | </yCircleMenu>
110 | <script>
111 | export default {
112 |   name: 'HelloWorld',
113 |   components:{
114 |     yCircleMenu
115 |   },
116 |   data () {
117 |     return {
118 |       value4:false,
119 |       isClose:'0',
120 |       circleOr:0,
121 |       direc:'top',
122 |       itemO:'o',
123 |       completeCircle:'0.5',
124 |       duration:0.5,
125 |       delay: 0.01,
126 |       offset: { x: 0, y: 0 },
127 |       columns: [{
128 |           key:'aaa',
129 |           render(h){
130 |               return h('Button',{
131 |                 props:{
132 |                   type:'success'
133 |                 }
134 |               },'按钮1')
135 |           }
136 |       },{
137 |           key:'age',
138 |           render(h){
139 |               return h('Button',{
140 |                 props:{
141 |                   type:'success'
142 |                 }
143 |               },'🐂')
144 |           }
145 |       },{
146 |           key:'dd',
147 |           render(h){
148 |               return h('Icon',{
149 |                 props:{
150 |                   type:'ios-apps-outline',
151 |                   size:'32'
152 |                 }
153 |               })
154 |           }
155 |       },{
156 |           key:'ddvv',
157 |           render(h){
158 |               let container=[{name:'第一'},{name:'第二'},{name:'第三'}]
159 |                 const dom=container.map(v=>{
160 |                     return (
161 |                         h('Option',{
162 |                             props:{
163 |                                 value:v.name
164 |                             }
165 |                         },v.name)
166 |                     )
167 |                 })
168 |                 return h('Select',{
169 |                     props:{
170 |                         value:container[0].name
171 |                     }
172 |                 },
173 |                 [...dom])
174 |             }
175 |       },{
176 |           key:'xx',
177 |           render(h){
178 |               return h('Slider',{
179 |                 style:{
180 |                   'width':'100px'
181 |                 },
182 |                 props:{
183 |                   value:[20, 50]
184 |                 }
185 |               },'🏃')
186 |           }
187 |       },{
188 |           key:'x',
189 |           render(h){
190 |               return h('DatePicker',{
191 |                 props:{
192 |                   type:'date',
193 |                   placeholder:'Select date'
194 |                 },
195 |                 style:{
196 |                   width:'100px'
197 |                 }
198 |               })
199 |           }
200 |       },{
201 |           key:'zxcv',
202 |           render(h){
203 |               return h('Button',{
204 |                 props:{
205 |                   type:'success'
206 |                 }
207 |               },'可以放')
208 |           }
209 |       },{
210 |           key:'vse',
211 |           render(h){
212 |               return h('Button',{
213 |                 props:{
214 |                   type:'success'
215 |                 }
216 |               },'任何东西')
217 |           }
218 |       },{
219 |           key:'qwe',
220 |           render(h){
221 |               return h('Button',{
222 |                 props:{
223 |                   type:'success'
224 |                 }
225 |               },'比如')
226 |           }
227 |       },{
228 |           key:'asdf',
229 |           render(h){
230 |               return h('Button',{
231 |                 props:{
232 |                   type:'success'
233 |                 }
234 |               },'表格、按钮')
235 |           }
236 |       },{
237 |           key:'zsdf',
238 |           render(h){
239 |               return h('Button',{
240 |                 props:{
241 |                   type:'success'
242 |                 }
243 |               },'图标')
244 |           }
245 |       },{
246 |           key:'zzx',
247 |           render(h){
248 |               return h('Button',{
249 |                 props:{
250 |                   type:'success'
251 |                 }
252 |               },'✋')
253 |           }
254 |       }]
255 |     }
256 |   }
257 | }
258 | <\/script>
259 | <style lang="less">
260 | .hello{
261 |   position: absolute;
262 |   top: 50%;
263 |   left: 60%;
264 |   display: inline-block;
265 | }
266 | .y-box-item>.item:nth-child(6){
267 |   z-index: 555;
268 | }
269 | </style>`;
270 | export default {
271 |   name: "HelloWorld",
272 |   components: {
273 |     yCircleMenu
274 |   },
275 |   data() {
276 |     return {
277 |       code: code,
278 |       value4: false,
279 |       isClose: "0",
280 |       circleOr: 0,
281 |       direc: "top",
282 |       itemO: "o",
283 |       completeCircle: "0.5",
284 |       duration: 0.5,
285 |       delay: 0.01,
286 |       offset: { x: 0, y: 0 },
287 |       columns: [
288 |         {
289 |           key: "aaa",
290 |           render(h) {
291 |             return h(
292 |               "Button",
293 |               {
294 |                 props: {
295 |                   type: "success"
296 |                 }
297 |               },
298 |               "按钮1"
299 |             );
300 |           }
301 |         },
302 |         {
303 |           key: "age",
304 |           render(h) {
305 |             return h(
306 |               "Button",
307 |               {
308 |                 props: {
309 |                   type: "success"
310 |                 }
311 |               },
312 |               "🐂"
313 |             );
314 |           }
315 |         },
316 |         {
317 |           key: "dd",
318 |           render(h) {
319 |             return h("Icon", {
320 |               props: {
321 |                 type: "ios-apps-outline",
322 |                 size: "32"
323 |               }
324 |             });
325 |           }
326 |         },
327 |         {
328 |           key: "ddvv",
329 |           render(h) {
330 |             let container = [
331 |               { name: "第一" },
332 |               { name: "第二" },
333 |               { name: "第三" }
334 |             ];
335 |             const dom = container.map(v => {
336 |               return h(
337 |                 "Option",
338 |                 {
339 |                   props: {
340 |                     value: v.name
341 |                   }
342 |                 },
343 |                 v.name
344 |               );
345 |             });
346 |             return h(
347 |               "Select",
348 |               {
349 |                 props: {
350 |                   value: container[0].name
351 |                 }
352 |               },
353 |               [...dom]
354 |             );
355 |           }
356 |         },
357 |         {
358 |           key: "xx",
359 |           render(h) {
360 |             return h(
361 |               "Slider",
362 |               {
363 |                 style: {
364 |                   width: "100px"
365 |                 },
366 |                 props: {
367 |                   value: [20, 50]
368 |                 }
369 |               },
370 |               "🏃"
371 |             );
372 |           }
373 |         },
374 |         {
375 |           key: "x",
376 |           render(h) {
377 |             return h("DatePicker", {
378 |               props: {
379 |                 type: "date",
380 |                 placeholder: "Select date"
381 |               },
382 |               style: {
383 |                 width: "100px"
384 |               }
385 |             });
386 |           }
387 |         },
388 |         {
389 |           key: "zxcv",
390 |           render(h) {
391 |             return h(
392 |               "Button",
393 |               {
394 |                 props: {
395 |                   type: "success"
396 |                 }
397 |               },
398 |               "可以放"
399 |             );
400 |           }
401 |         },
402 |         {
403 |           key: "vse",
404 |           render(h) {
405 |             return h(
406 |               "Button",
407 |               {
408 |                 props: {
409 |                   type: "success"
410 |                 }
411 |               },
412 |               "任何东西"
413 |             );
414 |           }
415 |         },
416 |         {
417 |           key: "qwe",
418 |           render(h) {
419 |             return h(
420 |               "Button",
421 |               {
422 |                 props: {
423 |                   type: "success"
424 |                 }
425 |               },
426 |               "比如"
427 |             );
428 |           }
429 |         },
430 |         {
431 |           key: "asdf",
432 |           render(h) {
433 |             return h(
434 |               "Button",
435 |               {
436 |                 props: {
437 |                   type: "success"
438 |                 }
439 |               },
440 |               "表格、按钮"
441 |             );
442 |           }
443 |         },
444 |         {
445 |           key: "zsdf",
446 |           render(h) {
447 |             return h(
448 |               "Button",
449 |               {
450 |                 props: {
451 |                   type: "success"
452 |                 }
453 |               },
454 |               "图标"
455 |             );
456 |           }
457 |         },
458 |         {
459 |           key: "zzx",
460 |           render(h) {
461 |             return h(
462 |               "Button",
463 |               {
464 |                 props: {
465 |                   type: "success"
466 |                 }
467 |               },
468 |               "✋"
469 |             );
470 |           }
471 |         }
472 |       ]
473 |     };
474 |   },
475 |   methods: {
476 |     f() {
477 |       this.$refs.menu.showItemF();
478 |     }
479 |   }
480 | };
481 | </script>
482 | 
483 | <!-- Add "scoped" attribute to limit CSS to this component only -->
484 | <style lang="less">
485 | .hello {
486 |   position: absolute;
487 |   top: 50%;
488 |   left: 60%;
489 |   display: inline-block;
490 | }
491 | .y-box-item > .item:nth-child(6) {
492 |   z-index: 555;
493 | }
494 | .hljs-name {
495 |   color: #3e76f6;
496 | }
497 | .hljs-attr {
498 |   color: #295bc1;
499 | }
500 | .hljs-string {
501 |   color: #42b983;
502 | }
503 | .hljs-keyword {
504 |   color: #e96900;
505 | }
506 | </style>


--------------------------------------------------------------------------------
/src/components/expand.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |     name: 'Expand',
 3 |     functional: true,
 4 |     props: {
 5 |         render: Function
 6 |     },
 7 |     render: (h, ctx) => {
 8 |         return ctx.props.render(h);
 9 |     }
10 | };


--------------------------------------------------------------------------------
/src/components/yCircleMenu.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="y-box">
  3 |         <input ref="input"  v-if="isClose" class="input"  type="text" @blur="close">
  4 |         <div class="y-box-own" @click="showItemF" @mousedown="down"  ref="switch">
  5 |             <slot class="button" name="button" ></slot>
  6 |         </div>
  7 |         <ul ref='ul' class="y-box-item"  :class="showItem?'open':'close'" @mousedown="ulmousedown" @mouseup="ulmouseup">
  8 |             <li class="item" v-for="item in columns" :key="item.key">
  9 |                 <Expand :name='item.name' :render='item.render'></Expand>
 10 |             </li>
 11 |         </ul>
 12 |     </div>
 13 | </template>
 14 | <script>
 15 | import Expand from "./expand.js";
 16 | export default {
 17 |   name: "yCircleMenu",
 18 |   components: {
 19 |     Expand
 20 |   },
 21 |   data() {
 22 |     return {
 23 |       showHead: true,
 24 |       showItem: false,
 25 |       // item最大宽度
 26 |       itemMaxWidth: 0,
 27 |       // item最大高度
 28 |       itemMaxHeight: 0,
 29 |       // 默认圆的半径附加值，在自动生成的圆的半径基础上加上这个值
 30 |       defaultOr: 50,
 31 |       // 圆半径
 32 |       or: 0,
 33 |       // 第二象限xy轴高度
 34 |       oYX: {},
 35 |       // 每个点的位置数组
 36 |       itemPoint: [],
 37 |       spacing: 20,
 38 |       // 每个item宽高
 39 |       itemWH: [],
 40 |       effective: true,
 41 |       isClick: false
 42 |     };
 43 |   },
 44 |   props: {
 45 |     columns: {
 46 |       type: Array,
 47 |       default: function() {
 48 |         return [];
 49 |       }
 50 |     },
 51 |     direc: {
 52 |       type: String,
 53 |       default: "top"
 54 |     },
 55 |     // 圆半径附加值
 56 |     circleOr: {
 57 |       type: [Number, String],
 58 |       default: 0
 59 |     },
 60 |     // item原点位置
 61 |     itemO: {
 62 |       type: [String],
 63 |       default: "o"
 64 |     },
 65 |     // 是否为整圆
 66 |     completeCircle: {
 67 |       type: [Number, String],
 68 |       default: 0.5
 69 |     },
 70 |     // 每个item动画执行的时间,单位秒
 71 |     duration: {
 72 |       type: [Number],
 73 |       default: 0.5
 74 |     },
 75 |     // 每个item的延迟时间,单位秒
 76 |     delay: {
 77 |       type: Number,
 78 |       default: 0.01
 79 |     },
 80 |     // 点击空白区域关闭
 81 |     isClose: {
 82 |       type: [Boolean, String],
 83 |       default: false
 84 |     },
 85 |     // 生成圆的偏移量
 86 |     offset: {
 87 |       type: Object,
 88 |       default: function() {
 89 |         return {};
 90 |       }
 91 |     }
 92 |   },
 93 |   computed: {
 94 |     allAtems() {
 95 |       return this.$refs.ul.children;
 96 |     },
 97 |     // 获取半圆夹角
 98 |     Angle() {
 99 |       let i = this.deg === 360 ? 0 : 1;
100 |       return this.deg / (this.allAtems.length + i);
101 |     },
102 |     deg() {
103 |       return 360 * this.completeCircle;
104 |     },
105 |     // 在以开关为坐标轴的第二象限元素数量
106 |     // 如果有.5的情况则为中间元素落到x轴上
107 |     twoQuadrant() {
108 |       return this.allAtems.length / 2;
109 |     },
110 |     switchDom() {
111 |       return this.$refs.switch;
112 |     },
113 |     switchWH() {
114 |       let w = this.switchDom.getBoundingClientRect().width;
115 |       let h = this.switchDom.getBoundingClientRect().height;
116 |       return {
117 |         width: w,
118 |         height: h
119 |       };
120 |     }
121 |   },
122 |   beforeUpdate() {
123 |     this.init();
124 |   },
125 |   mounted() {
126 |     let a = this.itemsWH;
127 |     if (this.$slots.header === undefined) {
128 |       this.showHead = false;
129 |     } else {
130 |       this.showHead = true;
131 |     }
132 |     this.init();
133 |   },
134 |   methods: {
135 |     init() {
136 |       this.getY();
137 |       this.getOr();
138 |       this.setItemXY();
139 |     },
140 |     ulmouseup() {
141 |       this.effective = true;
142 |     },
143 |     // 点击li不收起圆
144 |     ulmousedown(e) {
145 |       if (!this.isClose) {
146 |         return;
147 |       }
148 |       if (e.target) {
149 |         this.effective = false;
150 |       } else {
151 |         this.effective = true;
152 |       }
153 |       this.$refs.input.focus();
154 |     },
155 |     // 获取每个子元素宽高
156 |     itemsWH(i) {
157 |       return {
158 |         width: this.allAtems[i].getBoundingClientRect().width,
159 |         height: this.allAtems[i].getBoundingClientRect().height
160 |       };
161 |     },
162 |     // 获得xy轴高度
163 |     getY() {
164 |       let width = 0,
165 |         height = 0;
166 |       for (let i = 0, length = this.allAtems.length; i < length; i++) {
167 |         const o = this.itemsWH(i);
168 |         width += o.width;
169 |         height += o.height;
170 |         this.itemWH.push({
171 |           w: o.width,
172 |           h: o.height
173 |         });
174 |       }
175 |       // 如果是正圆,则一二、三四象限item的数量为总数量的一半，所以半径为半圆的一半
176 |       let i = this.deg == 360 ? 2 : 1;
177 |       let oYX = {
178 |         x: width / i,
179 |         y: height / i
180 |       };
181 |       this.oYX = oYX;
182 |     },
183 |     // 获得圆半径,根据item 数量的一半获取，x值必须根据半径获得
184 |     getOr() {
185 |       let { x, y } = this.oYX;
186 |       x = x / 2;
187 |       y = y / 2;
188 |       this.or = x + Number(this.circleOr);
189 |     },
190 |     // 设定所有item中最大宽度和最大高度
191 |     setItemMax() {
192 |       let ul = this.$refs.ul;
193 |       let childrens = ul.childrens;
194 |       let widthArr = [],
195 |         heightArr = [];
196 |       childrens.forEach((v, i) => {
197 |         itemObj = this.itemsWH(i);
198 |         widthArr.push(itemObj.width);
199 |         heightArr.push(itemObj.height);
200 |       });
201 |       this.itemMaxWidth = Math.max(...widthArr);
202 |       this.itemMaxHeight = Math.max(...widthArr);
203 |     },
204 |     close(event) {
205 |       this.isClick = true;
206 |       if (!this.effective) {
207 |         this.effective = true;
208 |         this.$refs.input.focus();
209 |         return;
210 |       }
211 |       if (!this.showItem) return;
212 |       this.showItem = false;
213 |     },
214 |     down() {
215 |       this.isClick = false;
216 |     },
217 |     showItemF(event) {
218 |       if (this.isClick) {
219 |         this.isClick = false;
220 |         return;
221 |       }
222 |       this.showItem = !this.showItem;
223 |     },
224 |     animateItem() {
225 |       if (this.isClose) this.$refs.input.focus();
226 |       [...this.allAtems].forEach((v, i) => {
227 |         v.style.transform = `translate(${this.itemPoint[i].x}px,${
228 |           this.itemPoint[i].y
229 |         }px)`;
230 |         v.style.transition = `all ${this.duration}s ${i * this.delay}s`;
231 |       });
232 |     },
233 |     reset() {
234 |       [...this.allAtems].forEach(v => {
235 |         v.style.transform = `translate(0,0)`;
236 |       });
237 |     },
238 |     // 设置每一个元素的x,y值
239 |     setItemXY() {
240 |       let xd = this.setdirec().xd;
241 |       let yd = this.setdirec().yd;
242 |       let switchB = this.switchWH;
243 |       let offsetX = this.offset.x || 0;
244 |       let offsetY = this.offset.y || 0;
245 |       // 将圆心定位在开关中心
246 |       let ox = switchB.width / 2;
247 |       let oy = switchB.height / 2;
248 |       this.itemPoint = [...this.allAtems].map((v, i) => {
249 |         let x =
250 |           xd * this.or * Math.sin((this.Angle * (i + 1) * 2 * Math.PI) / 360);
251 |         let y =
252 |           yd * this.or * Math.cos((this.Angle * (i + 1) * 2 * Math.PI) / 360);
253 |         if (this.direc == "top" || this.direc == "bottom") {
254 |           // 上下分布
255 |           [x, y] = [y, x];
256 |         }
257 |         x = x + ox + offsetX;
258 |         y = y + oy + offsetY;
259 |         const h = this.itemsWH(i).height;
260 |         const w = this.itemsWH(i).width;
261 |         return {
262 |           y: this.calculateItemO(y, h, "y"),
263 |           x: this.calculateItemO(x, w, "x")
264 |         };
265 |       });
266 |     },
267 |     // 所有item排布方式
268 |     setdirec() {
269 |       switch (this.direc) {
270 |         case "left":
271 |           return {
272 |             xd: -1,
273 |             yd: 1
274 |           };
275 |           break;
276 |         case "right":
277 |           return {
278 |             xd: 1,
279 |             yd: -1
280 |           };
281 |           break;
282 |         case "bottom":
283 |           return {
284 |             xd: 1,
285 |             yd: 1
286 |           };
287 |           break;
288 |         case "top":
289 |           return {
290 |             xd: -1,
291 |             yd: -1
292 |           };
293 |           break;
294 |         default:
295 |           console.error("direc参数有误");
296 |           break;
297 |       }
298 |     },
299 |     // item的原点位置
300 |     // type:x/y
301 |     calculateItemO(itemXorY, wh, type) {
302 |       const o = itemXorY > 0 ? 1 : -1;
303 |       itemXorY = Math.abs(itemXorY);
304 |       if (type == "x") {
305 |         switch (this.itemO) {
306 |           case "top":
307 |             return o * itemXorY;
308 |             break;
309 |           case "right":
310 |             if (o < 0) {
311 |               return o * (itemXorY + wh);
312 |             } else {
313 |               return o * (itemXorY - wh);
314 |             }
315 |             break;
316 |           case "bottom":
317 |             if (o < 0) {
318 |               // 二三想象
319 |               return o * (itemXorY + wh);
320 |             } else {
321 |               // 一四象限
322 |               return o * (itemXorY - wh);
323 |             }
324 |             break;
325 |           case "left":
326 |             return o * itemXorY;
327 |             break;
328 |           case "o":
329 |             if (o < 0) {
330 |               // 二三象限
331 |               return o * (itemXorY + wh / 2);
332 |             } else {
333 |               // 一四象限
334 |               return o * (itemXorY - wh / 2);
335 |             }
336 |             break;
337 |           default:
338 |             return o;
339 |             break;
340 |         }
341 |       } else {
342 |         // Y轴
343 |         switch (this.itemO) {
344 |           case "top":
345 |             return o * itemXorY;
346 |             break;
347 |           case "right":
348 |             return o * itemXorY;
349 |             break;
350 |           case "bottom":
351 |             // 三四象限
352 |             if (o > 0) {
353 |               return o * (itemXorY - wh);
354 |             } else {
355 |               // 一二象限
356 |               return o * (itemXorY + wh);
357 |             }
358 |             break;
359 |           case "left":
360 |             if (o < 0) {
361 |               return o * (itemXorY + wh);
362 |             } else {
363 |               return o * (itemXorY - wh);
364 |             }
365 |             break;
366 |           case "o":
367 |             if (o > 0) {
368 |               return o * (itemXorY - wh / 2);
369 |             } else {
370 |               // 一二象限
371 |               return o * (itemXorY + wh / 2);
372 |             }
373 |             break;
374 |           default:
375 |             return o;
376 |             break;
377 |         }
378 |       }
379 |     }
380 |   },
381 |   watch: {
382 |     showItem: function(newD, oldD) {
383 |       this.showItem ? this.animateItem() : this.reset();
384 |     }
385 |   }
386 | };
387 | </script>
388 | 
389 | <style scoped>
390 | ul.y-box-item {
391 |   list-style: none;
392 | }
393 | .y-box-item {
394 |   position: absolute;
395 |   top: 0;
396 |   left: 0;
397 | }
398 | .y-box-item {
399 |   z-index: -1;
400 | }
401 | .y-box {
402 |   position: relative;
403 |   display: inline-block;
404 |   z-index: 66;
405 | }
406 | .y-box > .mask {
407 |   position: fixed;
408 |   z-index: 9999;
409 |   top: 0;
410 |   left: 0;
411 |   bottom: 0;
412 |   right: 0;
413 | }
414 | .y-box > .input {
415 |   position: absolute;
416 |   opacity: 0;
417 |   width: 0;
418 |   height: 0;
419 |   overflow: hidden;
420 | }
421 | .y-box-item > .item {
422 |   position: absolute;
423 |   transition: all 0.5s;
424 | }
425 | .close.y-box-item > .item {
426 |   opacity: 0;
427 |   overflow: hidden;
428 | }
429 | </style>
430 | 
431 | 
432 | 


--------------------------------------------------------------------------------
/src/devMain.js:
--------------------------------------------------------------------------------
 1 | // The Vue build version to load with the `import` command
 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 3 | import Vue from 'vue'
 4 | import App from './App'
 5 | import iView from 'iview';
 6 | import 'iview/dist/styles/iview.css';
 7 | import VueHighlightJS from 'vue-highlight.js';
 8 | 
 9 | Vue.config.productionTip = false
10 | 
11 | // Tell Vue.js to use vue-highlightjs
12 | Vue.use(VueHighlightJS);
13 | Vue.use(iView);
14 | /* eslint-disable no-new */
15 | new Vue({
16 |     el: '#app',
17 |     components: { App },
18 |     template: '<App/>'
19 | })


--------------------------------------------------------------------------------
/src/images/ani.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YMBo/yCircleMenu/94d8d4b00899a7bc5141c80590002f8c25c8e3e1/src/images/ani.gif


--------------------------------------------------------------------------------
/src/images/ani02.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YMBo/yCircleMenu/94d8d4b00899a7bc5141c80590002f8c25c8e3e1/src/images/ani02.gif


--------------------------------------------------------------------------------
/src/images/ani03.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YMBo/yCircleMenu/94d8d4b00899a7bc5141c80590002f8c25c8e3e1/src/images/ani03.gif


--------------------------------------------------------------------------------
/src/images/ani04.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YMBo/yCircleMenu/94d8d4b00899a7bc5141c80590002f8c25c8e3e1/src/images/ani04.gif


--------------------------------------------------------------------------------
/src/images/bottom.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YMBo/yCircleMenu/94d8d4b00899a7bc5141c80590002f8c25c8e3e1/src/images/bottom.gif


--------------------------------------------------------------------------------
/src/images/cirecle.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YMBo/yCircleMenu/94d8d4b00899a7bc5141c80590002f8c25c8e3e1/src/images/cirecle.gif


--------------------------------------------------------------------------------
/src/images/colors.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YMBo/yCircleMenu/94d8d4b00899a7bc5141c80590002f8c25c8e3e1/src/images/colors.PNG


--------------------------------------------------------------------------------
/src/images/demo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YMBo/yCircleMenu/94d8d4b00899a7bc5141c80590002f8c25c8e3e1/src/images/demo.png


--------------------------------------------------------------------------------
/src/images/index.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YMBo/yCircleMenu/94d8d4b00899a7bc5141c80590002f8c25c8e3e1/src/images/index.gif


--------------------------------------------------------------------------------
/src/images/left.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YMBo/yCircleMenu/94d8d4b00899a7bc5141c80590002f8c25c8e3e1/src/images/left.gif


--------------------------------------------------------------------------------
/src/images/mask.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YMBo/yCircleMenu/94d8d4b00899a7bc5141c80590002f8c25c8e3e1/src/images/mask.gif


--------------------------------------------------------------------------------
/src/images/middle-around.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YMBo/yCircleMenu/94d8d4b00899a7bc5141c80590002f8c25c8e3e1/src/images/middle-around.gif


--------------------------------------------------------------------------------
/src/images/middle.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YMBo/yCircleMenu/94d8d4b00899a7bc5141c80590002f8c25c8e3e1/src/images/middle.gif


--------------------------------------------------------------------------------
/src/images/right.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YMBo/yCircleMenu/94d8d4b00899a7bc5141c80590002f8c25c8e3e1/src/images/right.gif


--------------------------------------------------------------------------------
/src/images/top.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YMBo/yCircleMenu/94d8d4b00899a7bc5141c80590002f8c25c8e3e1/src/images/top.gif


--------------------------------------------------------------------------------
/src/npmMain.js:
--------------------------------------------------------------------------------
 1 | import yCircleMenu from './components/yCircleMenu.vue'
 2 | 
 3 | const components = {
 4 |         yCircleMenu
 5 |     }
 6 |     // vue.use
 7 | const install = function(Vue, opts = {}) {
 8 |         if (install.installed) return
 9 |         Object.keys(components).forEach(key => {
10 |             Vue.component(key, iview[key]);
11 |         });
12 |     }
13 |     // 全局情况下注册插件
14 | if (typeof window !== 'undefined' && window.Vue) {
15 |     install(window.Vue)
16 | }
17 | 
18 | export default yCircleMenu;


--------------------------------------------------------------------------------
/static/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YMBo/yCircleMenu/94d8d4b00899a7bc5141c80590002f8c25c8e3e1/static/.gitkeep


--------------------------------------------------------------------------------
/static/img/dic.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YMBo/yCircleMenu/94d8d4b00899a7bc5141c80590002f8c25c8e3e1/static/img/dic.png


--------------------------------------------------------------------------------