3 |
8 |
9 |
10 |
11 |
12 |
35 |
--------------------------------------------------------------------------------
/FAQ.md:
--------------------------------------------------------------------------------
1 | ## FAQ
2 |
3 | ### 给组件绑定的事件为什么无法触发？
4 |
5 | 在 Vue 2.0 中，为自定义组件绑定原生事件必须使用 `.native` 修饰符：
6 | ```html
7 | Cell Swipe
4 |
9 |
10 |
11 |
12 |
21 |
22 |
38 |
--------------------------------------------------------------------------------
/example/pages/search.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 |
6 |
7 |
42 |
43 |
48 |
--------------------------------------------------------------------------------
/packages/spinner/cooking.conf.js:
--------------------------------------------------------------------------------
1 | var cooking = require('cooking');
2 | var Components = require('./components.json');
3 | var path = require('path');
4 | var config = require('../../build/config');
5 | var WebpackShellPlugin = require('webpack-shell-plugin');
6 |
7 | var entrys = {};
8 | Object.keys(Components).forEach(function(key) {
9 | entrys[key] = [path.join(__dirname, Components[key])];
10 | });
11 |
12 | cooking.set({
13 | entry: entrys,
14 | dist: path.join(__dirname, 'lib'),
15 | template: false,
16 | format: 'umd',
17 | moduleName: 'MintSpinner',
18 | extractCSS: '[name]/style.css',
19 | extends: config.extends,
20 | alias: config.alias,
21 | externals: config.externals
22 | });
23 |
24 | cooking.add('output.filename', '[name]/index.js');
25 | cooking.add('plugin.WebpackShell', new WebpackShellPlugin({
26 | onBuildExit: [`mv ${__dirname}/lib/index/* ${__dirname}/lib/ && rm -rf ${__dirname}/lib/index`]
27 | }));
28 | module.exports = cooking.resolve();
29 |
--------------------------------------------------------------------------------
/packages/tab-container-item/src/tab-container-item.vue:
--------------------------------------------------------------------------------
1 |
2 |
5 |
7 |
8 |
9 |
30 |
31 |
39 |
--------------------------------------------------------------------------------
/example/app.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
8 |
9 |
10 |
35 |
36 |
47 |
--------------------------------------------------------------------------------
/example/pages/spinner.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 |
8 |
9 |
10 |
12 |
13 |
14 |
16 |
17 |
18 |
20 |
21 |
22 |
23 |
34 |
35 |
--------------------------------------------------------------------------------
/example/pages/cell.vue:
--------------------------------------------------------------------------------
1 |
2 | Spinner
4 |
5 |
3 |
8 | icon 是图片
9 | 
10 |
11 |
13 | 这里是元素
14 |
15 |
16 | 按钮
17 |
18 |
19 |
24 |
25 |
--------------------------------------------------------------------------------
/src/mixins/emitter.js:
--------------------------------------------------------------------------------
1 | function broadcast(componentName, eventName, params) {
2 | this.$children.forEach(child => {
3 | var name = child.$options.componentName;
4 |
5 | if (name === componentName) {
6 | child.$emit.apply(child, [eventName].concat(params));
7 | } else {
8 | broadcast.apply(child, [componentName, eventName].concat(params));
9 | }
10 | });
11 | }
12 | export default {
13 | methods: {
14 | dispatch(componentName, eventName, params) {
15 | var parent = this.$parent;
16 | var name = parent.$options.componentName;
17 |
18 | while (parent && (!name || name !== componentName)) {
19 | parent = parent.$parent;
20 |
21 | if (parent) {
22 | name = parent.$options.componentName;
23 | }
24 | }
25 | if (parent) {
26 | parent.$emit.apply(parent, [eventName].concat(params));
27 | }
28 | },
29 | broadcast(componentName, eventName, params) {
30 | broadcast.call(this, componentName, eventName, params);
31 | }
32 | }
33 | };
34 |
--------------------------------------------------------------------------------
/example/entry.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import App from './app';
3 | import routes from './route';
4 | import { install as Mint } from 'src/index';
5 | import VueRouter from 'vue-router';
6 |
7 | document.addEventListener('DOMContentLoaded', function() {
8 | if (window.FastClick) window.FastClick.attach(document.body);
9 | }, false);
10 |
11 | Vue.use(Mint);
12 | Vue.use(VueRouter);
13 |
14 | const router = new VueRouter({
15 | base: __dirname,
16 | routes
17 | });
18 |
19 | new Vue({ // eslint-disable-line
20 | el: '#app',
21 | render: h => h(App),
22 | router
23 | });
24 |
25 | let indexScrollTop = 0;
26 | router.beforeEach((route, redirect, next) => {
27 | if (route.path !== '/') {
28 | indexScrollTop = document.body.scrollTop;
29 | }
30 | document.title = route.meta.title || document.title;
31 | next();
32 | });
33 |
34 | router.afterEach(route => {
35 | if (route.path !== '/') {
36 | document.body.scrollTop = 0;
37 | } else {
38 | Vue.nextTick(() => {
39 | document.body.scrollTop = indexScrollTop;
40 | });
41 | }
42 | });
43 |
--------------------------------------------------------------------------------
/example/pages/navbar.vue:
--------------------------------------------------------------------------------
1 |
2 |
26 |
27 |
28 |
39 |
--------------------------------------------------------------------------------
/packages/index-section/src/index-section.vue:
--------------------------------------------------------------------------------
1 |
2 | Cell
4 |
10 | {{ index }}
4 |-
5 |
7 | * ```
8 | */
9 | const clickoutsideContext = '@@clickoutsideContext';
10 |
11 | export default {
12 | bind(el, binding, vnode) {
13 | const documentHandler = function(e) {
14 | if (vnode.context && !el.contains(e.target)) {
15 | vnode.context[el[clickoutsideContext].methodName]();
16 | }
17 | };
18 | el[clickoutsideContext] = {
19 | documentHandler,
20 | methodName: binding.expression,
21 | arg: binding.arg || 'click'
22 | };
23 | document.addEventListener(el[clickoutsideContext].arg, documentHandler);
24 | },
25 |
26 | update(el, binding) {
27 | el[clickoutsideContext].methodName = binding.expression;
28 | },
29 |
30 | unbind(el) {
31 | document.removeEventListener(
32 | el[clickoutsideContext].arg,
33 | el[clickoutsideContext].documentHandler);
34 | },
35 |
36 | install(Vue) {
37 | Vue.directive('clickoutside', {
38 | bind: this.bind,
39 | unbind: this.unbind
40 | });
41 | }
42 | };
43 |
--------------------------------------------------------------------------------
/src/style/var.css:
--------------------------------------------------------------------------------
1 | $color-blue: #26a2ff;
2 | $color-white: #fff;
3 | $color-grey: #d9d9d9;
4 | $border-color: #c8c8cd;
5 | $success-color: #4caf50;
6 | $error-color: #f44336;
7 | $warning-color: #ffc107;
8 |
9 | /* Cell Component */
10 | $cell-value-color: #888;
11 |
12 | /* Header Component */
13 | $header-height: 40px;
14 |
15 | /* Button Component */
16 | $button-default-color: #656b79;
17 | $button-default-background-color: #f6f8fa;
18 | $button-default-plain-color: #5a5a5a;
19 | $button-default-box-shadow: 0 0 1px #b8bbbf;
20 | $button-primary-color: #fff;
21 | $button-primary-background-color: #26a2ff;
22 | $button-danger-color: #fff;
23 | $button-danger-background-color: #ef4f4f;
24 |
25 | /* Tab Item Component */
26 | $tab-item-font-size: 12px;
27 |
28 | /* Tabbar Component */
29 | $tabbar-background-color: #fafafa;
30 | $tabbar-tab-item-selected-background-color: #eaeaea;
31 | $tabbar-tab-item-selected-color: $color-blue;
32 |
33 | /* Navbar Component */
34 | $navbar-background-color: #fafafa;
35 | $tabbar-tab-item-selected-background-color: #eaeaea;
36 |
37 | /* Checklist Component */
38 | $checklist-title-color: #888;
39 |
40 | /* Radio Component */
41 | $radio-title-color: #888;
42 |
43 | /* z-index */
44 | $z-index-normal: 1;
45 |
--------------------------------------------------------------------------------
/packages/indicator/README.md:
--------------------------------------------------------------------------------
1 | # Overview
2 | vue-indicator is a mobile loading indicator plugin for vue.js.
3 |
4 | # Installation
5 | First, install `vue-indicator` from npm:
6 | ```bash
7 | $ npm install vue-indicator
8 | ```
9 |
10 | Then use it:
11 | ```Javascript
12 | // ES6 mudule
13 | import Indicator from 'vue-indicator';
14 |
15 | // CommonJS
16 | const Indicator = require('vue-indicator').default;
17 | ```
18 |
19 | # Usage
20 | Open an indicator:
21 | ```Javascript
22 | Indicator.open();
23 | ```
24 |
25 | Open an indicator with a string:
26 | ```Javascript
27 | Indicator.open('Loading...');
28 | ```
29 |
30 | Open an indicator with an object:
31 | ```Javascript
32 | Indicator.open({ text:'Loading...', spinnerType: 'fading-circle' });
33 | ```
34 |
35 | Then close it:
36 | ```Javascript
37 | Indicator.close();
38 | ```
39 |
40 | # API
41 | | Option | Description | Value | Default |
42 | |-------------|----------------|-------------------------------------------------------------|---------|
43 | | text | indicator text | String | |
44 | | spinnerType | spinner type | 'snake', 'fading-circle', 'double-bounce', 'triple-bounce' | 'snake' |
45 |
46 | # License
47 | MIT
48 |
--------------------------------------------------------------------------------
/example/pages/switch.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
16 |
17 |
18 |
52 |
53 |
68 |
--------------------------------------------------------------------------------
/example/pages/radio.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
11 |
12 |
13 |
55 |
56 |
97 |
--------------------------------------------------------------------------------
/example/pages/infinite-scroll.vue:
--------------------------------------------------------------------------------
1 |
2 |
5 |
8 |
9 |
12 |
13 |
14 |
15 |
40 |
41 |
103 |
--------------------------------------------------------------------------------
/example/pages/progress.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
8 |
9 |
10 |
59 |
60 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Mint UI
2 |
3 | [](https://travis-ci.org/ElemeFE/mint-ui)
4 | [](https://www.npmjs.com/package/mint-ui)
5 | [](https://npmjs.org/package/mint-ui)
6 | 
7 | 
8 | [](https://gitter.im/ElemeFE/mint-ui?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
9 |
10 | > Mobile UI elements for **Vue 2.0**
11 |
12 | - [Homepage](http://mint-ui.github.io)
13 | - [Documentation](http://mint-ui.github.io/docs)
14 |
15 | ## Installation
16 | ```shell
17 | npm i mint-ui -S
18 |
19 | # for Vue 1.x
20 | npm i mint-ui@1 -S
21 | ```
22 |
23 | ## Usage
24 |
25 | Import all components.
26 |
27 | ```javascript
28 | import Vue from 'vue'
29 | import Mint from 'mint-ui';
30 |
31 | Vue.use(Mint);
32 | ```
33 |
34 | Or import specified component. (Use [babel-plugin-component](https://www.npmjs.com/package/babel-plugin-component))
35 |
36 | ```javascript
37 | import { Cell, Checklist } from 'mint-ui';
38 |
39 | Vue.component(Cell.name, Cell);
40 | Vue.component(Checklist.name, Checklist);
41 | ```
42 |
43 |
44 | Equals to
45 |
46 | ```javascript
47 | import Vue from 'vue';
48 | import Mint from 'mint-ui';
49 | import 'mint-ui/lib/style.css';
50 |
51 | Vue.use(Mint);
52 |
53 | // import specified component
54 |
55 | import MtRadio from 'mint-ui/lib/radio';
56 | import 'mint-ui/lib/radio/style.css';
57 |
58 | Vue.component(MtRadio.name, MtRadio);
59 | ```
60 |
61 | ## babel-plugin-component
62 | - Auto import css file
63 | - Modular import component
64 |
65 | Installation
66 | ```shell
67 | npm i babel-plugin-component -D
68 | ```
69 |
70 | Usage
71 |
72 | .babelrc
73 | ```json
74 | {
75 | "plugins": ["other-plugin", ["component", [
76 | { "libraryName": "mint-ui", "style": true }
77 | ]]]
78 | }
79 | ```
80 |
81 | ## CDN
82 | RawGit
83 |
84 | - https://cdn.rawgit.com/ElemeFE/mint-ui/master/lib/index.js
85 | - https://cdn.rawgit.com/ElemeFE/mint-ui/master/lib/style.css
86 |
87 | NPMCDN
88 |
89 | - https://unpkg.com/mint-ui/lib/index.js
90 | - https://unpkg.com/mint-ui/lib/style.css
91 |
92 | ## Development
93 |
94 | ```shell
95 | npm run dev
96 | ```
97 |
98 | ## Contribution
99 | Please make sure to read the [Contributing Guide](https://github.com/ElemeFE/mint-ui/blob/master/.github/CONTRIBUTING_en-us.md) before making a pull request.
100 |
101 | ## License
102 | MIT
103 |
--------------------------------------------------------------------------------
/packages/picker/README.md:
--------------------------------------------------------------------------------
1 | # Overview
2 | vue-picker is a multi-slot picker based on vue.js.
3 |
4 | # Install
5 |
6 | ```Bash
7 | npm install vue-picker --save
8 | ```
9 |
10 | ```JavaScript
11 | require ('mint-picker/lib/index.css');
12 |
13 | // ES6 mudule
14 | import Picker from 'mint-picker';
15 |
16 | // CommonJS
17 | const Picker = require('mint-picker').default;
18 | ```
19 | Register component:
20 | ```Javascript
21 | Vue.component('picker', Picker);
22 | ```
23 |
24 | # Usage
25 |
26 | ```HTML
27 |
28 |
29 |
30 |
31 |
32 | ```
33 |
34 | ```JavaScript
35 | export default {
36 | methods: {
37 | onValuesChange(picker, values) {
38 | if (values[0] > values[1]) {
39 | picker.setSlotValue(1, values[0]);
40 | }
41 | }
42 | },
43 |
44 | data() {
45 | return {
46 | slots: [
47 | {
48 | flex: 1,
49 | values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
50 | className: 'slot1',
51 | textAlign: 'right'
52 | }, {
53 | divider: true,
54 | content: '-',
55 | className: 'slot2'
56 | }, {
57 | flex: 1,
58 | values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
59 | className: 'slot3',
60 | textAlign: 'left'
61 | }
62 | ]
63 | };
64 | }
65 | };
66 | ```
67 |
68 | # Options
69 |
70 | Picker Options:
71 |
72 | | Option | Description |
73 | | ----- | ----- |
74 | | slots | Array(default: []) the slot config of picker. |
75 | | showToolbar | Boolean(default: false) show a toolbar on top of picker when showToolbar is true. |
76 | | visibleItemCount | Number(default: 5) visible item count of each slot. |
77 | | rotateEffect | Boolean(default: false) use rotate effect on picker item when rotateEffect is true. |
78 | | itemHeight | Number(default: 36) height of each slot. |
79 |
80 | Picker Methods:
81 |
82 | - getSlotValue(index): get the value of specific slot.
83 | - setSlotValue(index, value): set the value of specific slot.
84 | - getSlotValues(index): get the values of specific slot.
85 | - setSlotValues(index, values): set the values of specific slot.
86 | - getValues(): values of all slots except divider slots.
87 | - setValues(values): set values(Array) of all slots except divider slots.
88 |
89 | Picker Slot Options:
90 |
91 | | Option | Description |
92 | | ----- | ----- |
93 | | divider | Boolean(default: false) - just a divider slot when divider is true. |
94 | | content | String - text content in divider slot. |
95 | | values | values of this slot. |
96 | | textAlign | text align of this slot's item. |
97 | | flex | the style.flex value of this slot. |
98 | | className | className of this slot. |
99 |
100 | # License
101 | MIT
--------------------------------------------------------------------------------
/example/pages/palette-button.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
10 |
11 |
12 |
55 |
56 |
127 |
--------------------------------------------------------------------------------
/example/pages/pull-up.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
7 |
8 |
9 |
79 |
80 |
--------------------------------------------------------------------------------
/packages/search/src/search.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
17 |
19 |
20 |
22 |
23 |
24 |
25 |
45 |
46 |
55 |
--------------------------------------------------------------------------------
/packages/spinner/src/spinner/double-bounce.vue:
--------------------------------------------------------------------------------
1 |
2 | Switch
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
6 |
7 |
8 |
9 |
10 |
11 |
20 |
21 |
54 |
--------------------------------------------------------------------------------
/example/pages/toast.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
10 |
11 |
12 |
27 |
28 |
53 |
--------------------------------------------------------------------------------
/example/pages/message-box.vue:
--------------------------------------------------------------------------------
1 |
2 | Toast
4 |
5 | 点击弹出 Toast
6 | 点击弹出带有 icon 的 Toast
7 | 自定义 Toast 位置
8 |
9 |
3 |
10 |
11 |
12 |
27 |
28 |
51 |
--------------------------------------------------------------------------------
/example/demos.vue:
--------------------------------------------------------------------------------
1 |
2 | Message Box
4 |
5 | 打开 alert 提示框
6 | 打开 confirm 提示框
7 | 打开 prompt 提示框
8 |
9 |
4 |
5 |
9 |
14 |
15 |
10 |
11 | {{ item.name }}
12 |
13 |
3 |
30 |
31 |
32 |
65 |
66 |
71 |
72 |
--------------------------------------------------------------------------------
/packages/tab-item/src/tab-item.vue:
--------------------------------------------------------------------------------
1 |
2 |
5 |
6 | radio
4 |
5 |
11 | {{ value1 }}
12 |
13 |
14 |
20 | {{ value2 }}
21 |
22 |
23 |
3 |
8 |
22 |
23 |
24 |
34 |
35 |
50 |
--------------------------------------------------------------------------------
/.github/CONTRIBUTING_en-us.md:
--------------------------------------------------------------------------------
1 | # Mint UI Contributing Guide
2 |
3 | Hi! Thank you for choosing Mint UI.
4 |
5 | Mint UI is a mobile component library for Vue.js. It provides abundant CSS and JS components for building mobile applications. With it, you can create web pages in cohesive style ever faster.
6 |
7 | We are excited that you are interested in contributing to Mint UI. Before submitting your contribution though, please make sure to take a moment and read through the following guidelines.
8 |
9 | ## Issue Guidelines
10 | - Issues are exclusively for bug reports and feature requests. Other questions may be closed directly.
11 |
12 | - Before submitting an issue, please check if similar problems have already been issued.
13 |
14 | - Please specify which version of Mint UI you are using, and provide OS and browser information. [JSFiddle](https://jsfiddle.net/) is recommended to build a live demo so that your issue can be reproduced clearly.
15 |
16 | ## Pull Request Guidelines
17 | - Fork this repository to your own account. Do not create branches here.
18 |
19 | - **DO NOT** include files inside `lib` directory.
20 |
21 | - Rebase before creating a PR to keep commit history clear.
22 |
23 | - If you are fixing a bug, please include detailed description of the bug in the PR.
24 |
25 | - Merging a PR takes two maintainers: one approves the changes after reviewing, and then the other reviews and merges.
26 |
27 | ## Code Style
28 | Just comply with the [ESLint](https://github.com/ElemeFE/eslint-config-elemefe) configuration of [ElemeFE](https://github.com/elemefe).
29 |
--------------------------------------------------------------------------------
/example/pages/field.vue:
--------------------------------------------------------------------------------
1 |
2 |
9 |
10 |
11 |
13 |
14 |
16 |
17 |
19 |
20 |
21 |
3 |
32 |
33 |
34 |
39 |
--------------------------------------------------------------------------------
/example/pages/indicator.vue:
--------------------------------------------------------------------------------
1 |
2 | Field
4 |
5 |
14 |
15 |
16 |
19 |
20 |
21 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
29 |
3 |
10 |
11 |
12 |
27 |
28 |
54 |
--------------------------------------------------------------------------------
/packages/spinner/src/spinner/triple-bounce.vue:
--------------------------------------------------------------------------------
1 |
2 | Indicator
4 |
5 | 点击弹出 Indicator
6 | 可配置 spinner
7 | 点击弹出带有文字的 Indicator
8 |
9 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
32 |
33 |
60 |
--------------------------------------------------------------------------------
/example/pages/badge.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
39 |
40 |
41 |
46 |
47 |
52 |
--------------------------------------------------------------------------------
/example/pages/lazyload.vue:
--------------------------------------------------------------------------------
1 |
2 | Badge
4 |
5 |
6 |
31 |
32 |
7 | 30
8 | 10
9 | 10
10 | 10
11 |
12 |
13 |
14 | 30
15 | 10
16 | 10
17 | 10
18 |
19 |
20 |
21 | 30
22 | 10
23 | 10
24 | 10
25 |
26 |
27 |
28 | 自定义颜色
29 |
30 |
33 |
34 | 未读消息
35 | 10
36 |
37 |
38 |
3 |
10 |
11 |
12 |
39 |
40 |
--------------------------------------------------------------------------------
/packages/navbar/src/navbar.vue:
--------------------------------------------------------------------------------
1 |
2 |
5 |
6 |
7 |
39 |
40 |
71 |
--------------------------------------------------------------------------------
/packages/range/src/draggable.js:
--------------------------------------------------------------------------------
1 | let isDragging = false;
2 | import Vue from 'vue';
3 | const supportTouch = !Vue.prototype.$isServer && 'ontouchstart' in window;
4 |
5 | export default function(element, options) {
6 | const moveFn = function(event) {
7 | if (options.drag) {
8 | options.drag(supportTouch ? event.changedTouches[0] || event.touches[0] : event);
9 | }
10 | };
11 |
12 | const endFn = function(event) {
13 | if (!supportTouch) {
14 | document.removeEventListener('mousemove', moveFn);
15 | document.removeEventListener('mouseup', endFn);
16 | }
17 | document.onselectstart = null;
18 | document.ondragstart = null;
19 |
20 | isDragging = false;
21 |
22 | if (options.end) {
23 | options.end(supportTouch ? event.changedTouches[0] || event.touches[0] : event);
24 | }
25 | };
26 |
27 | element.addEventListener(supportTouch ? 'touchstart' : 'mousedown', function(event) {
28 | if (isDragging) return;
29 | event.preventDefault();
30 | document.onselectstart = function() { return false; };
31 | document.ondragstart = function() { return false; };
32 |
33 | if (!supportTouch) {
34 | document.addEventListener('mousemove', moveFn);
35 | document.addEventListener('mouseup', endFn);
36 | }
37 | isDragging = true;
38 |
39 | if (options.start) {
40 | options.start(supportTouch ? event.changedTouches[0] || event.touches[0] : event);
41 | }
42 | });
43 |
44 | if (supportTouch) {
45 | element.addEventListener('touchmove', moveFn);
46 | element.addEventListener('touchend', endFn);
47 | element.addEventListener('touchcancel', endFn);
48 | }
49 | };
50 |
--------------------------------------------------------------------------------
/packages/picker/src/draggable.js:
--------------------------------------------------------------------------------
1 | let isDragging = false;
2 | import Vue from 'vue';
3 |
4 | const supportTouch = !Vue.prototype.$isServer && 'ontouchstart' in window;
5 |
6 | export default function(element, options) {
7 | const moveFn = function(event) {
8 | if (options.drag) {
9 | options.drag(supportTouch ? event.changedTouches[0] || event.touches[0] : event);
10 | }
11 | };
12 |
13 | const endFn = function(event) {
14 | if (!supportTouch) {
15 | document.removeEventListener('mousemove', moveFn);
16 | document.removeEventListener('mouseup', endFn);
17 | }
18 | document.onselectstart = null;
19 | document.ondragstart = null;
20 |
21 | isDragging = false;
22 |
23 | if (options.end) {
24 | options.end(supportTouch ? event.changedTouches[0] || event.touches[0] : event);
25 | }
26 | };
27 |
28 | element.addEventListener(supportTouch ? 'touchstart' : 'mousedown', function(event) {
29 | if (isDragging) return;
30 | document.onselectstart = function() { return false; };
31 | document.ondragstart = function() { return false; };
32 |
33 | if (!supportTouch) {
34 | document.addEventListener('mousemove', moveFn);
35 | document.addEventListener('mouseup', endFn);
36 | }
37 | isDragging = true;
38 |
39 | if (options.start) {
40 | event.preventDefault();
41 | options.start(supportTouch ? event.changedTouches[0] || event.touches[0] : event);
42 | }
43 | });
44 |
45 | if (supportTouch) {
46 | element.addEventListener('touchmove', moveFn);
47 | element.addEventListener('touchend', endFn);
48 | element.addEventListener('touchcancel', endFn);
49 | }
50 | };
51 |
--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
1 | {
2 | "font": "./src/assets/font/iconfont.css",
3 | "header": "./packages/header/index.js",
4 | "button": "./packages/button/index.js",
5 | "cell": "./packages/cell/index.js",
6 | "cell-swipe": "./packages/cell-swipe/index.js",
7 | "field": "./packages/field/index.js",
8 | "badge": "./packages/badge/index.js",
9 | "switch": "./packages/switch/index.js",
10 | "spinner": "./packages/spinner/index.js",
11 | "tab-item": "./packages/tab-item/index.js",
12 | "tab-container-item": "./packages/tab-container-item/index.js",
13 | "tab-container": "./packages/tab-container/index.js",
14 | "navbar": "./packages/navbar/index.js",
15 | "tabbar": "./packages/tabbar/index.js",
16 | "search": "./packages/search/index.js",
17 | "checklist": "./packages/checklist/index.js",
18 | "radio": "./packages/radio/index.js",
19 | "loadmore": "./packages/loadmore/index.js",
20 | "actionsheet": "./packages/actionsheet/index.js",
21 | "popup": "./packages/popup/index.js",
22 | "swipe": "./packages/swipe/index.js",
23 | "swipe-item": "./packages/swipe-item/index.js",
24 | "range": "./packages/range/index.js",
25 | "picker": "./packages/picker/index.js",
26 | "progress": "./packages/progress/index.js",
27 | "toast": "./packages/toast/index.js",
28 | "indicator": "./packages/indicator/index.js",
29 | "message-box": "./packages/message-box/index.js",
30 | "infinite-scroll": "./packages/infinite-scroll/index.js",
31 | "lazyload": "./packages/lazyload/index.js",
32 | "datetime-picker": "./packages/datetime-picker/index.js",
33 | "index-list": "./packages/index-list/index.js",
34 | "index-section": "./packages/index-section/index.js",
35 | "palette-button": "./packages/palette-button/index.js"
36 | }
--------------------------------------------------------------------------------
/packages/actionsheet/README.md:
--------------------------------------------------------------------------------
1 | # Overview
2 | mint-actionsheet is an action sheet component for vue.js
3 |
4 | # Installation
5 | First, install `mint-actionsheet` from npm:
6 | ```bash
7 | $ npm install mint-actionsheet
8 | ```
9 |
10 | Import it:
11 | ```Javascript
12 | require ('mint-actionsheet/lib/index.css');
13 |
14 | // ES6 mudule
15 | import Actionsheet from 'mint-actionsheet';
16 |
17 | // CommonJS
18 | const Actionsheet = require('mint-actionsheet').default;
19 | ```
20 |
21 | Register component:
22 | ```Javascript
23 | Vue.component('actionsheet', Actionsheet);
24 | ```
25 |
26 | Then use it:
27 | ```html
28 | Lazy Load
4 |-
5 |
-
6 |
7 |
8 |
3 |
13 |
14 |
15 |
31 |
32 |
53 |
--------------------------------------------------------------------------------
/packages/progress/src/progress.vue:
--------------------------------------------------------------------------------
1 |
2 | Index List
4 |此例请使用手机查看
5 |
6 |
7 |
8 |
10 |
11 |
12 |
3 |
10 |
11 |
12 |
59 |
60 |
73 |
--------------------------------------------------------------------------------
/example/pages/action-sheet.vue:
--------------------------------------------------------------------------------
1 |
2 |
5 |
6 |
7 |
8 |
3 |
11 |
12 |
13 |
29 |
30 |
72 |
--------------------------------------------------------------------------------
/packages/tabbar/src/tabbar.vue:
--------------------------------------------------------------------------------
1 |
2 |
7 |
8 |
9 |
41 |
42 |
69 |
--------------------------------------------------------------------------------
/packages/badge/src/badge.vue:
--------------------------------------------------------------------------------
1 |
2 |
6 | Action Sheet
4 |
5 | 点击上拉 action sheet
6 | 不带取消按钮的 action sheet
7 |
8 |
3 |
42 |
43 |
44 |
61 |
62 |
76 |
--------------------------------------------------------------------------------
/packages/spinner/src/spinner.vue:
--------------------------------------------------------------------------------
1 |
2 |
5 |
7 |
8 | 返回
9 |
10 |
12 |
13 |
14 |
15 | 返回
16 |
17 | 关闭
18 |
20 |
21 |
22 |
23 | 返回
24 |
25 |
26 |
27 |
28 |
29 | 分享
30 |
31 |
32 |
33 |
34 |
35 |
37 |
39 |
40 |
41 | Header
6 |
3 |
41 |
42 |
43 |
48 |
49 |
64 |
--------------------------------------------------------------------------------
/example/pages/checklist.vue:
--------------------------------------------------------------------------------
1 |
2 | Button
4 | 9 | 10 | 15 | 16 | 21 | 22 | 27 | 28 | 33 | 34 |
35 |
36 |
37 | 带自定义图标
38 |
39 |
40 |
37 | 带自定义图标
38 |
3 |
10 |
11 |
12 |
21 |
22 |
23 |
33 |
34 |
35 |
45 |
46 |
47 |
48 |
49 |
89 |
90 |
95 |
--------------------------------------------------------------------------------
/example/pages/tabbar.vue:
--------------------------------------------------------------------------------
1 |
2 | Checklist
4 |
5 |
13 | {{ value1 }}
14 |
15 |
16 |
24 | {{ value2 }}
25 |
26 |
27 |
36 | {{ value3 }}
37 |
38 |
39 |
3 |
31 |
32 |
33 | 外卖
34 |
35 |
36 |
37 | 订单
38 |
39 |
40 |
41 | 发现
42 |
43 |
44 |
45 | 我的
46 |
47 |
48 |
49 |
50 |
51 |
61 |
62 |
74 |
--------------------------------------------------------------------------------
/packages/popup/README.md:
--------------------------------------------------------------------------------
1 | # Overview
2 | mint-popup is a popup component for vue.js
3 |
4 | # Installation
5 | First, install `mint-popup` from npm:
6 | ```bash
7 | $ npm install mint-popup
8 | ```
9 |
10 | Import it:
11 | ```Javascript
12 | require ('mint-popup/lib/index.css');
13 |
14 | // ES6 mudule
15 | import Popup from 'mint-popup';
16 |
17 | // CommonJS
18 | const Popup = require('mint-popup').default;
19 | ```
20 |
21 | Register component:
22 | ```Javascript
23 | Vue.component('popup', Popup);
24 | ```
25 |
26 | Then use it:
27 | ```html
28 |
4 |
10 |
11 |
13 |
14 |
16 |
17 |
19 |
20 |
24 | 退出
25 |
26 |
27 |
28 |
29 |
30 | Tabbar
5 |
6 |
8 |
9 |
21 |
23 |
33 | 外卖
34 |
37 | 订单
38 |
41 | 发现
42 |
45 | 我的
46 |
6 |
7 |
8 |
9 |
10 |
37 |
38 |
74 |
--------------------------------------------------------------------------------
/example/pages/swipe.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 | 1
7 | 2
8 | 3
9 |
10 |
11 |
13 | 1
14 | 2
15 | 3
16 |
17 |
18 |
20 | 1
21 | 2
22 | 3
23 |
24 |
25 |
27 | 1
28 | 2
29 | 3
30 |
31 |
32 |
34 | SINGLE SLIDE
35 |
36 |
37 |
38 |
39 |
76 |
--------------------------------------------------------------------------------
/packages/indicator/src/indicator.vue:
--------------------------------------------------------------------------------
1 |
2 | Swipe
4 |基础用法
5 |隐藏 indicators
12 |取消自动播放
19 |设置默认显示页
26 |单个幻灯片
33 |
4 |
10 |
5 |
8 |
9 |
3 |
15 |
16 |
17 |
56 |
57 |
89 |
--------------------------------------------------------------------------------
/packages/header/src/header.vue:
--------------------------------------------------------------------------------
1 |
2 | Infinite Scroll
4 |当即将滚动至列表底部时, 自动加载更多数据
5 |
6 |
14 | -
7 |
- {{ item }} 8 |
10 |
3 |
5 |
7 |
8 |
10 |
11 |
12 |
15 |
16 |
17 |
19 |
26 |
27 |
28 |
63 |
64 |
--------------------------------------------------------------------------------
/example/pages/datetime-picker.vue:
--------------------------------------------------------------------------------
1 |
2 | Progress
4 |0%
13 | 100%
14 |
20 | 上传文件
21 |
22 |
24 |
25 | {{ value }}%
23 |
3 |
15 |
16 |
21 |
22 |
27 |
28 |
36 |
37 |
42 |
43 |
44 |
45 |
46 |
62 |
63 |
96 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "mint-ui",
3 | "version": "2.2.3",
4 | "description": "Mobile UI elements for vue.js",
5 | "keywords": [
6 | "component",
7 | "vue",
8 | "mobile",
9 | "eleme"
10 | ],
11 | "main": "lib/mint-ui.common.js",
12 | "style": "lib/style.css",
13 | "files": [
14 | "lib",
15 | "src",
16 | "packages"
17 | ],
18 | "scripts": {
19 | "dev": "npm run bootstrap && npm run build:entry && cooking watch -c build/cooking.demo.js -p",
20 | "bootstrap": "yarn || npm i",
21 | "dist": "npm run clean && npm run build:entry && npm run lint && cooking build -c build/cooking.conf.js,build/cooking.common.js,build/cooking.component.js -p",
22 | "deploy": "npm run build:entry && cooking build -c build/cooking.demo.js -p && gh-pages -d example/dist --remote eleme",
23 | "build:entry": "node build/bin/build-entry",
24 | "pub": "sh build/release.sh",
25 | "pub:all": "node build/bin/build-all.js && lerna publish",
26 | "clean": "rimraf lib && rimraf packages/*/lib",
27 | "lint": "eslint src/**/*.js packages/**/*.{js,vue} build/**/*.js --quiet"
28 | },
29 | "repository": {
30 | "type": "git",
31 | "url": "git+https://github.com/ElemeFE/mint-ui.git"
32 | },
33 | "homepage": "https://github.com/ElemeFE/mint-ui#readme",
34 | "bugs": {
35 | "url": "https://github.com/ElemeFE/mint-ui/issues"
36 | },
37 | "author": "elemefe",
38 | "license": "MIT",
39 | "dependencies": {
40 | "array-find-index": "^1.0.2",
41 | "raf.js": "0.0.4",
42 | "vue-lazyload": "^1.0.1"
43 | },
44 | "peerDependencies": {
45 | "vue": "^2.1.8"
46 | },
47 | "devDependencies": {
48 | "cooking": "^1.2.4",
49 | "cooking-buble": "^0.1.2",
50 | "cooking-lint": "^0.1.2",
51 | "cooking-saladcss": "^0.4.0",
52 | "cooking-vue2": "^0.2.2",
53 | "css-loader": "^0.25.0",
54 | "eslint": "^3.12.2",
55 | "extract-text-webpack-plugin": "beta",
56 | "fastclick": "^1.0.6",
57 | "file-loader": "^0.9.0",
58 | "gh-pages": "^0.11.0",
59 | "html-loader": "^0.4.3",
60 | "html-webpack-plugin": "^2.22.0",
61 | "json-loader": "^0.5.4",
62 | "json-templater": "^1.0.4",
63 | "lerna": "2.0.0-beta.18",
64 | "my-local-ip": "^1.0.0",
65 | "postcss": "^5.2.0",
66 | "postcss-loader": "^0.13.0",
67 | "rimraf": "^2.5.4",
68 | "style-loader": "^0.13.1",
69 | "uppercamelcase": "^1.1.0",
70 | "url-loader": "^0.5.7",
71 | "vue": "^2.1.8",
72 | "vue-loader": "10",
73 | "vue-router": "^2.0.0",
74 | "vue-template-compiler": "^2.1.8",
75 | "vue-template-es2015-compiler": "^1.4.2",
76 | "webpack": "beta",
77 | "webpack-dev-server": "beta",
78 | "webpack-shell-plugin": "^0.4.3"
79 | }
80 | }
81 |
--------------------------------------------------------------------------------
/packages/switch/src/switch.vue:
--------------------------------------------------------------------------------
1 |
2 |
7 |
8 |
9 |
38 |
39 |
110 |
--------------------------------------------------------------------------------
/packages/toast/src/toast.vue:
--------------------------------------------------------------------------------
1 |
2 | Datetime Picker
4 |
5 | 点击弹出 DateTime Picker
6 | 点击弹出 Date Picker
7 | 点击弹出 Time Picker
8 | 自定义模板
9 | 设定初始值
10 |
11 |
4 |
5 | {{ message }}
6 |
7 |
3 |
6 |
7 |
8 |
9 |
10 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
45 |
46 |
69 |
--------------------------------------------------------------------------------
/example/pages/pull-down.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
20 |
21 |
22 |
68 |
69 |
106 |
--------------------------------------------------------------------------------
/packages/actionsheet/src/actionsheet.vue:
--------------------------------------------------------------------------------
1 |
2 | Pull down
4 |在列表顶端, 按住 - 下拉 - 释放可以获取更多数据
5 |此例请使用手机查看
6 |
7 |
8 |
18 |
19 | -
9 |
- {{ item }} 10 |
12 | ↓
13 |
14 |
17 |
4 |
9 | -
5 |
- {{ item.name }} 6 |
3 |
20 |
21 |
22 |
67 |
68 |
110 |
--------------------------------------------------------------------------------
/example/pages/range.vue:
--------------------------------------------------------------------------------
1 |
2 | Pull up
4 |在列表底部, 按住 - 上拉 - 释放可以获取更多数据
5 |此例请使用手机查看
6 |
7 |
8 |
18 |
19 | -
9 |
- {{ item }} 10 |
12 | ↑
13 |
14 |
17 |
3 |
6 |
7 |
10 |
11 |
13 |
14 |
17 |
18 |
20 |
21 |
24 |
25 |
26 |
27 |
28 |
55 |
56 |
--------------------------------------------------------------------------------
/packages/picker/src/translate.js:
--------------------------------------------------------------------------------
1 | var exportObj = {};
2 | import Vue from 'vue';
3 | if (!Vue.prototype.$isServer) {
4 | var docStyle = document.documentElement.style;
5 | var engine;
6 | var translate3d = false;
7 |
8 | if (window.opera && Object.prototype.toString.call(opera) === '[object Opera]') {
9 | engine = 'presto';
10 | } else if ('MozAppearance' in docStyle) {
11 | engine = 'gecko';
12 | } else if ('WebkitAppearance' in docStyle) {
13 | engine = 'webkit';
14 | } else if (typeof navigator.cpuClass === 'string') {
15 | engine = 'trident';
16 | }
17 |
18 | var cssPrefix = {trident: '-ms-', gecko: '-moz-', webkit: '-webkit-', presto: '-o-'}[engine];
19 |
20 | var vendorPrefix = {trident: 'ms', gecko: 'Moz', webkit: 'Webkit', presto: 'O'}[engine];
21 |
22 | var helperElem = document.createElement('div');
23 | var perspectiveProperty = vendorPrefix + 'Perspective';
24 | var transformProperty = vendorPrefix + 'Transform';
25 | var transformStyleName = cssPrefix + 'transform';
26 | var transitionProperty = vendorPrefix + 'Transition';
27 | var transitionStyleName = cssPrefix + 'transition';
28 | var transitionEndProperty = vendorPrefix.toLowerCase() + 'TransitionEnd';
29 |
30 | if (helperElem.style[perspectiveProperty] !== undefined) {
31 | translate3d = true;
32 | }
33 |
34 | var getTranslate = function(element) {
35 | var result = {left: 0, top: 0};
36 | if (element === null || element.style === null) return result;
37 |
38 | var transform = element.style[transformProperty];
39 | var matches = /translate\(\s*(-?\d+(\.?\d+?)?)px,\s*(-?\d+(\.\d+)?)px\)\s*translateZ\(0px\)/ig.exec(transform);
40 | if (matches) {
41 | result.left = +matches[1];
42 | result.top = +matches[3];
43 | }
44 |
45 | return result;
46 | };
47 |
48 | var translateElement = function(element, x, y) {
49 | if (x === null && y === null) return;
50 |
51 | if (element === null || element === undefined || element.style === null) return;
52 |
53 | if (!element.style[transformProperty] && x === 0 && y === 0) return;
54 |
55 | if (x === null || y === null) {
56 | var translate = getTranslate(element);
57 | if (x === null) {
58 | x = translate.left;
59 | }
60 | if (y === null) {
61 | y = translate.top;
62 | }
63 | }
64 |
65 | cancelTranslateElement(element);
66 |
67 | if (translate3d) {
68 | element.style[transformProperty] += ' translate(' + (x ? (x + 'px') : '0px') + ',' + (y ? (y + 'px') : '0px') + ') translateZ(0px)';
69 | } else {
70 | element.style[transformProperty] += ' translate(' + (x ? (x + 'px') : '0px') + ',' + (y ? (y + 'px') : '0px') + ')';
71 | }
72 | };
73 |
74 | var cancelTranslateElement = function(element) {
75 | if (element === null || element.style === null) return;
76 | var transformValue = element.style[transformProperty];
77 | if (transformValue) {
78 | transformValue = transformValue.replace(/translate\(\s*(-?\d+(\.?\d+?)?)px,\s*(-?\d+(\.\d+)?)px\)\s*translateZ\(0px\)/g, '');
79 | element.style[transformProperty] = transformValue;
80 | }
81 | };
82 | exportObj = {
83 | transformProperty: transformProperty,
84 | transformStyleName: transformStyleName,
85 | transitionProperty: transitionProperty,
86 | transitionStyleName: transitionStyleName,
87 | transitionEndProperty: transitionEndProperty,
88 | getElementTranslate: getTranslate,
89 | translateElement: translateElement,
90 | cancelTranslateElement: cancelTranslateElement
91 | };
92 | };
93 |
94 | export default exportObj ;
95 |
--------------------------------------------------------------------------------
/packages/popup/src/popup.vue:
--------------------------------------------------------------------------------
1 |
2 | Range
4 |基本功能
5 |{{ item.start }}
8 | {{ item.end }}
9 | 自定义
12 |{{ item.start }}
15 | {{ item.end }}
16 | 场景举例
19 |{{ item.start }}
22 | {{ item.end }}
23 |
4 |
6 |
3 |
21 |
29 |
30 |
31 |
95 |
96 |
153 |
--------------------------------------------------------------------------------
/packages/radio/src/radio.vue:
--------------------------------------------------------------------------------
1 |
2 |
22 |
28 |
23 |
24 |
26 |
27 |
3 |
4 |
5 |
19 |
20 |
21 |
22 |
23 |
75 |
76 |
152 |
--------------------------------------------------------------------------------
/example/nav.config.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "title": "JS Components",
4 | "list": [
5 | {
6 | "path": "/toast",
7 | "name": "Toast",
8 | "icon": "toast"
9 | },
10 | {
11 | "path": "/indicator",
12 | "name": "Indicator",
13 | "icon": "indicator"
14 | },
15 | {
16 | "path": "/pull-down",
17 | "name": "Pull down",
18 | "icon": "pull-down"
19 | },
20 | {
21 | "path": "/pull-up",
22 | "name": "Pull up",
23 | "icon": "pull-up"
24 | },
25 | {
26 | "path": "/infinite-scroll",
27 | "name": "Infinite scroll",
28 | "icon": "infinite-scroll"
29 | },
30 | {
31 | "path": "/message-box",
32 | "name": "Message box",
33 | "icon": "message-box"
34 | },
35 | {
36 | "path": "/action-sheet",
37 | "name": "Action sheet",
38 | "icon": "action-sheet"
39 | },
40 | {
41 | "path": "/popup",
42 | "name": "Popup",
43 | "icon": "popup"
44 | },
45 | {
46 | "path": "/swipe",
47 | "name": "Swipe",
48 | "icon": "swipe"
49 | },
50 | {
51 | "path": "/lazyload",
52 | "name": "Lazy load",
53 | "icon": "lazyload"
54 | },
55 | {
56 | "path": "/range",
57 | "name": "Range",
58 | "icon": "range"
59 | },
60 | {
61 | "path": "/progress",
62 | "name": "Progress",
63 | "icon": "progress"
64 | },
65 | {
66 | "path": "/picker",
67 | "name": "Picker",
68 | "icon": "picker"
69 | },
70 | {
71 | "path": "/datetime-picker",
72 | "name": "Datetime Picker",
73 | "icon": "time"
74 | },
75 | {
76 | "path": "/index-list",
77 | "name": "Index List",
78 | "icon": "alphabet"
79 | },
80 | {
81 | "path": "/palette-button",
82 | "name": "Palette Button",
83 | "icon": "alphabet"
84 | }
85 | ]
86 | },
87 | {
88 | "title": "CSS Components",
89 | "list": [
90 | {
91 | "path": "/header",
92 | "name": "Header",
93 | "icon": "header"
94 | },
95 | {
96 | "path": "/tabbar",
97 | "name": "Tabbar",
98 | "icon": "tabbar"
99 | },
100 | {
101 | "path": "/navbar",
102 | "name": "Navbar",
103 | "icon": "navbar"
104 | },
105 | {
106 | "path": "/button",
107 | "name": "Button",
108 | "icon": "button"
109 | },
110 | {
111 | "path": "/cell",
112 | "name": "Cell",
113 | "icon": "cell"
114 | },
115 | {
116 | "path": "/cell-swipe",
117 | "name": "Cell Swipe",
118 | "icon": "cell"
119 | },
120 | {
121 | "path": "/spinner",
122 | "name": "Spinner",
123 | "icon": "spinner"
124 | },
125 | {
126 | "path": "/tab-container",
127 | "name": "TabContainer",
128 | "icon": "panel"
129 | },
130 | {
131 | "path": "/search",
132 | "name": "Search",
133 | "icon": "searchbar"
134 | }
135 | ]
136 | },
137 | {
138 | "title": "Form Components",
139 | "list": [
140 | {
141 | "path": "/switch",
142 | "name": "Switch",
143 | "icon": "switch"
144 | },
145 | {
146 | "path": "/checklist",
147 | "name": "Checklist",
148 | "icon": "checklist"
149 | },
150 | {
151 | "path": "/radio",
152 | "name": "Radio",
153 | "icon": "radio"
154 | },
155 | {
156 | "path": "/field",
157 | "name": "Field",
158 | "icon": "field"
159 | },
160 | {
161 | "path": "/badge",
162 | "name": "Badge",
163 | "icon": "badge"
164 | }
165 | ]
166 | }
167 | ]
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import Header from '../packages/header';
2 | import Button from '../packages/button';
3 | import Cell from '../packages/cell';
4 | import CellSwipe from '../packages/cell-swipe';
5 | import Field from '../packages/field';
6 | import Badge from '../packages/badge';
7 | import Switch from '../packages/switch';
8 | import Spinner from '../packages/spinner';
9 | import TabItem from '../packages/tab-item';
10 | import TabContainerItem from '../packages/tab-container-item';
11 | import TabContainer from '../packages/tab-container';
12 | import Navbar from '../packages/navbar';
13 | import Tabbar from '../packages/tabbar';
14 | import Search from '../packages/search';
15 | import Checklist from '../packages/checklist';
16 | import Radio from '../packages/radio';
17 | import Loadmore from '../packages/loadmore';
18 | import Actionsheet from '../packages/actionsheet';
19 | import Popup from '../packages/popup';
20 | import Swipe from '../packages/swipe';
21 | import SwipeItem from '../packages/swipe-item';
22 | import Range from '../packages/range';
23 | import Picker from '../packages/picker';
24 | import Progress from '../packages/progress';
25 | import Toast from '../packages/toast';
26 | import Indicator from '../packages/indicator';
27 | import MessageBox from '../packages/message-box';
28 | import InfiniteScroll from '../packages/infinite-scroll';
29 | import Lazyload from '../packages/lazyload';
30 | import DatetimePicker from '../packages/datetime-picker';
31 | import IndexList from '../packages/index-list';
32 | import IndexSection from '../packages/index-section';
33 | import PaletteButton from '../packages/palette-button';
34 | import '../src/assets/font/iconfont.css';
35 |
36 | const version = '2.2.3';
37 | const install = function(Vue) {
38 | if (install.installed) return;
39 |
40 | Vue.component(Header.name, Header);
41 | Vue.component(Button.name, Button);
42 | Vue.component(Cell.name, Cell);
43 | Vue.component(CellSwipe.name, CellSwipe);
44 | Vue.component(Field.name, Field);
45 | Vue.component(Badge.name, Badge);
46 | Vue.component(Switch.name, Switch);
47 | Vue.component(Spinner.name, Spinner);
48 | Vue.component(TabItem.name, TabItem);
49 | Vue.component(TabContainerItem.name, TabContainerItem);
50 | Vue.component(TabContainer.name, TabContainer);
51 | Vue.component(Navbar.name, Navbar);
52 | Vue.component(Tabbar.name, Tabbar);
53 | Vue.component(Search.name, Search);
54 | Vue.component(Checklist.name, Checklist);
55 | Vue.component(Radio.name, Radio);
56 | Vue.component(Loadmore.name, Loadmore);
57 | Vue.component(Actionsheet.name, Actionsheet);
58 | Vue.component(Popup.name, Popup);
59 | Vue.component(Swipe.name, Swipe);
60 | Vue.component(SwipeItem.name, SwipeItem);
61 | Vue.component(Range.name, Range);
62 | Vue.component(Picker.name, Picker);
63 | Vue.component(Progress.name, Progress);
64 | Vue.component(DatetimePicker.name, DatetimePicker);
65 | Vue.component(IndexList.name, IndexList);
66 | Vue.component(IndexSection.name, IndexSection);
67 | Vue.component(PaletteButton.name, PaletteButton);
68 | Vue.use(InfiniteScroll);
69 | Vue.use(Lazyload, {
70 | loading: require('./assets/loading-spin.svg'),
71 | try: 3
72 | });
73 |
74 | Vue.$messagebox = Vue.prototype.$messagebox = MessageBox;
75 | Vue.$toast = Vue.prototype.$toast = Toast;
76 | Vue.$indicator = Vue.prototype.$indicator = Indicator;
77 | };
78 |
79 | // auto install
80 | if (typeof window !== 'undefined' && window.Vue) {
81 | install(window.Vue);
82 | };
83 |
84 | module.exports = {
85 | install,
86 | version,
87 | Header,
88 | Button,
89 | Cell,
90 | CellSwipe,
91 | Field,
92 | Badge,
93 | Switch,
94 | Spinner,
95 | TabItem,
96 | TabContainerItem,
97 | TabContainer,
98 | Navbar,
99 | Tabbar,
100 | Search,
101 | Checklist,
102 | Radio,
103 | Loadmore,
104 | Actionsheet,
105 | Popup,
106 | Swipe,
107 | SwipeItem,
108 | Range,
109 | Picker,
110 | Progress,
111 | Toast,
112 | Indicator,
113 | MessageBox,
114 | InfiniteScroll,
115 | Lazyload,
116 | DatetimePicker,
117 | IndexList,
118 | IndexSection,
119 | PaletteButton
120 | };
121 |
--------------------------------------------------------------------------------
/packages/checklist/src/checklist.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
19 |
20 |
21 |
22 |
23 |
84 |
85 |
169 |
--------------------------------------------------------------------------------
/packages/button/src/button.vue:
--------------------------------------------------------------------------------
1 |
2 |
18 |
19 |
20 |
80 |
81 |
173 |
--------------------------------------------------------------------------------
/example/pages/popup.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
11 |
16 |
17 |
19 |
20 | 关闭 popup
21 |
22 |
23 |
25 |
26 |
27 |
28 |
101 |
102 |
156 |
--------------------------------------------------------------------------------
/packages/range/src/index.vue:
--------------------------------------------------------------------------------
1 |
2 | Popup
4 |
5 | 中部弹出 popup
6 | 上侧弹出 popup
7 | 右侧弹出 popup
8 | 下侧弹出 popup
9 |
10 | popup
12 |/ ˈpɑpˌʌp /
13 |n. 弹出式; [棒]内野飞球; 自动起跳式装置
14 |adj. 弹起的; 有自动起跳装置的
15 |更新成功
18 |
3 |
11 |
12 |
13 |
77 |
78 |
168 |
--------------------------------------------------------------------------------
5 |
6 |
7 |
8 |
9 |