├── .babelrc ├── src ├── components │ ├── loading │ │ ├── index.js │ │ ├── image │ │ │ ├── jump_arms.png │ │ │ ├── jump_body.png │ │ │ ├── up_body.png │ │ │ ├── up_light.png │ │ │ ├── jump_eyes1.png │ │ │ └── jump_eyes2.png │ │ └── src │ │ │ ├── index.js │ │ │ └── loading.vue │ ├── message │ │ ├── index.js │ │ └── src │ │ │ ├── index.js │ │ │ └── message.vue │ └── loadMore │ │ ├── index.js │ │ └── src │ │ └── loadMore.vue └── index.js ├── .editorconfig ├── .gitignore ├── LICENSE ├── package.json └── README.md /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["env"] 3 | } 4 | -------------------------------------------------------------------------------- /src/components/loading/index.js: -------------------------------------------------------------------------------- 1 | import Loading from './src' 2 | export default Loading 3 | -------------------------------------------------------------------------------- /src/components/message/index.js: -------------------------------------------------------------------------------- 1 | import Message from './src' 2 | export default Message 3 | -------------------------------------------------------------------------------- /src/components/loadMore/index.js: -------------------------------------------------------------------------------- 1 | import loadMore from './src/loadMore.vue' 2 | export default loadMore 3 | -------------------------------------------------------------------------------- /src/components/loading/image/jump_arms.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EwellFE/evell/HEAD/src/components/loading/image/jump_arms.png -------------------------------------------------------------------------------- /src/components/loading/image/jump_body.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EwellFE/evell/HEAD/src/components/loading/image/jump_body.png -------------------------------------------------------------------------------- /src/components/loading/image/up_body.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EwellFE/evell/HEAD/src/components/loading/image/up_body.png -------------------------------------------------------------------------------- /src/components/loading/image/up_light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EwellFE/evell/HEAD/src/components/loading/image/up_light.png -------------------------------------------------------------------------------- /src/components/loading/image/jump_eyes1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EwellFE/evell/HEAD/src/components/loading/image/jump_eyes1.png -------------------------------------------------------------------------------- /src/components/loading/image/jump_eyes2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EwellFE/evell/HEAD/src/components/loading/image/jump_eyes2.png -------------------------------------------------------------------------------- /.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 | dist/ 4 | log/ 5 | npm-debug.log* 6 | yarn-debug.log* 7 | yarn-error.log* 8 | 9 | # Editor directories and files 10 | .vscode 11 | .idea 12 | *.suo 13 | *.ntvs* 14 | *.njsproj 15 | *.sln 16 | -------------------------------------------------------------------------------- /src/components/message/src/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import MessageVue from './message.vue' 3 | let MessageConstrutor = Vue.extend(MessageVue) 4 | 5 | let instance 6 | 7 | const Message = function (options) { 8 | options = options || {} 9 | if (typeof options === 'string') { 10 | options = { 11 | message: options 12 | } 13 | } 14 | instance = new MessageConstrutor({ 15 | data: options 16 | }) 17 | instance.vm = instance.$mount() 18 | document.body.appendChild(instance.vm.$el) 19 | return instance.vm 20 | } 21 | 22 | export default Message 23 | -------------------------------------------------------------------------------- /src/components/loading/src/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import LoadingVue from './loading.vue' 3 | let LoadingConstrutor = Vue.extend(LoadingVue) 4 | // 唯一实例 5 | let instance 6 | 7 | const Loading = function (options) { 8 | if (instance) { 9 | return instance.vm 10 | } 11 | options = options || {} 12 | options.visible = true 13 | instance = new LoadingConstrutor({ 14 | data: options 15 | }) 16 | instance.vm = instance.$mount() 17 | document.body.appendChild(instance.vm.$el) 18 | return instance.vm 19 | } 20 | 21 | Loading.close = function(userOnClose) { 22 | if (!instance) return 23 | instance.vm.visible = false 24 | instance = null 25 | } 26 | 27 | export default Loading 28 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import Message from './components/message' 2 | import Loading from './components/loading' 3 | import LoadMore from './components/loadMore' 4 | const packageDetail = require('../package.json') 5 | 6 | const components = [ 7 | Message, 8 | Loading, 9 | LoadMore 10 | ] 11 | 12 | const install = function(Vue, options) { 13 | components.map(component => { 14 | Vue.component(component.name, component) 15 | }) 16 | Vue.prototype.$loading = Loading; 17 | Vue.prototype.$message = Message; 18 | } 19 | 20 | if (typeof window !== 'undefined' && window.Vue) { 21 | install(window.Vue); 22 | } 23 | 24 | let EwellVue = { 25 | version: `${packageDetail.version}`, 26 | install, 27 | Message, 28 | Loading, 29 | LoadMore 30 | } 31 | 32 | export default EwellVue 33 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | 2 | The MIT License (MIT) 3 | 4 | Copyright (c) 2018, Jiajun (Johnsen) Zhou 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in 14 | all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 22 | THE SOFTWARE. 23 | -------------------------------------------------------------------------------- /src/components/message/src/message.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 48 | 49 | 66 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "evell", 3 | "version": "1.1.1", 4 | "description": "ewell-vue-component(Bate)", 5 | "main": "dist/evell.js", 6 | "scripts": { 7 | "build:components": "cross-env NODE_ENV=production webpack --config build/webpack.components.conf.js", 8 | "build:prod": "cross-env NODE_ENV=production webpack --config build/webpack.prod.conf.js", 9 | "build": "node build/build.js", 10 | "test": "echo \"Error: no test specified\" && exit 1" 11 | }, 12 | "keywords": [ 13 | "ewell", 14 | "vue", 15 | "component" 16 | ], 17 | "author": "Johnsen ", 18 | "repository": { 19 | "type": "git", 20 | "url": "https://github.com/EwellFE/Evell" 21 | }, 22 | "license": "MIT", 23 | "dependencies": { 24 | "vue": "^2.5.13" 25 | }, 26 | "peerDevDependencies": { 27 | "vue": "^2.5.13" 28 | }, 29 | "devDependencies": { 30 | "babel-core": "^6.26.0", 31 | "babel-loader": "^7.1.2", 32 | "babel-preset-env": "^1.6.1", 33 | "chalk": "^2.3.2", 34 | "compression-webpack-plugin": "^1.1.3", 35 | "cross-env": "^5.1.3", 36 | "css-loader": "^0.28.9", 37 | "html-loader": "^0.5.5", 38 | "ora": "^2.0.0", 39 | "style-loader": "^0.20.1", 40 | "url-loader": "^0.6.2", 41 | "vue-loader": "^13.7.0", 42 | "vue-style-loader": "^3.1.1", 43 | "vue-template-compiler": "^2.5.13", 44 | "webpack": "^3.10.0", 45 | "webpack-dev-server": "^2.11.1", 46 | "webpack-merge": "^4.1.1" 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Evell · ![npm](https://img.shields.io/badge/npm-v1.0.9-brightgreen.svg) ![Packagist](https://img.shields.io/packagist/l/doctrine/orm.svg) 2 | > 医惠移动端组件库，基于Vue2.0开发 3 | 4 | 5 | ## 安装 6 | 使用npm 7 | 8 | ``` 9 | $ npm install evell --save 10 | ``` 11 | 或使用 ` 16 | ``` 17 | 18 | ## 引入 Evell 19 | 一般在 webpack 入口页面 `main.js` 中如下配置： 20 | 21 | ``` 22 | import Vue from 'vue' 23 | import Evell from 'evell' 24 | 25 | Vue.use(Evell) 26 | ``` 27 | 28 | ## 按需引用 29 | 30 | ``` 31 | import Message from 'evell/dist/message' 32 | import Loading from 'evell/dist/loading' 33 | 34 | import LoadMore from 'evell/dist/loadMore' 35 | 36 | Vue.component(LoadMore.name, LoadMore) 37 | ``` 38 | 39 | ## 组件使用说明 40 | 41 | ### Message 42 | 通过直接调用以下方法来使用组件： 43 | 44 | `this.$message('message')` 45 | 46 | 按需引用使用方式： 47 | 48 | ``` 49 | import Message from 'evell/dist/message' 50 | Message('message') 51 | ``` 52 | 53 | ### Loading 54 | 55 | 通过直接调用以下方法来使用组件： 56 | 57 | - 开启loading：`this.$loading()` 58 | - 关闭loading：`this.$loading.close()` 59 | 60 | 按需引用使用方式： 61 | 62 | ``` 63 | import Loading from 'evell/dist/loading' 64 | Loading() // 开启loading 65 | Loading.close() // 关闭loading 66 | ``` 67 | 68 | ### LoadMore(上拉加载) 69 | 70 | 例子： 71 | 72 | ``` 73 | 74 | 77 | 78 | ``` 79 | 按住列表，上拉一定距离后释放，被指定为 `bottom-fetch-method` 的方法就会执行。当数据获取完毕时将绑定到 `bottomLoadAll` 属性的变量赋值为 `true` 解绑 `loadmore` 事件。 80 | 81 | ``` 82 | handleLoadMore() { 83 | ... //加载更多 84 | this.$refs.loadmore.onBottomLoaded() 85 | } 86 | ``` 87 | 注意在这个方法的最后需要手动调用 `loadmore` 的 `onBottomLoaded` 事件。这是因为在加载数据后需要对组件进行一些重新定位的操作。 88 | 89 | **API** ： 90 | 91 | 92 | | 参数 | 说明 | 类型 | 默认值 | 93 | | ------------- | ------------- | -------- | ------ | 94 | | distanceIndex | 手指移动与组件移动距离的比值 | Number| 2 | 95 | | bottomPullText | 上拉时加载提示区域的文字 | String | 上拉刷新 | 96 | | bottomDropText | 释放时加载提示区域的文字 | String | 释放更新 | 97 | | bottomLoadingText | loading时加载提示区域的文字 | String | 加载中... | 98 | | bottomDistance | 触发 `bottomFetchMethod` 的上拉距离像素值 | Number | 70 | 99 | | bottomLoadAll | 若为真，则 `bottomFetchMethod` 不会被再次触发，事件解绑 | Boolean | false | 100 | | bottomFetchMethod | 上拉刷新执行的方法 | Function | | 101 | 102 | 103 | ## 后续 104 | 105 | 组件陆续更新中。。。👨‍💻👩‍💻 106 | 107 | ## License 108 | 109 | [MIT](https://opensource.org/licenses/MIT) 110 | 111 | 112 | 113 | 114 | -------------------------------------------------------------------------------- /src/components/loading/src/loading.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 34 | 35 | -------------------------------------------------------------------------------- /src/components/loadMore/src/loadMore.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 170 | 171 | 210 | --------------------------------------------------------------------------------