├── static └── .gitkeep ├── .gitattributes ├── config ├── prod.env.js ├── dev.env.js └── index.js ├── src ├── assets │ ├── logo.png │ └── reset.css ├── App.vue ├── main.js ├── router │ └── index.js ├── pages │ ├── index.vue │ ├── PageTextScroll.vue │ └── PageToast.vue └── components │ ├── TextScroll.vue │ └── Toast.vue ├── .babelrc ├── .editorconfig ├── .gitignore ├── index.html ├── .postcssrc.js ├── package.json └── README.md /static/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | module.exports = { 3 | NODE_ENV: '"production"' 4 | } 5 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingyang519/vueFlexibleComponents/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false 5 | }], 6 | "stage-2" 7 | ], 8 | "plugins": ["transform-runtime"] 9 | } 10 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 4 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | /dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .idea 10 | .vscode 11 | *.suo 12 | *.ntvs* 13 | *.njsproj 14 | *.sln 15 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | vue-flexible-components 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | // to edit target browsers: use "browserslist" field in package.json 6 | "postcss-import": {}, 7 | "autoprefixer": {} 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 19 | -------------------------------------------------------------------------------- /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 | 7 | 8 | import 'lib-flexible' 9 | import '@/assets/reset.css' 10 | 11 | Vue.config.productionTip = false 12 | 13 | /* eslint-disable no-new */ 14 | new Vue({ 15 | el: '#app', 16 | router, 17 | template: '', 18 | components: { App } 19 | }) 20 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | import Index from '@/pages/index' 4 | import PageTextScroll from '@/pages/PageTextScroll' 5 | import PageToast from '@/pages/PageToast' 6 | 7 | Vue.use(Router) 8 | 9 | export default new Router({ 10 | routes: [ 11 | { 12 | path: '/', 13 | name: 'Index', 14 | component: Index 15 | }, 16 | { 17 | path: '/TextScroll', 18 | name: 'TextScroll', 19 | component: PageTextScroll, 20 | }, 21 | { 22 | path: '/Toast', 23 | name: 'Toast', 24 | component: PageToast, 25 | } 26 | ] 27 | }) 28 | -------------------------------------------------------------------------------- /src/pages/index.vue: -------------------------------------------------------------------------------- 1 | 16 | 21 | 22 | 51 | -------------------------------------------------------------------------------- /src/pages/PageTextScroll.vue: -------------------------------------------------------------------------------- 1 | 29 | 48 | 54 | -------------------------------------------------------------------------------- /src/assets/reset.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /* reset */ 3 | html, body, h1, h2, h3, h4, h5, h6, dl, dt, dd, ul, ol, li, th, td, p, blockquote, pre, form, table, td, th, tbody, fieldset, legend, input, button, textarea, hr, header, footer, section, aside, article, nav {margin: 0;padding: 0;-webkit-tap-highlight-color: transparent} 4 | html, body, button, input, select, textarea {font-size: 24px;/*px*/outline: medium none; font-family: Microsoft Yahei,Arial,sans-serif} 5 | 6 | 7 | header, footer, section, aside, article, nav{ display: block;} 8 | ul,ol{list-style: none;} 9 | body { background-color: #EEEEEE; color: #484848;} 10 | h1, h2, h3, h4, h5, h6, th{font-size: 100%;font-weight: normal;} 11 | a {text-decoration: none;outline: none;color: #484848;} 12 | a:hover{text-decoration: none; -webkit-tap-highlight-color: transparent;} 13 | table{border-collapse: collapse;border-spacing: 0;} 14 | table,td,th,tbody{box-sizing: border-box; } 15 | input[type=search]::-webkit-search-cancel-button{-webkit-appearance: none;} 16 | input[type=submit],input[type=button]{-webkit-appearance: none;} 17 | input:focus,textarea:focus{-webkit-user-modify: read-write-plaintext-only} 18 | p,span,del,i,div,h1, h2, h3, h4, h5, h6, th{ max-height: 999999px;} /*解决flexible下使用chrome模拟手机时字体变大问题--触发了chrome Font Boosting http://www.cnblogs.com/axl234/p/5895347.html*/ 19 | em{ font-style: normal;} 20 | 21 | 22 | 23 | .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;} 24 | .clearfix{display:inline-block;} 25 | * html .clearfix{height:1%;} 26 | .clearfix{display:block;} 27 | 28 | .dn{ display: none; } 29 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-flexible-components", 3 | "version": "1.0.0", 4 | "description": "some vue components base on flexiblecomponents", 5 | "author": "bingyang", 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 | "lib-flexible": "^0.3.2", 14 | "vue": "^2.5.2", 15 | "vue-router": "^3.0.1" 16 | }, 17 | "devDependencies": { 18 | "autoprefixer": "^7.1.2", 19 | "babel-core": "^6.22.1", 20 | "babel-loader": "^7.1.1", 21 | "babel-plugin-transform-runtime": "^6.22.0", 22 | "babel-preset-env": "^1.3.2", 23 | "babel-preset-stage-2": "^6.22.0", 24 | "chalk": "^2.0.1", 25 | "copy-webpack-plugin": "^4.0.1", 26 | "css-loader": "^0.28.0", 27 | "eventsource-polyfill": "^0.9.6", 28 | "extract-text-webpack-plugin": "^3.0.0", 29 | "file-loader": "^1.1.4", 30 | "friendly-errors-webpack-plugin": "^1.6.1", 31 | "html-webpack-plugin": "^2.30.1", 32 | "node-notifier": "^5.1.2", 33 | "optimize-css-assets-webpack-plugin": "^3.2.0", 34 | "ora": "^1.2.0", 35 | "portfinder": "^1.0.13", 36 | "postcss-import": "^11.0.0", 37 | "postcss-loader": "^2.0.8", 38 | "px2rem-loader": "^0.1.7", 39 | "rimraf": "^2.6.0", 40 | "semver": "^5.3.0", 41 | "shelljs": "^0.7.6", 42 | "uglifyjs-webpack-plugin": "^1.1.1", 43 | "url-loader": "^0.5.8", 44 | "vue-loader": "^13.3.0", 45 | "vue-style-loader": "^3.0.1", 46 | "vue-template-compiler": "^2.5.2", 47 | "webpack": "^3.6.0", 48 | "webpack-bundle-analyzer": "^2.9.0", 49 | "webpack-dev-server": "^2.9.1", 50 | "webpack-merge": "^4.1.0" 51 | }, 52 | "engines": { 53 | "node": ">= 4.0.0", 54 | "npm": ">= 3.0.0" 55 | }, 56 | "browserslist": [ 57 | "> 1%", 58 | "last 2 versions", 59 | "not ie <= 8" 60 | ] 61 | } 62 | -------------------------------------------------------------------------------- /src/pages/PageToast.vue: -------------------------------------------------------------------------------- 1 | 44 | 92 | 105 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | // Template version: 1.2.5 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: 'localhost', // can be overwritten by process.env.HOST 17 | port: 8780, // 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 | // Use Eslint Loader? 24 | // If true, your code will be linted during bundling and 25 | // linting errors and warnings will be shown in the console. 26 | useEslint: true, 27 | // If true, eslint errors and warnings will also be shown in the error overlay 28 | // in the browser. 29 | showEslintErrorsInOverlay: false, 30 | 31 | /** 32 | * Source Maps 33 | */ 34 | 35 | // https://webpack.js.org/configuration/devtool/#development 36 | devtool: 'eval-source-map', 37 | 38 | // If you have problems debugging vue-files in devtools, 39 | // set this to false - it *may* help 40 | // https://vue-loader.vuejs.org/en/options.html#cachebusting 41 | cacheBusting: true, 42 | 43 | // CSS Sourcemaps off by default because relative paths are "buggy" 44 | // with this option, according to the CSS-Loader README 45 | // (https://github.com/webpack/css-loader#sourcemaps) 46 | // In our experience, they generally work as expected, 47 | // just be aware of this issue when enabling this option. 48 | cssSourceMap: false, 49 | }, 50 | 51 | build: { 52 | // Template for index.html 53 | index: path.resolve(__dirname, '../dist/index.html'), 54 | 55 | // Paths 56 | assetsRoot: path.resolve(__dirname, '../dist'), 57 | assetsSubDirectory: 'static', 58 | assetsPublicPath: '/', 59 | 60 | /** 61 | * Source Maps 62 | */ 63 | 64 | productionSourceMap: true, 65 | // https://webpack.js.org/configuration/devtool/#production 66 | devtool: '#source-map', 67 | 68 | // Gzip off by default as many popular static hosts such as 69 | // Surge or Netlify already gzip all static assets for you. 70 | // Before setting to `true`, make sure to: 71 | // npm install --save-dev compression-webpack-plugin 72 | productionGzip: false, 73 | productionGzipExtensions: ['js', 'css'], 74 | 75 | // Run the build command with an extra argument to 76 | // View the bundle analyzer report after build finishes: 77 | // `npm run build --report` 78 | // Set to `true` or `false` to always turn it on or off 79 | bundleAnalyzerReport: process.env.npm_config_report 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /src/components/TextScroll.vue: -------------------------------------------------------------------------------- 1 | 16 | 73 | 74 | 155 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-flexible-components 2 | 3 | > some vue components base on flexible
4 | 基于手淘 flexible.js 的 Vue 组件 5 | 6 | > **前言：** 7 | > - 目前手头的移动端Vue项目是用手淘的 [lib-flexible](https://github.com/amfe/lib-flexible/tree/master) 作适配的，并用 [px2rem](https://www.npmjs.com/package/px2rem) 来自动转换成rem。关于lib-flexible和px2rem的配置，请移步 *[vue-cli 配置 flexible](https://segmentfault.com/a/1190000011883121)*。 8 | > - 由于使用rem作适配，导致现有的很多移动端UI框架不能与之很好的配合，往往需要大动干戈更改UI框架的样式，背离了使用UI框架达到快速开发的初衷。 9 | > - 为了以后项目的组件复用，以及提高开发可复用组件的能力，特把平时项目中*常用的、简单的* 组件单独拎出来。 10 | > - 此为小白之作，论代码质量、难易程度、复用度，远不及各位大佬之杰作，求轻喷。同时，也恳请各位，提出意见和建议，不胜感激！ 11 | > - GitHub地址：[vue-flexible-components](https://github.com/bingyang519/vueFlexibleComponents) 12 | 13 | ## [TextScroll -- 文字滚动](https://segmentfault.com/a/1190000012432631) 14 | 15 | - ### 效果展示 16 | ![效果展示](https://sfault-image.b0.upaiyun.com/210/767/2107671534-5a3267d06e99b_articlex) 17 | - ### 使用说明 18 | - 组件位置：[src/components/TextScroll.vue](https://github.com/bingyang519/vueFlexibleComponents/tree/master/src/components)（不能npm，只能手动下载使用） 19 | - 下载并放入自己项目中 —— import 引入组件 —— components中注册组件 —— 使用 20 | - props 21 | 22 | | props| 说明 | 类型 | 可选值 | 默认值 23 | | - | - | - | - | - | 24 | | dataList | 滚动文字数据
(由于数据结构不同，需更改组件内的dom结构) | Array | | [ ] | 25 | | scrollType | 滚动效果 | String | 'scroll-up'
'scroll-up-linear'
'scroll-left'
'scroll-left-linear' | 'scroll-up' 26 | - 示例 27 | ``` 28 | 32 | 33 | ``` 34 | ## [Toast -- 显示框](https://segmentfault.com/a/1190000012580979) 35 | 36 | - ### 效果展示 37 | ![效果展示](https://sfault-image.b0.upaiyun.com/408/670/4086701058-5a40edd6eec66_articlex) 38 | - ### 使用说明 39 | - 组件位置：[src/components/TextScroll.vue](https://github.com/bingyang519/vueFlexibleComponents/tree/master/src/components)（不能npm，只能手动下载使用） 40 | - 下载并放入自己项目中 —— import 引入组件 —— components中注册组件 —— 使用 41 | - props 42 | 43 | | props| 说明 | 类型 | 可选值 | 默认值 | 44 | | - | - | - | - | - | 45 | | toastShow | 控制显示框显示、隐藏。需添加[.sync修饰符](https://cn.vuejs.org/v2/guide/components.html#sync-修饰符)才能自动关闭，详见例子 | Boolean| false
true | false | 46 | | message| 提示信息 | String | | | 47 | | iconClass| icon小图标| String| success
warning
close | | 48 | | iconImage| 自定义小图标(图片需require引入) | | | | 49 | | duration| 定时器(毫秒)，控制弹框显示时间，负数代表不执行定时任务| Number| | 1500 | 50 | | position| 弹框位置（距顶） | String | | '50%' | 51 | 52 | - $emit 53 | 54 | | $emit| 说明 | 参数 | 55 | | - | - | - | 56 | | toastClose| 弹框关闭回调 | | 57 | 58 | - 示例 59 | ```vue 60 | // 默认效果，只有提示信息 61 | // 关于sync的说明，请看官网（主要是为了达到双向数据绑定，子组件修改父组件状态） 65 | 66 | // 增加自带小图标 67 | 72 | ``` 73 | ```vue 74 | // 自定义类型 75 | 83 | 84 | data() { 85 | return { 86 | this.isShow5 : true, 87 | bg: require('../assets/logo.png'), // 图片必须用require进来 88 | } 89 | }, 90 | isClose5() { 91 | setTimeout(()=>{ 92 | this.isShow5 = false; 93 | }, 2000) 94 | } 95 | ``` 96 | 97 | --- 98 | ## 持续更新中。。。 99 | ## Build Setup 100 | 101 | ``` bash 102 | # install dependencies 103 | npm install 104 | 105 | # serve with hot reload at localhost:8780 106 | npm run dev 107 | 108 | # build for production with minification 109 | npm run build 110 | 111 | # build for production and view the bundle analyzer report 112 | npm run build --report 113 | ``` 114 | 115 | For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). 116 | -------------------------------------------------------------------------------- /src/components/Toast.vue: -------------------------------------------------------------------------------- 1 | 20 | 94 | 150 | --------------------------------------------------------------------------------