├── static └── .gitkeep ├── test ├── Model.js ├── components │ ├── Model.js │ └── Toast.js ├── Toast.js ├── index.js ├── src │ └── index.js └── main.js ├── .eslintignore ├── config ├── prod.env.js ├── test.env.js ├── dev.env.js └── index.js ├── src ├── assets │ └── logo.png ├── App.vue ├── components │ ├── Mask.vue │ ├── Agreement.vue │ ├── Switch.vue │ ├── Border.vue │ ├── popup.vue │ ├── Loading.vue │ ├── check.vue │ ├── Tab.vue │ ├── Toast.vue │ ├── button.vue │ ├── Line.vue │ ├── Announcement.vue │ ├── Model.vue │ ├── illustration.vue │ ├── result.vue │ ├── card.vue │ ├── Actionsheet.vue │ ├── Search.vue │ ├── Ad.vue │ ├── Toast.js │ ├── alert.vue │ ├── Share.vue │ ├── Tabs.vue │ ├── Input.vue │ ├── List.vue │ ├── Model.js │ ├── Actionsheet.js │ ├── Alert.js │ ├── Keyboard.vue │ └── picker.vue ├── view │ ├── SearchView.vue │ ├── MaskView.vue │ ├── SwitchView.vue │ ├── checkboxView.vue │ ├── illustration.vue │ ├── KeyboardView.vue │ ├── AnnouncementView.vue │ ├── AdView.vue │ ├── LoadingView.vue │ ├── AgreemeView.vue │ ├── resultView.vue │ ├── LineView.vue │ ├── Border.vue │ ├── AlertView.vue │ ├── ShareView.vue │ ├── TabView.vue │ ├── ActionsheetView.vue │ ├── ModelView.vue │ ├── CardView.vue │ ├── text.vue │ ├── AgreementView.vue │ ├── InputView.vue │ ├── ToastView.vue │ ├── ButtonView.vue │ ├── PickerView.vue │ ├── indexView.vue │ └── ListView.vue ├── index.js └── main.js ├── .babelrc ├── .editorconfig ├── index.html ├── .gitignore ├── LICENSE ├── webpack.config.js ├── package.json └── README.md /static/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/Model.js: -------------------------------------------------------------------------------- 1 | "use strict"; -------------------------------------------------------------------------------- /test/components/Model.js: -------------------------------------------------------------------------------- 1 | "use strict"; -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | build/*.js 2 | config/*.js 3 | -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | NODE_ENV: '"production"' 3 | } 4 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yeseason/paco-ui-vue/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "stage-2"], 3 | "plugins": ["transform-runtime"], 4 | "comments": false 5 | } 6 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /config/test.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var devEnv = require('./dev.env') 3 | 4 | module.exports = merge(devEnv, { 5 | NODE_ENV: '"testing"' 6 | }) 7 | -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var prodEnv = require('./prod.env') 3 | 4 | module.exports = merge(prodEnv, { 5 | NODE_ENV: '"development"' 6 | }) 7 | -------------------------------------------------------------------------------- /src/components/Mask.vue: -------------------------------------------------------------------------------- 1 | 4 | 10 | 11 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /src/components/Agreement.vue: -------------------------------------------------------------------------------- 1 | 7 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/components/Switch.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /src/components/Border.vue: -------------------------------------------------------------------------------- 1 | 5 | 13 | -------------------------------------------------------------------------------- /src/components/popup.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/components/Loading.vue: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /src/components/check.vue: -------------------------------------------------------------------------------- 1 | 8 | 17 | -------------------------------------------------------------------------------- /src/view/SearchView.vue: -------------------------------------------------------------------------------- 1 | 12 | -------------------------------------------------------------------------------- /src/components/Tab.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/view/MaskView.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/view/SwitchView.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | -------------------------------------------------------------------------------- /src/view/checkboxView.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/view/illustration.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | -------------------------------------------------------------------------------- /src/components/Toast.vue: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /src/components/button.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /src/view/KeyboardView.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | -------------------------------------------------------------------------------- /src/view/AnnouncementView.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 24 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | paco-ui-vue 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/components/Line.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /src/view/AdView.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 24 | -------------------------------------------------------------------------------- /src/components/Announcement.vue: -------------------------------------------------------------------------------- 1 | 11 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /src/view/LoadingView.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 24 | -------------------------------------------------------------------------------- /src/view/AgreemeView.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 24 | -------------------------------------------------------------------------------- /src/view/resultView.vue: -------------------------------------------------------------------------------- 1 | 14 | -------------------------------------------------------------------------------- /src/view/LineView.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 31 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # ---> Node 2 | # Logs 3 | logs 4 | *.log 5 | npm-debug.log* 6 | 7 | # Runtime data 8 | pids 9 | *.pid 10 | *.seed 11 | 12 | # Directory for instrumented libs generated by jscoverage/JSCover 13 | lib-cov 14 | 15 | # Coverage directory used by tools like istanbul 16 | coverage 17 | 18 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 19 | .grunt 20 | 21 | # node-waf configuration 22 | .lock-wscript 23 | 24 | # Compiled binary addons (http://nodejs.org/api/addons.html) 25 | build/Release 26 | 27 | # Dependency directory 28 | # https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git 29 | node_modules 30 | dist 31 | 32 | -------------------------------------------------------------------------------- /src/components/Model.vue: -------------------------------------------------------------------------------- 1 | 9 | 29 | -------------------------------------------------------------------------------- /src/view/Border.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | -------------------------------------------------------------------------------- /src/components/illustration.vue: -------------------------------------------------------------------------------- 1 | 20 | -------------------------------------------------------------------------------- /src/components/result.vue: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /src/view/AlertView.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 32 | -------------------------------------------------------------------------------- /src/view/ShareView.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 30 | -------------------------------------------------------------------------------- /src/view/TabView.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 35 | -------------------------------------------------------------------------------- /src/view/ActionsheetView.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | -------------------------------------------------------------------------------- /src/view/ModelView.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 31 | -------------------------------------------------------------------------------- /src/components/card.vue: -------------------------------------------------------------------------------- 1 | 19 | -------------------------------------------------------------------------------- /src/components/Actionsheet.vue: -------------------------------------------------------------------------------- 1 | 12 | -------------------------------------------------------------------------------- /src/view/CardView.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | -------------------------------------------------------------------------------- /src/view/text.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | -------------------------------------------------------------------------------- /src/view/AgreementView.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 33 | -------------------------------------------------------------------------------- /src/components/Search.vue: -------------------------------------------------------------------------------- 1 | 18 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | Copyright (c) 3 | 4 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 5 | 6 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 7 | 8 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 9 | -------------------------------------------------------------------------------- /src/components/Ad.vue: -------------------------------------------------------------------------------- 1 | 11 | 43 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack') 2 | var path = require('path') 3 | 4 | module.exports = { 5 | entry: './src/index.js', 6 | output: { 7 | path: './lib', 8 | publicPath: '/lib/', 9 | library: 'paco-ui-vue', 10 | libraryTarget: 'umd', 11 | filename: 'index.js' 12 | }, 13 | resolve: { 14 | root: path.resolve('./') 15 | }, 16 | module: { 17 | loaders: [ 18 | {test: /\.vue$/, loader: 'vue' }, 19 | { 20 | test: /\.js$/, 21 | loader: 'babel', 22 | exclude: /node_modules/ 23 | }, 24 | ] 25 | }, 26 | babel: { 27 | presets: ['es2015'], 28 | plugins: ['transform-runtime'] 29 | }, 30 | devtool: 'source-map' 31 | }; 32 | 33 | 34 | if (process.env.NODE_ENV === 'production') { 35 | delete module.exports.devtool; 36 | module.exports.plugins = [ 37 | new webpack.DefinePlugin({ 38 | 'process.env': { 39 | NODE_ENV: '"production"' 40 | } 41 | }), 42 | new webpack.optimize.UglifyJsPlugin({ 43 | compress: { 44 | warnings: false 45 | } 46 | }) 47 | ]; 48 | } -------------------------------------------------------------------------------- /src/components/Toast.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | 3 | const Toast = Vue.extend(require('./toast.vue')); 4 | let toastPool = []; 5 | 6 | let getAnInstange = function(){ 7 | if(toastPool.length>0){ 8 | let instance = toastPool[0]; 9 | toastPool.splice(0,1); 10 | return instance; 11 | } 12 | return new Toast({ 13 | el: document.createElement('div') 14 | }) 15 | }; 16 | 17 | let returnAnInstance =function(instance){ 18 | if(instance){ 19 | toastPool.push(instance); 20 | } 21 | }; 22 | 23 | export default function(options){ 24 | options =options ||{}; 25 | let message,duration,type; 26 | 27 | if(typeof(options) === 'string'){ 28 | message = options; 29 | duration = 3000 30 | type = "success" 31 | }else{ 32 | message = options.message; 33 | duration = options.duration 34 | type = options.type 35 | } 36 | 37 | let instance = getAnInstange() 38 | instance.message = message; 39 | instance.type = type; 40 | Vue.nextTick(function(){ 41 | instance.$appendTo(document.body); 42 | setTimeout(()=>{ 43 | instance.$remove(); 44 | returnAnInstance(instance); 45 | },duration) 46 | }) 47 | } -------------------------------------------------------------------------------- /src/components/alert.vue: -------------------------------------------------------------------------------- 1 | 12 | -------------------------------------------------------------------------------- /src/view/InputView.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 39 | -------------------------------------------------------------------------------- /src/view/ToastView.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 45 | -------------------------------------------------------------------------------- /src/view/ButtonView.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 35 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | // see http://vuejs-templates.github.io/webpack for documentation. 2 | var path = require('path') 3 | 4 | module.exports = { 5 | build: { 6 | env: require('./prod.env'), 7 | index: path.resolve(__dirname, '../dist/index.html'), 8 | assetsRoot: path.resolve(__dirname, '../dist'), 9 | assetsSubDirectory: 'static', 10 | assetsPublicPath: '', 11 | productionSourceMap: true, 12 | // Gzip off by default as many popular static hosts such as 13 | // Surge or Netlify already gzip all static assets for you. 14 | // Before setting to `true`, make sure to: 15 | // npm install --save-dev compression-webpack-plugin 16 | productionGzip: false, 17 | productionGzipExtensions: ['js', 'css'] 18 | }, 19 | dev: { 20 | env: require('./dev.env'), 21 | port: 9990, 22 | assetsSubDirectory: 'static', 23 | assetsPublicPath: '/', 24 | proxyTable: {}, 25 | // CSS Sourcemaps off by default because relative paths are "buggy" 26 | // with this option, according to the CSS-Loader README 27 | // (https://github.com/webpack/css-loader#sourcemaps) 28 | // In our experience, they generally work as expected, 29 | // just be aware of this issue when enabling this option. 30 | cssSourceMap: false, 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/components/Share.vue: -------------------------------------------------------------------------------- 1 | 27 | -------------------------------------------------------------------------------- /src/components/Tabs.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | -------------------------------------------------------------------------------- /test/Toast.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | exports.default = function (options) { 8 | options = options || {}; 9 | var message = void 0, 10 | duration = void 0, 11 | type = void 0; 12 | 13 | if (typeof options === 'string') { 14 | message = options; 15 | duration = 3000; 16 | type = "success"; 17 | } else { 18 | message = options.message; 19 | duration = options.duration; 20 | type = options.type; 21 | } 22 | 23 | var instance = getAnInstange(); 24 | instance.message = message; 25 | instance.type = type; 26 | _vue2.default.nextTick(function () { 27 | instance.$appendTo(document.body); 28 | setTimeout(function () { 29 | instance.$remove(); 30 | returnAnInstance(instance); 31 | }, duration); 32 | }); 33 | }; 34 | 35 | var _vue = require('vue'); 36 | 37 | var _vue2 = _interopRequireDefault(_vue); 38 | 39 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 40 | 41 | var Toast = _vue2.default.extend(require('./toast.vue')); 42 | var toastPool = []; 43 | 44 | var getAnInstange = function getAnInstange() { 45 | if (toastPool.length > 0) { 46 | var instance = toastPool[0]; 47 | toastPool.splice(0, 1); 48 | return instance; 49 | } 50 | return new Toast({ 51 | el: document.createElement('div') 52 | }); 53 | }; 54 | 55 | var returnAnInstance = function returnAnInstance(instance) { 56 | if (instance) { 57 | toastPool.push(instance); 58 | } 59 | }; -------------------------------------------------------------------------------- /test/components/Toast.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | exports.default = function (options) { 8 | options = options || {}; 9 | var message = void 0, 10 | duration = void 0, 11 | type = void 0; 12 | 13 | if (typeof options === 'string') { 14 | message = options; 15 | duration = 3000; 16 | type = "success"; 17 | } else { 18 | message = options.message; 19 | duration = options.duration; 20 | type = options.type; 21 | } 22 | 23 | var instance = getAnInstange(); 24 | instance.message = message; 25 | instance.type = type; 26 | _vue2.default.nextTick(function () { 27 | instance.$appendTo(document.body); 28 | setTimeout(function () { 29 | instance.$remove(); 30 | returnAnInstance(instance); 31 | }, duration); 32 | }); 33 | }; 34 | 35 | var _vue = require('vue'); 36 | 37 | var _vue2 = _interopRequireDefault(_vue); 38 | 39 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 40 | 41 | var Toast = _vue2.default.extend(require('./toast.vue')); 42 | var toastPool = []; 43 | 44 | var getAnInstange = function getAnInstange() { 45 | if (toastPool.length > 0) { 46 | var instance = toastPool[0]; 47 | toastPool.splice(0, 1); 48 | return instance; 49 | } 50 | return new Toast({ 51 | el: document.createElement('div') 52 | }); 53 | }; 54 | 55 | var returnAnInstance = function returnAnInstance(instance) { 56 | if (instance) { 57 | toastPool.push(instance); 58 | } 59 | }; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "paco-ui-vue", 3 | "version": "1.0.1", 4 | "description": "A Vue.js project", 5 | "author": "谢瑞卿 ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "node build/dev-server.js", 9 | "build": "webpack -p", 10 | "watch": "node build/build.js", 11 | "e2e": "node test/e2e/runner.js", 12 | "test": "npm run e2e" 13 | }, 14 | "main":"lib/index.js", 15 | "dependencies": { 16 | "babel-runtime": "^6.0.0", 17 | "vue": "^1.0.21", 18 | "vue-router": "^0.7.13" 19 | }, 20 | "devDependencies": { 21 | "babel-core": "^6.0.0", 22 | "babel-loader": "^6.0.0", 23 | "babel-plugin-transform-runtime": "^6.0.0", 24 | "babel-preset-es2015": "^6.0.0", 25 | "babel-preset-stage-2": "^6.0.0", 26 | "babel-register": "^6.0.0", 27 | "chromedriver": "^2.21.2", 28 | "connect-history-api-fallback": "^1.1.0", 29 | "cross-spawn": "^2.1.5", 30 | "css-loader": "^0.23.0", 31 | "eventsource-polyfill": "^0.9.6", 32 | "express": "^4.13.3", 33 | "extract-text-webpack-plugin": "^1.0.1", 34 | "file-loader": "^0.8.4", 35 | "function-bind": "^1.0.2", 36 | "html-webpack-plugin": "^2.8.1", 37 | "http-proxy-middleware": "^0.12.0", 38 | "json-loader": "^0.5.4", 39 | "nightwatch": "^0.8.18", 40 | "ora": "^0.2.0", 41 | "selenium-server": "2.53.0", 42 | "shelljs": "^0.6.0", 43 | "url-loader": "^0.5.7", 44 | "vue-hot-reload-api": "^1.2.0", 45 | "vue-html-loader": "^1.0.0", 46 | "vue-loader": "^8.3.0", 47 | "vue-style-loader": "^1.0.0", 48 | "webpack": "^1.12.2", 49 | "webpack-dev-middleware": "^1.4.0", 50 | "webpack-hot-middleware": "^2.6.0", 51 | "webpack-merge": "^0.8.3" 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /src/view/PickerView.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | -------------------------------------------------------------------------------- /src/components/Input.vue: -------------------------------------------------------------------------------- 1 | 24 | 63 | 64 | -------------------------------------------------------------------------------- /src/components/List.vue: -------------------------------------------------------------------------------- 1 | 29 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import Ad from './components/Ad.vue' 2 | import Actionsheet from './components/Actionsheet.js' 3 | import Button from './components/button.vue' 4 | import Border from './components/Border.vue' 5 | import Agreement from './components/Agreement.vue' 6 | import Alert from './components/alert.js' 7 | import Announcement from './components/Announcement.vue' 8 | import Card from './components/card.vue' 9 | import Switch from './components/Switch.vue' 10 | import Input from './components/Input.vue' 11 | import Check from './components/Check.vue' 12 | import Mask from './components/Mask.vue' 13 | import List from './components/List.vue' 14 | import Loading from './components/Loading.vue' 15 | import Search from './components/Search.vue' 16 | import Model from './components/Model.js' 17 | import Share from './components/Share.vue' 18 | import Tab from './components/Tab.vue' 19 | import Tabs from './components/Tabs.vue' 20 | import Toast from './components/Toast.js' 21 | import Illustration from './components/illustration.vue' 22 | import Picker from './components/picker.vue' 23 | import Keyboard from './components/Keyboard.vue' 24 | import Result from './components/Result.vue' 25 | 26 | 27 | const install = function(Vue) { 28 | Vue.component(Ad.name, Ad); 29 | Vue.component(Actionsheet.name, Actionsheet); 30 | Vue.component(Button.name, Button); 31 | Vue.component(Border.name, Border); 32 | Vue.component(Card.name,Card); 33 | Vue.component(Agreement.name, Agreement); 34 | Vue.component(Alert.name, Alert); 35 | Vue.component(Announcement.name, Announcement); 36 | Vue.component(Switch.name, Switch); 37 | Vue.component(Input.name, Input); 38 | Vue.component(Check.name, Check); 39 | Vue.component(Picker.name,Picker); 40 | Vue.component(Mask.name, Mask); 41 | Vue.component(List.name, List); 42 | Vue.component(Loading.name, Loading); 43 | Vue.component(Search.name, Search); 44 | Vue.component(Model.name, Model); 45 | Vue.component(Share.name, Share); 46 | Vue.component(Tab.name, Tab); 47 | Vue.component(Tabs.name,Tabs); 48 | Vue.component(Toast.name, Toast); 49 | Vue.component(Illustration.name,Illustration); 50 | Vue.component(Keyboard.name,Keyboard); 51 | Vue.component(Result.name,Result); 52 | }; 53 | 54 | // auto install 55 | if (typeof window !== 'undefined' && window.Vue) { 56 | install(window.Vue); 57 | }; 58 | 59 | module.exports = { 60 | install, 61 | Ad, 62 | Actionsheet, 63 | Button, 64 | Border, 65 | Agreement, 66 | Alert, 67 | Announcement, 68 | Card, 69 | Switch, 70 | Input, 71 | Check, 72 | Picker, 73 | Mask, 74 | List, 75 | Loading, 76 | Search, 77 | Model, 78 | Share, 79 | Tab, 80 | Tabs, 81 | Toast, 82 | Illustration, 83 | Result, 84 | Keyboard 85 | }; 86 | -------------------------------------------------------------------------------- /src/components/Model.js: -------------------------------------------------------------------------------- 1 | var defaults = { 2 | btn: '确定', 3 | message: '' 4 | }; 5 | 6 | import Vue from 'vue'; 7 | import modelvue from './model.vue'; 8 | 9 | var merge = function(target) { 10 | for (var i = 1, j = arguments.length; i < j; i++) { 11 | var source = arguments[i]; 12 | for (var prop in source) { 13 | if (source.hasOwnProperty(prop)) { 14 | var value = source[prop]; 15 | if (value !== undefined) { 16 | target[prop] = value; 17 | } 18 | } 19 | } 20 | } 21 | 22 | return target; 23 | }; 24 | 25 | var modelConstructor = Vue.extend(modelvue); 26 | 27 | var currentMsg, instance; 28 | var msgQueue = []; 29 | 30 | var initInstance = function() { 31 | instance = new modelConstructor({ 32 | el: document.createElement('div') 33 | }); 34 | 35 | instance.callback = function(action) { 36 | if (currentMsg) { 37 | var callback = currentMsg.callback; 38 | if (typeof callback === 'function') { 39 | if (instance.showInput) { 40 | callback(instance.inputValue, action); 41 | } else { 42 | callback(action); 43 | } 44 | } 45 | if (currentMsg.resolve) { 46 | var $type = currentMsg.options.$type; 47 | if ($type === 'confirm' ) { 48 | if (action === 'confirm') { 49 | if (instance.showInput) { 50 | currentMsg.resolve({ value: instance.inputValue, action }); 51 | } else { 52 | currentMsg.resolve(action); 53 | } 54 | } else if (action === 'cancel' && currentMsg.reject) { 55 | currentMsg.reject(action); 56 | } 57 | } else { 58 | currentMsg.resolve(action); 59 | } 60 | } 61 | } 62 | }; 63 | }; 64 | 65 | var showNextMsg = function() { 66 | if (!instance) { 67 | 68 | initInstance(); 69 | } 70 | 71 | if (msgQueue.length > 0) { 72 | currentMsg = msgQueue.shift(); 73 | 74 | var options = currentMsg.options; 75 | for (var prop in options) { 76 | if (options.hasOwnProperty(prop)) { 77 | instance[prop] = options[prop]; 78 | } 79 | } 80 | 81 | instance.$appendTo(document.body); 82 | 83 | Vue.nextTick(() => { 84 | instance.visible = true; 85 | }); 86 | } 87 | 88 | }; 89 | 90 | var model = function(options, callback) { 91 | 92 | 93 | msgQueue.push({ 94 | options: merge({}, defaults, model.defaults || {}, options), 95 | callback: callback 96 | }); 97 | 98 | showNextMsg(); 99 | }; 100 | 101 | model.setDefaults = function(defaults) { 102 | model.defaults = defaults; 103 | }; 104 | 105 | 106 | model.close = function() { 107 | instance.visible = false; 108 | msgQueue = []; 109 | currentMsg = null; 110 | }; 111 | 112 | export default model; 113 | export { model }; 114 | -------------------------------------------------------------------------------- /src/view/indexView.vue: -------------------------------------------------------------------------------- 1 | 42 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /src/components/Actionsheet.js: -------------------------------------------------------------------------------- 1 | var defaults = { 2 | tips:"提示", 3 | btn:"编辑", 4 | del:"删除", 5 | cancel:"取消" 6 | }; 7 | 8 | import Vue from 'vue'; 9 | import Actionsheetvue from './Actionsheet.vue'; 10 | 11 | var merge = function(target) { 12 | for (var i = 1, j = arguments.length; i < j; i++) { 13 | var source = arguments[i]; 14 | for (var prop in source) { 15 | if (source.hasOwnProperty(prop)) { 16 | var value = source[prop]; 17 | if (value !== undefined) { 18 | target[prop] = value; 19 | } 20 | } 21 | } 22 | } 23 | 24 | return target; 25 | }; 26 | 27 | var ActionsheetConstructor = Vue.extend(Actionsheetvue); 28 | 29 | var currentMsg, instance; 30 | var msgQueue = []; 31 | 32 | var initInstance = function() { 33 | instance = new ActionsheetConstructor({ 34 | el: document.createElement('div') 35 | }); 36 | 37 | instance.callback = function(action) { 38 | if (currentMsg) { 39 | var callback = currentMsg.callback; 40 | if (typeof callback === 'function') { 41 | if (instance.showInput) { 42 | callback(instance.inputValue, action); 43 | } else { 44 | callback(action); 45 | } 46 | } 47 | if (currentMsg.resolve) { 48 | var $type = currentMsg.options.$type; 49 | if ($type === 'confirm' ) { 50 | if (action === 'confirm') { 51 | if (instance.showInput) { 52 | currentMsg.resolve({ value: instance.inputValue, action }); 53 | } else { 54 | currentMsg.resolve(action); 55 | } 56 | } else if (action === 'cancel' && currentMsg.reject) { 57 | currentMsg.reject(action); 58 | } 59 | } else { 60 | currentMsg.resolve(action); 61 | } 62 | } 63 | } 64 | }; 65 | }; 66 | 67 | var showNextMsg = function() { 68 | 69 | if (!instance) { 70 | 71 | initInstance(); 72 | } 73 | 74 | if (msgQueue.length > 0) { 75 | currentMsg = msgQueue.shift(); 76 | 77 | var options = currentMsg.options; 78 | for (var prop in options) { 79 | if (options.hasOwnProperty(prop)) { 80 | instance[prop] = options[prop]; 81 | } 82 | } 83 | 84 | instance.$appendTo(document.body); 85 | 86 | Vue.nextTick(() => { 87 | instance.visible = true; 88 | }); 89 | } 90 | 91 | }; 92 | 93 | var Actionsheet = function(options, callback) { 94 | 95 | 96 | msgQueue.push({ 97 | options: merge({}, defaults, Actionsheet.defaults || {}, options), 98 | callback: callback 99 | }); 100 | 101 | showNextMsg(); 102 | }; 103 | 104 | Actionsheet.setDefaults = function(defaults) { 105 | Actionsheet.defaults = defaults; 106 | }; 107 | 108 | 109 | Actionsheet.close = function() { 110 | instance.visible = false; 111 | msgQueue = []; 112 | currentMsg = null; 113 | }; 114 | 115 | export default Actionsheet; 116 | export { Actionsheet }; 117 | -------------------------------------------------------------------------------- /src/components/Alert.js: -------------------------------------------------------------------------------- 1 | const CONFIRM_TEXT = '确定'; 2 | const CANCEL_TEXT = '取消'; 3 | 4 | var defaults = { 5 | title: '', 6 | message: '', 7 | confirmButtonText: CONFIRM_TEXT, 8 | cancelButtonText: CANCEL_TEXT, 9 | showCancelButton:true 10 | }; 11 | 12 | import Vue from 'vue'; 13 | import alertvue from './alert.vue'; 14 | 15 | var merge = function(target) { 16 | for (var i = 1, j = arguments.length; i < j; i++) { 17 | var source = arguments[i]; 18 | for (var prop in source) { 19 | if (source.hasOwnProperty(prop)) { 20 | var value = source[prop]; 21 | if (value !== undefined) { 22 | target[prop] = value; 23 | } 24 | } 25 | } 26 | } 27 | 28 | return target; 29 | }; 30 | 31 | var alertConstructor = Vue.extend(alertvue); 32 | 33 | var currentMsg, instance; 34 | var msgQueue = []; 35 | 36 | var initInstance = function() { 37 | instance = new alertConstructor({ 38 | el: document.createElement('div') 39 | }); 40 | 41 | instance.callback = function(action) { 42 | if (currentMsg) { 43 | var callback = currentMsg.callback; 44 | if (typeof callback === 'function') { 45 | if (instance.showInput) { 46 | callback(instance.inputValue, action); 47 | } else { 48 | callback(action); 49 | } 50 | } 51 | if (currentMsg.resolve) { 52 | var $type = currentMsg.options.$type; 53 | if ($type === 'confirm' ) { 54 | if (action === 'confirm') { 55 | if (instance.showInput) { 56 | currentMsg.resolve({ value: instance.inputValue, action }); 57 | } else { 58 | currentMsg.resolve(action); 59 | } 60 | } else if (action === 'cancel' && currentMsg.reject) { 61 | currentMsg.reject(action); 62 | } 63 | } else { 64 | currentMsg.resolve(action); 65 | } 66 | } 67 | } 68 | }; 69 | }; 70 | 71 | var showNextMsg = function() { 72 | if (!instance) { 73 | 74 | initInstance(); 75 | } 76 | 77 | if (msgQueue.length > 0) { 78 | currentMsg = msgQueue.shift(); 79 | 80 | var options = currentMsg.options; 81 | for (var prop in options) { 82 | if (options.hasOwnProperty(prop)) { 83 | instance[prop] = options[prop]; 84 | } 85 | } 86 | 87 | instance.$appendTo(document.body); 88 | 89 | Vue.nextTick(() => { 90 | instance.visible = true; 91 | }); 92 | } 93 | 94 | }; 95 | 96 | var alert = function(options, callback) { 97 | 98 | 99 | msgQueue.push({ 100 | options: merge({}, defaults, alert.defaults || {}, options), 101 | callback: callback 102 | }); 103 | 104 | showNextMsg(); 105 | }; 106 | 107 | alert.setDefaults = function(defaults) { 108 | alert.defaults = defaults; 109 | }; 110 | 111 | 112 | alert.close = function() { 113 | instance.visible = false; 114 | msgQueue = []; 115 | currentMsg = null; 116 | }; 117 | 118 | export default alert; 119 | export { alert }; 120 | -------------------------------------------------------------------------------- /src/view/ListView.vue: -------------------------------------------------------------------------------- 1 | 64 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-Router' 3 | import Paco from './index.js' 4 | 5 | 6 | import App from './App.vue' 7 | import Actionsheet from './view/ActionsheetView.vue' 8 | import Tab from './view/TabView.vue' 9 | import Button from './view/ButtonView.vue' 10 | import Border from './view/Border.vue' 11 | import Loading from './view/LoadingView.vue' 12 | import Card from './view/CardView.vue' 13 | import Checkbox from './view/checkboxView.vue' 14 | import Toast from './view/ToastView.vue' 15 | import Share from './view/ShareView.vue' 16 | import Alert from './view/AlertView.vue' 17 | import Ad from './view/AdView.vue' 18 | import Switch from './view/SwitchView.vue' 19 | import Model from './view/ModelView.vue' 20 | import Mask from './view/MaskView.vue' 21 | import Picker from './view/pickerView.vue' 22 | import Announcement from './view/AnnouncementView.vue' 23 | import Input from './view/InputView.vue' 24 | import Agreement from './view/AgreementView.vue' 25 | import Index from './view/indexView.vue' 26 | import Agreeme from './view/AgreemeView.vue' 27 | import Search from './view/SearchView.vue' 28 | import List from './view/ListView.vue' 29 | import Illustration from './view/illustration.vue' 30 | import Text from './view/text.vue' 31 | import Keyboard from './view/KeyboardView.vue' 32 | import Result from './view/resultView.vue' 33 | 34 | Vue.use(Paco) 35 | Vue.use(Router) 36 | Vue.config.debug = true 37 | const router = new Router() 38 | 39 | 40 | 41 | router.map({ 42 | '/':{ 43 | name:'index', 44 | component:Index, 45 | title:'首页' 46 | }, 47 | '/actionsheet':{ 48 | name:'actionsheet', 49 | component:Actionsheet, 50 | title:'actionsheet' 51 | }, 52 | '/agreeme':{ 53 | name:'agreeme', 54 | component:Agreeme, 55 | title:'agreeme' 56 | }, 57 | '/tab':{ 58 | name:'tab', 59 | component:Tab, 60 | title:'tab' 61 | }, 62 | '/button':{ 63 | name:'button', 64 | component:Button, 65 | title:'button' 66 | }, 67 | '/border':{ 68 | name:'border', 69 | component:Border, 70 | title:'border' 71 | }, 72 | '/keyboard':{ 73 | name:'keyboard', 74 | component:Keyboard, 75 | title:'border' 76 | }, 77 | '/result':{ 78 | name:'result', 79 | component:Result, 80 | title:'title' 81 | }, 82 | '/loading':{ 83 | name:'loading', 84 | component:Loading, 85 | title:'loading' 86 | }, 87 | '/card':{ 88 | name:'card', 89 | component:Card, 90 | title:'card' 91 | }, 92 | '/picker':{ 93 | name:'picker', 94 | component:Picker, 95 | title:'picker' 96 | }, 97 | '/toast':{ 98 | name:'toast', 99 | component:Toast, 100 | title:'toast' 101 | }, 102 | '/checkbox':{ 103 | name:'checkbox', 104 | component:Checkbox, 105 | title:'checkbox' 106 | }, 107 | '/share':{ 108 | name:'share', 109 | component:Share, 110 | title:'share' 111 | }, 112 | '/alert':{ 113 | name:'alert', 114 | component:Alert, 115 | title:'alert' 116 | }, 117 | '/ad':{ 118 | name:'ad', 119 | component:Ad, 120 | title:'ad' 121 | }, 122 | '/switch':{ 123 | name:'switch', 124 | component:Switch, 125 | title:'switch' 126 | }, 127 | '/model':{ 128 | name:'model', 129 | component:Model, 130 | title:'model' 131 | }, 132 | '/mask':{ 133 | name:'Mask', 134 | component:Mask, 135 | title:'Mask' 136 | }, 137 | '/announcement':{ 138 | name:'announcement', 139 | component:Announcement, 140 | title:'announcement' 141 | }, 142 | '/input':{ 143 | name:'input', 144 | component:Input, 145 | title:'input' 146 | }, 147 | '/agreement':{ 148 | name:'agreement', 149 | component:Agreement, 150 | title:'agreement' 151 | }, 152 | '/search':{ 153 | name:'search', 154 | component:Search, 155 | title:'Seach' 156 | }, 157 | '/list':{ 158 | name:'list', 159 | component:List, 160 | title:'list' 161 | }, 162 | '/text':{ 163 | name:'text', 164 | component:Text, 165 | title:'text' 166 | }, 167 | '/illustration':{ 168 | name:'illustration', 169 | component:Illustration, 170 | title:'illustration' 171 | } 172 | 173 | 174 | }) 175 | 176 | router.redirect({ 177 | '*':'/' 178 | }) 179 | router.start(App,'#app') 180 | -------------------------------------------------------------------------------- /test/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var _defineProperty2 = require('babel-runtime/helpers/defineProperty'); 4 | 5 | var _defineProperty3 = _interopRequireDefault(_defineProperty2); 6 | 7 | var _module$exports; 8 | 9 | var _Ad = require('./components/Ad.vue'); 10 | 11 | var _Ad2 = _interopRequireDefault(_Ad); 12 | 13 | var _button = require('./components/button.vue'); 14 | 15 | var _button2 = _interopRequireDefault(_button); 16 | 17 | var _Agreement = require('./components/Agreement.vue'); 18 | 19 | var _Agreement2 = _interopRequireDefault(_Agreement); 20 | 21 | var _alert = require('./components/alert.vue'); 22 | 23 | var _alert2 = _interopRequireDefault(_alert); 24 | 25 | var _Announcement = require('./components/Announcement.vue'); 26 | 27 | var _Announcement2 = _interopRequireDefault(_Announcement); 28 | 29 | var _Switch = require('./components/Switch.vue'); 30 | 31 | var _Switch2 = _interopRequireDefault(_Switch); 32 | 33 | var _Input = require('./components/Input.vue'); 34 | 35 | var _Input2 = _interopRequireDefault(_Input); 36 | 37 | var _Check = require('./components/Check.vue'); 38 | 39 | var _Check2 = _interopRequireDefault(_Check); 40 | 41 | var _Mask = require('./components/Mask.vue'); 42 | 43 | var _Mask2 = _interopRequireDefault(_Mask); 44 | 45 | var _Line = require('./components/Line.vue'); 46 | 47 | var _Line2 = _interopRequireDefault(_Line); 48 | 49 | var _List = require('./components/List.vue'); 50 | 51 | var _List2 = _interopRequireDefault(_List); 52 | 53 | var _Loading = require('./components/Loading.vue'); 54 | 55 | var _Loading2 = _interopRequireDefault(_Loading); 56 | 57 | var _Search = require('./components/Search.vue'); 58 | 59 | var _Search2 = _interopRequireDefault(_Search); 60 | 61 | var _Model = require('./components/Model.vue'); 62 | 63 | var _Model2 = _interopRequireDefault(_Model); 64 | 65 | var _Share = require('./components/Share.vue'); 66 | 67 | var _Share2 = _interopRequireDefault(_Share); 68 | 69 | var _Tab = require('./components/Tab.vue'); 70 | 71 | var _Tab2 = _interopRequireDefault(_Tab); 72 | 73 | var _Toast = require('./components/Toast.js'); 74 | 75 | var _Toast2 = _interopRequireDefault(_Toast); 76 | 77 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 78 | 79 | var install = function install(Vue) { 80 | Vue.component(_Ad2.default.name, _Ad2.default); 81 | Vue.component(_button2.default.name, _button2.default); 82 | Vue.component(_Agreement2.default.name, _Agreement2.default); 83 | Vue.component(_alert2.default.name, _alert2.default); 84 | Vue.component(_Announcement2.default.name, _Announcement2.default); 85 | Vue.component(_Switch2.default.name, _Switch2.default); 86 | Vue.component(_Input2.default.name, _Input2.default); 87 | Vue.component(_Check2.default.name, _Check2.default); 88 | Vue.component(_Mask2.default.name, _Mask2.default); 89 | Vue.component(_Line2.default.name, _Line2.default); 90 | Vue.component(_List2.default.name, _List2.default); 91 | Vue.component(_Loading2.default.name, _Loading2.default); 92 | Vue.component(_Search2.default.name, _Search2.default); 93 | Vue.component(_Model2.default.name, _Model2.default); 94 | Vue.component(_Share2.default.name, _Share2.default); 95 | Vue.component(_Tab2.default.name, _Tab2.default); 96 | Vue.component(_Toast2.default.name, _Toast2.default); 97 | }; 98 | 99 | // auto install 100 | if (typeof window !== 'undefined' && window.Vue) { 101 | install(window.Vue); 102 | }; 103 | 104 | module.exports = (_module$exports = { 105 | install: install, 106 | Ad: _Ad2.default, 107 | Button: _button2.default, 108 | Agreement: _Agreement2.default, 109 | Alert: _alert2.default, 110 | Announcement: _Announcement2.default, 111 | Switch: _Switch2.default, 112 | Input: _Input2.default, 113 | Check: _Check2.default, 114 | Mask: _Mask2.default, 115 | Line: _Line2.default, 116 | List: _List2.default, 117 | Loading: _Loading2.default, 118 | Search: _Search2.default, 119 | Model: _Model2.default 120 | }, (0, _defineProperty3.default)(_module$exports, 'Switch', _Switch2.default), (0, _defineProperty3.default)(_module$exports, 'Share', _Share2.default), (0, _defineProperty3.default)(_module$exports, 'Tab', _Tab2.default), (0, _defineProperty3.default)(_module$exports, 'Toast', _Toast2.default), _module$exports); -------------------------------------------------------------------------------- /test/src/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var _defineProperty2 = require('babel-runtime/helpers/defineProperty'); 4 | 5 | var _defineProperty3 = _interopRequireDefault(_defineProperty2); 6 | 7 | var _module$exports; 8 | 9 | var _Ad = require('./components/Ad.vue'); 10 | 11 | var _Ad2 = _interopRequireDefault(_Ad); 12 | 13 | var _button = require('./components/button.vue'); 14 | 15 | var _button2 = _interopRequireDefault(_button); 16 | 17 | var _Agreement = require('./components/Agreement.vue'); 18 | 19 | var _Agreement2 = _interopRequireDefault(_Agreement); 20 | 21 | var _alert = require('./components/alert.vue'); 22 | 23 | var _alert2 = _interopRequireDefault(_alert); 24 | 25 | var _Announcement = require('./components/Announcement.vue'); 26 | 27 | var _Announcement2 = _interopRequireDefault(_Announcement); 28 | 29 | var _Switch = require('./components/Switch.vue'); 30 | 31 | var _Switch2 = _interopRequireDefault(_Switch); 32 | 33 | var _Input = require('./components/Input.vue'); 34 | 35 | var _Input2 = _interopRequireDefault(_Input); 36 | 37 | var _Check = require('./components/Check.vue'); 38 | 39 | var _Check2 = _interopRequireDefault(_Check); 40 | 41 | var _Mask = require('./components/Mask.vue'); 42 | 43 | var _Mask2 = _interopRequireDefault(_Mask); 44 | 45 | var _Line = require('./components/Line.vue'); 46 | 47 | var _Line2 = _interopRequireDefault(_Line); 48 | 49 | var _List = require('./components/List.vue'); 50 | 51 | var _List2 = _interopRequireDefault(_List); 52 | 53 | var _Loading = require('./components/Loading.vue'); 54 | 55 | var _Loading2 = _interopRequireDefault(_Loading); 56 | 57 | var _Search = require('./components/Search.vue'); 58 | 59 | var _Search2 = _interopRequireDefault(_Search); 60 | 61 | var _Model = require('./components/Model.vue'); 62 | 63 | var _Model2 = _interopRequireDefault(_Model); 64 | 65 | var _Share = require('./components/Share.vue'); 66 | 67 | var _Share2 = _interopRequireDefault(_Share); 68 | 69 | var _Tab = require('./components/Tab.vue'); 70 | 71 | var _Tab2 = _interopRequireDefault(_Tab); 72 | 73 | var _Toast = require('./components/Toast.js'); 74 | 75 | var _Toast2 = _interopRequireDefault(_Toast); 76 | 77 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 78 | 79 | var install = function install(Vue) { 80 | Vue.component(_Ad2.default.name, _Ad2.default); 81 | Vue.component(_button2.default.name, _button2.default); 82 | Vue.component(_Agreement2.default.name, _Agreement2.default); 83 | Vue.component(_alert2.default.name, _alert2.default); 84 | Vue.component(_Announcement2.default.name, _Announcement2.default); 85 | Vue.component(_Switch2.default.name, _Switch2.default); 86 | Vue.component(_Input2.default.name, _Input2.default); 87 | Vue.component(_Check2.default.name, _Check2.default); 88 | Vue.component(_Mask2.default.name, _Mask2.default); 89 | Vue.component(_Line2.default.name, _Line2.default); 90 | Vue.component(_List2.default.name, _List2.default); 91 | Vue.component(_Loading2.default.name, _Loading2.default); 92 | Vue.component(_Search2.default.name, _Search2.default); 93 | Vue.component(_Model2.default.name, _Model2.default); 94 | Vue.component(_Share2.default.name, _Share2.default); 95 | Vue.component(_Tab2.default.name, _Tab2.default); 96 | Vue.component(_Toast2.default.name, _Toast2.default); 97 | }; 98 | 99 | // auto install 100 | if (typeof window !== 'undefined' && window.Vue) { 101 | install(window.Vue); 102 | }; 103 | 104 | module.exports = (_module$exports = { 105 | install: install, 106 | Ad: _Ad2.default, 107 | Button: _button2.default, 108 | Agreement: _Agreement2.default, 109 | Alert: _alert2.default, 110 | Announcement: _Announcement2.default, 111 | Switch: _Switch2.default, 112 | Input: _Input2.default, 113 | Check: _Check2.default, 114 | Mask: _Mask2.default, 115 | Line: _Line2.default, 116 | List: _List2.default, 117 | Loading: _Loading2.default, 118 | Search: _Search2.default, 119 | Model: _Model2.default 120 | }, (0, _defineProperty3.default)(_module$exports, 'Switch', _Switch2.default), (0, _defineProperty3.default)(_module$exports, 'Share', _Share2.default), (0, _defineProperty3.default)(_module$exports, 'Tab', _Tab2.default), (0, _defineProperty3.default)(_module$exports, 'Toast', _Toast2.default), _module$exports); -------------------------------------------------------------------------------- /src/components/Keyboard.vue: -------------------------------------------------------------------------------- 1 | 34 | -------------------------------------------------------------------------------- /test/main.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var _vue = require('vue'); 4 | 5 | var _vue2 = _interopRequireDefault(_vue); 6 | 7 | var _vueRouter = require('vue-Router'); 8 | 9 | var _vueRouter2 = _interopRequireDefault(_vueRouter); 10 | 11 | var _vueTouch = require('vue-touch'); 12 | 13 | var _vueTouch2 = _interopRequireDefault(_vueTouch); 14 | 15 | var _index = require('../lib/index.js'); 16 | 17 | var _index2 = _interopRequireDefault(_index); 18 | 19 | var _App = require('./App.vue'); 20 | 21 | var _App2 = _interopRequireDefault(_App); 22 | 23 | var _TabView = require('./view/TabView.vue'); 24 | 25 | var _TabView2 = _interopRequireDefault(_TabView); 26 | 27 | var _ButtonView = require('./view/ButtonView.vue'); 28 | 29 | var _ButtonView2 = _interopRequireDefault(_ButtonView); 30 | 31 | var _LoadingView = require('./view/LoadingView.vue'); 32 | 33 | var _LoadingView2 = _interopRequireDefault(_LoadingView); 34 | 35 | var _ToastView = require('./view/ToastView.vue'); 36 | 37 | var _ToastView2 = _interopRequireDefault(_ToastView); 38 | 39 | var _ShareView = require('./view/ShareView.vue'); 40 | 41 | var _ShareView2 = _interopRequireDefault(_ShareView); 42 | 43 | var _LineView = require('./view/LineView.vue'); 44 | 45 | var _LineView2 = _interopRequireDefault(_LineView); 46 | 47 | var _AlertView = require('./view/AlertView.vue'); 48 | 49 | var _AlertView2 = _interopRequireDefault(_AlertView); 50 | 51 | var _AdView = require('./view/AdView.vue'); 52 | 53 | var _AdView2 = _interopRequireDefault(_AdView); 54 | 55 | var _SwitchView = require('./view/SwitchView.vue'); 56 | 57 | var _SwitchView2 = _interopRequireDefault(_SwitchView); 58 | 59 | var _ModelView = require('./view/ModelView.vue'); 60 | 61 | var _ModelView2 = _interopRequireDefault(_ModelView); 62 | 63 | var _MaskView = require('./view/MaskView.vue'); 64 | 65 | var _MaskView2 = _interopRequireDefault(_MaskView); 66 | 67 | var _AnnouncementView = require('./view/AnnouncementView.vue'); 68 | 69 | var _AnnouncementView2 = _interopRequireDefault(_AnnouncementView); 70 | 71 | var _InputView = require('./view/InputView.vue'); 72 | 73 | var _InputView2 = _interopRequireDefault(_InputView); 74 | 75 | var _AgreementView = require('./view/AgreementView.vue'); 76 | 77 | var _AgreementView2 = _interopRequireDefault(_AgreementView); 78 | 79 | var _indexView = require('./view/indexView.vue'); 80 | 81 | var _indexView2 = _interopRequireDefault(_indexView); 82 | 83 | var _SearchView = require('./view/SearchView.vue'); 84 | 85 | var _SearchView2 = _interopRequireDefault(_SearchView); 86 | 87 | var _ListView = require('./view/ListView.vue'); 88 | 89 | var _ListView2 = _interopRequireDefault(_ListView); 90 | 91 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 92 | 93 | console.warn(_index2.default); 94 | _vue2.default.use(_index2.default); 95 | _vue2.default.use(_vueRouter2.default); 96 | _vue2.default.config.debug = true; 97 | var router = new _vueRouter2.default(); 98 | _vue2.default.use(_vueTouch2.default); 99 | 100 | router.map({ 101 | '/': { 102 | name: 'index', 103 | component: _indexView2.default, 104 | title: '首页' 105 | }, 106 | '/tab': { 107 | name: 'tab', 108 | component: _TabView2.default, 109 | title: 'tab' 110 | }, 111 | '/button': { 112 | name: 'button', 113 | component: _ButtonView2.default, 114 | title: 'button' 115 | }, 116 | '/loading': { 117 | name: 'loading', 118 | component: _LoadingView2.default, 119 | title: 'loading' 120 | }, 121 | '/toast': { 122 | name: 'toast', 123 | component: _ToastView2.default, 124 | title: 'toast' 125 | }, 126 | '/share': { 127 | name: 'share', 128 | component: _ShareView2.default, 129 | title: 'share' 130 | }, 131 | '/line': { 132 | name: 'line', 133 | component: _LineView2.default, 134 | title: 'line' 135 | }, 136 | '/alert': { 137 | name: 'alert', 138 | component: _AlertView2.default, 139 | title: 'alert' 140 | }, 141 | '/ad': { 142 | name: 'ad', 143 | component: _AdView2.default, 144 | title: 'ad' 145 | }, 146 | '/switch': { 147 | name: 'switch', 148 | component: _SwitchView2.default, 149 | title: 'switch' 150 | }, 151 | '/model': { 152 | name: 'model', 153 | component: _ModelView2.default, 154 | title: 'model' 155 | }, 156 | '/Mask': { 157 | name: 'Mask', 158 | component: _MaskView2.default, 159 | title: 'Mask' 160 | }, 161 | '/announcement': { 162 | name: 'announcement', 163 | component: _AnnouncementView2.default, 164 | title: 'announcement' 165 | }, 166 | '/input': { 167 | name: 'input', 168 | component: _InputView2.default, 169 | title: 'input' 170 | }, 171 | '/agreement': { 172 | name: 'agreement', 173 | component: _AgreementView2.default, 174 | title: 'agreement' 175 | }, 176 | '/search': { 177 | name: 'search', 178 | component: _SearchView2.default, 179 | title: 'Seach' 180 | }, 181 | '/list': { 182 | name: 'list', 183 | component: _ListView2.default, 184 | title: 'list' 185 | } 186 | 187 | }); 188 | 189 | router.redirect({ 190 | '*': '/' 191 | }); 192 | router.start(_App2.default, '#app'); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # paco-ui-vue 2 | 3 | Vue Components for PACO-UI 4 | 5 | 6 | ## 使用说明 7 | 8 | - 引入CSS 9 | ```html 10 | 11 | ``` 12 | - 引入fastclick 13 | ```html 14 | 15 | ``` 16 | - 引入`paco-ui-vue`库 17 | 18 | ```bash 19 | npm i --save paco-ui-vue@VERSION 20 | ``` 21 | 22 | > 注：`VERSION`为要使用版本 23 | 24 | 25 | Import all components. 26 | 27 | ```javascript 28 | import Vue from 'vue' 29 | import Paco from 'paco-ui-vue'; 30 | 31 | Vue.use(paco) 32 | 33 | ``` 34 | ## 组件说明 35 | 36 | - Ad 37 | ```html 38 | 开车能赚钱，买车全网最低开车能赚钱，买车全网最低 39 | 40 | src 小图标图片地址 41 | show 是否显示图标 42 | baksrc 背景图片地址 43 | link 连接地址 44 | ``` 45 | 46 | 47 | - Announcement 48 | ```html 49 | 您的爱车暂无违章记录，请继续保持 50 | ``` 51 | 52 | - Button 53 | ```html 54 | 主按钮 55 | 次按钮 56 | 不可点击按钮 57 | 按钮 58 | 三字钮 59 | 四字按钮 60 | 五个字按钮 61 | 警示按钮 62 | 底部按钮 63 | 警示按钮不可点 64 | ``` 65 | - Illustration 66 | ```html 67 |

说明文本说明文本说明文本

说明文本

 68 | src 图片地址 69 | show 是否显示按钮 70 | text 按钮文字 71 | 72 | ``` 73 | 74 | - Input 75 | ```html 76 | 77 | 提示标签 78 | 五个字标签 79 | 提示标签 80 | 提示标签 81 | 校验码 82 | ``` 83 | 84 | - Search 85 | ```html 86 | 87 | ``` 88 | 89 | - CheckBox 90 | ```html 91 | 同意 92 | ``` 93 | 94 | - Mask 95 | ```html 96 | 97 | ``` 98 | 99 | - Line 100 | ```html 101 | 102 | 103 | 104 | 105 | ``` 106 | 107 | - Loading 108 | ```html 109 | 110 | ``` 111 | 112 | 113 | - Share 114 | ```html 115 | 116 | ``` 117 | 118 | - Switch 119 | ```html 120 | 121 | ``` 122 | 123 | - Tab 124 | ```html 125 | 126 | 127 | hello word 128 | 129 | 130 | hello andrond 131 | 132 | 133 | 134 | hello ios 135 | 136 | 137 | ``` 138 | 139 | - Toast 140 | ```html 141 | success 142 | fail 143 | opps 144 | ``` 145 | ```javascript 146 | openToast(){ 147 | Toast("成功提醒"); 148 | }, 149 | openToastfail(){ 150 | Toast({ 151 | message:"失败提醒", 152 | duration:1000, 153 | type:"fail" 154 | }); 155 | }, 156 | openToastopps(){ 157 | Toast({ 158 | message:"网络无法连接", 159 | duration:5000, 160 | type:"opps" 161 | }); 162 | } 163 | ``` 164 | 165 | - Agreeme 166 | ```html 167 | 同意《平安好车主服务协议》 168 | ``` 169 | 170 | - Agreement 171 | 172 | ```html 173 | 内容 174 | ``` 175 | 176 | - Card 177 | 178 | ```html 179 | 180 | 标题 181 | 2016-08-08 182 | 内容内容内容内容内容内容内容内容内容内容内容内容内容内容 183 | 184 | ``` 185 | 186 | - alert 187 | 188 | ```javascript 189 | Alert({ 190 | title:"温馨提示", 191 | message:"你确定这么做" 192 | },function (action) { 193 | console.log(action); 194 | } 195 | 196 | title 标题 197 | message 内容 198 | showCancelButton 是否显示取消按钮 199 | ``` 200 | 201 | - Model 202 | 203 | ```javascript 204 | Model({ 205 | message:"
说明方案
终极辅助说明方案
", 206 | btn:"主按钮" 207 | },function(action){ 208 | console.log(action); 209 | }) 210 | ``` 211 | 212 | - actionsheet 213 | 214 | ```javascript 215 | Actionsheet({ 216 | 217 | },function(action){ 218 | console.log(action); 219 | }) 220 | ``` 221 | 222 | - Result 223 | 224 | ```javascript 225 | 226 | 227 | description 描述 228 | title 支付名称 229 | btn 按钮名字 230 | type 状态 success 成功 failure 失败 warning 警告 waiting 等待 tips 提示 231 | v-on:handleActions=“fun” 按钮回调 232 | 233 | ``` 234 | 235 | 236 | 237 | -------------------------------------------------------------------------------- /src/components/picker.vue: -------------------------------------------------------------------------------- 1 | 34 | 35 | --------------------------------------------------------------------------------