├── .babelrc ├── .editorconfig ├── .gitignore ├── .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 ├── dist ├── index.html ├── index2.html └── static │ ├── c426a1116301d1fd178c51522484127a.png │ ├── css │ ├── app.8b22e2d5120f6b4c1fb7d92153b8b2e1.css │ ├── app.8b22e2d5120f6b4c1fb7d92153b8b2e1.css.map │ ├── app2.f43349acabbb5cfa7a522590e4a49437.css │ └── app2.f43349acabbb5cfa7a522590e4a49437.css.map │ ├── default.min.css │ ├── favicon.png │ ├── fluidicon.png │ ├── highlight.min.js │ ├── img │ └── fontawesome-webfont.912ec66.svg │ ├── js │ ├── 0.f691fc72e4331bcef110.js │ ├── 0.f691fc72e4331bcef110.js.map │ ├── app.391f097eda82ab9280b2.js │ ├── app.391f097eda82ab9280b2.js.map │ ├── app2.4e10e40b7bbf2eced221.js │ ├── app2.4e10e40b7bbf2eced221.js.map │ ├── manifest.ea9d48c2a374a483b11a.js │ ├── manifest.ea9d48c2a374a483b11a.js.map │ ├── vendor.af88bba1948784debf9c.js │ └── vendor.af88bba1948784debf9c.js.map │ └── simulator.js ├── favicon.ico ├── index.html ├── index2.html ├── package-lock.json ├── package.json ├── src ├── App.vue ├── index.md ├── main.js ├── manoeuvre.js ├── manoeuvre.vue ├── router │ ├── config.js │ ├── dome.js │ └── index.js ├── views │ ├── Button.vue │ ├── Cache.vue │ ├── Cell.vue │ ├── FormHttp.vue │ ├── Icon.vue │ ├── List.vue │ ├── Loadings.vue │ ├── NavBar.vue │ ├── Picture.vue │ ├── Popup.vue │ ├── Regular.vue │ ├── Sticky.vue │ ├── Swipe.vue │ ├── Switch.vue │ ├── Toast.vue │ ├── brief.vue │ ├── index.vue │ ├── mlAlert.vue │ └── mlLazy.vue └── vue-tool │ ├── package.json │ ├── packages │ ├── Button │ │ └── src │ │ │ └── index.md │ ├── Cache │ │ ├── index.js │ │ └── src │ │ │ ├── index.js │ │ │ └── index.md │ ├── Cell │ │ └── src │ │ │ └── index.md │ ├── FormHttp │ │ ├── index.js │ │ └── src │ │ │ ├── index.js │ │ │ └── index.md │ ├── Icon │ │ ├── index.js │ │ └── src │ │ │ ├── index.md │ │ │ └── index.vue │ ├── InfiniteScroll │ │ ├── index.js │ │ └── src │ │ │ ├── index.js │ │ │ ├── index.md │ │ │ └── scroll.js │ ├── Loadings │ │ ├── index.js │ │ └── src │ │ │ ├── index.js │ │ │ ├── index.md │ │ │ └── index.vue │ ├── NavBar │ │ ├── index.js │ │ └── src │ │ │ ├── index.md │ │ │ └── index.vue │ ├── Picture │ │ ├── index.js │ │ └── src │ │ │ ├── index.js │ │ │ └── index.md │ ├── Popup │ │ ├── index.js │ │ └── src │ │ │ ├── index.md │ │ │ └── index.vue │ ├── Regular │ │ ├── index.js │ │ └── src │ │ │ ├── index.js │ │ │ └── index.md │ ├── Sticky │ │ ├── index.js │ │ └── src │ │ │ ├── index.md │ │ │ └── index.vue │ ├── Swipe │ │ └── src │ │ │ └── index.md │ ├── Switch │ │ ├── index.js │ │ └── src │ │ │ ├── index.md │ │ │ └── index.vue │ ├── Toast │ │ └── src │ │ │ ├── index.md │ │ │ └── start.vue │ ├── button │ │ ├── index.js │ │ └── src │ │ │ └── index.vue │ ├── cell │ │ ├── index.js │ │ └── src │ │ │ └── index.vue │ ├── imgEnlarge │ │ ├── index.js │ │ └── src │ │ │ └── index.md │ ├── mlAlert │ │ ├── index.js │ │ └── src │ │ │ ├── index.js │ │ │ ├── index.md │ │ │ └── index.vue │ ├── mlLazy │ │ ├── index.js │ │ └── src │ │ │ ├── index.js │ │ │ └── index.md │ ├── picker │ │ ├── index.js │ │ └── src │ │ │ └── index.md │ ├── swipe │ │ ├── index.js │ │ └── src │ │ │ ├── index.js │ │ │ ├── index.vue │ │ │ └── swipeItem.vue │ ├── tab │ │ ├── index.js │ │ └── src │ │ │ ├── index.js │ │ │ ├── index.md │ │ │ └── index.vue │ └── toast │ │ ├── index.js │ │ └── src │ │ ├── index.js │ │ └── index.vue │ └── src │ ├── index.js │ └── unity │ └── index.js └── static ├── .gitkeep ├── c426a1116301d1fd178c51522484127a.png ├── default.min.css ├── favicon.png ├── fluidicon.png ├── highlight.min.js └── simulator.js /.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 | npm-debug.log* 4 | yarn-debug.log* 5 | yarn-error.log* 6 | 7 | # Editor directories and files 8 | .idea 9 | .vscode 10 | *.suo 11 | *.ntvs* 12 | *.njsproj 13 | *.sln 14 | -------------------------------------------------------------------------------- /.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 | 9 |

10 | 11 |

12 |

13 | 14 | 一套收集各式各样、偶尔维护的UI库, mintUi,Vant的设计 15 | 16 |

17 |

18 | 19 | 为什么现在又那么多开源的UI框架，我为什么又要在写一套！下面我来解释一下 20 | 21 |

22 | 23 | > 对自己能力的提升！ 24 | 25 | > 想拥有一个自己的UI框架，现在的UI框架太散落，总是找来找去的！ 26 | 27 | > 想了解一下webpack以及各种loader的打包机制！ 28 | 29 | > 就是想装B一下！ 嗯嗯 就这个 30 | 31 | **NPM同步安装 vue-tool：[超快传送！点击查看演示效果](https://1292150917.github.io/vueToolOfficial/dist/index.html#/brief) 32 | 33 | 可以用在vue其他项目中 安装命令 34 | 35 | ``` bash 36 | 37 | npm install vue-tool 38 | 39 | 在main.js中 40 | 41 | import vueTool from vueTool 42 | 43 | vue.use(vueTool) 44 | 45 | ``` 46 | 47 | ## Build Setup 48 | 49 | ``` bash 50 | # install dependencies 51 | npm install 52 | 53 | # serve with hot reload at localhost:8080 54 | npm run dev 55 | 56 | # build for production with minification 57 | npm run build 58 | 59 | # build for production and view the bundle analyzer report 60 | npm run build --report 61 | ``` 62 | -------------------------------------------------------------------------------- /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 | }) 42 | -------------------------------------------------------------------------------- /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/1292150917/vueToolOfficial/43ff215141e4b679c4a0774bd8bea348a9a4faef/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 | }) 52 | } else { 53 | return ['vue-style-loader'].concat(loaders) 54 | } 55 | } 56 | 57 | // https://vue-loader.vuejs.org/en/configurations/extract-css.html 58 | return { 59 | css: generateLoaders(), 60 | postcss: generateLoaders(), 61 | less: generateLoaders('less'), 62 | sass: generateLoaders('sass', { indentedSyntax: true }), 63 | scss: generateLoaders('sass'), 64 | stylus: generateLoaders('stylus'), 65 | styl: generateLoaders('stylus') 66 | } 67 | } 68 | 69 | // Generate loaders for standalone style files (outside of .vue) 70 | exports.styleLoaders = function (options) { 71 | const output = [] 72 | const loaders = exports.cssLoaders(options) 73 | 74 | for (const extension in loaders) { 75 | const loader = loaders[extension] 76 | output.push({ 77 | test: new RegExp('\\.' + extension + '$'), 78 | use: loader 79 | }) 80 | } 81 | 82 | return output 83 | } 84 | 85 | exports.createNotifierCallback = () => { 86 | const notifier = require('node-notifier') 87 | 88 | return (severity, errors) => { 89 | if (severity !== 'error') return 90 | 91 | const error = errors[0] 92 | const filename = error.file && error.file.split('!').pop() 93 | 94 | notifier.notify({ 95 | title: packageConfig.name, 96 | message: severity + ': ' + error.name, 97 | subtitle: filename || '', 98 | icon: path.join(__dirname, 'logo.png') 99 | }) 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 | const hljs = require('highlight.js') 7 | 8 | function resolve(dir) { 9 | return path.join(__dirname, '..', dir) 10 | } 11 | 12 | 13 | 14 | module.exports = { 15 | context: path.resolve(__dirname, '../'), 16 | entry: { 17 | app: './src/main.js', 18 | app2: './src/manoeuvre.js' 19 | }, 20 | output: { 21 | path: config.build.assetsRoot, 22 | filename: '[name].js', 23 | publicPath: process.env.NODE_ENV === 'production' ? 24 | config.build.assetsPublicPath : config.dev.assetsPublicPath 25 | }, 26 | resolve: { 27 | extensions: ['.js', '.vue', '.json'], 28 | alias: { 29 | 'vue$': 'vue/dist/vue.esm.js', 30 | '@': resolve('src'), 31 | } 32 | }, 33 | module: { 34 | rules: [{ 35 | test: /\.vue$/, 36 | loader: 'vue-loader', 37 | options: vueLoaderConfig 38 | }, 39 | { 40 | test: /\.js$/, 41 | loader: 'babel-loader', 42 | include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')] 43 | }, 44 | { 45 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 46 | loader: 'url-loader', 47 | options: { 48 | limit: 10000, 49 | name: utils.assetsPath('img/[name].[hash:7].[ext]') 50 | } 51 | }, { 52 | test: /\.md$/, 53 | loader: 'vue-markdown-loader', 54 | options: { 55 | languages: [], 56 | preClass: 'hljs', // 代码高亮所必须的类名 57 | markdownItOptions: { 58 | highlight(str, lang) { 59 | if (lang && hljs.getLanguage(lang)) { 60 | try { 61 | return hljs.highlight(lang, str).value 62 | } catch (__) {} 63 | } 64 | 65 | return '' 66 | } 67 | } 68 | } 69 | }, 70 | { 71 | test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, 72 | loader: 'url-loader', 73 | options: { 74 | limit: 10000, 75 | name: utils.assetsPath('media/[name].[hash:7].[ext]') 76 | } 77 | }, 78 | { 79 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 80 | loader: 'url-loader' 81 | // options: { 82 | // limit: 10000, 83 | // name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 84 | // } 85 | } 86 | ] 87 | }, 88 | node: { 89 | // prevent webpack from injecting useless setImmediate polyfill because Vue 90 | // source contains it (although only uses it if it's native). 91 | setImmediate: false, 92 | // prevent webpack from injecting mocks to Node native modules 93 | // that does not make sense for the client 94 | dgram: 'empty', 95 | fs: 'empty', 96 | net: 'empty', 97 | tls: 'empty', 98 | child_process: 'empty' 99 | } 100 | } 101 | -------------------------------------------------------------------------------- /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 | module: { 18 | rules: utils.styleLoaders({ 19 | sourceMap: config.dev.cssSourceMap, 20 | usePostCSS: true 21 | }) 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: /.*/, 32 | to: path.posix.join(config.dev.assetsPublicPath, 'index.html') 33 | }, ], 34 | }, 35 | hot: true, 36 | contentBase: false, // since we use CopyWebpackPlugin. 37 | compress: true, 38 | host: HOST || config.dev.host, 39 | port: PORT || config.dev.port, 40 | open: config.dev.autoOpenBrowser, 41 | overlay: config.dev.errorOverlay ? 42 | { 43 | warnings: false, 44 | errors: true 45 | } : 46 | false, 47 | publicPath: config.dev.assetsPublicPath, 48 | proxy: config.dev.proxyTable, 49 | quiet: true, // necessary for FriendlyErrorsPlugin 50 | watchOptions: { 51 | poll: config.dev.poll, 52 | } 53 | }, 54 | plugins: [ 55 | new webpack.DefinePlugin({ 56 | 'process.env': require('../config/dev.env') 57 | }), 58 | new webpack.HotModuleReplacementPlugin(), 59 | new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update. 60 | new webpack.NoEmitOnErrorsPlugin(), 61 | // https://github.com/ampedandwired/html-webpack-plugin 62 | new HtmlWebpackPlugin({ 63 | filename: 'index.html', 64 | template: 'index.html', 65 | inject: true, 66 | chunks: ['app'] //需要引入的Chunk，不配置就会引入所有页面的资源 67 | }), 68 | new HtmlWebpackPlugin({ 69 | filename: 'index2.html', 70 | template: 'index2.html', 71 | inject: true, 72 | chunks: ['app2'] //需要引入的Chunk，不配置就会引入所有页面的资源 73 | }), 74 | // copy custom static assets 75 | new CopyWebpackPlugin([{ 76 | from: path.resolve(__dirname, '../static'), 77 | to: config.dev.assetsSubDirectory, 78 | ignore: ['.*'] 79 | }]) 80 | ] 81 | }) 82 | 83 | module.exports = new Promise((resolve, reject) => { 84 | portfinder.basePort = process.env.PORT || config.dev.port 85 | portfinder.getPort((err, port) => { 86 | if (err) { 87 | reject(err) 88 | } else { 89 | // publish the new Port, necessary for e2e tests 90 | process.env.PORT = port 91 | // add port to devServer config 92 | devWebpackConfig.devServer.port = port 93 | 94 | // Add FriendlyErrorsPlugin 95 | devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({ 96 | compilationSuccessInfo: { 97 | messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`], 98 | }, 99 | onErrors: config.dev.notifyOnErrors ? 100 | utils.createNotifierCallback() : 101 | undefined 102 | })) 103 | 104 | resolve(devWebpackConfig) 105 | } 106 | }) 107 | }) 108 | -------------------------------------------------------------------------------- /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 | 16 | const webpackConfig = merge(baseWebpackConfig, { 17 | module: { 18 | rules: utils.styleLoaders({ 19 | sourceMap: config.build.productionSourceMap, 20 | extract: true, 21 | usePostCSS: true 22 | }) 23 | }, 24 | devtool: config.build.productionSourceMap ? config.build.devtool : false, 25 | output: { 26 | path: config.build.assetsRoot, 27 | filename: utils.assetsPath('js/[name].[chunkhash].js'), 28 | chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') 29 | }, 30 | plugins: [ 31 | // http://vuejs.github.io/vue-loader/en/workflow/production.html 32 | new webpack.DefinePlugin({ 33 | 'process.env': env 34 | }), 35 | new UglifyJsPlugin({ 36 | uglifyOptions: { 37 | compress: { 38 | warnings: false 39 | } 40 | }, 41 | sourceMap: config.build.productionSourceMap, 42 | parallel: true 43 | }), 44 | // extract css into its own file 45 | new ExtractTextPlugin({ 46 | filename: utils.assetsPath('css/[name].[contenthash].css'), 47 | // Setting the following option to `false` will not extract CSS from codesplit chunks. 48 | // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack. 49 | // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, 50 | // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110 51 | allChunks: true, 52 | }), 53 | // Compress extracted CSS. We are using this plugin so that possible 54 | // duplicated CSS from different components can be deduped. 55 | new OptimizeCSSPlugin({ 56 | cssProcessorOptions: config.build.productionSourceMap 57 | ? { safe: true, map: { inline: false } } 58 | : { safe: true } 59 | }), 60 | // generate dist index.html with correct asset hash for caching. 61 | // you can customize output by editing /index.html 62 | // see https://github.com/ampedandwired/html-webpack-plugin 63 | new HtmlWebpackPlugin({ 64 | filename: config.build.index, 65 | template: 'index.html', 66 | inject: true, 67 | excludeChunks: ['app2'], //需要引入的Chunk，不配置就会引入所有页面的资源 68 | minify: { 69 | removeComments: true, 70 | collapseWhitespace: true, 71 | removeAttributeQuotes: true 72 | // more options: 73 | // https://github.com/kangax/html-minifier#options-quick-reference 74 | }, 75 | // necessary to consistently work with multiple chunks via CommonsChunkPlugin 76 | chunksSortMode: 'dependency' 77 | }), 78 | new HtmlWebpackPlugin({ 79 | filename: config.build.index2, 80 | template: 'index2.html', 81 | inject: true, 82 | excludeChunks: ['app'], //需要引入的Chunk，不配置就会引入所有页面的资源 83 | minify: { 84 | removeComments: true, 85 | collapseWhitespace: true, 86 | removeAttributeQuotes: true 87 | // more options: 88 | // https://github.com/kangax/html-minifier#options-quick-reference 89 | }, 90 | // necessary to consistently work with multiple chunks via CommonsChunkPlugin 91 | chunksSortMode: 'dependency' 92 | }), 93 | // keep module.id stable when vendor modules does not change 94 | new webpack.HashedModuleIdsPlugin(), 95 | // enable scope hoisting 96 | new webpack.optimize.ModuleConcatenationPlugin(), 97 | // split vendor js into its own file 98 | new webpack.optimize.CommonsChunkPlugin({ 99 | name: 'vendor', 100 | minChunks (module) { 101 | // any required modules inside node_modules are extracted to vendor 102 | return ( 103 | module.resource && 104 | /\.js$/.test(module.resource) && 105 | module.resource.indexOf( 106 | path.join(__dirname, '../node_modules') 107 | ) === 0 108 | ) 109 | } 110 | }), 111 | // extract webpack runtime and module manifest to its own file in order to 112 | // prevent vendor hash from being updated whenever app bundle is updated 113 | new webpack.optimize.CommonsChunkPlugin({ 114 | name: 'manifest', 115 | minChunks: Infinity 116 | }), 117 | // This instance extracts shared chunks from code splitted chunks and bundles them 118 | // in a separate chunk, similar to the vendor chunk 119 | // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk 120 | new webpack.optimize.CommonsChunkPlugin({ 121 | name: 'app', 122 | async: 'vendor-async', 123 | children: true, 124 | minChunks: 3 125 | }), 126 | 127 | // copy custom static assets 128 | new CopyWebpackPlugin([ 129 | { 130 | from: path.resolve(__dirname, '../static'), 131 | to: config.build.assetsSubDirectory, 132 | ignore: ['.*'] 133 | } 134 | ]) 135 | ] 136 | }) 137 | 138 | if (config.build.productionGzip) { 139 | const CompressionWebpackPlugin = require('compression-webpack-plugin') 140 | 141 | webpackConfig.plugins.push( 142 | new CompressionWebpackPlugin({ 143 | asset: '[path].gz[query]', 144 | algorithm: 'gzip', 145 | test: new RegExp( 146 | '\\.(' + 147 | config.build.productionGzipExtensions.join('|') + 148 | ')$' 149 | ), 150 | threshold: 10240, 151 | minRatio: 0.8 152 | }) 153 | ) 154 | } 155 | 156 | if (config.build.bundleAnalyzerReport) { 157 | const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin 158 | webpackConfig.plugins.push(new BundleAnalyzerPlugin()) 159 | } 160 | 161 | module.exports = webpackConfig 162 | -------------------------------------------------------------------------------- /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 | 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: path.resolve(__dirname, '../dist/index.html'), 42 | index2: path.resolve(__dirname, '../dist/index2.html'), 43 | 44 | // Paths 45 | assetsRoot: path.resolve(__dirname, '../dist'), 46 | assetsSubDirectory: 'static', 47 | assetsPublicPath: './', 48 | 49 | /** 50 | * Source Maps 51 | */ 52 | 53 | productionSourceMap: true, 54 | // https://webpack.js.org/configuration/devtool/#production 55 | devtool: '#source-map', 56 | 57 | // Gzip off by default as many popular static hosts such as 58 | // Surge or Netlify already gzip all static assets for you. 59 | // Before setting to `true`, make sure to: 60 | // npm install --save-dev compression-webpack-plugin 61 | productionGzip: false, 62 | productionGzipExtensions: ['js', 'css'], 63 | 64 | // Run the build command with an extra argument to 65 | // View the bundle analyzer report after build finishes: 66 | // `npm run build --report` 67 | // Set to `true` or `false` to always turn it on or off 68 | bundleAnalyzerReport: process.env.npm_config_report 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | module.exports = { 3 | NODE_ENV: '"production"' 4 | } 5 | -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | vueTool
-------------------------------------------------------------------------------- /dist/index2.html: -------------------------------------------------------------------------------- 1 | vueTool
-------------------------------------------------------------------------------- /dist/static/c426a1116301d1fd178c51522484127a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1292150917/vueToolOfficial/43ff215141e4b679c4a0774bd8bea348a9a4faef/dist/static/c426a1116301d1fd178c51522484127a.png -------------------------------------------------------------------------------- /dist/static/default.min.css: -------------------------------------------------------------------------------- 1 | .hljs, 2 | .language-javascript { 3 | display: block; 4 | overflow-x: auto; 5 | padding: 0.5em; 6 | line-height: 20px; 7 | background: #f1f4f8 8 | } 9 | 10 | .hljs, 11 | .hljs-subst { 12 | color: #444; 13 | line-height: 20px; 14 | } 15 | 16 | .hljs-attr { 17 | color: #b58900; 18 | } 19 | p a{ 20 | text-decoration: none; 21 | color: #2c31ff; 22 | } 23 | td code { 24 | background: #ececec; 25 | padding: 4px 8px; 26 | color: #666; 27 | border-radius: 4px; 28 | } 29 | blockquote{ 30 | border-left: 5px solid #EED; 31 | padding-left: 12px; 32 | } 33 | p code{ 34 | color: #666; 35 | background: #ececec; 36 | padding: 3px 7px 3px 7px; 37 | } 38 | pre { 39 | overflow: auto; 40 | } 41 | 42 | thead { 43 | background: #f1f4f8; 44 | text-align: left; 45 | } 46 | 47 | th { 48 | font-weight: 300; 49 | } 50 | 51 | td { 52 | font-size: 13px; 53 | } 54 | 55 | .mar30 { 56 | margin-top: 30px; 57 | } 58 | 59 | .mar20 { 60 | margin-top: 20px; 61 | } 62 | 63 | table { 64 | width: 100%; 65 | border-collapse: collapse; 66 | } 67 | 68 | h2 { 69 | margin-top: 40px; 70 | } 71 | 72 | h4 { 73 | margin-top: 10px; 74 | margin-bottom: 10px; 75 | } 76 | 77 | .name { 78 | margin-bottom: 30px; 79 | } 80 | 81 | tr { 82 | height: 40px; 83 | line-height: 40px; 84 | border-bottom: 1px solid #eee; 85 | } 86 | 87 | .main p { 88 | margin: 15px 0; 89 | font-size: 14px; 90 | line-height: 26px; 91 | color: #34495e; 92 | } 93 | 94 | th { 95 | font-size: 12px; 96 | } 97 | 98 | h1, 99 | h2, 100 | h3, 101 | h4, 102 | h5, 103 | h6 { 104 | font-size: 22px; 105 | margin-top: 45px; 106 | line-height: 1.5; 107 | font-weight: 400; 108 | margin: 20px 0 10px; 109 | color: #333; 110 | } 111 | 112 | .language-html { 113 | background: #f1f4f8; 114 | display: block; 115 | line-height: 24px; 116 | padding-top: 14px; 117 | padding-bottom: 14px; 118 | line-height: 26px; 119 | padding-left: 15px; 120 | font-size: 14px; 121 | } 122 | 123 | h4 { 124 | font-size: 16px; 125 | margin-bottom: 15px; 126 | line-height: 1.5; 127 | font-weight: 400; 128 | margin: 20px 0 10px; 129 | color: #333; 130 | } 131 | 132 | .hljs-comment { 133 | color: #888888 134 | } 135 | 136 | .hljs-keyword, 137 | .hljs-attribute, 138 | .hljs-selector-tag, 139 | .hljs-meta-keyword, 140 | .hljs-doctag, 141 | .hljs-name { 142 | color: #0079f3; 143 | } 144 | 145 | .hljs-type, 146 | .hljs-string, 147 | .hljs-number, 148 | .hljs-selector-id, 149 | .hljs-selector-class, 150 | .hljs-quote, 151 | .hljs-template-tag, 152 | .hljs-deletion { 153 | color: #0079f3 154 | } 155 | 156 | .hljs-title, 157 | .hljs-section { 158 | color: #880000; 159 | font-weight: bold 160 | } 161 | 162 | .hljs-regexp, 163 | .hljs-symbol, 164 | .hljs-variable, 165 | .hljs-template-variable, 166 | .hljs-link, 167 | .hljs-selector-attr, 168 | .hljs-selector-pseudo { 169 | color: #BC6060 170 | } 171 | 172 | .hljs-literal { 173 | color: #78A960 174 | } 175 | 176 | .hljs-built_in, 177 | .hljs-bullet, 178 | .hljs-code, 179 | .hljs-addition { 180 | color: #397300 181 | } 182 | 183 | .hljs-meta { 184 | color: #1f7199 185 | } 186 | 187 | .hljs-meta-string { 188 | color: #4d99bf 189 | } 190 | 191 | .hljs-emphasis { 192 | font-style: italic 193 | } 194 | 195 | .hljs-strong { 196 | font-weight: bold 197 | } 198 | -------------------------------------------------------------------------------- /dist/static/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1292150917/vueToolOfficial/43ff215141e4b679c4a0774bd8bea348a9a4faef/dist/static/favicon.png -------------------------------------------------------------------------------- /dist/static/fluidicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1292150917/vueToolOfficial/43ff215141e4b679c4a0774bd8bea348a9a4faef/dist/static/fluidicon.png -------------------------------------------------------------------------------- /dist/static/js/0.f691fc72e4331bcef110.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([0],{eyvT:function(s,t,a){s.exports=a("kpBl")},kpBl:function(s,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r={render:function(){this.$createElement;this._self._c;return this._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("p",{attrs:{align:"center"}},[a("a",{attrs:{href:"https://1292150917.github.io/vueToolOfficial/dist/index.html#/brief"}},[a("img",{attrs:{src:"static/favicon.png"}})])]),s._v(" "),a("p",{attrs:{align:"center"}},[a("b",{attrs:{size:"5",color:"#7FFFD4",face:"微软雅黑",align:"center"}},[s._v("\n\t\t一套收集各式各样、偶尔维护的UI库, mintUi,Vant的设计\n\t")])]),s._v(" "),a("p",{attrs:{align:"center"}},[a("b",{attrs:{size:"5",color:"#7FFFD4",face:"微软雅黑",align:"center"}},[s._v("\n\t\t为什么现在又那么多开源的UI框架，我为什么又要在写一套！下面我来解释一下\n\t")])]),s._v(" "),a("blockquote",[a("p",[s._v("对自己能力的提升！")])]),s._v(" "),a("blockquote",[a("p",[s._v("想拥有一个自己的UI框架，现在的UI框架太散落，总是找来找去的！")])]),s._v(" "),a("blockquote",[a("p",[s._v("想了解一下webpack以及各种loader的打包机制！")])]),s._v(" "),a("blockquote",[a("p",[s._v("就是想装B一下！ 嗯嗯 就这个")])]),s._v(" "),a("h2"),s._v(" "),a("h2",[s._v("快速上手")]),s._v(" "),a("h3",[s._v("脚手架")]),s._v(" "),a("p",[s._v("推荐使用 Vue 官方提供的脚手架 Vue Cli 3 创建项目")]),s._v(" "),a("h3",[s._v("方法使用说明")]),s._v(" "),a("p",[s._v("此方法提供各种转换方法！也是个人项目中经常使用到的！希望对你有帮助！")]),s._v(" "),a("h3",[s._v("安装")]),s._v(" "),a("h4",[s._v("NPM")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-javascript"}},[s._v("npm i vue-tool\n")])]),s._v(" "),a("h4",[s._v("YARN")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-javascript"}},[s._v("yarn add vue-tool\n")])]),s._v(" "),a("h4",[s._v("CDN")]),s._v(" "),a("p",[s._v("暂不提供第三方CDN引入")]),s._v(" "),a("h3",[s._v("引入组件")]),s._v(" "),a("p",[s._v("方式一. 使用 "),a("code",{pre:!0},[s._v("babel-plugin-import")]),s._v(" (推荐，方法来自vant，但是引入方式是一致的！)")]),s._v(" "),a("p",[a("code",{pre:!0},[s._v("babel-plugin-import")]),s._v(" 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-javascript"}},[s._v("# 安装 babel-plugin-"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" 插件\nnpm i babel-plugin-"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" -D\n")])]),s._v(" "),a("h5"),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-javascript"}},[a("span",{attrs:{class:"hljs-comment"}},[s._v("// .babelrc 中配置")]),s._v("\n"),a("span",{attrs:{class:"hljs-comment"}},[s._v("// 注意：webpack 1 无需设置 libraryDirectory")]),s._v("\n{\n "),a("span",{attrs:{class:"hljs-string"}},[s._v('"plugins"')]),s._v(": [\n ["),a("span",{attrs:{class:"hljs-string"}},[s._v('"import"')]),s._v(", {\n "),a("span",{attrs:{class:"hljs-string"}},[s._v('"libraryName"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"vue-tool"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v('"libraryDirectory"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"es"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v('"style"')]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n }]\n ]\n}\n\n"),a("span",{attrs:{class:"hljs-comment"}},[s._v("// 对于使用 babel7 的用户，可以在 babel.config.js 中配置")]),s._v("\n"),a("span",{attrs:{class:"hljs-built_in"}},[s._v("module")]),s._v(".exports = {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("plugins")]),s._v(": [\n ["),a("span",{attrs:{class:"hljs-string"}},[s._v("'import'")]),s._v(", {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("libraryName")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'vue-tool'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("libraryDirectory")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'es'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n }, "),a("span",{attrs:{class:"hljs-string"}},[s._v("'vue-tool'")]),s._v("]\n ]\n};\n")])]),s._v(" "),a("p",[s._v("接着你可以在代码中直接引入 vue-tool 组件，插件会自动将代码转化为方式二中的按需引入形式")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-javascript"}},[s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" { Button } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'vue-tool'")]),s._v(";\n\n")])]),s._v(" "),a("p",[s._v("方式二. 导入所有组件")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-javascript"}},[s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v(";\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" vueTool "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'vue-tool'")]),s._v(";\n\nVue.use(vueTool);\n\n")])]),s._v(" "),a("h5"),s._v(" "),a("p",[a("code",{pre:!0},[s._v("注意：配置 babel-plugin-import 插件后将不允许导入所有组件")])]),s._v(" "),a("h3",[s._v("Rem 适配")]),s._v(" "),a("p",[s._v("vue-tool 中的样式默认使用px作为单位，如果需要使用rem单位，推荐使用以下两个工具")]),s._v(" "),a("p",[a("code",{pre:!0},[s._v("postcss-pxtorem")]),s._v(" 是一款 "),a("code",{pre:!0},[s._v("postcss")]),s._v(" 插件，用于将单位转化为 rem\n"),a("code",{pre:!0},[s._v("px2rem")]),s._v(" 把px转换rem\n也可以装对应的loader")])])}]},v=a("VU/8")(null,r,!1,null,null,null);t.default=v.exports}}); 2 | //# sourceMappingURL=0.f691fc72e4331bcef110.js.map -------------------------------------------------------------------------------- /dist/static/js/0.f691fc72e4331bcef110.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///./src/index.md","webpack:///./src/index.md?7649","webpack:///./src/index.md?6dab"],"names":["module","exports","__webpack_require__","markdown_compilerraw_src","render","this","$createElement","_self","_c","_m","staticRenderFns","_vm","_h","attrs","align","href","src","_v","size","color","face","pre","v-pre","class","Component","normalizeComponent","__webpack_exports__"],"mappings":"uCAAAA,EAAAC,QAAiBC,EAAQ,4FCAzB,IAGeC,GADEC,OAFjB,WAA0BC,KAAaC,eAAbD,KAAuCE,MAAAC,GAAwB,OAA/DH,KAA+DI,GAAA,IAExEC,iBADjB,WAAoC,IAAAC,EAAAN,KAAaO,EAAAD,EAAAL,eAA0BE,EAAAG,EAAAJ,MAAAC,IAAAI,EAAwB,OAAAJ,EAAA,WAAAA,EAAA,KAA6BK,OAAOC,MAAA,YAAkBN,EAAA,KAAUK,OAAOE,KAAA,yEAA8EP,EAAA,OAAYK,OAAOG,IAAA,4BAA4BL,EAAAM,GAAA,KAAAT,EAAA,KAA0BK,OAAOC,MAAA,YAAkBN,EAAA,KAAUK,OAAOK,KAAA,IAAAC,MAAA,UAAAC,KAAA,OAAAN,MAAA,YAA6DH,EAAAM,GAAA,mDAAAN,EAAAM,GAAA,KAAAT,EAAA,KAAgFK,OAAOC,MAAA,YAAkBN,EAAA,KAAUK,OAAOK,KAAA,IAAAC,MAAA,UAAAC,KAAA,OAAAN,MAAA,YAA6DH,EAAAM,GAAA,sDAAAN,EAAAM,GAAA,KAAAT,EAAA,cAAAA,EAAA,KAAAG,EAAAM,GAAA,iBAAAN,EAAAM,GAAA,KAAAT,EAAA,cAAAA,EAAA,KAAAG,EAAAM,GAAA,wCAAAN,EAAAM,GAAA,KAAAT,EAAA,cAAAA,EAAA,KAAAG,EAAAM,GAAA,oCAAAN,EAAAM,GAAA,KAAAT,EAAA,cAAAA,EAAA,KAAAG,EAAAM,GAAA,uBAAAN,EAAAM,GAAA,KAAAT,EAAA,MAAAG,EAAAM,GAAA,KAAAT,EAAA,MAAAG,EAAAM,GAAA,UAAAN,EAAAM,GAAA,KAAAT,EAAA,MAAAG,EAAAM,GAAA,SAAAN,EAAAM,GAAA,KAAAT,EAAA,KAAAG,EAAAM,GAAA,sCAAAN,EAAAM,GAAA,KAAAT,EAAA,MAAAG,EAAAM,GAAA,YAAAN,EAAAM,GAAA,KAAAT,EAAA,KAAAG,EAAAM,GAAA,wCAAAN,EAAAM,GAAA,KAAAT,EAAA,MAAAG,EAAAM,GAAA,QAAAN,EAAAM,GAAA,KAAAT,EAAA,MAAAG,EAAAM,GAAA,SAAAN,EAAAM,GAAA,KAAAT,EAAA,OAA8sBa,KAAA,IAASb,EAAA,QAAaK,OAAOS,QAAA,GAAAC,MAAA,yBAA0CZ,EAAAM,GAAA,wBAAAN,EAAAM,GAAA,KAAAT,EAAA,MAAAG,EAAAM,GAAA,UAAAN,EAAAM,GAAA,KAAAT,EAAA,OAA6Fa,KAAA,IAASb,EAAA,QAAaK,OAAOS,QAAA,GAAAC,MAAA,yBAA0CZ,EAAAM,GAAA,2BAAAN,EAAAM,GAAA,KAAAT,EAAA,MAAAG,EAAAM,GAAA,SAAAN,EAAAM,GAAA,KAAAT,EAAA,KAAAG,EAAAM,GAAA,kBAAAN,EAAAM,GAAA,KAAAT,EAAA,MAAAG,EAAAM,GAAA,UAAAN,EAAAM,GAAA,KAAAT,EAAA,KAAAG,EAAAM,GAAA,YAAAT,EAAA,QAA8Ma,KAAA,IAASV,EAAAM,GAAA,yBAAAN,EAAAM,GAAA,gCAAAN,EAAAM,GAAA,KAAAT,EAAA,KAAAA,EAAA,QAAwGa,KAAA,IAASV,EAAAM,GAAA,yBAAAN,EAAAM,GAAA,oDAAAN,EAAAM,GAAA,KAAAT,EAAA,OAAmHa,KAAA,IAASb,EAAA,QAAaK,OAAOS,QAAA,GAAAC,MAAA,yBAA0CZ,EAAAM,GAAA,sBAAAT,EAAA,QAA0CK,OAAOU,MAAA,kBAAwBZ,EAAAM,GAAA,YAAAN,EAAAM,GAAA,4BAAAT,EAAA,QAAmEK,OAAOU,MAAA,kBAAwBZ,EAAAM,GAAA,YAAAN,EAAAM,GAAA,aAAAN,EAAAM,GAAA,KAAAT,EAAA,MAAAG,EAAAM,GAAA,KAAAT,EAAA,OAAoFa,KAAA,IAASb,EAAA,QAAaK,OAAOS,QAAA,GAAAC,MAAA,yBAA0Cf,EAAA,QAAaK,OAAOU,MAAA,kBAAwBZ,EAAAM,GAAA,qBAAAN,EAAAM,GAAA,MAAAT,EAAA,QAAsDK,OAAOU,MAAA,kBAAwBZ,EAAAM,GAAA,2CAAAN,EAAAM,GAAA,WAA+DT,EAAA,QAAkBK,OAAOU,MAAA,iBAAuBZ,EAAAM,GAAA,eAAAN,EAAAM,GAAA,cAAAT,EAAA,QAA0DK,OAAOU,MAAA,iBAAuBZ,EAAAM,GAAA,cAAAN,EAAAM,GAAA,eAAoCT,EAAA,QAAsBK,OAAOU,MAAA,iBAAuBZ,EAAAM,GAAA,mBAAAN,EAAAM,GAAA,MAAAT,EAAA,QAAsDK,OAAOU,MAAA,iBAAuBZ,EAAAM,GAAA,gBAAAN,EAAAM,GAAA,aAAAT,EAAA,QAA0DK,OAAOU,MAAA,iBAAuBZ,EAAAM,GAAA,wBAAAN,EAAAM,GAAA,MAAAT,EAAA,QAA2DK,OAAOU,MAAA,iBAAuBZ,EAAAM,GAAA,UAAAN,EAAAM,GAAA,aAAAT,EAAA,QAAoDK,OAAOU,MAAA,iBAAuBZ,EAAAM,GAAA,aAAAN,EAAAM,GAAA,MAAAT,EAAA,QAAgDK,OAAOU,MAAA,kBAAwBZ,EAAAM,GAAA,UAAAN,EAAAM,GAAA,wBAA2CT,EAAA,QAAkBK,OAAOU,MAAA,kBAAwBZ,EAAAM,GAAA,gDAAAN,EAAAM,GAAA,MAAAT,EAAA,QAAiFK,OAAOU,MAAA,mBAAyBZ,EAAAM,GAAA,YAAAN,EAAAM,GAAA,oBAAyCT,EAAA,QAAkBK,OAAOU,MAAA,eAAqBZ,EAAAM,GAAA,aAAAN,EAAAM,GAAA,cAAAT,EAAA,QAAsDK,OAAOU,MAAA,iBAAuBZ,EAAAM,GAAA,cAAAN,EAAAM,GAAA,eAAkCT,EAAA,QAAsBK,OAAOU,MAAA,eAAqBZ,EAAAM,GAAA,iBAAAN,EAAAM,GAAA,MAAAT,EAAA,QAAkDK,OAAOU,MAAA,iBAAuBZ,EAAAM,GAAA,gBAAAN,EAAAM,GAAA,aAAAT,EAAA,QAAwDK,OAAOU,MAAA,eAAqBZ,EAAAM,GAAA,sBAAAN,EAAAM,GAAA,MAAAT,EAAA,QAAuDK,OAAOU,MAAA,iBAAuBZ,EAAAM,GAAA,UAAAN,EAAAM,GAAA,aAAAT,EAAA,QAAkDK,OAAOU,MAAA,eAAqBZ,EAAAM,GAAA,WAAAN,EAAAM,GAAA,MAAAT,EAAA,QAA4CK,OAAOU,MAAA,kBAAwBZ,EAAAM,GAAA,UAAAN,EAAAM,GAAA,aAAkCT,EAAA,QAAgBK,OAAOU,MAAA,iBAAuBZ,EAAAM,GAAA,gBAAAN,EAAAM,GAAA,oBAA2CN,EAAAM,GAAA,KAAAT,EAAA,KAAAG,EAAAM,GAAA,sDAAAN,EAAAM,GAAA,KAAAT,EAAA,OAAgHa,KAAA,IAASb,EAAA,QAAaK,OAAOS,QAAA,GAAAC,MAAA,yBAA0CZ,EAAAM,GAAA,MAAAT,EAAA,QAA0BK,OAAOU,MAAA,kBAAwBZ,EAAAM,GAAA,YAAAN,EAAAM,GAAA,gBAAwCT,EAAA,QAAeK,OAAOU,MAAA,kBAAwBZ,EAAAM,GAAA,UAAAN,EAAAM,GAAA,KAAAT,EAAA,QAA0CK,OAAOU,MAAA,iBAAuBZ,EAAAM,GAAA,gBAAAN,EAAAM,GAAA,aAAkCN,EAAAM,GAAA,KAAAT,EAAA,KAAAG,EAAAM,GAAA,iBAAAN,EAAAM,GAAA,KAAAT,EAAA,OAA6Ea,KAAA,IAASb,EAAA,QAAaK,OAAOS,QAAA,GAAAC,MAAA,yBAA0CZ,EAAAM,GAAA,MAAAT,EAAA,QAA0BK,OAAOU,MAAA,kBAAwBZ,EAAAM,GAAA,YAAAN,EAAAM,GAAA,SAAAT,EAAA,QAAgDK,OAAOU,MAAA,kBAAwBZ,EAAAM,GAAA,UAAAN,EAAAM,GAAA,KAAAT,EAAA,QAA0CK,OAAOU,MAAA,iBAAuBZ,EAAAM,GAAA,WAAAN,EAAAM,GAAA,OAA6BT,EAAA,QAAgBK,OAAOU,MAAA,kBAAwBZ,EAAAM,GAAA,YAAAN,EAAAM,GAAA,aAAAT,EAAA,QAAoDK,OAAOU,MAAA,kBAAwBZ,EAAAM,GAAA,UAAAN,EAAAM,GAAA,KAAAT,EAAA,QAA0CK,OAAOU,MAAA,iBAAuBZ,EAAAM,GAAA,gBAAAN,EAAAM,GAAA,kCAAuDN,EAAAM,GAAA,KAAAT,EAAA,MAAAG,EAAAM,GAAA,KAAAT,EAAA,KAAAA,EAAA,QAA+Da,KAAA,IAASV,EAAAM,GAAA,+CAAAN,EAAAM,GAAA,KAAAT,EAAA,MAAAG,EAAAM,GAAA,YAAAN,EAAAM,GAAA,KAAAT,EAAA,KAAAG,EAAAM,GAAA,oDAAAN,EAAAM,GAAA,KAAAT,EAAA,KAAAA,EAAA,QAA8Ma,KAAA,IAASV,EAAAM,GAAA,qBAAAN,EAAAM,GAAA,SAAAT,EAAA,QAAyDa,KAAA,IAASV,EAAAM,GAAA,aAAAN,EAAAM,GAAA,sBAAAT,EAAA,QAA8Da,KAAA,IAASV,EAAAM,GAAA,YAAAN,EAAAM,GAAA,mCCYzlLO,EAbyBtB,EAAQ,OAajCuB,CAXA,KAaEtB,GATF,EAEA,KAEA,KAEA,MAUeuB,EAAA,QAAAF,EAAiB","file":"static/js/0.f691fc72e4331bcef110.js","sourcesContent":["module.exports = require(\"!!vue-loader!../node_modules/vue-markdown-loader/lib/markdown-compiler.js?raw!./index.md\");\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/index.md\n// module id = eyvT\n// module chunks = 0","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _vm._m(0)}\nvar staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('section',[_c('p',{attrs:{\"align\":\"center\"}},[_c('a',{attrs:{\"href\":\"https://1292150917.github.io/vueToolOfficial/dist/index.html#/brief\"}},[_c('img',{attrs:{\"src\":\"static/favicon.png\"}})])]),_vm._v(\" \"),_c('p',{attrs:{\"align\":\"center\"}},[_c('b',{attrs:{\"size\":\"5\",\"color\":\"#7FFFD4\",\"face\":\"微软雅黑\",\"align\":\"center\"}},[_vm._v(\"\\n\\t\\t一套收集各式各样、偶尔维护的UI库, mintUi,Vant的设计\\n\\t\")])]),_vm._v(\" \"),_c('p',{attrs:{\"align\":\"center\"}},[_c('b',{attrs:{\"size\":\"5\",\"color\":\"#7FFFD4\",\"face\":\"微软雅黑\",\"align\":\"center\"}},[_vm._v(\"\\n\\t\\t为什么现在又那么多开源的UI框架，我为什么又要在写一套！下面我来解释一下\\n\\t\")])]),_vm._v(\" \"),_c('blockquote',[_c('p',[_vm._v(\"对自己能力的提升！\")])]),_vm._v(\" \"),_c('blockquote',[_c('p',[_vm._v(\"想拥有一个自己的UI框架，现在的UI框架太散落，总是找来找去的！\")])]),_vm._v(\" \"),_c('blockquote',[_c('p',[_vm._v(\"想了解一下webpack以及各种loader的打包机制！\")])]),_vm._v(\" \"),_c('blockquote',[_c('p',[_vm._v(\"就是想装B一下！ 嗯嗯 就这个\")])]),_vm._v(\" \"),_c('h2'),_vm._v(\" \"),_c('h2',[_vm._v(\"快速上手\")]),_vm._v(\" \"),_c('h3',[_vm._v(\"脚手架\")]),_vm._v(\" \"),_c('p',[_vm._v(\"推荐使用 Vue 官方提供的脚手架 Vue Cli 3 创建项目\")]),_vm._v(\" \"),_c('h3',[_vm._v(\"方法使用说明\")]),_vm._v(\" \"),_c('p',[_vm._v(\"此方法提供各种转换方法！也是个人项目中经常使用到的！希望对你有帮助！\")]),_vm._v(\" \"),_c('h3',[_vm._v(\"安装\")]),_vm._v(\" \"),_c('h4',[_vm._v(\"NPM\")]),_vm._v(\" \"),_c('pre',{pre:true},[_c('code',{attrs:{\"v-pre\":\"\",\"class\":\"language-javascript\"}},[_vm._v(\"npm i vue-tool\\n\")])]),_vm._v(\" \"),_c('h4',[_vm._v(\"YARN\")]),_vm._v(\" \"),_c('pre',{pre:true},[_c('code',{attrs:{\"v-pre\":\"\",\"class\":\"language-javascript\"}},[_vm._v(\"yarn add vue-tool\\n\")])]),_vm._v(\" \"),_c('h4',[_vm._v(\"CDN\")]),_vm._v(\" \"),_c('p',[_vm._v(\"暂不提供第三方CDN引入\")]),_vm._v(\" \"),_c('h3',[_vm._v(\"引入组件\")]),_vm._v(\" \"),_c('p',[_vm._v(\"方式一. 使用 \"),_c('code',{pre:true},[_vm._v(\"babel-plugin-import\")]),_vm._v(\" (推荐，方法来自vant，但是引入方式是一致的！)\")]),_vm._v(\" \"),_c('p',[_c('code',{pre:true},[_vm._v(\"babel-plugin-import\")]),_vm._v(\" 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式\")]),_vm._v(\" \"),_c('pre',{pre:true},[_c('code',{attrs:{\"v-pre\":\"\",\"class\":\"language-javascript\"}},[_vm._v(\"# 安装 babel-plugin-\"),_c('span',{attrs:{\"class\":\"hljs-keyword\"}},[_vm._v(\"import\")]),_vm._v(\" 插件\\nnpm i babel-plugin-\"),_c('span',{attrs:{\"class\":\"hljs-keyword\"}},[_vm._v(\"import\")]),_vm._v(\" -D\\n\")])]),_vm._v(\" \"),_c('h5'),_vm._v(\" \"),_c('pre',{pre:true},[_c('code',{attrs:{\"v-pre\":\"\",\"class\":\"language-javascript\"}},[_c('span',{attrs:{\"class\":\"hljs-comment\"}},[_vm._v(\"// .babelrc 中配置\")]),_vm._v(\"\\n\"),_c('span',{attrs:{\"class\":\"hljs-comment\"}},[_vm._v(\"// 注意：webpack 1 无需设置 libraryDirectory\")]),_vm._v(\"\\n{\\n \"),_c('span',{attrs:{\"class\":\"hljs-string\"}},[_vm._v(\"\\\"plugins\\\"\")]),_vm._v(\": [\\n [\"),_c('span',{attrs:{\"class\":\"hljs-string\"}},[_vm._v(\"\\\"import\\\"\")]),_vm._v(\", {\\n \"),_c('span',{attrs:{\"class\":\"hljs-string\"}},[_vm._v(\"\\\"libraryName\\\"\")]),_vm._v(\": \"),_c('span',{attrs:{\"class\":\"hljs-string\"}},[_vm._v(\"\\\"vue-tool\\\"\")]),_vm._v(\",\\n \"),_c('span',{attrs:{\"class\":\"hljs-string\"}},[_vm._v(\"\\\"libraryDirectory\\\"\")]),_vm._v(\": \"),_c('span',{attrs:{\"class\":\"hljs-string\"}},[_vm._v(\"\\\"es\\\"\")]),_vm._v(\",\\n \"),_c('span',{attrs:{\"class\":\"hljs-string\"}},[_vm._v(\"\\\"style\\\"\")]),_vm._v(\": \"),_c('span',{attrs:{\"class\":\"hljs-literal\"}},[_vm._v(\"true\")]),_vm._v(\"\\n }]\\n ]\\n}\\n\\n\"),_c('span',{attrs:{\"class\":\"hljs-comment\"}},[_vm._v(\"// 对于使用 babel7 的用户，可以在 babel.config.js 中配置\")]),_vm._v(\"\\n\"),_c('span',{attrs:{\"class\":\"hljs-built_in\"}},[_vm._v(\"module\")]),_vm._v(\".exports = {\\n \"),_c('span',{attrs:{\"class\":\"hljs-attr\"}},[_vm._v(\"plugins\")]),_vm._v(\": [\\n [\"),_c('span',{attrs:{\"class\":\"hljs-string\"}},[_vm._v(\"'import'\")]),_vm._v(\", {\\n \"),_c('span',{attrs:{\"class\":\"hljs-attr\"}},[_vm._v(\"libraryName\")]),_vm._v(\": \"),_c('span',{attrs:{\"class\":\"hljs-string\"}},[_vm._v(\"'vue-tool'\")]),_vm._v(\",\\n \"),_c('span',{attrs:{\"class\":\"hljs-attr\"}},[_vm._v(\"libraryDirectory\")]),_vm._v(\": \"),_c('span',{attrs:{\"class\":\"hljs-string\"}},[_vm._v(\"'es'\")]),_vm._v(\",\\n \"),_c('span',{attrs:{\"class\":\"hljs-attr\"}},[_vm._v(\"style\")]),_vm._v(\": \"),_c('span',{attrs:{\"class\":\"hljs-literal\"}},[_vm._v(\"true\")]),_vm._v(\"\\n }, \"),_c('span',{attrs:{\"class\":\"hljs-string\"}},[_vm._v(\"'vue-tool'\")]),_vm._v(\"]\\n ]\\n};\\n\")])]),_vm._v(\" \"),_c('p',[_vm._v(\"接着你可以在代码中直接引入 vue-tool 组件，插件会自动将代码转化为方式二中的按需引入形式\")]),_vm._v(\" \"),_c('pre',{pre:true},[_c('code',{attrs:{\"v-pre\":\"\",\"class\":\"language-javascript\"}},[_vm._v(\"\\n\"),_c('span',{attrs:{\"class\":\"hljs-keyword\"}},[_vm._v(\"import\")]),_vm._v(\" { Button } \"),_c('span',{attrs:{\"class\":\"hljs-keyword\"}},[_vm._v(\"from\")]),_vm._v(\" \"),_c('span',{attrs:{\"class\":\"hljs-string\"}},[_vm._v(\"'vue-tool'\")]),_vm._v(\";\\n\\n\")])]),_vm._v(\" \"),_c('p',[_vm._v(\"方式二. 导入所有组件\")]),_vm._v(\" \"),_c('pre',{pre:true},[_c('code',{attrs:{\"v-pre\":\"\",\"class\":\"language-javascript\"}},[_vm._v(\"\\n\"),_c('span',{attrs:{\"class\":\"hljs-keyword\"}},[_vm._v(\"import\")]),_vm._v(\" Vue \"),_c('span',{attrs:{\"class\":\"hljs-keyword\"}},[_vm._v(\"from\")]),_vm._v(\" \"),_c('span',{attrs:{\"class\":\"hljs-string\"}},[_vm._v(\"'vue'\")]),_vm._v(\";\\n\"),_c('span',{attrs:{\"class\":\"hljs-keyword\"}},[_vm._v(\"import\")]),_vm._v(\" vueTool \"),_c('span',{attrs:{\"class\":\"hljs-keyword\"}},[_vm._v(\"from\")]),_vm._v(\" \"),_c('span',{attrs:{\"class\":\"hljs-string\"}},[_vm._v(\"'vue-tool'\")]),_vm._v(\";\\n\\nVue.use(vueTool);\\n\\n\")])]),_vm._v(\" \"),_c('h5'),_vm._v(\" \"),_c('p',[_c('code',{pre:true},[_vm._v(\"注意：配置 babel-plugin-import 插件后将不允许导入所有组件\")])]),_vm._v(\" \"),_c('h3',[_vm._v(\"Rem 适配\")]),_vm._v(\" \"),_c('p',[_vm._v(\"vue-tool 中的样式默认使用px作为单位，如果需要使用rem单位，推荐使用以下两个工具\")]),_vm._v(\" \"),_c('p',[_c('code',{pre:true},[_vm._v(\"postcss-pxtorem\")]),_vm._v(\" 是一款 \"),_c('code',{pre:true},[_vm._v(\"postcss\")]),_vm._v(\" 插件，用于将单位转化为 rem\\n\"),_c('code',{pre:true},[_vm._v(\"px2rem\")]),_vm._v(\" 把px转换rem\\n也可以装对应的loader\")])])}]\nvar esExports = { render: render, staticRenderFns: staticRenderFns }\nexport default esExports\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-loader/lib/template-compiler?{\"id\":\"data-v-0dfa62f0\",\"hasScoped\":false,\"buble\":{\"transforms\":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./node_modules/vue-markdown-loader/lib/markdown-compiler.js?raw!./src/index.md\n// module id = null\n// module chunks = ","var normalizeComponent = require(\"!../node_modules/vue-loader/lib/component-normalizer\")\n/* script */\nvar __vue_script__ = null\n/* template */\nimport __vue_template__ from \"!!../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-0dfa62f0\\\",\\\"hasScoped\\\":false,\\\"buble\\\":{\\\"transforms\\\":{}}}!../node_modules/vue-loader/lib/selector?type=template&index=0!../node_modules/vue-markdown-loader/lib/markdown-compiler.js?raw!./index.md\"\n/* template functional */\nvar __vue_template_functional__ = false\n/* styles */\nvar __vue_styles__ = null\n/* scopeId */\nvar __vue_scopeId__ = null\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nvar Component = normalizeComponent(\n __vue_script__,\n __vue_template__,\n __vue_template_functional__,\n __vue_styles__,\n __vue_scopeId__,\n __vue_module_identifier__\n)\n\nexport default Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-loader!./node_modules/vue-markdown-loader/lib/markdown-compiler.js?raw!./src/index.md\n// module id = null\n// module chunks = "],"sourceRoot":""} -------------------------------------------------------------------------------- /dist/static/js/manifest.ea9d48c2a374a483b11a.js: -------------------------------------------------------------------------------- 1 | !function(e){var n=window.webpackJsonp;window.webpackJsonp=function(r,c,i){for(var u,a,f,s=0,l=[];s 2 | 3 | 4 | 5 | 6 | vueTool 7 | 8 | 9 | 10 | 11 | 12 | 27 | 28 | 29 | 30 |
31 | 32 | 33 | 34 | 35 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | vueTool 11 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue", 3 | "version": "1.0.0", 4 | "description": "A Vue.js project", 5 | "author": "ZhangZiFang <1292150917@qq.com>", 6 | "private": true, 7 | "scripts": { 8 | "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", 9 | "start": "npm run dev", 10 | "build": "node build/build.js" 11 | }, 12 | "dependencies": { 13 | "font-awesome": "^4.7.0", 14 | "highlight.js": "^9.13.1", 15 | "vue": "^2.5.2", 16 | "vue-router": "^3.0.1" 17 | }, 18 | "devDependencies": { 19 | "autoprefixer": "^7.1.2", 20 | "babel-core": "^6.22.1", 21 | "babel-helper-vue-jsx-merge-props": "^2.0.3", 22 | "babel-loader": "^7.1.1", 23 | "babel-plugin-syntax-jsx": "^6.18.0", 24 | "babel-plugin-transform-runtime": "^6.22.0", 25 | "babel-plugin-transform-vue-jsx": "^3.5.0", 26 | "babel-preset-env": "^1.3.2", 27 | "babel-preset-stage-2": "^6.22.0", 28 | "chalk": "^2.0.1", 29 | "copy-webpack-plugin": "^4.0.1", 30 | "css-loader": "^0.28.0", 31 | "extract-text-webpack-plugin": "^3.0.0", 32 | "file-loader": "^1.1.4", 33 | "friendly-errors-webpack-plugin": "^1.6.1", 34 | "html-webpack-plugin": "^2.30.1", 35 | "node-notifier": "^5.1.2", 36 | "optimize-css-assets-webpack-plugin": "^3.2.0", 37 | "ora": "^1.2.0", 38 | "portfinder": "^1.0.13", 39 | "postcss-import": "^11.0.0", 40 | "postcss-loader": "^2.0.8", 41 | "postcss-url": "^7.2.1", 42 | "rimraf": "^2.6.0", 43 | "semver": "^5.3.0", 44 | "shelljs": "^0.7.6", 45 | "uglifyjs-webpack-plugin": "^1.1.1", 46 | "url-loader": "^0.5.8", 47 | "vue-loader": "^13.3.0", 48 | "vue-markdown-loader": "^2.4.1", 49 | "vue-style-loader": "^3.0.1", 50 | "vue-template-compiler": "^2.5.2", 51 | "webpack": "^3.6.0", 52 | "webpack-bundle-analyzer": "^2.9.0", 53 | "webpack-dev-server": "^2.9.1", 54 | "webpack-merge": "^4.1.0" 55 | }, 56 | "engines": { 57 | "node": ">= 6.0.0", 58 | "npm": ">= 3.0.0" 59 | }, 60 | "browserslist": [ 61 | "> 1%", 62 | "last 2 versions", 63 | "not ie <= 8" 64 | ] 65 | } 66 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | 17 | 24 | -------------------------------------------------------------------------------- /src/index.md: -------------------------------------------------------------------------------- 1 | 2 |

3 | 4 |

5 |

6 | 7 | 一套收集各式各样、偶尔维护的UI库, mintUi,Vant的设计 8 | 9 |

10 |

11 | 12 | 为什么现在又那么多开源的UI框架，我为什么又要在写一套！下面我来解释一下 13 | 14 |

15 | 16 | > 对自己能力的提升！ 17 | 18 | > 想拥有一个自己的UI框架，现在的UI框架太散落，总是找来找去的！ 19 | 20 | > 想了解一下webpack以及各种loader的打包机制！ 21 | 22 | > 就是想装B一下！ 嗯嗯 就这个 23 | 24 | ## 25 | 26 | ## 快速上手 27 | 28 | ### 脚手架 29 | 30 | 推荐使用 Vue 官方提供的脚手架 Vue Cli 3 创建项目 31 | 32 | ### 方法使用说明 33 | 34 | 此方法提供各种转换方法！也是个人项目中经常使用到的！希望对你有帮助！ 35 | 36 | ### 安装 37 | 38 | #### NPM 39 | 40 | ```javascript 41 | npm i vue-tool 42 | ``` 43 | 44 | #### YARN 45 | 46 | ```javascript 47 | yarn add vue-tool 48 | ``` 49 | 50 | #### CDN 51 | 52 | 暂不提供第三方CDN引入 53 | 54 | ### 引入组件 55 | 56 | 57 | 方式一. 使用 `babel-plugin-import` (推荐，方法来自vant，但是引入方式是一致的！) 58 | 59 | `babel-plugin-import ` 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式 60 | 61 | ```javascript 62 | # 安装 babel-plugin-import 插件 63 | npm i babel-plugin-import -D 64 | ``` 65 | ##### 66 | 67 | ```javascript 68 | // .babelrc 中配置 69 | // 注意：webpack 1 无需设置 libraryDirectory 70 | { 71 | "plugins": [ 72 | ["import", { 73 | "libraryName": "vue-tool", 74 | "libraryDirectory": "es", 75 | "style": true 76 | }] 77 | ] 78 | } 79 | 80 | // 对于使用 babel7 的用户，可以在 babel.config.js 中配置 81 | module.exports = { 82 | plugins: [ 83 | ['import', { 84 | libraryName: 'vue-tool', 85 | libraryDirectory: 'es', 86 | style: true 87 | }, 'vue-tool'] 88 | ] 89 | }; 90 | ``` 91 | 92 | 接着你可以在代码中直接引入 vue-tool 组件，插件会自动将代码转化为方式二中的按需引入形式 93 | 94 | ```javascript 95 | 96 | import { Button } from 'vue-tool'; 97 | 98 | ``` 99 | 100 | 方式二. 导入所有组件 101 | 102 | ```javascript 103 | 104 | import Vue from 'vue'; 105 | import vueTool from 'vue-tool'; 106 | 107 | Vue.use(vueTool); 108 | 109 | ``` 110 | 111 | ##### 112 | 113 | `注意：配置 babel-plugin-import 插件后将不允许导入所有组件` 114 | 115 | ### Rem 适配 116 | 117 | vue-tool 中的样式默认使用px作为单位，如果需要使用rem单位，推荐使用以下两个工具 118 | 119 | `postcss-pxtorem` 是一款 `postcss` 插件，用于将单位转化为 rem 120 | `px2rem` 把px转换rem 121 | 也可以装对应的loader -------------------------------------------------------------------------------- /src/main.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 router from './router' 6 | import Vuetool from './vue-tool/src/index' 7 | import 'font-awesome/css/font-awesome.css' 8 | Vue.use(Vuetool) 9 | Vue.config.productionTip = false 10 | new Vue({ 11 | el: '#app', 12 | router, 13 | components: { App }, 14 | template: '' 15 | }) 16 | -------------------------------------------------------------------------------- /src/manoeuvre.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 './manoeuvre.vue' 5 | import router from './router/dome' 6 | import Vuetool from './vue-tool/src/index' 7 | Vue.use(Vuetool) 8 | Vue.config.productionTip = false 9 | new Vue({ 10 | el: '#app', 11 | router, 12 | components: { 13 | App 14 | }, 15 | template: '' 16 | }) 17 | -------------------------------------------------------------------------------- /src/manoeuvre.vue: -------------------------------------------------------------------------------- 1 | 12 | 24 | 25 | 31 | -------------------------------------------------------------------------------- /src/router/config.js: -------------------------------------------------------------------------------- 1 | function compooentUrl(url) { 2 | return require(`@/vue-tool/packages/${url}/src/index.md`) 3 | } 4 | 5 | function domeUrl(url) { 6 | return require(`@/views/${url}`) 7 | } 8 | var router = [{ 9 | path: '/brief', 10 | name: 'brief', 11 | component: r => require.ensure([], () => r(domeUrl('brief')), 'brief'), 12 | dome: r => require.ensure([], () => r(require('@/index.md')), 'brief'), 13 | meta: { 14 | name: "brief 简介" 15 | } 16 | }, { 17 | path: '/Button', 18 | name: 'Button', 19 | component: r => require.ensure([], () => r(domeUrl('Button')), 'Button'), 20 | dome: r => require.ensure([], () => r(compooentUrl('Button')), 'Button'), 21 | meta: { 22 | name: "Button 按钮" 23 | } 24 | }, { 25 | path: '/Cell', 26 | name: 'Cell', 27 | component: r => require.ensure([], () => r(domeUrl('Cell')), 'Cell'), 28 | dome: r => require.ensure([], () => r(compooentUrl('Cell')), 'Cell'), 29 | meta: { 30 | name: "Cell 单元格" 31 | } 32 | }, 33 | { 34 | path: '/mlAlert', 35 | name: 'mlAlert', 36 | component: r => require.ensure([], () => r(domeUrl('mlAlert')), 'mlAlert'), 37 | dome: r => require.ensure([], () => r(compooentUrl('mlAlert')), 'mlAlert'), 38 | meta: { 39 | name: "mlAlert 弹出框" 40 | } 41 | }, 42 | { 43 | path: '/Swipe', 44 | name: 'Swipe', 45 | component: r => require.ensure([], () => r(domeUrl('Swipe')), 'Swipe'), 46 | dome: r => require.ensure([], () => r(compooentUrl('Swipe')), 'Swipe'), 47 | meta: { 48 | name: "Swipe 轮播图" 49 | } 50 | }, { 51 | path: '/Toast', 52 | name: 'Toast', 53 | component: r => require.ensure([], () => r(domeUrl('Toast')), 'Toast'), 54 | dome: r => require.ensure([], () => r(compooentUrl('Toast')), 'Toast'), 55 | meta: { 56 | name: "Toast 轻提示" 57 | } 58 | }, { 59 | path: '/List', 60 | name: 'List', 61 | component: r => require.ensure([], () => r(domeUrl('List')), 'List'), 62 | dome: r => require.ensure([], () => r(compooentUrl('InfiniteScroll')), 'List'), 63 | meta: { 64 | name: "List 滚动" 65 | } 66 | }, { 67 | path: '/mlLazy', 68 | name: 'mlLazy', 69 | component: r => require.ensure([], () => r(domeUrl('mlLazy')), 'mlLazy'), 70 | dome: r => require.ensure([], () => r(compooentUrl('mlLazy')), 'mlLazy'), 71 | meta: { 72 | name: "mlLazy 懒加载" 73 | } 74 | }, { 75 | path: '/NavBar', 76 | name: 'NavBar', 77 | component: r => require.ensure([], () => r(domeUrl('NavBar')), 'NavBar'), 78 | dome: r => require.ensure([], () => r(compooentUrl('NavBar')), 'NavBar'), 79 | meta: { 80 | name: "NavBar 导航" 81 | } 82 | }, { 83 | path: '/Icon', 84 | name: 'Icon', 85 | component: r => require.ensure([], () => r(domeUrl('Icon')), 'Icon'), 86 | meta: { 87 | name: "Icon 图标" 88 | }, 89 | dome: r => require.ensure([], () => r(compooentUrl('Icon')), 'Icon') 90 | }, 91 | { 92 | path: '/Sticky', 93 | name: 'Sticky', 94 | component: r => require.ensure([], () => r(domeUrl('Sticky')), 'Sticky'), 95 | dome: r => require.ensure([], () => r(compooentUrl('Sticky')), 'Sticky'), 96 | meta: { 97 | name: "Sticky 粘贴定位" 98 | } 99 | }, 100 | { 101 | path: '/Loadings', 102 | name: 'Loadings', 103 | component: r => require.ensure([], () => r(domeUrl('Loadings')), 'Loadings'), 104 | dome: r => require.ensure([], () => r(compooentUrl('Loadings')), 'Loadings'), 105 | meta: { 106 | name: "Loading 加载" 107 | } 108 | }, 109 | { 110 | path: '/Switch', 111 | name: 'Switch', 112 | component: r => require.ensure([], () => r(domeUrl('Switch')), 'Switch'), 113 | dome: r => require.ensure([], () => r(compooentUrl('Switch')), 'Switch'), 114 | meta: { 115 | name: "Switch 开关" 116 | } 117 | }, 118 | { 119 | path: '/Popup', 120 | name: 'Popup', 121 | component: r => require.ensure([], () => r(domeUrl('Popup')), 'Popup'), 122 | dome: r => require.ensure([], () => r(compooentUrl('Popup')), 'Popup'), 123 | meta: { 124 | name: "Popup 弹出层" 125 | } 126 | }, 127 | { 128 | path: '/Regular', 129 | name: 'Regular', 130 | component: r => require.ensure([], () => r(domeUrl('Regular')), 'Regular'), 131 | dome: r => require.ensure([], () => r(compooentUrl('Regular')), 'Regular'), 132 | meta: { 133 | name: "Regular 正则" 134 | } 135 | }, 136 | { 137 | path: '/Picture', 138 | name: 'Picture', 139 | component: r => require.ensure([], () => r(domeUrl('Picture')), 'Picture'), 140 | dome: r => require.ensure([], () => r(compooentUrl('Picture')), 'Picture'), 141 | meta: { 142 | name: "Picture 图片" 143 | } 144 | }, 145 | { 146 | path: '/Cache', 147 | name: 'Cache', 148 | component: r => require.ensure([], () => r(domeUrl('Cache')), 'Cache'), 149 | dome: r => require.ensure([], () => r(compooentUrl('Cache')), 'Cache'), 150 | meta: { 151 | name: "Cache 缓存操作" 152 | } 153 | }, 154 | { 155 | path: '/FormHttp', 156 | name: 'FormHttp', 157 | component: r => require.ensure([], () => r(domeUrl('FormHttp')), 'FormHttp'), 158 | dome: r => require.ensure([], () => r(compooentUrl('FormHttp')), 'FormHttp'), 159 | meta: { 160 | name: "模拟表单提交" 161 | } 162 | }, 163 | 164 | ] 165 | export default router 166 | -------------------------------------------------------------------------------- /src/router/dome.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | import config from './config' 4 | Vue.use(Router) 5 | var routerList = [] 6 | config.forEach(res => { 7 | routerList.push({ 8 | path: res.path, 9 | name: res.name, 10 | component: res.component, 11 | meta:res.meta 12 | }) 13 | }) 14 | var router = new Router({ 15 | routes: [ 16 | ...routerList, 17 | ] 18 | }) 19 | 20 | export default router 21 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | import index from '@/views/index' 4 | import config from './config' 5 | Vue.use(Router) 6 | var routerList = [] 7 | config.forEach(res => { 8 | routerList.push({ 9 | path: res.path, 10 | name: res.name, 11 | component: res.dome, 12 | }) 13 | }) 14 | var router = new Router({ 15 | routes: [{ 16 | path: '/', 17 | name: 'index', 18 | component: index, 19 | redirect: "brief", 20 | children: routerList 21 | }] 22 | }) 23 | export default router 24 | -------------------------------------------------------------------------------- /src/views/Button.vue: -------------------------------------------------------------------------------- 1 | 8 | 18 | 29 | -------------------------------------------------------------------------------- /src/views/Cache.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /src/views/Cell.vue: -------------------------------------------------------------------------------- 1 | 11 | 22 | 31 | -------------------------------------------------------------------------------- /src/views/FormHttp.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/views/Icon.vue: -------------------------------------------------------------------------------- 1 | 19 | 38 | -------------------------------------------------------------------------------- /src/views/List.vue: -------------------------------------------------------------------------------- 1 | 10 | 29 | 57 | -------------------------------------------------------------------------------- /src/views/Loadings.vue: -------------------------------------------------------------------------------- 1 | 55 | 69 | 80 | -------------------------------------------------------------------------------- /src/views/NavBar.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 26 | -------------------------------------------------------------------------------- /src/views/Picture.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /src/views/Popup.vue: -------------------------------------------------------------------------------- 1 | 15 | 32 | -------------------------------------------------------------------------------- /src/views/Regular.vue: -------------------------------------------------------------------------------- 1 | 8 | 28 | -------------------------------------------------------------------------------- /src/views/Sticky.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 30 | -------------------------------------------------------------------------------- /src/views/Swipe.vue: -------------------------------------------------------------------------------- 1 | 74 | 86 | 118 | -------------------------------------------------------------------------------- /src/views/Switch.vue: -------------------------------------------------------------------------------- 1 | 7 | 20 | 21 | -------------------------------------------------------------------------------- /src/views/Toast.vue: -------------------------------------------------------------------------------- 1 | 13 | 60 | 74 | -------------------------------------------------------------------------------- /src/views/brief.vue: -------------------------------------------------------------------------------- 1 | 20 | 56 | 86 | -------------------------------------------------------------------------------- /src/views/index.vue: -------------------------------------------------------------------------------- 1 | 47 | 48 | 116 | -------------------------------------------------------------------------------- /src/views/mlAlert.vue: -------------------------------------------------------------------------------- 1 | 11 | 59 | 73 | -------------------------------------------------------------------------------- /src/views/mlLazy.vue: -------------------------------------------------------------------------------- 1 | 6 | 50 | 56 | -------------------------------------------------------------------------------- /src/vue-tool/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "_from": "vue-tool@^1.0.3", 3 | "_id": "vue-tool@1.0.6", 4 | "_inBundle": false, 5 | "_integrity": "sha1-w1AiN/0dEbOJRVNoTcL+J1jNHv4=", 6 | "_location": "/vue-tool", 7 | "_phantomChildren": {}, 8 | "_requested": { 9 | "type": "range", 10 | "registry": true, 11 | "raw": "vue-tool@^1.0.3", 12 | "name": "vue-tool", 13 | "escapedName": "vue-tool", 14 | "rawSpec": "^1.0.3", 15 | "saveSpec": null, 16 | "fetchSpec": "^1.0.3" 17 | }, 18 | "_requiredBy": [ 19 | "#USER", 20 | "/" 21 | ], 22 | "_resolved": "http://r.cnpmjs.org/vue-tool/download/vue-tool-1.0.6.tgz", 23 | "_shasum": "c3502237fd1d11b3894553684dc2fe2758cd1efe", 24 | "_spec": "vue-tool@^1.0.3", 25 | "_where": "C:\\Users\\Admin\\Desktop\\个人\\vueToolOfficial", 26 | "author": { 27 | "name": "zhangzifang", 28 | "email": "1292150917@qq.com" 29 | }, 30 | "bugs": { 31 | "url": "https://github.com/DaiHuaXieHuaKai/GaoDeLocation/issues" 32 | }, 33 | "bundleDependencies": false, 34 | "deprecated": false, 35 | "description": "", 36 | "files": [ 37 | "src", 38 | "packages" 39 | ], 40 | "homepage": "https://github.com/DaiHuaXieHuaKai/GaoDeLocation#readme", 41 | "license": "ISC", 42 | "main": "src/index.js", 43 | "name": "vue-tool", 44 | "repository": { 45 | "type": "git", 46 | "url": "git+https://github.com/DaiHuaXieHuaKai/GaoDeLocation.git" 47 | }, 48 | "scripts": { 49 | "test": "echo \"Error: no test specified\" && exit 1" 50 | }, 51 | "version": "1.0.6" 52 | } 53 | -------------------------------------------------------------------------------- /src/vue-tool/packages/Button/src/index.md: -------------------------------------------------------------------------------- 1 | ## Button 按钮 2 | 3 | ### 使用指南 4 | 5 | ```javascript 6 | import { Button } from 'vue-tool'; 7 | 8 | Vue.use(Button); 9 | ``` 10 | ### 代码演示 11 | 12 | #### 简单用法 13 | 14 | ```html 15 | 按钮 16 | ``` 17 | 18 | #### 幽灵按钮 19 | 20 | ```html 21 | 幽灵按钮 22 | ``` 23 | ### API 24 | 25 | | 参数 | 说明 | 类型 | 默认值 | 26 | |------|------|------|------| 27 | | type | 显示类型，接受 default, primary, danger | `string` | `default` | 28 | | disabled | 是否禁用 | `Boolean` | `false` | 29 | | plain | 幽灵按钮 | `string` | `false` | -------------------------------------------------------------------------------- /src/vue-tool/packages/Cache/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './src/index.js'; -------------------------------------------------------------------------------- /src/vue-tool/packages/Cache/src/index.js: -------------------------------------------------------------------------------- 1 | var Cache = { 2 | localStorageGet(name){ 3 | return localStorage[name] ? JSON.parent(localStorage[name]) : '' 4 | }, 5 | localStorageSet(name,key){ 6 | localStorage.name = JSON.stringify(key) 7 | return true 8 | }, 9 | sessionStorageGet(){ 10 | return sessionStorage[name] ? JSON.parent(sessionStorage[name]) : '' 11 | }， 12 | sessionStorageSet(){ 13 | sessionStorage.name = JSON.stringify(key) 14 | return true 15 | }, 16 | cookieGet(name){ 17 | var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)"); 18 | if(arr=document.cookie.match(reg)){ 19 | return unescape(arr[2]); 20 | }else{ 21 | return null; 22 | } 23 | }, 24 | cookieSet(name,key){ 25 | document.cookie=`${name}=`+key; 26 | } 27 | } 28 | export default Cache -------------------------------------------------------------------------------- /src/vue-tool/packages/Cache/src/index.md: -------------------------------------------------------------------------------- 1 | ## Cache 数据缓存 2 | 3 | ### 使用指南 4 | 5 | ```javascript 6 | import { Cache } from 'vue-tool'; 7 | ``` 8 | 9 | > 此文档对`localStorage`,`sessionStorage`,`cookie`的处理，可以直接对缓存`存储和读取` `JSON` 格式 10 | 11 | ### localStorage操作 12 | 13 | > localStorageGet(读取) 14 | 15 | ```javascript 16 | const los = Cache.localStorageGet('name') 17 | ``` 18 | 19 | > localStorageSet(存储) 20 | 21 | ```javascript 22 | const los = Cache.localStorageSet('name',{sex:'男'}) 23 | ``` 24 | 25 | ### API 26 | 27 | | 参数 | 说明 | 类型 | 默认值 | 28 | |------|------|------|------| 29 | | name | key值 | `string` | `-` | 30 | | value | key内容 | `string` | `-` | 31 | 32 | ### sessionStorage操作 33 | 34 | > sessionStorageGet(读取) 35 | 36 | ```javascript 37 | const los = Cache.sessionStorageGet('name') 38 | ``` 39 | 40 | > sessionStorageSet(存储) 41 | 42 | ```javascript 43 | const los = Cache.sessionStorageSet('name',{sex:'男'}) 44 | ``` 45 | 46 | ### API 47 | 48 | | 参数 | 说明 | 类型 | 默认值 | 49 | |------|------|------|------| 50 | | name | key值 | `string` | `-` | 51 | | value | key内容 | `string` | `-` | 52 | 53 | ### cookie操作 54 | 55 | > cookieGet(读取) 56 | 57 | ```javascript 58 | const los = Cache.cookieGet('name') 59 | ``` 60 | 61 | > cookieSet(存储) 62 | 63 | ```javascript 64 | const los = Cache.cookieSet('name',{sex:'男'}) 65 | ``` 66 | 67 | ### API 68 | 69 | | 参数 | 说明 | 类型 | 默认值 | 70 | |------|------|------|------| 71 | | name | key值 | `string` | `-` | 72 | | value | key内容 | `string` | `-` | -------------------------------------------------------------------------------- /src/vue-tool/packages/Cell/src/index.md: -------------------------------------------------------------------------------- 1 | ## Cell 单元格 2 | 3 | ### 使用指南 4 | 5 | ```javascript 6 | import { Cell } from 'vue-tool'; 7 | 8 | Vue.use(Cell); 9 | ``` 10 | ### 代码演示 11 | 12 | #### 基础用法 13 | 14 | ```html 15 | 16 | 17 | ``` 18 | 19 | #### 高级用法 20 | 21 | ```html 22 | 23 | ``` 24 | ### API 25 | 26 | | 参数 | 说明 | 类型 | 默认值 | 27 | |------|------|------|------| 28 | | title | 名字/标题 | `string` | `-` | 29 | | value | 后缀显示内容 | `string` | `-` | 30 | | plain | 幽灵按钮 | `string` | `false` | 31 | | icon | class名字 图片显示class（案例图标库） | `string` | `icon-arrowright` | 32 | | height | 元素的高度 | `string` | `45px` | 33 | | sise | 元素的字体大小 | `string` | `12px` | 34 | | seat | 图标位置 支持left/right | `string` | `right` | 35 | | label | 描述文字 | `string` | `-` | 36 | | style | 根据key自动添加style 支持 styleTitle styleValue | `string` | `right` | 37 | -------------------------------------------------------------------------------- /src/vue-tool/packages/FormHttp/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './src/index.vue'; -------------------------------------------------------------------------------- /src/vue-tool/packages/FormHttp/src/index.js: -------------------------------------------------------------------------------- 1 | var a = 1 2 | export default a -------------------------------------------------------------------------------- /src/vue-tool/packages/FormHttp/src/index.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1292150917/vueToolOfficial/43ff215141e4b679c4a0774bd8bea348a9a4faef/src/vue-tool/packages/FormHttp/src/index.md -------------------------------------------------------------------------------- /src/vue-tool/packages/Icon/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './src/index.vue'; -------------------------------------------------------------------------------- /src/vue-tool/packages/Icon/src/index.md: -------------------------------------------------------------------------------- 1 | ## Icon 图标 2 | 3 | ### 使用指南 4 | 5 | ```javascript 6 | import { Icon } from 'vue-tool'; 7 | Vue.use(Icon) 8 | ``` 9 | >图标资源来自于[Font Awesome 4.7.0](http://fontawesome.dashgame.com/)兼容官方写法，如果你只是想简单使用某个图标，可以使用这里提供的Icon组件，也许能省下一些你写类名的时间 10 | ### 代码演示 11 | 12 | #### 基础用法 13 | 14 | ```html 15 | 16 | ``` 17 | #### 自定义大小 18 | 19 | ```html 20 | 21 | 22 | 23 | ``` 24 | #### 自定义颜色 25 | 26 | ```html 27 | 28 | 29 | ``` 30 | ### API 31 | 32 | | 参数 | 说明 | 类型 | 默认值 | 33 | |------|------|------|------| 34 | | name | 图标名称 | `string` | `-` | 35 | | color | 图标颜色 | `string` | `-` | 36 | | size | 图标大小，如 20px 2em | `string` | `-` | -------------------------------------------------------------------------------- /src/vue-tool/packages/Icon/src/index.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | -------------------------------------------------------------------------------- /src/vue-tool/packages/InfiniteScroll/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './src/index.js'; -------------------------------------------------------------------------------- /src/vue-tool/packages/InfiniteScroll/src/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import { 3 | scroll, 4 | getScrollHeight, 5 | getWindowHeight 6 | } from './scroll' 7 | 8 | function InfiniteScroll() {} 9 | 10 | /** 11 | * infinite-scroll 12 | * @module components/Infinite-scroll 13 | * @desc 按钮 14 | * @param {fun} [infinite-scroll-disabled=0] - 滚动的距离到浏览器底部的距离 和[infinite-scroll]同时使用则会是距离底部距离额外加上多少 15 | * @param {fun} [infinite-scroll] - 到底底部的返回值 callback 16 | * @param {boolean} [only-once-teue] - 需要使用infinite-scroll-disabled以后禁止1px执行一次 如果需要可以更改为false 和[self-adaption]同时使用则会是距离底部距离额外加上多少 17 | * @param {boolean} [self-adaption = false] 自适应高度，到达使用元素元素最底部触发 默认是针对[infinite-scroll]绑定的元素 18 | * @example 19 | 20 | // // disabled = 21 |
    22 |
  • 1
    • 23 |
  • 1
    • 24 |
  • 1
    • 25 |
26 | */ 27 | 28 | function funs(el) { 29 | return new Promise(function (resolve, reject) { 30 | setTimeout(() => { 31 | resolve(document.body.offsetHeight - (el.offsetHeight + el.offsetTop)) 32 | }, 500); 33 | }); 34 | } 35 | 36 | function install() { 37 | Vue.directive('infinite-scroll', { 38 | bind: function (el, binding) { 39 | var disabled = el.getAttribute('infinite-scroll-disabled') || 0 40 | // 需要使用infinite-scroll-disabled以后推荐使用这个，否则就每1px执行一次，因为距离到底部了 41 | var selfAdaption = el.getAttribute('self-adaption') || false 42 | var onlyOnce = el.getAttribute('only-once') || true 43 | if (selfAdaption) { 44 | Vue.prototype.$nextTick(function () { 45 | funs(el).then(res => { 46 | scroll(el, binding.value, Number(disabled) + Number(res), onlyOnce) 47 | }) 48 | }) 49 | return 50 | } 51 | scroll(el, binding.value, disabled, onlyOnce) 52 | }, 53 | unbind: function () { 54 | window.onscroll = null 55 | } 56 | }) 57 | } 58 | InfiniteScroll.install = install 59 | if (!Vue.prototype.$isServer && window.Vue) { 60 | window.infiniteScroll = InfiniteScroll; 61 | Vue.use(install); // eslint-disable-line 62 | } 63 | InfiniteScroll.install() 64 | export default InfiniteScroll 65 | -------------------------------------------------------------------------------- /src/vue-tool/packages/InfiniteScroll/src/index.md: -------------------------------------------------------------------------------- 1 | ## List 瀑布流 2 | 3 | ### 使用指南 4 | 5 | ```javascript 6 | import { InfiniteScroll } from 'vue-tool'; 7 | ``` 8 | ### 代码演示 9 | 10 | 不需要你使用我自己的标签，只需要在你需要加载数据的地方加上一句 `v-infinite-scroll="loadMore"` 就OK 注意`loadMore`是回调方法，到达底部触发的方法！，此方法以判断是否存在滚动事件，存在添加一个方法，否则创建！并且与其他第三方插件相互兼容！ 11 | 12 | #### 基础用法 13 | 14 | ```html 15 |
    16 |
  • {{item}}
    • 17 |
18 | ``` 19 | #### 自定义底部距离 20 | 21 | ```html 22 |
    23 |
  • {{item}}
    • 24 |
25 | ``` 26 | 27 | ### API 28 | 29 | | 参数 | 说明 | 类型 | 默认值 | 30 | |------|------|------|------| 31 | | infinite-scroll-disabled | 滚动到底部的距离 | `boolean` | `0` | 32 | | infinite-scroll | 到底底部的返回值 callback | `function` | `-` | 33 | | self-adaption | 自适应高度，到达使用元素元素最底部触发 | `boolean` | `false` | -------------------------------------------------------------------------------- /src/vue-tool/packages/InfiniteScroll/src/scroll.js: -------------------------------------------------------------------------------- 1 | //文档的总高度 2 | function getScrollHeight() {　　 3 | var scrollHeight = 0, 4 | bodyScrollHeight = 0, 5 | documentScrollHeight = 0;　　 6 | if (document.body) {　　　　 7 | bodyScrollHeight = document.body.scrollHeight;　　 8 | }　　 9 | if (document.documentElement) {　　　　 10 | documentScrollHeight = document.documentElement.scrollHeight;　　 11 | }　　 12 | scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;　　 13 | return scrollHeight; 14 | } 15 | 16 | function getScrollTop() {　　 17 | var scrollTop = 0, 18 | bodyScrollTop = 0, 19 | documentScrollTop = 0;　　 20 | if (document.body) {　　　　 21 | bodyScrollTop = document.body.scrollTop;　　 22 | }　　 23 | if (document.documentElement) {　　　　 24 | documentScrollTop = document.documentElement.scrollTop;　　 25 | }　　 26 | scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;　　 27 | return scrollTop; 28 | } 29 | 30 | function getWindowHeight() {　　 31 | var windowHeight = 0;　　 32 | if (document.compatMode == "CSS1Compat") {　　　　 33 | windowHeight = document.documentElement.clientHeight;　　 34 | } else {　　　　 35 | windowHeight = document.body.clientHeight;　　 36 | }　　 37 | return windowHeight; 38 | } 39 | 40 | function scroll(e, but, disabled, onlyOnce) { 41 | var x = false 42 | window.onscroll = function () { 43 | if (getScrollTop() + getWindowHeight() >= getScrollHeight() - disabled) { 44 | !x ? but() : '' 45 | onlyOnce ? x = true : '' 46 | } else { 47 | x = false 48 | } 49 | }; 50 | } 51 | export { 52 | scroll, 53 | getScrollHeight, 54 | getWindowHeight, 55 | getScrollTop 56 | } 57 | -------------------------------------------------------------------------------- /src/vue-tool/packages/Loadings/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './src/index.vue'; -------------------------------------------------------------------------------- /src/vue-tool/packages/Loadings/src/index.md: -------------------------------------------------------------------------------- 1 | ## Loading 加载 2 | 3 | ### 使用指南 4 | 5 | ```javascript 6 | import { Loading } from 'vue-tool'; 7 | Vue.use(Loading) 8 | ``` 9 | >部分图标资源均来自网络/第三方/网友分享，图标均为SVG,CSS,如果侵权请联系删除！ 10 | ### 代码演示 11 | 12 | #### 基础用法 13 | 14 | ```html 15 | 16 | ``` 17 | #### 自定义大小 18 | 19 | ```html 20 | 21 | ``` 22 | #### 自定义颜色 23 | 24 | ```html 25 | 26 | ``` 27 | ### API 28 | 29 | | 参数 | 说明 | 类型 | 默认值 | 30 | |------|------|------|------| 31 | | icon | 图标名称 | `string` | `-` | 32 | | color | 图标颜色 | `string` | `-` | 33 | | size | 图标大小，如 20px 2em | `string` | `-` | -------------------------------------------------------------------------------- /src/vue-tool/packages/Loadings/src/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 34 | 377 | -------------------------------------------------------------------------------- /src/vue-tool/packages/NavBar/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './src/index'; -------------------------------------------------------------------------------- /src/vue-tool/packages/NavBar/src/index.md: -------------------------------------------------------------------------------- 1 | 9 | ## mlAlert 导航栏 10 | 11 | ### 使用指南 12 | 13 | ```javascript 14 | import { NavBar } from 'vue-tool'; 15 | ``` 16 | ### 代码演示 17 | 18 | #### 基础用法 19 | 20 | 注意:`left-arrow="true"`为显示左箭头！！！ 21 | ```html 22 | 30 | ``` 31 | #### 回调方法 32 | 33 | ```javascript 34 | export default { 35 | methods: { 36 | onClickLeft() { 37 | alert('返回') 38 | }, 39 | onClickRight() { 40 | alert('按钮') 41 | } 42 | } 43 | } 44 | ``` 45 | 46 | #### 高级用法 47 | 48 | 通过插槽`slot`控制左右按钮,支持`title/left/right` 可现实对应的位置！ 49 | 50 | ```html 51 | 52 | 53 | 54 | ``` 55 | 56 | ### API 57 | 58 | | 参数 | 说明 | 类型 | 默认值 | 59 | |------|------|------|------| 60 | | title | 标题 | `string` | `-` | 61 | | left-text | 左侧文案 | `string` | `-` | 62 | | right-text | 右侧文案 | `string` | `-` | 63 | | left-arrow | 是否显示左侧箭头 | `Boolean` | `false` | 64 | 65 | ### Slot 66 | 67 | | 参数 | 说明 | 68 | |------|------| 69 | | title | 自定义标题 | 70 | | left | 自定义左侧区域内容 | 71 | | right | 自定义右侧区域内容 | 72 | 73 | ### Event 74 | 75 | | 参数 | 说明 | 参数| 76 | |------|------|------| 77 | | click-left | 点击左侧按钮时触发 | | 78 | | click-right | 点击右侧按钮时触发 | | -------------------------------------------------------------------------------- /src/vue-tool/packages/NavBar/src/index.vue: -------------------------------------------------------------------------------- 1 | 21 | /** 22 | * mt-header 23 | * @module components/navBar 24 | * @desc 按钮 25 | * @param {string} [title=''] - 标题 26 | * @param {string} [left-text=''] - 左侧文案 27 | * @param {string} [right-text=''] - 右侧文案 28 | * @param {Boolean} [left-arrow=false] - 是否显示左侧箭头 29 | * @example 30 | *
左侧内容
 31 | * @Slot 32 | * @param {string} [Slot=title] - 自定义标题 33 | * @param {string} [Slot=left] - 自定义左侧区域内容 34 | * @param {string} [Slot=right] - 自定义右侧区域内容 35 | * @Event 36 | * @param {string} [click-left=fun] - 点击左侧按钮时触发 37 | * @param {string} [click-right=fun] - 点击右侧按钮时触发 38 | */ 39 | 69 | -------------------------------------------------------------------------------- /src/vue-tool/packages/Picture/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './src/index'; -------------------------------------------------------------------------------- /src/vue-tool/packages/Picture/src/index.js: -------------------------------------------------------------------------------- 1 | var Picture = { 2 | // 图片转换base64 3 | getBase64Image(img) { 4 | return new Promise((resolve, reject) => { 5 | var image = new Image(); 6 | image.setAttribute("crossOrigin", 'Anonymous') 7 | image.crossOrigin = "Anonymous"; //注意存放顺序 8 | image.src = img; 9 | image.onload = function () { 10 | var canvas = document.createElement("canvas"); 11 | canvas.width = image.width; 12 | canvas.height = image.height; 13 | var ctx = canvas.getContext("2d"); 14 | ctx.drawImage(image, 0, 0, image.width, image.height); 15 | var ext = image.src.substring(image.src.lastIndexOf(".") + 1).toLowerCase(); 16 | console.log(ext) 17 | var dataURL = canvas.toDataURL("image/" + ext); 18 | resolve(dataURL) 19 | }; 20 | }) 21 | } 22 | } 23 | export default Picture 24 | -------------------------------------------------------------------------------- /src/vue-tool/packages/Picture/src/index.md: -------------------------------------------------------------------------------- 1 | ## Picture 图片处理 2 | 3 | >提供几种图片转换！图片压缩. 4 | 5 | ### 使用指南 6 | 7 | ```javascript 8 | import { Picture } from 'vue-tool'; 9 | ``` 10 | ### getBase64Image（图片转换base64地址） 11 | 12 | >通过`toDataURL`方法实现 13 | 14 | ```javascript 15 | Picture.getBase64Image('图片地址').then(res => { 16 | console.log(res); 17 | }); 18 | ``` 19 | 20 | #### API 21 | 22 | | 参数 | 说明 | 类型 | 备注 | 23 | |------|------|------|------| 24 | | 参数1 | 图片地址 | `String` | `.then返回base64地址` | 25 | 26 | ### getImgCompress（图片压缩） 27 | 28 | ```javascript 29 | Picture.getImgCompress('图片地址').then(res => { 30 | console.log(res); 31 | }); 32 | ``` 33 | 34 | #### API 35 | 36 | | 参数 | 说明 | 类型 | 备注 | 37 | |------|------|------|------| 38 | | 参数1 | 图片地址 | `String` | `.图片压缩后的地址` | -------------------------------------------------------------------------------- /src/vue-tool/packages/Popup/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './src/index'; -------------------------------------------------------------------------------- /src/vue-tool/packages/Popup/src/index.md: -------------------------------------------------------------------------------- 1 | ## Popup 弹出层 2 | 3 | ### 使用指南 4 | 5 | ```javascript 6 | import { Popup } from 'vue-tool'; 7 | ``` 8 | ### 代码演示 9 | 10 | #### 基础用法 11 | 12 | `popup`默认从中间弹出,暂未支持滑动效果，仅有一个位置显示！ 13 | 14 | ```html 15 | 弹框 16 | ``` 17 | #### 弹出位置 18 | 19 | 通过`position`属性设置 Popup 弹出位置 20 | 21 | ```html 22 | 23 |
弹框
24 | 25 | ``` 26 | 27 | ### API 28 | 29 | | 参数 | 说明 | 类型 | 默认值 | 30 | |------|------|------|------| 31 | | position | 位置可选值为 top bottom right left | `String` | `center` | -------------------------------------------------------------------------------- /src/vue-tool/packages/Popup/src/index.vue: -------------------------------------------------------------------------------- 1 | 10 | /** 11 | * mt-header 12 | * @module components/navBar 13 | * @desc 按钮 14 | * @param {string} [position=''] - 位置 位置，可选值为 top bottom right left 15 | * @example 16 | *
弹框
 17 | */ 18 | 56 | -------------------------------------------------------------------------------- /src/vue-tool/packages/Regular/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './src/index'; -------------------------------------------------------------------------------- /src/vue-tool/packages/Regular/src/index.js: -------------------------------------------------------------------------------- 1 | var Regular = { 2 | // 手机电话 3 | mobile(phone) { 4 | var phone = phone 5 | if (!/^1[345678]\d{9}$/.test(phone)) { 6 | return false; 7 | } else { 8 | return true 9 | } 10 | }, 11 | // 固定电话 12 | tel(tel) { 13 | var tel = tel 14 | if (!/^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/.test(tel)) { 15 | return false; 16 | } else { 17 | return true 18 | } 19 | }, 20 | // 判断数据字段是否为空 Arr 21 | arrVacancy(arr) { 22 | var obj = Object.keys(arr) 23 | var s = true 24 | obj.forEach(res => { 25 | if (arr[res] === '' || arr[res] === undefined || arr[res] === null) { 26 | s = false 27 | } 28 | }) 29 | return s 30 | }, 31 | // 判断用户真实姓名 32 | name(str) { 33 | var re1 = new RegExp("^([\u4E00-\uFA29]|[\uE7C7-\uE7F3]|[a-zA-Z0-9])*$"); 34 | if (!re1.test(str)) { 35 | return false; 36 | } 37 | return true; 38 | }, 39 | // url截取 40 | getUrlParam(name) { 41 | var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); 42 | //构造一个含有目标参数的正则表达式对象 43 | var str = window.location.href.split("?")[1]; 44 | if (str) { 45 | var r = str.substr(0).match(reg); 46 | //匹配目标参数 47 | if (r != null) 48 | return decodeURI(r[2]); 49 | return ''; 50 | } else { 51 | return '' 52 | } 53 | }, 54 | // 判断类型是否为特殊字符 55 | symbol(str) { 56 | var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>《》/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？ ]"); 57 | if (pattern.test(str)) { 58 | return true; 59 | } 60 | return false; 61 | }, 62 | // 判断是否为整数或者小数点 63 | figure(str) { 64 | var pattern = new RegExp("^[0-9]+\.{0,1}[0-9]{0,2}$"); 65 | if (pattern.test(str)) { 66 | return true; 67 | } 68 | return false; 69 | }, 70 | // email地址 71 | email(email) { 72 | var email = email 73 | if (!/^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/.test(email)) { 74 | return false; 75 | } else { 76 | return true 77 | } 78 | }, 79 | // 身份证正则： 80 | identity(identity) { 81 | // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X 82 | var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; 83 | if (reg.test(identity) === false) { 84 | return false; 85 | } else { 86 | return false 87 | } 88 | }, 89 | // msg 替换内容 start 开始替换位置 end结束替换位置 content替换内容 90 | star(msg, start = 3, end = msg.length, content = '*') { 91 | var msga = msg.replace(/(\d{3})(\d{4})/, "$1****$2"); 92 | console.log(msga) 93 | return 94 | }, 95 | // 对url的分割处理 96 | urlSplit(url) { 97 | var patt1 = /(\w+):\/\/([^/:]+)(:\d*)?([^# ]*)/; 98 | return url.match(patt1) 99 | } 100 | } 101 | export default Regular 102 | -------------------------------------------------------------------------------- /src/vue-tool/packages/Regular/src/index.md: -------------------------------------------------------------------------------- 1 | ## Regular 正则表达式 2 | 3 | 提供几种常用的正则表达式，如果你拥有其他类型的表达式，欢迎共享！ 4 | 5 | ### 使用指南 6 | 7 | ```javascript 8 | 9 | import { Regular } from 'vue-tool'; 10 | 11 | ``` 12 | 13 | #### 返回值 状态成立为ture否则为false 14 | 15 |
16 | 17 | ### figure (判断是否为整数或者小数点) 18 | 19 | ```javascript 20 | Regular.figure(123) //true 21 | ``` 22 | 23 | 判断是否为整数或者小数点 24 | 25 | #### API 26 | 27 | | 参数 | 说明 | 类型 | 默认值 | 28 | |------|------|------|------| 29 | | figure | 内容 | `Number` | `-` | 30 | 31 |
32 | 33 | ### getUrlParam (url截取) 34 | 35 | ```javascript 36 | Regular.getUrlParam('name') // url指定的name值 37 | ``` 38 | 39 | 判断是否为整数或者小数点 40 | 41 | #### API 42 | 43 | | 参数 | 说明 | 类型 | 默认值 | 44 | |------|------|------|------| 45 | | name | 需要或者url的key值 | `String` | `-` | 46 | 47 |
48 | 49 | ### mobile (手机电话) 50 | 51 | ```javascript 52 | Regular.mobile(12345678910) //false 53 | ``` 54 | 55 | 判断`11`位数并且第二位数为`345678`其中一个的 56 | 57 | #### API 58 | 59 | | 参数 | 说明 | 类型 | 默认值 | 60 | |------|------|------|------| 61 | | mobile | 手机号 | `String | Number` | `-` | 62 | 63 |
64 | 65 | ### tel (固定电话) 66 | 67 | ```javascript 68 | Regular.tel(12345678910) //false 69 | ``` 70 | 71 | 判断`7-14`位数 72 | 73 | #### API 74 | 75 | | 参数 | 说明 | 类型 | 默认值 | 76 | |------|------|------|------| 77 | | tel | 固定号码 | `String | Number` | `-` | 78 | 79 |
80 | 81 | ### email (email地址) 82 | 83 | ```javascript 84 | Regular.email('1292150917@qq.com') //true 85 | ``` 86 | 87 | 判断正确的邮箱 88 | 89 | #### API 90 | 91 | | 参数 | 说明 | 类型 | 默认值 | 92 | |------|------|------|------| 93 | | email | 邮箱 | `String` | `-` | 94 | 95 |
96 | 97 | ### identity (身份证正则) 98 | 99 | ```javascript 100 | Regular.identity('xxxxxxx') //false 101 | ``` 102 | 103 | 身份证号码为`15`位或者`18`位，`15`位时全为数字，`18`位前`17`位为数字，最后一位是校验位，可能为数字或字符`X` 104 | 105 | #### API 106 | 107 | | 参数 | 说明 | 类型 | 默认值 | 108 | |------|------|------|------| 109 | | identity | 身份证 | `String` | `-` | 110 | 111 |
112 | 113 | ### symbol (是否存在特殊字符) 114 | 115 | ```javascript 116 | Regular.symbol(12345678910) //true 117 | ``` 118 | 119 | 判断是否存在 `[~!@#$^&*()=|{}':;',\\[\\].<>《》/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？ ]` 特殊字符 120 | 121 | #### API 122 | 123 | | 参数 | 说明 | 类型 | 默认值 | 124 | |------|------|------|------| 125 | | symbol | 内容 | `String | Number` | `-` | 126 | 127 |
128 | 129 | ### name (判断用户真实姓名) 130 | 131 | ```javascript 132 | Regular.name('张自方') //true 133 | ``` 134 | 135 | 判断正确的汉字编码并且大于两位 136 | 137 | #### API 138 | 139 | | 参数 | 说明 | 类型 | 默认值 | 140 | |------|------|------|------| 141 | | name | 姓名 | `String` | `-` | 142 | 143 |
144 | 145 | ### arrVacancy (判断数据字段是否为空 Arr) 146 | 147 | ```javascript 148 | Regular.arrVacancy({ 149 | sex:'男', 150 | name:"" 151 | }) //false 152 | 153 | var name = 12 154 | 155 | Regular.arrVacancy(name) //true 156 | 157 | ``` 158 | 159 | 为 `空` `undefined` `null` 统一返回false不成立 160 | 161 | #### API 162 | 163 | | 参数 | 说明 | 类型 | 默认值 | 164 | |------|------|------|------| 165 | | arrVacancy | 需要判断的对象 | `Object || String` | `-` | 166 | 167 |
168 | 169 | ### urlSplit (对url进行分割处理) 170 | 171 | ```javascript 172 | var url = Regular.urlSplit(location.href) 173 | console.log(url) = > 返回结果如下 174 | // 0:"http://127.0.0.1:8082/index2.html" 175 | // 1:"http" 176 | // 2:"127.0.0.1" 177 | // 3:":8082" 178 | // 4:"/index2.html" 179 | // 'groups':undefined 180 | // 'index':0 181 | // 'input':"http://127.0.0.1:8082/index2.html#/Regular" 182 | ``` 183 | 184 | 为 `空` `undefined` `null` 统一返回false不成立 185 | 186 | #### API 187 | 188 | | 参数 | 说明 | 类型 | 默认值 | 189 | |------|------|------|------| 190 | | href | 需要分割的http地址 | `String` | `-` | 191 | 192 | #### callback 193 | 194 | | 参数 | 说明 | 类型 | 默认值 | 195 | |------|------|------|------| 196 | | res | 分割好的对象 | `String` | `-` | -------------------------------------------------------------------------------- /src/vue-tool/packages/Sticky/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './src/index'; -------------------------------------------------------------------------------- /src/vue-tool/packages/Sticky/src/index.md: -------------------------------------------------------------------------------- 1 | ## Sticky 粘贴定位 2 | 3 | 常用来实现吸顶效果，如果浏览器支持sticky定位，则使用原生的，否则会模拟实现，但可能与原生有些许差别 4 | 5 | ### 使用指南 6 | 7 | ```javascript 8 | import { Sticky } from 'vue-tool'; 9 | 10 | Vue.use(sticky); 11 | ``` 12 | ### 代码演示 13 | 14 | 15 | 16 | ```html 17 | 18 | 40 19 | 20 | ``` 21 | 22 | ### API 23 | 24 | | 参数 | 说明 | 类型 | 默认值 | 25 | |------|------|------|------| 26 | | top | 距浏览器顶部的距离（单位为px） | `String | Number` | `0` | 27 | | z-index | 原生 z-index 属性 | `String | Number` | `1` | 28 | -------------------------------------------------------------------------------- /src/vue-tool/packages/Sticky/src/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 30 | -------------------------------------------------------------------------------- /src/vue-tool/packages/Swipe/src/index.md: -------------------------------------------------------------------------------- 1 | ## Swipe 轮播 2 | 3 | ### 代码演示 4 | 5 | ```javascript 6 | import { Swipe } from 'vue-tool'; 7 | 8 | Vue.use(Swipe) 9 | ``` 10 | 11 | #### 基本用法 12 | 13 | ```html 14 | 15 | 16 |
1
17 | 18 | 19 |
2
20 | 21 | 22 |
3
23 | 24 | 25 | ``` 26 | 27 | #### 禁止手势滑动并且隐藏... 28 | 29 | ```html 30 | 31 | 32 |
1
33 | 34 | 35 |
2
36 | 37 | 38 | ``` 39 | 40 | #### 自定义滑动时间 41 | 42 | ```html 43 | 44 | 45 |
1
46 | 47 | 48 |
2
49 | 50 | 51 | 52 | ``` 53 | 54 | #### Checkbox 组 55 | 56 | ```html 57 | 58 | a 59 | b 60 | c 61 | d 62 | 63 |

当前选择：{{ value7 }}

64 | ``` 65 | 66 | #### 搭配 Cell 使用 67 | 68 | `Checkbox`提供了一个`toggle`方法用来切换选中状态，你可以搭配`Cell`组件一起使用 69 | 70 | ```html 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | ``` 80 | 81 | ### API 82 | | 参数 | 说明 | 类型 | 默认值 | 83 | |------|------|------|------| 84 | | position | 轮播位置 支持left/right | `String` | `left` | 85 | | touchable | 是否可以通过手势滑动 | `boolean` | `true` | 86 | | indicators | 是否显示底部.... 指示器 | `boolean` | `true` | 87 | | autoplay | 自动轮播时间 | `Number` | `3000` | 88 | | duration | 动画时间 | `duration` | `500` | 89 | | autochange | 自动滑动的位置，返回的索引 | `Number` | `0` | -------------------------------------------------------------------------------- /src/vue-tool/packages/Switch/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './src/index.vue'; -------------------------------------------------------------------------------- /src/vue-tool/packages/Switch/src/index.md: -------------------------------------------------------------------------------- 1 | ## Switch 开关 2 | 3 | ### 使用指南 4 | 5 | ```javascript 6 | import { Switch } from 'vant'; 7 | 8 | Vue.use(Switch); 9 | ``` 10 | ### 代码演示 11 | 12 | #### 基础用法 13 | 14 | 15 | ```html 16 | 17 | ``` 18 | ```javascript 19 | export default { 20 | data() { 21 | return { 22 | checked: true 23 | }; 24 | }, 25 | }; 26 | ``` 27 | 28 | ### API 29 | 30 | | 参数 | 说明 | 类型 | 默认值 | 31 | |------|------|------|------| 32 | | v-model | 开关选中状态 | `Boolean` | `false` | -------------------------------------------------------------------------------- /src/vue-tool/packages/Switch/src/index.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 49 | -------------------------------------------------------------------------------- /src/vue-tool/packages/Toast/src/index.md: -------------------------------------------------------------------------------- 1 | ## Toast 轻提示 2 | 3 | ### 使用指南 4 | 5 | ```javascript 6 | import { mlToast } from 'vue-tool'; 7 | ``` 8 | 9 | #### 简单用法 10 | 11 | ```javascript 12 | mlToast({ 13 | message: "提示信息", 14 | position: "middle", 15 | duration: 1000 16 | }); 17 | ``` 18 | #### 加载提示 19 | 20 | `loading`可以使用本组建的任意`Loading`动画 21 | 22 | ```javascript 23 | mlToast({ 24 | message: '加载中', 25 | position: "middle", 26 | duration: 2000, 27 | icon: "loading" 28 | }); 29 | ``` 30 | 31 | #### 成功/失败提示 32 | 33 | #### 基础用法 34 | 35 | ```javascript 36 | mlToast.fail('失败'); 37 | mlToast.success('成功'); 38 | ``` 39 | #### 高级用法 40 | 41 | ```javascript 42 | mlToast({ 43 | message: '成功', 44 | position: "middle", 45 | duration: 2000, 46 | icon: "success" 47 | }); 48 | ``` 49 | ```javascript 50 | mlToast({ 51 | message: '失败', 52 | position: "middle", 53 | duration: 2000, 54 | icon: "fail" 55 | }); 56 | 57 | ``` 58 | 59 | #### 关闭提示 60 | 61 | ```javascript 62 | mlToast.clear() 63 | ``` 64 | 65 | 66 | ### API 67 | 68 | | 参数 | 说明 | 类型 | 默认值 | 69 | |------|------|------|------| 70 | | message | 内容 | `string` | `-` | 71 | | duration | 停留时间 | `Number` | `3000` | 72 | | position | 位置，支持 top/bottom/middle | `string` | `middle` | 73 | | icon | 成功或失败提示框 success/loading/fail/clear | `string` | `-` | 74 | 75 | ### 方法 76 | 77 | | 参数 | 说明 | 类型 | 78 | |------|------|------| 79 | | mlToast.success | 展示成功提示 | `options | message` | 80 | | mlToast.fail | 展示失败提示 | `options | message` | 81 | | mlToast.clear | 关闭提示 | `options | message` | 82 | -------------------------------------------------------------------------------- /src/vue-tool/packages/Toast/src/start.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 36 | -------------------------------------------------------------------------------- /src/vue-tool/packages/button/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './src/index.vue'; -------------------------------------------------------------------------------- /src/vue-tool/packages/button/src/index.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 33 | 49 | -------------------------------------------------------------------------------- /src/vue-tool/packages/cell/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './src/index.vue'; -------------------------------------------------------------------------------- /src/vue-tool/packages/cell/src/index.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 70 | -------------------------------------------------------------------------------- /src/vue-tool/packages/imgEnlarge/index.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1292150917/vueToolOfficial/43ff215141e4b679c4a0774bd8bea348a9a4faef/src/vue-tool/packages/imgEnlarge/index.js -------------------------------------------------------------------------------- /src/vue-tool/packages/imgEnlarge/src/index.md: -------------------------------------------------------------------------------- 1 | ## Checkbox 复选框 2 | 3 | ### 代码演示 4 | 5 | ```javascript 6 | export default { 7 | // 示例数据 8 | data() { 9 | return { 10 | value1: true, 11 | value2: true, 12 | value3: 0, 13 | value4: false, 14 | value5: true, 15 | value6: false, 16 | value7: ['b', 'c'], 17 | value8: false, 18 | value9: true 19 | } 20 | } 21 | } 22 | ``` 23 | 24 | #### 简单用法 25 | 26 | ```html 27 | {{ value1 }} 28 | ``` 29 | 30 | #### 自定义颜色 31 | 32 | ```html 33 | {{ value2 }} 34 | ``` 35 | 36 | #### 自定义状态值 37 | 38 | ```html 39 | value: {{ value3 }} 40 | ``` 41 | 42 | #### 禁用 43 | 44 | ```html 45 | a 46 | b 47 | ``` 48 | 49 | #### 自定义图标 50 | 51 | ```html 52 | 53 | 57 | 58 | ``` 59 | 60 | #### Checkbox 组 61 | 62 | ```html 63 | 64 | a 65 | b 66 | c 67 | d 68 | 69 |

当前选择：{{ value7 }}

70 | ``` 71 | 72 | #### 搭配 Cell 使用 73 | 74 | `Checkbox`提供了一个`toggle`方法用来切换选中状态，你可以搭配`Cell`组件一起使用 75 | 76 | ```html 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | ``` 86 | 87 | ### CheckboxGroup Props 88 | 89 | | 参数 | 说明 | 类型 | 默认值 | 90 | |------|------|------|------| 91 | | value | 所有选中项`name`值集合 | `Array` | `[]` | 92 | | disabled | 是否禁用所有复选框 | `Boolean` | `false` | 93 | | max | 限制最大选中数量，`0`代表不限制 | `Number` | `0` | 94 | 95 | ### Checkbox Props 96 | 97 | | 参数 | 说明 | 类型 | 默认值 | 98 | |------|------|------|------| 99 | | name | 标识符，与`CheckboxGroup`组件搭配使用 | `String | Number` | `''` | 100 | | value | 状态值 | `Boolean | Number | String` | - | 101 | | true-value | 设置选中状态的值 | `Boolean | Number | String` | `true` | 102 | | false-value | 设置未选中状态的值 | `Boolean | Number | String` | `false` | 103 | | disabled | 是否禁用该复选框 | `Boolean` | `false` | 104 | | color | 选中状态图标背景色 | `String` | 主题色 | 105 | 106 | ### Checkbox Slots 107 | 108 | | 名称 | 说明 | slot-scope | 109 | |------|------|------| 110 | | icon | 自定义图标 | value: 状态值 | 111 | 112 | ### Checkbox Methods 113 | 114 | | 方法名 | 参数 | 返回值 | 介绍 | 115 | |------|------|------|------| 116 | | toggle | - | - | 切换选中状态 | 117 | 118 | ### CheckboxGroup Events 119 | 120 | | 事件名 | 说明 | 参数 | 121 | |------|------|------| 122 | | change | 选中项改变时触发 | 所有选中项`name`值集合 | 123 | 124 | ### Checkbox Events 125 | 126 | | 事件名 | 说明 | 参数 | 127 | |------|------|------| 128 | | change | 切换时触发 | 状态值 | -------------------------------------------------------------------------------- /src/vue-tool/packages/mlAlert/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './src/index.js'; -------------------------------------------------------------------------------- /src/vue-tool/packages/mlAlert/src/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import mlAlertMsg from './index.vue' 3 | import { monitoring, hq, cj, sc } from '../../../src/unity' 4 | var alertMsg = {}; 5 | const mlAlert = function (options, callback) { 6 | if (typeof options == 'object') { 7 | alertMsg = options 8 | } else { 9 | alertMsg = {} 10 | alertMsg.content = arguments[0] || '' 11 | alertMsg.title = arguments[1] || '' 12 | } 13 | let node = Vue.extend(mlAlertMsg) 14 | var div = cj('div') 15 | var ne = new node({ 16 | el: div, 17 | propsData: alertMsg 18 | }) 19 | var mlAlHt = hq('.ml-alert') 20 | return new Promise(function (resolve, reject) { 21 | monitoring(ne, 'callback', res => { 22 | options.success ? options.success(res) : '' 23 | sc(mlAlHt) ? resolve(res) : '' 24 | }) 25 | }); 26 | } 27 | export default mlAlert -------------------------------------------------------------------------------- /src/vue-tool/packages/mlAlert/src/index.md: -------------------------------------------------------------------------------- 1 | ## mlAlert 提示框/弹框 2 | 3 | ### 使用指南 4 | 5 | ```javascript 6 | import { mlAlert } from 'vue-tool'; 7 | ``` 8 | ### 代码演示 9 | 10 | #### 消息提示 11 | 12 | ```javascript 13 | mlAlert("标题", "弹框内容").then(() => { 14 | // on close 15 | }); 16 | 17 | mlAlert({ 18 | title: "提示", 19 | content: "点个赞吧", 20 | success: function(){ 21 | // on close 22 | } 23 | }); 24 | ``` 25 | 26 | #### 自定义按钮内容 27 | 28 | ```javascript 29 | mlAlert({ 30 | title:"提示", 31 | content: "点个赞吧", 32 | cancelButtonText:"no", 33 | confirmButtonText:"yes", 34 | success: function(){ 35 | // on close 36 | } 37 | }); 38 | 39 | mlAlert({ 40 | title:"提示", 41 | content: "点个赞吧", 42 | confirmButtonText:"yes", 43 | showCancelButton:false, 44 | success: function(){ 45 | // on close 46 | } 47 | }); 48 | ``` 49 | 50 | ### API 51 | 52 | | 参数 | 说明 | 类型 | 默认值 | 53 | |------|------|------|------| 54 | | title | title名字 | `string` | `-` | 55 | | content | 内容 | `string` | `-` | 56 | | showCancelButton | 是否显示取消按钮 | `boolean` | `true` | 57 | | showConfirmButton | 是否显示确认按钮 | `boolean` | `true` | 58 | | cancelButtonText | 取消按钮内容 | `string` | `true` | 59 | | confirmButtonText | 确认按钮内容 | `string` | `true` | -------------------------------------------------------------------------------- /src/vue-tool/packages/mlAlert/src/index.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 70 | -------------------------------------------------------------------------------- /src/vue-tool/packages/mlLazy/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './src/index.js'; -------------------------------------------------------------------------------- /src/vue-tool/packages/mlLazy/src/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import index from '../index'; 3 | // 方法： 4 | function mlLazy() { 5 | 6 | } 7 | let elvAl = [] 8 | var distance = 50 //距离底部的距离 9 | var docwid = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight 10 | mlLazy.install = () => { 11 | Vue.directive('ml-lazy', { 12 | inserted: function (el, binding) { 13 | if (window.scrollY + docwid >= el.offsetTop) { 14 | el.src = binding.value 15 | } else { 16 | elvAl.push({ 17 | el: el, 18 | offtop: el.offsetTop, 19 | val: binding.value 20 | }) 21 | } 22 | }, 23 | bind: function (e) { 24 | elvAl = []; 25 | !window.onscroll || !window.onscroll.prototype.mlScroll ? mlScroll() : '' 26 | } 27 | }) 28 | } 29 | 30 | function mlScroll() { 31 | if(window.onscroll){ 32 | window.onscroll.prototype.mlScroll = true 33 | return 34 | } 35 | window.addEventListener('scroll', function (e) { 36 | // 50为判断距离底部的位置 37 | elvAl.length != 0 && elvAl[0].offtop <= window.scrollY + docwid + distance ? funSrc(e) : '' 38 | }) 39 | } 40 | 41 | function funSrc(e) { 42 | elvAl.forEach((item, index) => { 43 | // 50为判断距离底部的位置 44 | if (window.scrollY + docwid + distance > item.offtop) { 45 | item.el.src = item.val 46 | elvAl.splice(index, 1) 47 | } 48 | }) 49 | } 50 | mlLazy.install() 51 | export default mlLazy 52 | -------------------------------------------------------------------------------- /src/vue-tool/packages/mlLazy/src/index.md: -------------------------------------------------------------------------------- 1 | ## mlLazy 粘贴定位 2 | 3 | 常用来实现吸顶效果，如果浏览器支持sticky定位，则使用原生的，否则会模拟实现，但可能与原生有些许差别 4 | 5 | ### 使用指南 6 | 7 | ```javascript 8 | import { Sticky } from 'vue-tool'; 9 | 10 | Vue.use(sticky); 11 | ``` 12 | ### 代码演示 13 | 14 | 15 | 16 | ```html 17 | 18 | 40 19 | 20 | ``` 21 | 22 | ### API 23 | 24 | | 参数 | 说明 | 类型 | 默认值 | 25 | |------|------|------|------| 26 | | top | 距浏览器顶部的距离（单位为px） | `String | Number` | `0` | 27 | | z-index | 原生 z-index 属性 | `String | Number` | `1` | 28 | -------------------------------------------------------------------------------- /src/vue-tool/packages/picker/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './src/index'; -------------------------------------------------------------------------------- /src/vue-tool/packages/picker/src/index.md: -------------------------------------------------------------------------------- 1 | ## Checkbox 复选框 2 | 3 | ### 代码演示 4 | 5 | ```javascript 6 | export default { 7 | // 示例数据 8 | data() { 9 | return { 10 | value1: true, 11 | value2: true, 12 | value3: 0, 13 | value4: false, 14 | value5: true, 15 | value6: false, 16 | value7: ['b', 'c'], 17 | value8: false, 18 | value9: true 19 | } 20 | } 21 | } 22 | ``` 23 | 24 | #### 简单用法 25 | 26 | ```html 27 | {{ value1 }} 28 | ``` 29 | 30 | #### 自定义颜色 31 | 32 | ```html 33 | {{ value2 }} 34 | ``` 35 | 36 | #### 自定义状态值 37 | 38 | ```html 39 | value: {{ value3 }} 40 | ``` 41 | 42 | #### 禁用 43 | 44 | ```html 45 | a 46 | b 47 | ``` 48 | 49 | #### 自定义图标 50 | 51 | ```html 52 | 53 | 57 | 58 | ``` 59 | 60 | #### Checkbox 组 61 | 62 | ```html 63 | 64 | a 65 | b 66 | c 67 | d 68 | 69 |

当前选择：{{ value7 }}

70 | ``` 71 | 72 | #### 搭配 Cell 使用 73 | 74 | `Checkbox`提供了一个`toggle`方法用来切换选中状态，你可以搭配`Cell`组件一起使用 75 | 76 | ```html 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | ``` 86 | 87 | ### CheckboxGroup Props 88 | 89 | | 参数 | 说明 | 类型 | 默认值 | 90 | |------|------|------|------| 91 | | value | 所有选中项`name`值集合 | `Array` | `[]` | 92 | | disabled | 是否禁用所有复选框 | `Boolean` | `false` | 93 | | max | 限制最大选中数量，`0`代表不限制 | `Number` | `0` | 94 | 95 | ### Checkbox Props 96 | 97 | | 参数 | 说明 | 类型 | 默认值 | 98 | |------|------|------|------| 99 | | name | 标识符，与`CheckboxGroup`组件搭配使用 | `String | Number` | `''` | 100 | | value | 状态值 | `Boolean | Number | String` | - | 101 | | true-value | 设置选中状态的值 | `Boolean | Number | String` | `true` | 102 | | false-value | 设置未选中状态的值 | `Boolean | Number | String` | `false` | 103 | | disabled | 是否禁用该复选框 | `Boolean` | `false` | 104 | | color | 选中状态图标背景色 | `String` | 主题色 | 105 | 106 | ### Checkbox Slots 107 | 108 | | 名称 | 说明 | slot-scope | 109 | |------|------|------| 110 | | icon | 自定义图标 | value: 状态值 | 111 | 112 | ### Checkbox Methods 113 | 114 | | 方法名 | 参数 | 返回值 | 介绍 | 115 | |------|------|------|------| 116 | | toggle | - | - | 切换选中状态 | 117 | 118 | ### CheckboxGroup Events 119 | 120 | | 事件名 | 说明 | 参数 | 121 | |------|------|------| 122 | | change | 选中项改变时触发 | 所有选中项`name`值集合 | 123 | 124 | ### Checkbox Events 125 | 126 | | 事件名 | 说明 | 参数 | 127 | |------|------|------| 128 | | change | 切换时触发 | 状态值 | -------------------------------------------------------------------------------- /src/vue-tool/packages/swipe/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './src/index.vue'; -------------------------------------------------------------------------------- /src/vue-tool/packages/swipe/src/index.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1292150917/vueToolOfficial/43ff215141e4b679c4a0774bd8bea348a9a4faef/src/vue-tool/packages/swipe/src/index.js -------------------------------------------------------------------------------- /src/vue-tool/packages/swipe/src/index.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 162 | -------------------------------------------------------------------------------- /src/vue-tool/packages/swipe/src/swipeItem.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 22 | -------------------------------------------------------------------------------- /src/vue-tool/packages/tab/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './src/index.js'; -------------------------------------------------------------------------------- /src/vue-tool/packages/tab/src/index.js: -------------------------------------------------------------------------------- 1 | function mlTab(){ 2 | 3 | } 4 | export default mlTab -------------------------------------------------------------------------------- /src/vue-tool/packages/tab/src/index.md: -------------------------------------------------------------------------------- 1 | ## Checkbox 复选框 2 | 3 | ### 代码演示 4 | 5 | ```javascript 6 | export default { 7 | // 示例数据 8 | data() { 9 | return { 10 | value1: true, 11 | value2: true, 12 | value3: 0, 13 | value4: false, 14 | value5: true, 15 | value6: false, 16 | value7: ['b', 'c'], 17 | value8: false, 18 | value9: true 19 | } 20 | } 21 | } 22 | ``` 23 | 24 | #### 简单用法 25 | 26 | ```html 27 | {{ value1 }} 28 | ``` 29 | 30 | #### 自定义颜色 31 | 32 | ```html 33 | {{ value2 }} 34 | ``` 35 | 36 | #### 自定义状态值 37 | 38 | ```html 39 | value: {{ value3 }} 40 | ``` 41 | 42 | #### 禁用 43 | 44 | ```html 45 | a 46 | b 47 | ``` 48 | 49 | #### 自定义图标 50 | 51 | ```html 52 | 53 | 57 | 58 | ``` 59 | 60 | #### Checkbox 组 61 | 62 | ```html 63 | 64 | a 65 | b 66 | c 67 | d 68 | 69 |

当前选择：{{ value7 }}

70 | ``` 71 | 72 | #### 搭配 Cell 使用 73 | 74 | `Checkbox`提供了一个`toggle`方法用来切换选中状态，你可以搭配`Cell`组件一起使用 75 | 76 | ```html 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | ``` 86 | 87 | ### CheckboxGroup Props 88 | 89 | | 参数 | 说明 | 类型 | 默认值 | 90 | |------|------|------|------| 91 | | value | 所有选中项`name`值集合 | `Array` | `[]` | 92 | | disabled | 是否禁用所有复选框 | `Boolean` | `false` | 93 | | max | 限制最大选中数量，`0`代表不限制 | `Number` | `0` | 94 | 95 | ### Checkbox Props 96 | 97 | | 参数 | 说明 | 类型 | 默认值 | 98 | |------|------|------|------| 99 | | name | 标识符，与`CheckboxGroup`组件搭配使用 | `String | Number` | `''` | 100 | | value | 状态值 | `Boolean | Number | String` | - | 101 | | true-value | 设置选中状态的值 | `Boolean | Number | String` | `true` | 102 | | false-value | 设置未选中状态的值 | `Boolean | Number | String` | `false` | 103 | | disabled | 是否禁用该复选框 | `Boolean` | `false` | 104 | | color | 选中状态图标背景色 | `String` | 主题色 | 105 | 106 | ### Checkbox Slots 107 | 108 | | 名称 | 说明 | slot-scope | 109 | |------|------|------| 110 | | icon | 自定义图标 | value: 状态值 | 111 | 112 | ### Checkbox Methods 113 | 114 | | 方法名 | 参数 | 返回值 | 介绍 | 115 | |------|------|------|------| 116 | | toggle | - | - | 切换选中状态 | 117 | 118 | ### CheckboxGroup Events 119 | 120 | | 事件名 | 说明 | 参数 | 121 | |------|------|------| 122 | | change | 选中项改变时触发 | 所有选中项`name`值集合 | 123 | 124 | ### Checkbox Events 125 | 126 | | 事件名 | 说明 | 参数 | 127 | |------|------|------| 128 | | change | 切换时触发 | 状态值 | -------------------------------------------------------------------------------- /src/vue-tool/packages/tab/src/index.vue: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1292150917/vueToolOfficial/43ff215141e4b679c4a0774bd8bea348a9a4faef/src/vue-tool/packages/tab/src/index.vue -------------------------------------------------------------------------------- /src/vue-tool/packages/toast/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './src/index.js'; -------------------------------------------------------------------------------- /src/vue-tool/packages/toast/src/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import toast from './index.vue' 3 | import start from './start' 4 | import { monitoring, hq, cj, sc } from '../../../src/unity' 5 | function mlToast(props) { 6 | mlToast.clear() 7 | let node = Vue.extend(toast) 8 | if(props.icon){ 9 | node = Vue.extend(start) 10 | } 11 | var div = cj('div') 12 | var ne = new node({ 13 | el: div, 14 | propsData: props 15 | }) 16 | setTimeout(res => { 17 | mlToast.clear() 18 | }, props.duration || 3000) 19 | } 20 | mlToast.clear = function(){ 21 | if(hq('.ml-toast')){ 22 | sc(hq('.ml-toast')) 23 | } 24 | if(hq('.loading')){ 25 | sc(hq('.loading')) 26 | } 27 | } 28 | 29 | mlToast.success = function(props,call = 'success'){ 30 | var meg = { 31 | message: props ||'加载中', 32 | position: "middle", 33 | duration: 2000, 34 | icon: call 35 | } 36 | let success = Vue.extend(start) 37 | var div = cj('div') 38 | var ne = new success({ 39 | el: div, 40 | propsData: meg 41 | }) 42 | setTimeout(res => { 43 | mlToast.clear() 44 | }, props.duration || 3000) 45 | } 46 | mlToast.fail = function(props){ 47 | mlToast.success(props,'fail') 48 | } 49 | export default mlToast -------------------------------------------------------------------------------- /src/vue-tool/packages/toast/src/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 43 | -------------------------------------------------------------------------------- /src/vue-tool/src/index.js: -------------------------------------------------------------------------------- 1 | import 'font-awesome/css/font-awesome.css' 2 | import Button from '../packages/Button' 3 | import Cell from '../packages/Cell' 4 | import Swipe from '../packages/Swipe' 5 | import SwipeItem from '../packages/Swipe/src/SwipeItem' 6 | import Icon from '../packages/Icon' 7 | import Sticky from '../packages/Sticky' 8 | import NavBar from '../packages/NavBar' 9 | import Loading from '../packages/Loadings' 10 | import Popup from '../packages/Popup' 11 | import Switch from '../packages/Switch' 12 | // 请提示 不需要注册组建 13 | import mlAlert from '../packages/mlAlert' 14 | import mlToast from '../packages/toast' 15 | import InfiniteScroll from '../packages/InfiniteScroll' 16 | import mlLazy from '../packages/mlLazy' 17 | import Regular from '../packages/Regular' 18 | import Picture from '../packages/Picture' 19 | const install = function (Vue, cog = {}) { 20 | Vue.component(Button.name, Button) 21 | Vue.component(Cell.name, Cell) 22 | Vue.component(Swipe.name, Swipe) 23 | Vue.component(SwipeItem.name, SwipeItem) 24 | Vue.component(Icon.name, Icon) 25 | Vue.component(Sticky.name, Sticky) 26 | Vue.component(NavBar.name, NavBar) 27 | Vue.component(Loading.name, Loading) 28 | Vue.component(Switch.name, Switch) 29 | Vue.component(Popup.name, Popup) 30 | } 31 | export { 32 | install, 33 | Button, 34 | Cell, 35 | mlAlert, 36 | mlToast, 37 | Swipe, 38 | mlLazy, 39 | InfiniteScroll, 40 | Icon, 41 | Sticky, 42 | NavBar, 43 | Loading, 44 | Switch, 45 | Popup, 46 | Regular, 47 | Picture 48 | } 49 | if (typeof window !== 'undefined' && window.Vue) { 50 | install(window.Vue) 51 | } 52 | export default install; 53 | -------------------------------------------------------------------------------- /src/vue-tool/src/unity/index.js: -------------------------------------------------------------------------------- 1 | function monitoring(el, key, callback) { 2 | Object.defineProperty(el, key, { 3 | get: function (val) { 4 | return val 5 | }, 6 | set: function (val) { 7 | if(callback){ 8 | callback(val) 9 | } 10 | return 11 | } 12 | }) 13 | } 14 | // 获取元素 - hq 15 | // 元素名字 16 | function hq(el) { 17 | return document.querySelector(el) 18 | } 19 | // 创建元素并且添加 默认body 20 | // 值1 创建的元素 值2父元素的名字 默认body 21 | function cj(el,main){ 22 | var div = document.createElement(el) 23 | main ? hq(main).appendChild(div) : document.body.appendChild(div) 24 | return div 25 | } 26 | // 删除元素 默认body 值1删除元素的名字 父元素的名字 默认body 27 | function sc(el,main){ 28 | main ? hq(main).appendChild(el) : document.body.removeChild(el) 29 | return true 30 | } 31 | export { 32 | monitoring, 33 | hq, 34 | cj, 35 | sc 36 | } -------------------------------------------------------------------------------- /static/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1292150917/vueToolOfficial/43ff215141e4b679c4a0774bd8bea348a9a4faef/static/.gitkeep -------------------------------------------------------------------------------- /static/c426a1116301d1fd178c51522484127a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1292150917/vueToolOfficial/43ff215141e4b679c4a0774bd8bea348a9a4faef/static/c426a1116301d1fd178c51522484127a.png -------------------------------------------------------------------------------- /static/default.min.css: -------------------------------------------------------------------------------- 1 | .hljs, 2 | .language-javascript { 3 | display: block; 4 | overflow-x: auto; 5 | padding: 0.5em; 6 | line-height: 20px; 7 | background: #f1f4f8 8 | } 9 | 10 | .hljs, 11 | .hljs-subst { 12 | color: #444; 13 | line-height: 20px; 14 | } 15 | 16 | .hljs-attr { 17 | color: #b58900; 18 | } 19 | p a{ 20 | text-decoration: none; 21 | color: #2c31ff; 22 | } 23 | td code { 24 | background: #ececec; 25 | padding: 4px 8px; 26 | color: #666; 27 | border-radius: 4px; 28 | } 29 | blockquote{ 30 | border-left: 5px solid #EED; 31 | padding-left: 12px; 32 | } 33 | p code{ 34 | color: #666; 35 | background: #ececec; 36 | padding: 3px 7px 3px 7px; 37 | } 38 | pre { 39 | overflow: auto; 40 | } 41 | 42 | thead { 43 | background: #f1f4f8; 44 | text-align: left; 45 | } 46 | 47 | th { 48 | font-weight: 300; 49 | } 50 | 51 | td { 52 | font-size: 13px; 53 | } 54 | 55 | .mar30 { 56 | margin-top: 30px; 57 | } 58 | 59 | .mar20 { 60 | margin-top: 20px; 61 | } 62 | 63 | table { 64 | width: 100%; 65 | border-collapse: collapse; 66 | } 67 | 68 | h2 { 69 | margin-top: 40px; 70 | } 71 | 72 | h4 { 73 | margin-top: 10px; 74 | margin-bottom: 10px; 75 | } 76 | 77 | .name { 78 | margin-bottom: 30px; 79 | } 80 | 81 | tr { 82 | height: 40px; 83 | line-height: 40px; 84 | border-bottom: 1px solid #eee; 85 | } 86 | 87 | .main p { 88 | margin: 15px 0; 89 | font-size: 14px; 90 | line-height: 26px; 91 | color: #34495e; 92 | } 93 | 94 | th { 95 | font-size: 12px; 96 | } 97 | 98 | h1, 99 | h2, 100 | h3, 101 | h4, 102 | h5, 103 | h6 { 104 | font-size: 22px; 105 | margin-top: 45px; 106 | line-height: 1.5; 107 | font-weight: 400; 108 | margin: 20px 0 10px; 109 | color: #333; 110 | } 111 | 112 | .language-html { 113 | background: #f1f4f8; 114 | display: block; 115 | line-height: 24px; 116 | padding-top: 14px; 117 | padding-bottom: 14px; 118 | line-height: 26px; 119 | padding-left: 15px; 120 | font-size: 14px; 121 | } 122 | 123 | h4 { 124 | font-size: 16px; 125 | margin-bottom: 15px; 126 | line-height: 1.5; 127 | font-weight: 400; 128 | margin: 20px 0 10px; 129 | color: #333; 130 | } 131 | 132 | .hljs-comment { 133 | color: #888888 134 | } 135 | 136 | .hljs-keyword, 137 | .hljs-attribute, 138 | .hljs-selector-tag, 139 | .hljs-meta-keyword, 140 | .hljs-doctag, 141 | .hljs-name { 142 | color: #0079f3; 143 | } 144 | 145 | .hljs-type, 146 | .hljs-string, 147 | .hljs-number, 148 | .hljs-selector-id, 149 | .hljs-selector-class, 150 | .hljs-quote, 151 | .hljs-template-tag, 152 | .hljs-deletion { 153 | color: #0079f3 154 | } 155 | 156 | .hljs-title, 157 | .hljs-section { 158 | color: #880000; 159 | font-weight: bold 160 | } 161 | 162 | .hljs-regexp, 163 | .hljs-symbol, 164 | .hljs-variable, 165 | .hljs-template-variable, 166 | .hljs-link, 167 | .hljs-selector-attr, 168 | .hljs-selector-pseudo { 169 | color: #BC6060 170 | } 171 | 172 | .hljs-literal { 173 | color: #78A960 174 | } 175 | 176 | .hljs-built_in, 177 | .hljs-bullet, 178 | .hljs-code, 179 | .hljs-addition { 180 | color: #397300 181 | } 182 | 183 | .hljs-meta { 184 | color: #1f7199 185 | } 186 | 187 | .hljs-meta-string { 188 | color: #4d99bf 189 | } 190 | 191 | .hljs-emphasis { 192 | font-style: italic 193 | } 194 | 195 | .hljs-strong { 196 | font-weight: bold 197 | } 198 | -------------------------------------------------------------------------------- /static/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1292150917/vueToolOfficial/43ff215141e4b679c4a0774bd8bea348a9a4faef/static/favicon.png -------------------------------------------------------------------------------- /static/fluidicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1292150917/vueToolOfficial/43ff215141e4b679c4a0774bd8bea348a9a4faef/static/fluidicon.png -------------------------------------------------------------------------------- /static/simulator.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 模拟移动端 touch 事件 3 | */ 4 | 5 | var eventTarget; 6 | 7 | // polyfills 8 | if (!document.createTouch) { 9 | document.createTouch = function (view, target, identifier, pageX, pageY, screenX, screenY) { 10 | // auto set 11 | return new Touch(target, identifier, { 12 | pageX: pageX, 13 | pageY: pageY, 14 | screenX: screenX, 15 | screenY: screenY, 16 | clientX: pageX - window.pageXOffset, 17 | clientY: pageY - window.pageYOffset 18 | }, 0, 0); 19 | }; 20 | } 21 | 22 | if (!document.createTouchList) { 23 | document.createTouchList = function () { 24 | var touchList = TouchList(); 25 | for (var i = 0; i < arguments.length; i++) { 26 | touchList[i] = arguments[i]; 27 | } 28 | touchList.length = arguments.length; 29 | return touchList; 30 | }; 31 | } 32 | 33 | /** 34 | * create an touch point 35 | * @constructor 36 | * @param target 37 | * @param identifier 38 | * @param pos 39 | * @param deltaX 40 | * @param deltaY 41 | * @returns {Object} touchPoint 42 | */ 43 | 44 | var Touch = function Touch(target, identifier, pos, deltaX, deltaY) { 45 | deltaX = deltaX || 0; 46 | deltaY = deltaY || 0; 47 | 48 | this.identifier = identifier; 49 | this.target = target; 50 | this.clientX = pos.clientX + deltaX; 51 | this.clientY = pos.clientY + deltaY; 52 | this.screenX = pos.screenX + deltaX; 53 | this.screenY = pos.screenY + deltaY; 54 | this.pageX = pos.pageX + deltaX; 55 | this.pageY = pos.pageY + deltaY; 56 | }; 57 | 58 | /** 59 | * create empty touchlist with the methods 60 | * @constructor 61 | * @returns touchList 62 | */ 63 | function TouchList() { 64 | var touchList = []; 65 | 66 | touchList['item'] = function (index) { 67 | return this[index] || null; 68 | }; 69 | 70 | // specified by Mozilla 71 | touchList['identifiedTouch'] = function (id) { 72 | return this[id + 1] || null; 73 | }; 74 | 75 | return touchList; 76 | } 77 | 78 | /** 79 | * Simple trick to fake touch event support 80 | * this is enough for most libraries like Modernizr and Hammer 81 | */ 82 | function fakeTouchSupport() { 83 | var objs = [window, document.documentElement]; 84 | var props = ['ontouchstart', 'ontouchmove', 'ontouchcancel', 'ontouchend']; 85 | 86 | for (var o = 0; o < objs.length; o++) { 87 | for (var p = 0; p < props.length; p++) { 88 | if (objs[o] && objs[o][props[p]] === undefined) { 89 | objs[o][props[p]] = null; 90 | } 91 | } 92 | } 93 | } 94 | 95 | /** 96 | * only trigger touches when the left mousebutton has been pressed 97 | * @param touchType 98 | * @returns {Function} 99 | */ 100 | function onMouse(touchType) { 101 | return function (ev) { 102 | // prevent mouse events 103 | 104 | if (ev.which !== 1) { 105 | return; 106 | } 107 | 108 | // The EventTarget on which the touch point started when it was first placed on the surface, 109 | // even if the touch point has since moved outside the interactive area of that element. 110 | // also, when the target doesnt exist anymore, we update it 111 | if (ev.type === 'mousedown' || !eventTarget || eventTarget && !eventTarget.dispatchEvent) { 112 | eventTarget = ev.target; 113 | } 114 | 115 | triggerTouch(touchType, ev); 116 | 117 | // reset 118 | if (ev.type === 'mouseup') { 119 | eventTarget = null; 120 | } 121 | }; 122 | } 123 | 124 | /** 125 | * trigger a touch event 126 | * @param eventName 127 | * @param mouseEv 128 | */ 129 | function triggerTouch(eventName, mouseEv) { 130 | var touchEvent = document.createEvent('Event'); 131 | touchEvent.initEvent(eventName, true, true); 132 | 133 | touchEvent.altKey = mouseEv.altKey; 134 | touchEvent.ctrlKey = mouseEv.ctrlKey; 135 | touchEvent.metaKey = mouseEv.metaKey; 136 | touchEvent.shiftKey = mouseEv.shiftKey; 137 | 138 | touchEvent.touches = getActiveTouches(mouseEv); 139 | touchEvent.targetTouches = getActiveTouches(mouseEv); 140 | touchEvent.changedTouches = createTouchList(mouseEv); 141 | 142 | eventTarget.dispatchEvent(touchEvent); 143 | } 144 | 145 | /** 146 | * create a touchList based on the mouse event 147 | * @param mouseEv 148 | * @returns {TouchList} 149 | */ 150 | function createTouchList(mouseEv) { 151 | var touchList = TouchList(); 152 | touchList.push(new Touch(eventTarget, 1, mouseEv, 0, 0)); 153 | return touchList; 154 | } 155 | 156 | /** 157 | * receive all active touches 158 | * @param mouseEv 159 | * @returns {TouchList} 160 | */ 161 | function getActiveTouches(mouseEv) { 162 | // empty list 163 | if (mouseEv.type === 'mouseup') { 164 | return TouchList(); 165 | } 166 | return createTouchList(mouseEv); 167 | } 168 | 169 | /** 170 | * TouchEmulator initializer 171 | */ 172 | function TouchEmulator() { 173 | fakeTouchSupport(); 174 | 175 | window.addEventListener('mousedown', onMouse('touchstart'), true); 176 | window.addEventListener('mousemove', onMouse('touchmove'), true); 177 | window.addEventListener('mouseup', onMouse('touchend'), true); 178 | } 179 | 180 | // start distance when entering the multitouch mode 181 | TouchEmulator['multiTouchOffset'] = 75; 182 | 183 | new TouchEmulator(); 184 | --------------------------------------------------------------------------------