├── examples ├── src │ ├── doc │ │ ├── pages │ │ │ ├── main.md │ │ │ ├── layout │ │ │ │ ├── forward.md │ │ │ │ ├── loading.md │ │ │ │ ├── badge.md │ │ │ │ ├── page.md │ │ │ │ ├── segment.md │ │ │ │ ├── tabs.md │ │ │ │ ├── filter.md │ │ │ │ ├── toast.md │ │ │ │ ├── topbar.md │ │ │ │ ├── scroll.md │ │ │ │ ├── popup.md │ │ │ │ ├── image.md │ │ │ │ ├── actionsheet.md │ │ │ │ ├── modal.md │ │ │ │ ├── swiper.md │ │ │ │ ├── popover.md │ │ │ │ ├── dropdown.md │ │ │ │ ├── searchbar.md │ │ │ │ ├── datepicker.md │ │ │ │ ├── picker.md │ │ │ │ ├── list.md │ │ │ │ ├── box~row.md │ │ │ │ └── search.md │ │ │ ├── base │ │ │ │ └── button.md │ │ │ ├── config.md │ │ │ ├── forms │ │ │ │ ├── textarea.md │ │ │ │ ├── switch.md │ │ │ │ ├── input.md │ │ │ │ ├── form.md │ │ │ │ └── checker.md │ │ │ └── use.md │ │ ├── phone.png │ │ ├── doc.js │ │ └── index.html │ └── example │ │ ├── cfg.js │ │ ├── components │ │ ├── topbar.vue │ │ ├── forward.vue │ │ ├── tabs.vue │ │ ├── segment.vue │ │ ├── textarea.vue │ │ ├── input.vue │ │ ├── page.vue │ │ ├── badge.vue │ │ ├── switch.vue │ │ ├── button.vue │ │ ├── loading.vue │ │ ├── toast.vue │ │ ├── picker.vue │ │ ├── image.vue │ │ ├── dropdown.vue │ │ ├── uploader.vue │ │ ├── actionsheet.vue │ │ ├── popover.vue │ │ ├── popup.vue │ │ ├── datepicker.vue │ │ ├── searchbar.vue │ │ ├── search.vue │ │ ├── filter.vue │ │ ├── alert.vue │ │ └── scroll.vue │ │ ├── directives │ │ ├── badge.vue │ │ ├── draggable.vue │ │ └── lazyload.vue │ │ ├── index.html │ │ └── main.vue ├── app.js └── webpack.config.js ├── src ├── assets │ └── base.css ├── components │ ├── icon │ │ ├── iconfont.ttf │ │ ├── iconfont.css │ │ └── index.vue │ ├── list │ │ └── index.js │ ├── page │ │ ├── index.js │ │ └── page.vue │ ├── image │ │ ├── index.js │ │ ├── _.js │ │ └── image.vue │ ├── input │ │ ├── index.js │ │ └── input.vue │ ├── popup │ │ ├── index.js │ │ └── popup.vue │ ├── masker │ │ ├── index.js │ │ └── masker.vue │ ├── search │ │ ├── index.js │ │ └── history.vue │ ├── switch │ │ ├── index.js │ │ └── switch.vue │ ├── topbar │ │ ├── index.js │ │ └── topbar.vue │ ├── forward │ │ ├── index.js │ │ └── forward.vue │ ├── loading │ │ ├── index.js │ │ └── loading.vue │ ├── overlay │ │ └── index.js │ ├── segment │ │ ├── index.js │ │ └── segment.vue │ ├── badge │ │ ├── index.js │ │ └── badge.vue │ ├── button │ │ ├── index.js │ │ └── button.vue │ ├── dropdown │ │ └── index.js │ ├── searchbar │ │ └── index.js │ ├── textarea │ │ ├── index.js │ │ └── textarea.vue │ ├── form │ │ ├── index.js │ │ └── row.vue │ ├── lightbox │ │ ├── index.js │ │ └── lightbox.vue │ ├── layout │ │ ├── index.js │ │ ├── box.vue │ │ └── row.vue │ ├── tabs │ │ ├── index.js │ │ └── pane.vue │ ├── swiper │ │ ├── index.js │ │ └── item.vue │ ├── popover │ │ ├── index.js │ │ └── action.vue │ ├── swipeout │ │ ├── index.js │ │ ├── action.vue │ │ └── swipeout.vue │ ├── actionsheet │ │ ├── index.js │ │ ├── item.vue │ │ └── actionsheet.vue │ ├── picker │ │ ├── index.js │ │ └── time.js │ ├── scroll │ │ └── index.js │ ├── checker │ │ ├── index.js │ │ ├── checker.vue │ │ ├── abstract.vue │ │ ├── icon.vue │ │ └── group.vue │ ├── toast │ │ ├── tick.js │ │ ├── index.js │ │ └── toast.vue │ └── modal │ │ ├── index.js │ │ └── modal.vue ├── directives │ ├── wipe │ │ ├── index.js │ │ └── wipe.js │ ├── badge │ │ ├── index.js │ │ └── badge.js │ ├── autosize │ │ └── index.js │ └── draggable │ │ └── index.js ├── helper │ ├── index.js │ └── event.js ├── config.js ├── mixins │ ├── model.js │ └── input.js └── cfg.default.js ├── .gitignore ├── README.md ├── doc ├── badge.md ├── box.md ├── forward.md ├── toast.md ├── lightbox.md ├── mask.md ├── filter.md ├── tabbar.md ├── dateinput.md ├── form.md ├── row.md ├── scroll.md ├── overlay.md ├── segment.md ├── switch.md ├── uploader.md ├── topbar.md ├── pulldown2refresh.md ├── textarea.md ├── dropdown.md ├── formcell.md ├── multiple.md ├── slider.md ├── page.md ├── link-multiple.md ├── button.md ├── datepicker.md ├── images.md ├── searchbar.md ├── actionsheet.md ├── textinput.md ├── checkboxes.md ├── radios.md ├── alert.md ├── select.md ├── single.md ├── lazyload.md ├── search.md ├── draggable.md ├── iosselect.md ├── list.md └── link.md ├── .babelrc ├── .travis.yml ├── webpack.config.js ├── package.json └── .eslintrc.js /examples/src/doc/pages/main.md: -------------------------------------------------------------------------------- 1 | # vmui 2 | 3 | ## welcome to vmui -------------------------------------------------------------------------------- /examples/src/example/cfg.js: -------------------------------------------------------------------------------- 1 | export default { 2 | 'page.topFixed': '20px' 3 | }; -------------------------------------------------------------------------------- /src/assets/base.css: -------------------------------------------------------------------------------- 1 | [class^="vm-"] { 2 | font-size: 14px; 3 | color: #333; 4 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | .DS_Store 3 | node_modules 4 | examples/_build_ 5 | package-lock.json 6 | -------------------------------------------------------------------------------- /examples/src/doc/phone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/feather-components/vm/HEAD/examples/src/doc/phone.png -------------------------------------------------------------------------------- /src/components/icon/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/feather-components/vm/HEAD/src/components/icon/iconfont.ttf -------------------------------------------------------------------------------- /src/components/list/index.js: -------------------------------------------------------------------------------- 1 | import List from './list'; 2 | import {Util} from '../../helper'; 3 | 4 | export default Util.register(List); -------------------------------------------------------------------------------- /src/components/page/index.js: -------------------------------------------------------------------------------- 1 | import Page from './page'; 2 | import {Util} from '../../helper'; 3 | 4 | export default Util.register(Page); -------------------------------------------------------------------------------- /src/components/image/index.js: -------------------------------------------------------------------------------- 1 | import Image from './image'; 2 | import {Util} from '../../helper'; 3 | 4 | export default Util.register(Image); -------------------------------------------------------------------------------- /src/components/input/index.js: -------------------------------------------------------------------------------- 1 | import Input from './input'; 2 | import {Util} from '../../helper'; 3 | 4 | export default Util.register(Input); -------------------------------------------------------------------------------- /src/components/popup/index.js: -------------------------------------------------------------------------------- 1 | import Popup from './popup'; 2 | import {Util} from '../../helper'; 3 | 4 | export default Util.register(Popup); -------------------------------------------------------------------------------- /src/components/masker/index.js: -------------------------------------------------------------------------------- 1 | import Masker from './masker'; 2 | import {Util} from '../../helper'; 3 | 4 | export default Util.register(Masker); -------------------------------------------------------------------------------- /src/components/search/index.js: -------------------------------------------------------------------------------- 1 | import Search from './search'; 2 | import {Util} from '../../helper'; 3 | 4 | export default Util.register(Search); -------------------------------------------------------------------------------- /src/components/switch/index.js: -------------------------------------------------------------------------------- 1 | import Switch from './switch'; 2 | import {Util} from '../../helper'; 3 | 4 | export default Util.register(Switch); -------------------------------------------------------------------------------- /src/components/topbar/index.js: -------------------------------------------------------------------------------- 1 | import TopBar from './topbar'; 2 | import {Util} from '../../helper'; 3 | 4 | export default Util.register(TopBar); -------------------------------------------------------------------------------- /src/directives/wipe/index.js: -------------------------------------------------------------------------------- 1 | import Wipe from './wipe'; 2 | import {Util} from '../../helper'; 3 | 4 | export default Util.register(Wipe, true); -------------------------------------------------------------------------------- /src/components/forward/index.js: -------------------------------------------------------------------------------- 1 | import Forward from './forward'; 2 | import {Util} from '../../helper'; 3 | 4 | export default Util.register(Forward); -------------------------------------------------------------------------------- /src/components/loading/index.js: -------------------------------------------------------------------------------- 1 | import Loading from './loading'; 2 | import {Util} from '../../helper'; 3 | 4 | export default Util.register(Loading); -------------------------------------------------------------------------------- /src/components/overlay/index.js: -------------------------------------------------------------------------------- 1 | import Overlay from './overlay'; 2 | import {Util} from '../../helper'; 3 | 4 | export default Util.register(Overlay); -------------------------------------------------------------------------------- /src/components/segment/index.js: -------------------------------------------------------------------------------- 1 | import Segment from './segment'; 2 | import {Util} from '../../helper'; 3 | 4 | export default Util.register(Segment); -------------------------------------------------------------------------------- /src/directives/badge/index.js: -------------------------------------------------------------------------------- 1 | import Badge from './badge.js'; 2 | import {Util} from '../../helper'; 3 | 4 | export default Util.register(Badge, true); -------------------------------------------------------------------------------- /src/components/badge/index.js: -------------------------------------------------------------------------------- 1 | import Badge from './badge'; 2 | import {Util} from '../../helper'; 3 | 4 | Util.register(Badge); 5 | 6 | export default Badge; -------------------------------------------------------------------------------- /src/components/button/index.js: -------------------------------------------------------------------------------- 1 | import Button from './button'; 2 | import {Util} from '../../helper'; 3 | 4 | Util.register(Button); 5 | export default Button; -------------------------------------------------------------------------------- /src/components/dropdown/index.js: -------------------------------------------------------------------------------- 1 | import DropDown from './dropdown'; 2 | import {Util} from '../../helper'; 3 | 4 | export default Util.register(DropDown); -------------------------------------------------------------------------------- /src/components/searchbar/index.js: -------------------------------------------------------------------------------- 1 | import SearchBar from './searchbar'; 2 | import {Util} from '../../helper'; 3 | 4 | export default Util.register(SearchBar); -------------------------------------------------------------------------------- /src/components/textarea/index.js: -------------------------------------------------------------------------------- 1 | import Textarea from './textarea'; 2 | import {Util} from '../../helper'; 3 | 4 | export default Util.register(Textarea); -------------------------------------------------------------------------------- /src/directives/autosize/index.js: -------------------------------------------------------------------------------- 1 | import AutoSize from './autosize'; 2 | import {Util} from '../../helper'; 3 | 4 | export default Util.register(AutoSize, true); -------------------------------------------------------------------------------- /src/directives/draggable/index.js: -------------------------------------------------------------------------------- 1 | import Draggable from './draggable'; 2 | import {Util} from '../../helper'; 3 | 4 | export default Util.register(Draggable, true); -------------------------------------------------------------------------------- /src/components/form/index.js: -------------------------------------------------------------------------------- 1 | import FormRow from './row'; 2 | import {Util} from '../../helper'; 3 | 4 | Util.register(FormRow); 5 | 6 | export { 7 | FormRow 8 | }; -------------------------------------------------------------------------------- /src/components/lightbox/index.js: -------------------------------------------------------------------------------- 1 | import Lightbox from './lightbox'; 2 | import {Util} from '../../helper'; 3 | 4 | Util.register(Lightbox); 5 | 6 | export default Lightbox; -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | VM 2 | ================ 3 | vm是本团队在工作中总结出的一套基于vue的移动端轻量级组件库，考虑团队和其他人使用的实际情况，实现的api调用和使用友好，form相关的都已实现双向 4 | ，且大量使用slot，提供开发者足够的拓展空间 5 | 6 | ### [例子演示&文档](//vmui.github.io) -------------------------------------------------------------------------------- /examples/src/doc/pages/layout/forward.md: -------------------------------------------------------------------------------- 1 | ## Forward 2 | 3 | ### 代码演示 4 | ```html 5 | 自动左浮动 6 | 7 | 自动右浮动 8 | ``` 9 | 10 | * 自带按钮前进组件（一般配合页面跳转使用） 11 | 12 | -------------------------------------------------------------------------------- /doc/badge.md: -------------------------------------------------------------------------------- 1 | Badge 2 | ==================== 3 | 消息小气泡组件 4 | 5 | 6 | ## Example 7 | 8 | ```html 9 | 10 | 12 11 | 12 | 13 | lala 14 | 15 | ``` -------------------------------------------------------------------------------- /src/components/layout/index.js: -------------------------------------------------------------------------------- 1 | import Box from './box'; 2 | import Row from './row'; 3 | import {Util} from '../../helper'; 4 | 5 | Util.register(Box); 6 | Util.register(Row); 7 | 8 | export { 9 | Box, 10 | Row 11 | }; -------------------------------------------------------------------------------- /src/components/tabs/index.js: -------------------------------------------------------------------------------- 1 | import Tabs from './tabs'; 2 | import TabsPane from './pane'; 3 | import {Util} from '../../helper'; 4 | 5 | Util.register(TabsPane); 6 | Util.register(Tabs); 7 | 8 | export { 9 | Tabs, 10 | TabsPane 11 | }; -------------------------------------------------------------------------------- /src/helper/index.js: -------------------------------------------------------------------------------- 1 | import Dom from './dom'; 2 | import Util from './util'; 3 | import Event from './event'; 4 | 5 | export default { 6 | Dom, 7 | Util, 8 | Event 9 | }; 10 | 11 | export { 12 | Dom, 13 | Util, 14 | Event 15 | }; -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ] 11 | } -------------------------------------------------------------------------------- /src/components/swiper/index.js: -------------------------------------------------------------------------------- 1 | import Swiper from './swiper'; 2 | import SwiperItem from './item'; 3 | import {Util} from '../../helper'; 4 | 5 | Util.register(Swiper); 6 | Util.register(SwiperItem); 7 | 8 | export { 9 | Swiper, 10 | SwiperItem 11 | }; -------------------------------------------------------------------------------- /examples/src/doc/doc.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Ajax from 'ajax'; 3 | import Framework from './framework'; 4 | import router from './router'; 5 | 6 | new Vue({ 7 | el: '#app', 8 | components: { 9 | Framework 10 | }, 11 | router: router 12 | }); -------------------------------------------------------------------------------- /src/components/popover/index.js: -------------------------------------------------------------------------------- 1 | import Popover from './popover'; 2 | import PopoverAction from './action'; 3 | import {Util} from '../../helper'; 4 | 5 | Util.register(Popover); 6 | Util.register(PopoverAction); 7 | 8 | export { 9 | Popover, 10 | PopoverAction 11 | }; -------------------------------------------------------------------------------- /src/components/swipeout/index.js: -------------------------------------------------------------------------------- 1 | import SwipeOut from './swipeout'; 2 | import SwipeOutAction from './action'; 3 | 4 | import {Util} from '../../helper'; 5 | 6 | Util.register(SwipeOut); 7 | Util.register(SwipeOutAction); 8 | 9 | export { 10 | SwipeOut, 11 | SwipeOutAction 12 | }; -------------------------------------------------------------------------------- /src/config.js: -------------------------------------------------------------------------------- 1 | import cfg from './cfg.default.js'; 2 | 3 | export default (config = {}) => { 4 | if (typeof config == 'object') { 5 | for (const key in config) { 6 | cfg[key] = config[key]; 7 | } 8 | } else { 9 | return cfg[config]; 10 | } 11 | }; -------------------------------------------------------------------------------- /src/components/actionsheet/index.js: -------------------------------------------------------------------------------- 1 | import ActionSheet from './actionsheet'; 2 | import ActionSheetItem from './item'; 3 | import {Util} from '../../helper'; 4 | 5 | Util.register(ActionSheet); 6 | Util.register(ActionSheetItem); 7 | 8 | export { 9 | ActionSheet, 10 | ActionSheetItem 11 | }; -------------------------------------------------------------------------------- /doc/box.md: -------------------------------------------------------------------------------- 1 | Box 2 | ============= 3 | 盒子组件，用于分块，通常和row组件 以及form的组件一起使用 4 | 5 | ### Slots 6 | 7 | * header 8 | * footer 9 | * default 10 | 11 | 该组件的header和footer内的内容使用了flex space-between布局 12 | 13 | ### Example 14 | 15 | ```html 16 | 17 | 123 18 | 456 19 | 20 | ``` -------------------------------------------------------------------------------- /examples/app.js: -------------------------------------------------------------------------------- 1 | const server = require('express')() 2 | 3 | server.get('*', (req, res) => { 4 | if (req.url == '/favicon.ico') { 5 | res.end(); 6 | return false; 7 | } 8 | 9 | res.end(require('fs').readFileSync(require('path').join(__dirname, '_build_', req.url), 'utf-8')); 10 | }); 11 | 12 | server.listen(9090) -------------------------------------------------------------------------------- /examples/src/doc/pages/layout/loading.md: -------------------------------------------------------------------------------- 1 | ## Loading 2 | 3 | ### 代码演示 4 | ```html 5 | 6 | ``` 7 | 8 | ### Props 9 | 属性 | 说明 | 类型 | 默认值 10 | -----|-----|-------|------ 11 | color | 设置loading色值，可设置公共配置 | String | - 12 | size | 设置内容大小 | Number, String | 20 13 | 14 | ### Config 15 | loading.color 16 | -------------------------------------------------------------------------------- /doc/forward.md: -------------------------------------------------------------------------------- 1 | Forward 2 | ============= 3 | forward组件封装了一个右箭头icon，用于避免开发者需要自己写icon的情况，另外还有个很特殊的地方，forward会自动识别当前环境来适应自己的位置。 4 | 5 | ### Example 6 | 7 | ```html 8 |
9 | 查看更多 10 | lalal 11 |
12 | 13 |
14 | lalal 15 | 查看更多 16 |
17 | ``` 18 | 19 | #### 你可以在任何点击跳转的地方使用该组件 -------------------------------------------------------------------------------- /src/components/picker/index.js: -------------------------------------------------------------------------------- 1 | import Picker from './picker'; 2 | import TimePicker from './time'; 3 | import DatePicker from './date'; 4 | import {Util} from '../../helper'; 5 | 6 | Util.register(Picker); 7 | Util.register(TimePicker); 8 | Util.register(DatePicker); 9 | 10 | export { 11 | Picker, 12 | TimePicker, 13 | DatePicker 14 | }; -------------------------------------------------------------------------------- /src/components/scroll/index.js: -------------------------------------------------------------------------------- 1 | import _Scroll from './scroll'; 2 | import _Pulldown2refresh from './pulldown2refresh'; 3 | import {Util} from '../../helper'; 4 | 5 | var Scroll = Util.register(_Scroll); 6 | var Pulldown2refresh = Util.register(_Pulldown2refresh); 7 | 8 | export default Scroll; 9 | export { 10 | Scroll, 11 | Pulldown2refresh 12 | }; -------------------------------------------------------------------------------- /src/components/checker/index.js: -------------------------------------------------------------------------------- 1 | import IconChecker from './icon'; 2 | import Checker from './checker' 3 | import CheckerGroup from './group'; 4 | import {Util} from '../../helper'; 5 | 6 | Util.register(IconChecker); 7 | Util.register(Checker); 8 | Util.register(CheckerGroup); 9 | 10 | export { 11 | IconChecker, 12 | Checker, 13 | CheckerGroup 14 | }; -------------------------------------------------------------------------------- /src/components/tabs/pane.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | -------------------------------------------------------------------------------- /src/components/toast/tick.js: -------------------------------------------------------------------------------- 1 | import Icon from '../icon'; 2 | import Config from '../../config'; 3 | 4 | export default { 5 | render (h) { 6 | return h( 7 | Icon, 8 | { 9 | props: { 10 | type: 'selected', 11 | color: '#009933', 12 | size: 25 13 | } 14 | } 15 | ); 16 | } 17 | }; -------------------------------------------------------------------------------- /doc/toast.md: -------------------------------------------------------------------------------- 1 | Toast 2 | ======== 3 | 该组件为单例组件 4 | 5 | * content 内容 6 | * time 显示时长，为false时，需手动调用close方法 7 | * useMask 是否使用黑色背景遮罩 8 | 9 | Example 10 | 11 | ```js 12 | Toast('12233', 4000, true); 13 | ``` 14 | 15 | ## Success 16 | 17 | ```js 18 | Toast.success('1233'); 19 | ``` 20 | 21 | ## Loading 22 | 23 | ```js 24 | Toast.loading('1233', false, true); 25 | 26 | setTimeout(() => { 27 | Toast.destroy(); 28 | }, 3000); 29 | ``` -------------------------------------------------------------------------------- /examples/src/example/components/topbar.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | -------------------------------------------------------------------------------- /examples/src/doc/pages/base/button.md: -------------------------------------------------------------------------------- 1 | ## Button 2 | 3 | ### 代码演示 4 | 5 | ```html 6 | button 7 | ``` 8 | 9 | ### Props 10 | 属性 | 说明 | 类型 | 默认值 11 | -----|-----|-------|------ 12 | type | 按钮类型，可选值为'large', 'normal', 'small', 'mini'或者不设 | string | primary 13 | size | 按钮大小，可选值为large、small | string | normal 14 | radius | 设置圆角值 | string、number | normal 15 | hollow | 是否空心 | boolean | false 16 | disabled | 设置禁用 | boolean | false -------------------------------------------------------------------------------- /examples/src/doc/pages/config.md: -------------------------------------------------------------------------------- 1 | ## 配置 2 | 3 | vm中提供了足够多的的配置项目供开发者灵活修改，其中包括大量的颜色配置，不同于其他组件库对于修改样式方面相对较为困难（比如只提供一种样式，或需要重新定义less相关文件） 4 | 5 | [查看原始配置](https://github.com/feather-components/vm/blob/master/src/cfg.default.js) 6 | 7 | ```js 8 | Vue.use(VM, { 9 | 'theme': '#ccc', //定义主题, 该配置对很多未定义颜色生效 10 | 'topbar.padding-top': isAnroid() ? '0px' : '22px' //此处可定义topbar使用时是否自动留出statusbar的height 11 | }); 12 | ``` 13 | 14 | 更多配置可自行尝试，vm的配置项还是很容易能看懂的。 -------------------------------------------------------------------------------- /doc/lightbox.md: -------------------------------------------------------------------------------- 1 | Lightbox 2 | ==================== 3 | 相册组件 4 | 5 | ## Example 6 | 7 | ```html 8 | 9 |
10 | 11 | 12 | 13 |
14 | ``` 15 | 16 | ```html 17 | 18 | 19 | ``` -------------------------------------------------------------------------------- /examples/src/doc/pages/layout/badge.md: -------------------------------------------------------------------------------- 1 | ## Badge 2 | 3 | ### 代码演示 4 | ```html 5 | 10 6 | 7 | 未读消息 8 | 9 | 10 10 | 11 | ``` 12 | 13 | ### Props 14 | 属性 | 说明 | 类型 | 默认值 15 | -----|-----|-------|------ 16 | color | 设置徽章颜色，可设置公共配置 | String | badge.color 17 | text | content | Number, String | - 18 | 19 | ### Config 20 | badge.color 21 | -------------------------------------------------------------------------------- /examples/src/doc/pages/forms/textarea.md: -------------------------------------------------------------------------------- 1 | ## Textarea 2 | 3 | ### 代码演示 4 | ```html 5 | 6 | ``` 7 | 8 | ### Props 9 | 属性 | 说明 | 类型 | 默认值 10 | -----|-----|-------|------ 11 | placeholder | 规定帮助用户填写输入字段的提示 | String | - 12 | readonly | 把输入字段设置为只读 | Boolean | false 13 | maxlength | 规定输入字段中的字符的最大长度 | Number | - 14 | autofocus | 规定输入字段在页面加载时是否获得焦点 | Boolean | false 15 | theme | 设置主题,可选参数（default，transparent，underline） | String | default 16 | 17 | ##### Textarea自动根据内容适配高度 -------------------------------------------------------------------------------- /examples/src/doc/pages/layout/page.md: -------------------------------------------------------------------------------- 1 | ## Page 2 | 3 | ### 代码演示 4 | 5 | ```html 6 | 7 | 10 | 页面内容主体 11 | 14 | 15 | ``` 16 | 17 | ### Slot 18 | 名称 | 说明 | Slot-Scpoe 19 | -----|-----|-------|------ 20 | header | 三层布局顶部位置 | - 21 | footer | 三层布局底部位置 | - 22 | 23 | ### Config 24 | page.background 25 | -------------------------------------------------------------------------------- /doc/mask.md: -------------------------------------------------------------------------------- 1 | Mask 2 | ============= 3 | 遮罩组件 4 | 5 | ```html 6 |
7 | 8 | lalala 9 | 10 |
11 | ``` 12 | 13 | ```js 14 | import {Mask, Overlay} from 'vm'; 15 | import Vue from 'vue'; 16 | 17 | Vue.use(Mask); 18 | 19 | new Vue({ 20 | el: "#app", 21 | components: { 22 | Overlay 23 | } 24 | }); 25 | ``` 26 | 27 | ### Props/Methods/Events 同Overlay -------------------------------------------------------------------------------- /doc/filter.md: -------------------------------------------------------------------------------- 1 | filter组件集合 2 | ====================== 3 | 筛选组件集合 4 | 5 | filter组件集合中包含了4个组件： 6 | 7 | * [单选filte](./single.md) 8 | * [多选filter（参数事件继承于单选）](./multiple.md) 9 | * [多级联动单选](./link.md) 10 | * [2级联动多选（参数事件继承于多级联动单选）](./link-multiple.md) 11 | 12 | ### 4个组件均以实现双向绑定，开发者可通过v-model进行数据绑定 13 | 14 | ```js 15 | import {Single, Link, Multiple, LinkMultiple} from 'vm/src/components/filter'; 16 | //or 17 | import {SingleFilter, LinkFilter, MultipleFilter, LinkMultipleFilter} from 'vm'; 18 | ``` 19 | -------------------------------------------------------------------------------- /doc/tabbar.md: -------------------------------------------------------------------------------- 1 | Tabbar 2 | ==================== 3 | tab切换组件 4 | 5 | ## Props 6 | 7 | * items: Object 一个对象 8 | * defaultLabel： 默认的label 9 | 10 | ## Example 11 | 12 | ```html 13 | 29 | ``` 30 | 31 | ## Events 32 | 33 | * to 34 | * switch -------------------------------------------------------------------------------- /src/mixins/model.js: -------------------------------------------------------------------------------- 1 | export default { 2 | props: { 3 | value: null 4 | }, 5 | 6 | data () { 7 | return { 8 | val: this.value 9 | }; 10 | }, 11 | 12 | watch: { 13 | val (v) { 14 | this.$emit('input', v); 15 | }, 16 | 17 | value (v) { 18 | this.setValue(v); 19 | } 20 | }, 21 | 22 | methods: { 23 | setValue (v) { 24 | this.val = v; 25 | } 26 | } 27 | }; -------------------------------------------------------------------------------- /doc/dateinput.md: -------------------------------------------------------------------------------- 1 | Dateinput 2 | ============= 3 | 日历输入框，此组件为textinput和datepicker的组合组件, 参数同datepicker 4 | 5 | ```html 6 |
7 | 8 |
9 | ``` 10 | 11 | ### Props 12 | 13 | * label: String 字段标题 14 | * value: String 可直接使用v-model对其进行双向绑定 15 | * minDate: String|Date 16 | * maxDate: String|Date 17 | * formatter: String， 格式化时间，如yyyy年mm月dd日，yyyy-mm-dd 18 | 19 | ### Slots 20 | 21 | * label 22 | 23 | ### Events 24 | 25 | * confirm -------------------------------------------------------------------------------- /doc/form.md: -------------------------------------------------------------------------------- 1 | form组件集合 2 | ================ 3 | form相关组件都是基于FormCell组件进行的封装，且可以通过v-model进行双向绑定，开发者也可以基于FormCell进行自己的组件扩展 4 | 5 | ### 目前form下已实现的组件： 6 | 7 | * [TextInput](./textinput.md) 8 | * [Select](./select.md) 9 | * [Radios](./radios.md) 10 | * [Checkboxes](./checkboxes.md) 11 | * [Images](./images.md) 12 | * [Cell](./formcell.md) 13 | * [DateInput](./dateinput.md) 14 | * [Switch](./switch.md) 15 | * [Textarea](./textarea.md) 16 | 17 | ```js 18 | import {TextInput, Select, Radios, ...} from 'vm/src/components/form'; 19 | ``` -------------------------------------------------------------------------------- /doc/row.md: -------------------------------------------------------------------------------- 1 | Row 2 | ============= 3 | row组件，通常和box组件一起使用，达到类似ios中 标签卡列表的效果， 所有的form的组件都继承于该组件 4 | 5 | ### Events 6 | 7 | * click 8 | 9 | ### Slots 10 | 11 | * icon 12 | * default 13 | 14 | 该组件的左侧会自动缩进12个px，开发者也可通过style自行修改，多个row组件写在一起时，会形成一个盒子结构 15 | 组件内的所有元素水平排列，并进行垂直居中 16 | 17 | ### Example 18 | 19 | ```html 20 |
21 | 1 22 | 2 23 | 3 24 |
25 | 26 | 27 | 1 28 | 2 29 | 3 30 | 31 | ``` -------------------------------------------------------------------------------- /doc/scroll.md: -------------------------------------------------------------------------------- 1 | scroll 2 | =========== 3 | scroll组件 4 | 5 | 6 | ## Props 7 | 8 | * scrollbars: Boolean 是否显示滚动条 9 | * axis: String x|y可选，指定滚动方向 10 | * ignores: String|Function|RexExp 判断哪些元素点击后无法滚动，String时为一个selector，RexExp则匹配元素的tagName(注意大小写) 11 | 12 | ## Example 13 | 14 | ```html 15 | 16 | xxxx 17 | 18 | ``` 19 | 20 | ## slots 21 | 22 | * header 23 | * footer 24 | 25 | ## Methods 26 | 27 | * refresh: 刷新当前scroll，内部元素结构或者高度等有调整时需手动触发 28 | * scrollTo(pos, time = 0): time不为0时，则不使用动画 -------------------------------------------------------------------------------- /examples/src/doc/pages/forms/switch.md: -------------------------------------------------------------------------------- 1 | ## Switch 2 | 3 | ### 代码演示 4 | ```html 5 | 6 | ``` 7 | ```js 8 | export default { 9 | data () { 10 | return { 11 | checked: false 12 | } 13 | } 14 | } 15 | ``` 16 | 17 | ### Props 18 | 属性 | 说明 | 类型 | 默认值 19 | -----|-----|-------|------ 20 | disabled | 设置或返回 switch 是否应被禁用 | Boolean | false 21 | checked | 设置或返回 switch 是否应被选中 | Boolean | false 22 | color | 设置switch颜色 | Boolean | false 23 | 24 | ### 全局配置 25 | Vmui.config => switch.color -------------------------------------------------------------------------------- /doc/overlay.md: -------------------------------------------------------------------------------- 1 | Overlay 2 | ============= 3 | 弹层基类组件 4 | 5 | ## Props 6 | 7 | * fx: Boolean 是否使用动画 8 | * transition: String 动画名，默认为空，动画则和position配合产生效果 9 | * position: String 组件出现的位置和动画效果 可选 center|left|right|top|bottom 默认为center 10 | * visible: Boolean 是否可见 11 | 12 | ## Methods 13 | 14 | * open 15 | * close 16 | * destroy 17 | 18 | ## Events 19 | 20 | * open 21 | * close 22 | * destory 23 | 24 | ```html 25 | 26 | ``` 27 | 28 | ```js 29 | import {Overlay} from 'vm'; 30 | ``` -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "4" 4 | 5 | before_script: 6 | - npm install 7 | 8 | script: 9 | - npm run example 10 | 11 | after_script: 12 | - cd ./_build_ 13 | - git init 14 | - git config user.name "jsyczhanghao" 15 | - git config user.email "jsyczhanghao@sina.com" 16 | - git add -A 17 | - git commit -m "Update docs" 18 | - git push --force --quiet "https://${GH_TOKEN}@${GH_REF}" master:master 19 | 20 | env: 21 | 22 | global: 23 | - GH_REF: github.com/vmui/vmui.github.io.git 24 | - NODE_ENV: ci 25 | -------------------------------------------------------------------------------- /examples/src/doc/pages/layout/segment.md: -------------------------------------------------------------------------------- 1 | ## Segment 2 | 3 | ### 代码演示 4 | 5 | ```html 6 | 7 | ``` 8 | 9 | ### Props 10 | 属性 | 说明 | 类型 | 默认值 11 | -----|-----|-------|------ 12 | options | segment数据配置 | Array | [] 13 | defaultIndex | 默认索引 | Number | 0 14 | activeColor | 当前色值，可设置vmui公共配置 | String | segment.active-color 15 | color | 色值，可设置vmui公共配置 | String | segment.color 16 | 17 | 18 | ### Events 19 | 事件名称|说明|回调参数 20 | ---|----|---- 21 | switch| 切换时触发 | index:Number, data?:Any -------------------------------------------------------------------------------- /examples/src/doc/pages/layout/tabs.md: -------------------------------------------------------------------------------- 1 | ## Tabs 2 | 3 | ### 代码演示 4 | 5 | ```html 6 | 7 | 推荐 8 | 头条 9 | 10 | ``` 11 | 12 | ### Props 13 | 属性 | 说明 | 类型 | 默认值 14 | -----|-----|-------|------ 15 | defaultIndex | 默认选中索引 | Number | 0 16 | headersStyle | 自定义tabs的样式 | String,Object | 17 | headers | tabs数据配置 | Array | [] 18 | headerActiveColor | 色值，可使用vmui公共配置 | String | tabs.header-active-color 19 | 20 | ### Config 21 | tabs.header-active-color -------------------------------------------------------------------------------- /examples/src/example/components/forward.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 15 | 16 | -------------------------------------------------------------------------------- /examples/src/example/components/tabs.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | -------------------------------------------------------------------------------- /examples/src/doc/pages/forms/input.md: -------------------------------------------------------------------------------- 1 | ## Input 2 | 3 | ### 代码演示 4 | ```html 5 | 6 | ``` 7 | 8 | ### Props 9 | 属性 | 说明 | 类型 | 默认值 10 | -----|-----|-------|------ 11 | placeholder | 规定帮助用户填写输入字段的提示 | String | - 12 | readonly | 把输入字段设置为只读 | Boolean | false 13 | clearable | 是否显示清楚按钮 | Boolean | false 14 | maxlength | 规定输入字段中的字符的最大长度 | Number | - 15 | autofocus | 规定输入字段在页面加载时是否获得焦点 | Boolean | false 16 | type | 规定 input 元素的类型 | String | text 17 | theme | 设置主题,可选参数（default，transparent，underline） | String | default 18 | 19 | ### 全局配置 20 | Vmui.config => input.pre-themes 21 | -------------------------------------------------------------------------------- /examples/src/example/components/segment.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 15 | 16 | -------------------------------------------------------------------------------- /examples/src/example/components/textarea.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | -------------------------------------------------------------------------------- /doc/segment.md: -------------------------------------------------------------------------------- 1 | Segment 2 | ==================== 3 | segment control组件， 该组件的选中项背景色继承于topbar 4 | 5 | ## Props 6 | 7 | * items: Array 8 | * color: String 未选中时的颜色 9 | * bgColor: String 未选中时的背景颜色 10 | 11 | ## Methods 12 | 13 | * to(index): 切换 14 | 15 | ## Events 16 | 17 | * to(index, item) 18 | * switch(index, item) 19 | 20 | ## Configs 21 | 22 | * color: 全局设置 23 | * bgColor: 全局设置背景色 24 | 25 | 26 | ```html 27 | 28 | 34 | ``` -------------------------------------------------------------------------------- /examples/src/doc/pages/layout/filter.md: -------------------------------------------------------------------------------- 1 | ## Filter 2 | 3 | ### 代码演示 4 | 5 | ```html 6 | 7 | 8 | 9 | ``` 10 | 11 | ### Props 12 | 属性 | 说明 | 类型 | 默认值 13 | -----|-----|-------|------ 14 | position | 显示位置 | String | - 15 | visible | 显示隐藏 | Boolean | false 16 | 17 | ### Events 18 | 事件名称|说明|回调参数 19 | ---|----|---- 20 | update:visible | 遮罩变更时触发 | Boolean 21 | show | 遮罩显示时触发 | - 22 | hide | 遮罩隐藏时触发 | - -------------------------------------------------------------------------------- /examples/src/doc/pages/layout/toast.md: -------------------------------------------------------------------------------- 1 | ## Toast 2 | 3 | ### 代码演示 4 | 5 | ```html 6 | import {Toast} from 'vmui' 7 | 8 | Toast('提示语'); 9 | 10 | Toast({ message: '操作成功操作成功操作成功
换行' }) 11 | ``` 12 | 13 | ### 全局方法 14 | ##### 组件提供了一些静态方法，使用方式和参数如下： 15 | 16 | ```html 17 | this.$toast.success(content); 18 | this.$toast.loading(content); 19 | this.$toast.destroy(); 20 | ``` 21 | 22 | ### Props 23 | 属性 | 说明 | 类型 | 默认值 24 | -----|-----|-------|------ 25 | type | 提示icon (可选参数[success,loading]) | String | - 26 | message | 提示内容 | String | - 27 | masker | 是否显示遮罩层 （可选参数） | Boolean | false 28 | -------------------------------------------------------------------------------- /examples/src/doc/pages/layout/topbar.md: -------------------------------------------------------------------------------- 1 | ## TopBar 2 | 3 | ### 代码演示 4 | 5 | ```html 6 | 页面标题 7 | 8 | 9 | 自定义右边按钮 10 |
11 | 添加 12 |
13 | 14 | ``` 15 | 16 | ### Slot 17 | 名称 | 说明 | Slot-Scpoe 18 | -----|-----|-------|------ 19 | left | 左边按钮，默认执行history.back() | - 20 | right | 右边按钮 | - 21 | 22 | ### Props 23 | 属性 | 说明 | 类型 | 默认值 24 | -----|-----|-------|------ 25 | leftEnabled | 是否显示左边区域 | Boolean | true 26 | rightEnabled | 是否显示右边区域 | Boolean | true 27 | -------------------------------------------------------------------------------- /doc/switch.md: -------------------------------------------------------------------------------- 1 | Switch 2 | ============= 3 | 切换按钮 4 | 5 | ```html 6 |
7 | 8 |
9 | ``` 10 | 11 | ```js 12 | import Vue from 'vue'; 13 | import {Switch as vmSwitch} from 'vm'; 14 | 15 | new Vue({ 16 | el: '#app', 17 | data:{ 18 | value: true 19 | }, 20 | components:{ 21 |     vmSwitch     22 |    } 23 | }); 24 | ``` 25 | 26 | 27 | ### Props 28 | 29 | * label: String 字段标题 30 | * value: String 可直接使用v-model对其进行双向绑定 31 | 32 | ### Slots 33 | 34 | * label 35 | 36 | 37 | ### Configs 38 | 39 | * color 40 | -------------------------------------------------------------------------------- /doc/uploader.md: -------------------------------------------------------------------------------- 1 | Uploader 2 | ============== 3 | 上传组件 4 | 5 | ## Props 6 | 7 | * multiple: Boolean 是否多选文件 8 | * url: String 上传地址 9 | * beforeUploadProcessor: Function 上传前的处理 10 | 11 | ```js 12 | beforeUploadProcessor(files, next){ 13 | //处理files，并回传回来 14 | next(files) 15 | } 16 | ``` 17 | 18 | * usePack: Boolean 是否打包上传，默认为true，如果为false，则文件是串行上传 19 | * canUpload: Function 是否上传的判断函数 20 | * accept: 接受的后缀 默认为* 21 | 22 | ## Event 23 | 24 | * select 25 | * upload:start 26 | * upload:complete 27 | * upload:error 28 | * upload:progress 29 | * upload:reject 30 | 31 | ## Slots 32 | 33 | * default： 默认是一个icon -------------------------------------------------------------------------------- /doc/topbar.md: -------------------------------------------------------------------------------- 1 | Topbar 2 | ============== 3 | 指定工具栏 4 | 5 | ## Options 6 | 7 | * leftEnabled: Boolean 左边可用，默认会显示返回按钮，可通过对left slot的控制重写 8 | * rightEnabled: Boolean 右边可用 9 | * color: String 指定标题的字体颜色 10 | * bgColor: String 指定topbar的背景颜色 11 | 12 | ## Slots 13 | 14 | * left 左边 15 | * right 右边区域 16 | 17 | ## Configs 18 | 19 | * topFixed ：为控制ios和android屏幕top不一致问题 20 | 21 | ```js 22 | import {Topbar} from 'vm'; 23 | 24 | if($.os.ios){ 25 | //如果是苹果系统，则距离顶部10px 26 | TopBar.config('topFixed', '10px'); 27 | } 28 | ``` 29 | 30 | * bgColor: 背景色, 设置该值会对其他一些组件产生影响，比如search 31 | * color: 文字颜色， 32 | * borderBottom: 底部border -------------------------------------------------------------------------------- /examples/src/doc/pages/layout/scroll.md: -------------------------------------------------------------------------------- 1 | ## Scroll 2 | 3 | ### 代码演示 4 | 5 | ```html 6 | 默认竖向滚动 7 | 横向滚动 8 | ``` 9 | 10 | ### Slots 11 | 名称 | 说明 | Slot-Scpoe 12 | -----|-----|-------| 13 | header | 固定在滚动顶部位置|- 14 | footer | 固定在滚动底部位置|- 15 | 16 | 17 | ### Props 18 | 属性 | 说明 | 类型 | 默认值 19 | -----|-----|-------|------ 20 | scrollbars | 设置是否显示滚轴 | Boolean | false 21 | axis | 设置横向或纵向滚动，可选参数x，y| String | y 22 | disabled | 禁止触发滚动 | Boolean | false 23 | 24 | 25 | ### Events 26 | 事件名称|说明|回调参数 27 | ---|----|---- 28 | scrolling| 正在滚动时触发 | Event 29 | draging| 移动时触发 | Pos -------------------------------------------------------------------------------- /examples/src/example/directives/badge.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | -------------------------------------------------------------------------------- /src/helper/event.js: -------------------------------------------------------------------------------- 1 | export default { 2 | on (element, event, callback, options) { 3 | event.split(' ').forEach((event) => { 4 | element.addEventListener(event, callback, options); 5 | }); 6 | }, 7 | 8 | off (element, event, callback) { 9 | element.removeEventListener(event, callback); 10 | }, 11 | 12 | trigger (element, event, data = [], bubbles = false) { 13 | var evt = document.createEvent('HTMLEvents'); 14 | 15 | evt.initEvent(event, bubbles, true); 16 | evt.data = data; 17 | return !element.dispatchEvent(evt); 18 | } 19 | }; -------------------------------------------------------------------------------- /examples/src/doc/pages/layout/popup.md: -------------------------------------------------------------------------------- 1 | ## Popup 2 | 3 | ### 代码演示 4 | 5 | ```html 6 | 7 |
从左边出现
8 | 9 | 10 | 11 |
在中间出现
12 | 13 | ``` 14 | 15 | ### Props 16 | 属性 | 说明 | 类型 | 默认值 17 | -----|-----|-------|------ 18 | position | 显示位置 | String | - 19 | visible | 显示隐藏 | Boolean | false 20 | 21 | ### Events 22 | 事件名称|说明|回调参数 23 | ---|----|---- 24 | update:visible | 遮罩变更时触发 | Boolean 25 | show | 遮罩显示时触发 | - 26 | hide | 遮罩隐藏时触发 | - -------------------------------------------------------------------------------- /doc/pulldown2refresh.md: -------------------------------------------------------------------------------- 1 | pulldown2refresh 2 | =========== 3 | 该组件继承于scroll组件，主要用于下拉刷新数据的一些展示需求，该组件本身只是展示了下拉的效果，并不会真正请求，需开发者自行使用 4 | 5 | 6 | ## Methods 7 | 8 | * refresh 9 | * scrollTo 10 | * recover 11 | 12 | ## Slots 13 | 14 | * pulldown-msg： 当正在下拉时显示的内容 15 | * pullleave-msg：当拖动到刷新阈值时显示的内容 16 | * refresh-msg：刷新时显示的内容 17 | 18 | ## Events 19 | 20 | * refresh(recover): 当刷新时触发的时间，这个时候开发者需要自行去请求数据，recover参数为一个函数，请求数据返回后调用，可将组件还原回原先的位置 21 | 22 | ```html 23 | 24 | 25 | 26 | ``` 27 | 28 | ```js 29 | ... 30 | methods: { 31 | onRefresh(recover){ 32 | $.ajax(....).then(recover) 33 | } 34 | } 35 | ``` -------------------------------------------------------------------------------- /doc/textarea.md: -------------------------------------------------------------------------------- 1 | Textarea 2 | ================== 3 | 多行文本输入框 4 | 5 | ```html 6 |
7 | 8 | 。。。。。这里是备注 9 | 10 |
11 | ``` 12 | 13 | 14 | ### Props 15 | 16 | * label: String text标题 17 | * tips：右上角小tips，可以用来做一些字数限制之类的提示 18 | * placeholder: String 19 | * readonly: Boolean 是否为多行文本，默认单行文本 20 | * value: String 可直接使用v-model对其进行双向绑定 21 | 22 | ### Events 23 | 24 | * focus: 当输入框聚焦时触发 25 | * blur: 当输入框失焦时触发 26 | * clear: 清除当前input内的内容 27 | 28 | ### Slots 29 | 30 | * label 31 | * tips 32 | * default 33 | * icon: 多行文本自动采用垂直布局，但是为了满足部分多行文本右侧有时候会出现小icon的情况，可使用该slot实现 -------------------------------------------------------------------------------- /examples/src/doc/pages/layout/image.md: -------------------------------------------------------------------------------- 1 | ## Image 2 | 3 | ### 代码演示 4 | * 图片异步加载 5 | ```html 6 | 7 | 8 | 9 | ``` 10 | 11 | ```js 12 | export default { 13 | data () { 14 | return { 15 | url: '', 16 | src: 'http://xx.com/96d8cf0375f64c24a819d50ae190b51820170601175516.jpeg' 17 | }; 18 | }, 19 | mounted () { 20 | setTimeout(() => { 21 | this.url = this.src; 22 | }, 1000); 23 | } 24 | }; 25 | ``` 26 | 27 | ### Props 28 | 属性 | 说明 | 类型 | 默认值 29 | -----|-----|-------|------ 30 | src | 图片地址 | String | - 31 | -------------------------------------------------------------------------------- /doc/dropdown.md: -------------------------------------------------------------------------------- 1 | Dropdown 2 | ==================== 3 | 下拉组件，该组件仅做按钮及下拉功能，开发者可通过重写slot达到下拉组合的效果 4 | 5 | ## Props 6 | 7 | * label: String 按钮显示的文字 8 | 9 | ## Example 10 | 11 | ```html 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | ``` 20 | 21 | ## Events 22 | 23 | * open 24 | * close 25 | 26 | ## Config 27 | 28 | * labelColor: 文字颜色 29 | * labelHighColor: 被选中时的颜色 30 | 31 | ```js 32 | Dropdown.config({ 33 | labelColor: '...', 34 | labelHighColor: '...' 35 | }); 36 | ``` -------------------------------------------------------------------------------- /src/components/masker/masker.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 25 | 26 | -------------------------------------------------------------------------------- /examples/src/doc/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | vm~，轻量vue组件库 5 | 6 | 7 | 9 | 18 | 19 | 20 | 21 |
22 | 23 |
24 | 25 | -------------------------------------------------------------------------------- /doc/formcell.md: -------------------------------------------------------------------------------- 1 | FormCell 2 | ============== 3 | form相关组件的容器组件，开发者如果有需求，可自己基于formcell进行定制开发 4 | 5 | ```html 6 | 7 | 8 | 9 | ``` 10 | 11 | ### Props 12 | 13 | * label: 字段的label 14 | * verticalLayout: 是否使用垂直布局，默认为垂直布局 15 | * tips: 右上方的小文字提示，注：此属性只有在为垂直布局时生效 16 | 17 | ### Slots 18 | 19 | * label：label的slot，进行深度定制 20 | 21 | ```html 22 | 23 | 30 | 31 | 32 | 33 | ``` 34 | 35 | * tips: 同label的slot，进行深度定制 -------------------------------------------------------------------------------- /examples/src/example/components/input.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | -------------------------------------------------------------------------------- /doc/multiple.md: -------------------------------------------------------------------------------- 1 | MultipleFilter 2 | ====================== 3 | 1级多选 4 | 5 | ### Props 6 | 7 | * source: Array 数据源，数据源的要求必须是对象数组，且对象必须有value属性 8 | * itemFormatter: Function 格式化输出的每一项的显示文字 9 | * size: Number， 默认为-1，表示可无限选择 10 | * canBeSelect: Function，在点击筛选项时，会调用该函数判断当前是否可以继续进行选择，默认小于size都可以选择 11 | 12 | ```html 13 | 17 | 18 | ``` 19 | 20 | ```js 21 | import {MultipleFilter} from 'vm'; 22 | //new vue 23 | ``` 24 | 25 | * disabled: Boolean 是否禁用 26 | * selectedClassName: String 选中后的class 27 | 28 | ### Events 29 | 30 | * change: 当值改变时触发 31 | * reject: 拒绝选择操作时触发 32 | 33 | 34 | -------------------------------------------------------------------------------- /doc/slider.md: -------------------------------------------------------------------------------- 1 | Slider 2 | ============= 3 | 滑动组件 4 | 5 | ```html 6 |
7 | 8 | 9 | 向右滑 10 | 11 | 12 | 13 | 14 | 15 | 16 | 向左滑 17 | 18 | 19 |
20 | ``` 21 | 22 | ```js 23 | import Vue from 'vue'; 24 | import {Slider, SliderItem} from 'vm'; 25 | 26 | new Vue({ 27 | el: '#app', 28 | components:{ 29 | Slider, 30 | SliderItem 31 | } 32 | }); 33 | ``` 34 | 35 | 36 | ### Events 37 | 38 | switch(to, from): 每次正常执行滑动行为后执行 39 | switch:complete(to)：切换动画结束后 -------------------------------------------------------------------------------- /src/components/modal/index.js: -------------------------------------------------------------------------------- 1 | import Modal from './modal'; 2 | import {Util} from '../../helper'; 3 | 4 | function create (message, options = {}) { 5 | options.message = message; 6 | 7 | let instance = Util.factory(Modal, options); 8 | instance.$on('hide', () => { 9 | instance.destroy(); 10 | instance = null; 11 | }); 12 | instance.show(); 13 | 14 | return instance; 15 | } 16 | 17 | export default Util.register(Modal, false, (Vue) => { 18 | Vue.prototype.$alert = create; 19 | Vue.prototype.$confirm = (message, options = {}) => { 20 | return create( 21 | message, 22 | { 23 | 'cancelButton': '取消', 24 | ...options 25 | } 26 | ); 27 | }; 28 | }); -------------------------------------------------------------------------------- /src/components/swiper/item.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 29 | 30 | -------------------------------------------------------------------------------- /src/components/image/_.js: -------------------------------------------------------------------------------- 1 | import {Util} from '../../helper'; 2 | 3 | let _; 4 | 5 | export default { 6 | on (instance) { 7 | if (!_) { 8 | _ = {}; 9 | 10 | Util.observer(instance.$root.$el, { 11 | childList: true, 12 | attributes: true, 13 | subtree: true 14 | }, Util.debounce(() => { 15 | for (let i in _) { 16 | _[i].try2load(); 17 | } 18 | }, 1000)); 19 | } 20 | 21 | if (!instance._$id) { 22 | instance._$id = Math.random(); 23 | } 24 | 25 | _[instance._$id] = instance; 26 | }, 27 | 28 | off (instance) { 29 | delete _[instance._$id]; 30 | } 31 | }; -------------------------------------------------------------------------------- /doc/page.md: -------------------------------------------------------------------------------- 1 | Page 2 | ============= 3 | PageView组件是overlay组件的一个派生，配合scroll和2个slot可很好的处理页面布局时，碰到的一些高度，滑入滑出动画问题 4 | 5 | ```html 6 |
7 | 8 | 标题 9 | 10 | 自适应高度区域 11 | 12 |
footer
13 | 14 |
15 | ``` 16 | 17 | ```js 18 | import {Page, Topbar, Scroll} from 'vm'; 19 | 20 | 21 | new Vue({ 22 | el: "#app", 23 | components: { 24 | Page, 25 | Topbar, 26 | Scroll 27 | } 28 | }); 29 | ``` 30 | 31 | ## Props/Events 同Overlay 32 | 33 | ## Slots 34 | 35 | * header：顶部区域 36 | * footer: 底部区域 37 | 38 | ## Methods 39 | 40 | * open 41 | * close 42 | 43 | ```js 44 | this.$refs.page.open(); 45 | ``` -------------------------------------------------------------------------------- /examples/src/example/components/page.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 20 | 21 | -------------------------------------------------------------------------------- /examples/src/example/components/badge.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | -------------------------------------------------------------------------------- /examples/src/example/components/switch.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | -------------------------------------------------------------------------------- /examples/src/example/components/button.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 20 | 21 | -------------------------------------------------------------------------------- /examples/src/example/components/loading.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 25 | 26 | -------------------------------------------------------------------------------- /doc/link-multiple.md: -------------------------------------------------------------------------------- 1 | LinkMultipleFilter 2 | ==================== 3 | 2级联动多选 4 | 5 | ### Example 6 | 7 | ```js 8 | import {LinkMultipleFilter} from 'vm'; 9 | ``` 10 | 11 | ### Props 12 | 同link 13 | 14 | * source: Array|Object|String 为string则为远程请求， 如果为数组,且第一项为string，则同样表示为远程请求，如果是Object，需要通过dateFormatter进行格式化转换为数组， 15 | * params: Object 请求时额外带的参数 16 | * names: Array 请求时，每一级的id参数名，如果为一个，则始终使用该值 17 | * dataFormatter: Function 进行数据的格式化，如果通过ajax回来的数据中不存在value属性，可通过该函数格式化下 18 | * size：Number 一共可以选择多少个二季选项 19 | * perSize: Number 每一个一级可以选择几个二级选项 20 | 21 | ```html 22 | 23 | ``` 24 | 25 | ### Events 26 | 27 | * paths:change： 当点击路径改变时触发 28 | * xhr:success: 请求成功返回后触发 29 | * filter:render: 每一级渲染时触发 30 | * change: 当值改变时触发 31 | * reject: 拒绝选择操作时触发 32 | -------------------------------------------------------------------------------- /doc/button.md: -------------------------------------------------------------------------------- 1 | Button 2 | ==================== 3 | 按钮 4 | 5 | ## Props 6 | 7 | * type: String 按钮类型，可选main|drak|success 8 | * small: Boolean 是否使用小按钮 9 | * border: Boolean 使用空心按钮 10 | * disabled: Boolean 是否禁用 11 | * radius: Number 默认圆角的radius值 12 | 13 | ## Example 14 | 15 | ```html 16 | 提交 17 | ``` 18 | 19 | ```js 20 | import {Button} from 'vm'; 21 | 22 | Button.config('radius', 20); //指定所有的圆角button的radius都是20 23 | 24 | new Vue({ 25 | el: '#app', 26 | components: { 27 | Btn: Button 28 | } 29 | }); 30 | ``` 31 | 32 | ## Config 33 | 34 | * radius: 设置全局按钮的radius值 35 | * colors: 设置颜色风格，对应props里的type值，默认设置如下： 36 | 37 | ```js 38 | Button.config('colors', { 39 | main: 'rgb(249, 104, 84)', 40 | success: 'rgb(98, 129, 194)', 41 | drak: '#3B4263' 42 | }); 43 | ``` -------------------------------------------------------------------------------- /src/components/popover/action.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 21 | 22 | -------------------------------------------------------------------------------- /src/components/popup/popup.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /doc/datepicker.md: -------------------------------------------------------------------------------- 1 | Datepicker 2 | ==================== 3 | 时间选择器 4 | 5 | #### 注：该插件是单独的日期选择器，不属于form，如需dateinput，点击查看文档[dateinput.md](./dateinput.md) 6 | 7 | ### Example 8 | 9 | ```js 10 | import {Datepicker} from 'vm'; 11 | ``` 12 | 13 | ### Props 14 | 15 | * formatter: 日期格式，默认：yyyy/mm/dd，其他格式：‘yyyy-mm-dd’，‘yy-mm-dd’，‘yy/mm/dd'’ 16 | * minDate: 最小日期，类型为字符串或者Date类型 17 | * maxDate: 最大日期 18 | * visible: 是否显示，默认显示 19 | * value: 默认值，默认值的格式必须同formatter的格式，传递时使用v-model可进行双向绑定 20 | 21 | ```html 22 | 26 | ``` 27 | #### 注：上面可使用v-model进行父子元素的双向数据绑定，iosselect对此作了相关处理 28 | 29 | ### Methods 30 | 31 | 同overlay(open, close, destroy) 32 | 33 | ### Events 34 | 35 | * confirm(date)： 点击确定时调用，此时会触发input事件（双向绑定）； 36 | * close: 关闭 -------------------------------------------------------------------------------- /examples/src/doc/pages/layout/actionsheet.md: -------------------------------------------------------------------------------- 1 | ## ActionSheet 2 | 3 | ### 代码演示 4 | 5 | ```html 6 | 7 | 呵呵 8 | 不能用 9 | 新增 10 | 删除 11 | 12 | ``` 13 | 14 | ### Slots 15 | 名称 | 说明 | Slot-Scpoe 16 | -----|-----|-------|------ 17 | cancel | 可自定义取消按钮 | 取消 18 | 19 | ### Props 20 | 属性 | 说明 | 类型 | 默认值 21 | -----|-----|-------|------ 22 | cancelDisabled | 是否隐藏取消按钮 | Boolean | false 23 | actions | actions数据，如果设置则不需要手动构造actionsheet-item节点 | array\ | null 24 | 25 | ### ActionSheetItem 26 | 27 | 属性 | 说明 | 类型 | 默认值 28 | -----|-----|-------|------ 29 | extras | 描述文字 | String | - 30 | disabled | 是否可操作 | Boolean | false -------------------------------------------------------------------------------- /src/directives/badge/badge.js: -------------------------------------------------------------------------------- 1 | import Badge from '../../components/badge'; 2 | import {Util, Dom} from '../../helper'; 3 | 4 | export default { 5 | bind (element, data, VNode) { 6 | let instance = element.$$badge = Util.factory(Badge, { 7 | text: data.value.text || data.value, 8 | color: data.value.color 9 | }, element); 10 | 11 | let el = instance.$el; 12 | 13 | if (!/fixed|absolute/.test(Dom.css(element, 'position'))) { 14 | Dom.css(element, 'position', 'relative'); 15 | } 16 | 17 | Dom.css(el, { 18 | position: 'absolute', 19 | top: 0, 20 | right: 0, 21 | transform: 'translate(50%, -50%) scale(0.5)' 22 | }); 23 | }, 24 | 25 | update (element, data) { 26 | element.$$badge.setText(data.value); 27 | }, 28 | 29 | name: 'badge', 30 | 31 | Component: Badge 32 | }; -------------------------------------------------------------------------------- /examples/src/doc/pages/layout/modal.md: -------------------------------------------------------------------------------- 1 | ## Alert 2 | 3 | ### 代码演示 4 | 5 | ```html 6 | import {Alert} from 'vmui'; 7 | 8 | Alert('hello，我是alert'); 9 | ``` 10 | 11 | ### 全局方法 12 | ##### 组件已挂载Vue，使用方式和参数如下： 13 | ```js 14 | this.$alert('hello，我是alert'); 15 | 16 | var $confirm = this.$confirm('我是confirm，请点击确定', { 17 | buttonClick2hide: false 18 | }); 19 | $confirm.$on('cancel', () => { 20 | this.$confirm('确定取消吗？').$on('confirm', () => { 21 | $confirm.destroy(); 22 | }); 23 | }).$on('confirm', () => { 24 | this.$alert('你点击了确定'); 25 | $confirm.destroy(); 26 | }); 27 | ``` 28 | 29 | ### Props 30 | 属性 | 说明 | 类型 | 默认值 31 | -----|-----|-------|------ 32 | title | 提示文字标题 | String | - 33 | message | 提示信息 | String | - 34 | confirmButton | 确认按钮文字 | String | 确定 35 | cancelButton | 取消按钮文字 | String | - 36 | 37 | 38 | ### Events 39 | 事件名称|说明|回调参数 40 | ---|----|---- 41 | confirm|点击确认触发|- 42 | cancel|点击取消触发|- -------------------------------------------------------------------------------- /examples/src/doc/pages/use.md: -------------------------------------------------------------------------------- 1 | ## 快速上手 2 | 3 | ### 安装 4 | 5 | 使用 npm 或者 yarn 进行安装 6 | 7 | ```shell 8 | npm install github:feather-components/vm --save 9 | yarn add github:feather-components/vm --save 10 | ``` 11 | 12 | ### 代码中使用 13 | 14 | 入口文件 15 | 16 | ```js 17 | //入口文件 18 | import Vue from 'vue'; 19 | import VM from 'vmui'; 20 | 21 | Vue.use(VM, /*{ 22 | 组件库配置 23 | }*/); 24 | ``` 25 | 26 | 在.vue文件中引用组件时均以 vm- 开头引用组件 27 | 28 | ```html 29 | 30 | 34 | ``` 35 | 36 | 如果要单独引用，export出来的组件名都以驼峰形式定义。 37 | **推荐使用vm-的方式直接使用** 38 | 39 | ```js 40 | import {Scroll, Swiper, SwiperItem, List, Page} from 'vmui'; 41 | 42 | export default { 43 | components: { 44 | Scroll 45 | } 46 | }; 47 | ``` 48 | 49 | 指令使用方式 50 | 51 | ```html 52 |
53 | ``` 54 | ### [VM初始化配置](#/pages/config) -------------------------------------------------------------------------------- /src/components/layout/box.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 32 | 33 | -------------------------------------------------------------------------------- /examples/src/doc/pages/layout/swiper.md: -------------------------------------------------------------------------------- 1 | ## Swiper 2 | 3 | ### 代码演示 4 | 5 | ```html 6 | 7 | 8 | 向右滑 9 | 10 | 11 | 12 | 内容 13 | 14 | 15 | 16 | 向左滑 17 | 18 | 19 | ``` 20 | 21 | ### Props 22 | 属性 | 说明 | 类型 | 默认值 23 | -----|-----|-------|------ 24 | axis | 设置横向或纵向滚动，可选参数x，y| String | x 25 | defaultIndex | 默认索引 | Boolean | 0 26 | autoplay | 自动开启滚动 | Boolean | true 27 | interval | 滚动时间（毫秒） | Number | 5000 28 | indicatorColor | 色值，可设置vmui公共配置 | String | swiper.indicator-color 29 | indicatorActiveColor | 当前色值，可设置vmui公共配置 | String | swiper.indicator-active-color 30 | 31 | 32 | ### Events 33 | 事件名称|说明|回调参数 34 | ---|----|---- 35 | switch| 切换时触发 | index:Number, oldIndex:Number 36 | draging| 移动时触发 | Event 37 | 38 | ### Config 39 | swiper.indicator-color 40 | swiper.indicator-active-color -------------------------------------------------------------------------------- /src/components/icon/iconfont.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "vm-iconfont"; 3 | src: url('iconfont.ttf?t=1512638317385') format('truetype'); 4 | } 5 | 6 | .vm-iconfont { 7 | display: inline-block; 8 | font-family: "vm-iconfont" !important; 9 | font-style: normal; 10 | -webkit-font-smoothing: antialiased; 11 | -moz-osx-font-smoothing: grayscale; 12 | } 13 | 14 | .vm-icon-down:before { 15 | content: "\e68a"; 16 | } 17 | 18 | .vm-icon-search:before { 19 | content: "\e68b"; 20 | } 21 | 22 | .vm-icon-selected:before { 23 | content: "\e68c"; 24 | } 25 | 26 | .vm-icon-success:before { 27 | content: "\e68d"; 28 | } 29 | 30 | .vm-icon-unsuccess:before { 31 | content: "\e68e"; 32 | } 33 | 34 | .vm-icon-close:before { 35 | content: "\e699"; 36 | } 37 | 38 | .vm-icon-right:before { 39 | content: "\e69c"; 40 | } 41 | 42 | .vm-icon-left:before { 43 | content: "\e69d"; 44 | } 45 | 46 | .vm-icon-up:before { 47 | content: "\e69e"; 48 | } -------------------------------------------------------------------------------- /doc/images.md: -------------------------------------------------------------------------------- 1 | Images 2 | ============= 3 | 表单图片上传组件 4 | 5 | ```html 6 |
7 | 8 |
9 | ``` 10 | 11 | ```js 12 | import Vue from 'vue'; 13 | import {Images} from 'vm'; 14 | 15 | new Vue({ 16 | el: '#app', 17 | data:{ 18 | images: [] 19 | }, 20 | watch: { 21 | images(){ 22 | console.log(arguments); 23 | } 24 | }, 25 | components:{ 26 | Images 27 | } 28 | }); 29 | ``` 30 | 31 | 32 | ### Props 33 | 34 | * label: String 字段标题 35 | * tips: String 同其他垂直布局form组件的tips 36 | * size: Number 最大上传数量 -1为无限 37 | * value: Array 可直接使用v-model对其进行双向绑定 38 | * dataFormatter: Function 用来格式化已上传成功返回的图片数据，图片需要处理成一个url格式 39 | * srcFormatter: Function dataformatter不要求你一定传回的时一个url字符串数组，你可以通过该格式函数进行返回自己需要显示的image地址 40 | * uploader: String 上传url 41 | * delEnabled: Boolean 是否使用删除按钮 42 | 43 | ### Slots 44 | 45 | * label 46 | * tips 47 | 48 | ### Events 49 | 50 | * limit 超出最大限制时触发 -------------------------------------------------------------------------------- /src/components/icon/index.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /examples/src/example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 20 | 21 | 22 | 23 |
24 | 25 |
26 | 27 | 32 | -------------------------------------------------------------------------------- /src/components/swipeout/action.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 29 | 30 | -------------------------------------------------------------------------------- /examples/src/doc/pages/layout/popover.md: -------------------------------------------------------------------------------- 1 | ## Popover 2 | 3 | ### 代码演示 4 | 5 | ```html 6 | 7 | 操作 8 | 9 | 15 | 16 | 17 | 18 | 点击我 19 | 20 | ``` 21 | 22 | ### Props 23 | 属性 | 说明 | 类型 | 默认值 24 | -----|-----|-------|------ 25 | position | 显示位置 | String | - 26 | visible | 显示隐藏 | Boolean | false 27 | 28 | ### Events 29 | 事件名称|说明|回调参数 30 | ---|----|---- 31 | update:visible | 遮罩变更时触发 | Boolean 32 | show | 遮罩显示时触发 | - 33 | hide | 遮罩隐藏时触发 | - -------------------------------------------------------------------------------- /src/components/layout/row.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 17 | 18 | -------------------------------------------------------------------------------- /examples/src/doc/pages/layout/dropdown.md: -------------------------------------------------------------------------------- 1 | ## Dropdown 2 | 3 | ### 代码演示 4 | 5 | ```html 6 | 7 | 13 | 14 |
{{item}}
15 | 16 | 17 | 18 | 19 | 筛选 20 | 21 |
{{item}}
22 | 23 | 24 | ``` 25 | 26 | ### Props 27 | 属性 | 说明 | 类型 | 默认值 28 | -----|-----|-------|------ 29 | position | 显示位置 | String | - 30 | visible | 显示隐藏 | Boolean | false 31 | 32 | ### Events 33 | 事件名称|说明|回调参数 34 | ---|----|---- 35 | update:visible | 遮罩变更时触发 | Boolean 36 | show | 遮罩显示时触发 | - 37 | hide | 遮罩隐藏时触发 | - -------------------------------------------------------------------------------- /examples/src/doc/pages/layout/searchbar.md: -------------------------------------------------------------------------------- 1 | ## SearchBar 2 | 3 | ### 代码演示 4 | 5 | ```html 6 | 9 | 10 | ``` 11 | 12 | ```js 13 | export default { 14 | data () { 15 | return { 16 | wd: '' 17 | }; 18 | }, 19 | methods: { 20 | onClick () { 21 | // TODO 22 | }, 23 | } 24 | } 25 | ``` 26 | 27 | ### Props 28 | 属性 | 说明 | 类型 | 默认值 29 | -----|-----|-------|------ 30 | maxlength | 规定输入字段中的字符的最大长度 | Number | - 31 | placeholder | 规定帮助用户填写输入字段的提示 | String | - 32 | searchButtonEnabled | 显示隐藏搜索按钮 | Boolean | false 33 | innerStyle | 自定义样式 | Object，String | false 34 | readonly | 把输入字段设置为只读 | Boolean | false 35 | autofocus | 规定输入字段在页面加载时是否获得焦点 | Boolean | false 36 | 37 | ### Events 38 | 事件名称|说明|回调参数 39 | ---|----|---- 40 | submit | 搜索提交时触发 | FormsData: Any 41 | focus | 搜索框聚焦时触发 | - 42 | blur | 搜索框失焦时触发 | - -------------------------------------------------------------------------------- /doc/searchbar.md: -------------------------------------------------------------------------------- 1 | SearchBar 2 | ====================== 3 | 搜索工具 4 | 5 | ## Props 6 | 7 | * maxlength: Number 最大输入长度 8 | * placeholder：String input的placeholder 9 | * readonly：Boolean 是否只可读，一般情况下用于配合search组件使用 10 | * inputBgColor: String input框的背景色，可为rgba，默认为rgba(204, 204, 204, 0.2) 11 | * searchButtonEnabled: Boolean 是否启动搜索按钮 12 | 13 | ## Events 14 | 15 | * focus 16 | * input 17 | 18 | ```js 19 | 22 | 23 | 43 | ``` 44 | 45 | * submit 46 | * click 47 | 48 | ## Methods 49 | 50 | * focus 51 | * blur 52 | * clear：清空输入内容，此方法会触发input事件 53 | 54 | ## Configs 55 | 56 | * inputBgColor -------------------------------------------------------------------------------- /examples/src/example/components/toast.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | -------------------------------------------------------------------------------- /examples/src/example/components/picker.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | -------------------------------------------------------------------------------- /doc/actionsheet.md: -------------------------------------------------------------------------------- 1 | ActionSheet 2 | ================================ 3 | 4 | ## 使用 5 | 6 | ActionSheet(items = {}/*可选项目*/, cancelDisabled = false/*是否禁用取消按钮*/) 7 | 8 | ## Example 9 | 10 | ```js 11 | import {ActionSheet} from 'vm'; 12 | 13 | ActionSheet({ 14 | '拨打电话 1234512345': function(){ 15 | location.href = 'tel:1234512345' 16 | }, 17 | 18 | 'xxx': function(){} 19 | }); 20 | ``` 21 | 22 | 如果有特殊需求，也可以对actionsheet进行定制，比如模拟微信风格的 23 | 24 | ```js 25 | import {ActionSheet} from 'vm'; 26 | 27 | new Vue({ 28 | ...., 29 | 30 | components: { 31 | ActionSheet: ActionSheet.Component 32 | } 33 | }); 34 | ``` 35 | 36 | ```html 37 | 38 | 43 | 44 |
45 | 取消 46 |
47 | 48 | ``` -------------------------------------------------------------------------------- /doc/textinput.md: -------------------------------------------------------------------------------- 1 | TextInput 2 | ================== 3 | 单行文本输入框 4 | 5 | ```html 6 |
7 | 8 | 个 9 | 10 |
11 | ``` 12 | 13 | ```html 14 |
15 | 16 | 17 | 18 | 19 |
20 | ``` 21 | 22 | ```js 23 | import Vue from 'vue'; 24 | import {TextInput} from 'vm'; 25 | 26 | new Vue({ 27 | el: '#app', 28 | data:{ 29 | input_value: '' 30 | }, 31 | components:{ 32 | TextInput 33 | } 34 | }); 35 | ``` 36 | 37 | ### Props 38 | 39 | * label: String text标题 40 | * placeholder: String 41 | * readonly: Boolean 是否为多行文本，默认单行文本 42 | * clearable: Boolean 是否启用清除内容icon 43 | * value: String 可直接使用v-model对其进行双向绑定 44 | * align: String[left|right] 默认right，表示右对齐 45 | 46 | ### Events 47 | 48 | * focus: 当输入框聚焦时触发 49 | * blur: 当输入框失焦时触发 50 | * clear: 清除当前input内的内容 51 | 52 | ### Slots 53 | 54 | * default 默认slot 55 | * label 56 | * extra 用于垂直方向上的一些扩展 -------------------------------------------------------------------------------- /doc/checkboxes.md: -------------------------------------------------------------------------------- 1 | Checkboxes 2 | ============= 3 | 多选按钮组，checkboxes在少于4个时会自动采用水平布局，大于等于4个时自动采用垂直布局 4 | 5 | ```html 6 |
7 | 8 |
9 | ``` 10 | 11 | ```js 12 | import Vue from 'vue'; 13 | import {Checkboxes} from 'vm'; 14 | 15 | new Vue({ 16 | el: '#app', 17 | data:{ 18 | value: [], 19 | options:[ 20 | { 21 | label: '不限', 22 | value: '0' 23 | }, 24 | { 25 | label: '选项1', 26 | value: '1' 27 | }, 28 | { 29 | label: '选项2', 30 | value: '2' 31 | } 32 | ] 33 | }, 34 | watch: { 35 | value(){ 36 | console.log(arguments); 37 | } 38 | }, 39 | components:{ 40 | Checkboxes 41 | } 42 | }); 43 | ``` 44 | 45 | 46 | ### Props 47 | 48 | * label: String 字段标题 49 | * options: Array 选项数组 50 | * value: Array 可直接使用v-model对其进行双向绑定 51 | * size: Number 默认-1，表示可任意选择 52 | 53 | ### Slots 54 | 55 | * label 56 | * tips：垂直布局生效 -------------------------------------------------------------------------------- /doc/radios.md: -------------------------------------------------------------------------------- 1 | Radios 2 | ============= 3 | 单选按钮组 4 | 5 | ```html 6 |
7 | 8 |
9 | ``` 10 | 11 | ```js 12 | import Vue from 'vue'; 13 | import {Radios} from 'vm'; 14 | 15 | new Vue({ 16 | el: '#app', 17 | data:{ 18 | value: '', 19 | options:[ 20 | { 21 | label: '不限', 22 | value: '0' 23 | }, 24 | { 25 | label: '选项1', 26 | value: '1' 27 | }, 28 | { 29 | label: '选项2', 30 | value: '2' 31 | } 32 | ] 33 | }, 34 | watch: { 35 | value(){ 36 | console.log(arguments); 37 | } 38 | }, 39 | components:{ 40 | Radios 41 | } 42 | }); 43 | ``` 44 | 45 | 46 | ### Props 47 | 48 | * label: String 字段标题 49 | * tips：String 垂直布局时右边的小tips 50 | * options: Array 选项数组 51 | * value: String 可直接使用v-model对其进行双向绑定 52 | 53 | ### Slots 54 | 55 | * label 56 | * tips： 大于等于4个选项时启用 57 | 58 | ### Configs 59 | 60 | * selectedClassName: 选中时的class -------------------------------------------------------------------------------- /examples/src/doc/pages/layout/datepicker.md: -------------------------------------------------------------------------------- 1 | ## DatePicker 2 | 3 | ### 代码演示 4 | 5 | ```html 6 | 7 | ``` 8 | ```js 9 | export default { 10 | data () { 11 | return { 12 | visible: false 13 | }; 14 | }, 15 | methods: { 16 | confirm (str, arr) { 17 | console.log(str, arr) 18 | } 19 | } 20 | }; 21 | ``` 22 | 23 | ### Props 24 | 属性 | 说明 | 类型 | 默认值 25 | -----|-----|-------|------ 26 | confirmText | 确认按钮 | String | 确定 27 | cancelText | 取消按钮 | String | 取消 28 | title | 标题文字 | String | - 29 | minDate | 日期的最小可选值 | [String,Date] | 1970-01-01 30 | maxDate | 日期的最大可选值 | [String,Date] | new Date() 31 | formatter | 日期需要的格式 | String | yyyy/mm/dd 32 | units | 展示格式 | Array | ['年', '月', '日','时','分'] 33 | 34 | ### Events 35 | 事件名称|说明|回调参数 36 | ---|----|---- 37 | update:visible | 遮罩变更时触发 | Boolean 38 | confirm | 确定时触发（获取当前被选中的值） | String, Array 39 | cancel | 隐藏时触发 | Boolean 40 | select | 当前选择项 | currData:Any 41 | 42 | ### Config 43 | datepicker.units 44 | timepicker.units -------------------------------------------------------------------------------- /src/components/page/page.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 32 | 33 | -------------------------------------------------------------------------------- /doc/alert.md: -------------------------------------------------------------------------------- 1 | Alert 2 | ================== 3 | 4 | ## Arguments 5 | 6 | * content: 警告框内容 7 | * options: 定制化参数，不传递时，下一个参数会自动补前 8 | 9 | ```js 10 | Alert('abc', { 11 | flex: true, //所有的按钮使用水平布局，位置不够自动换行 12 | buttons: {...}, //自定义所有的按钮 13 | extras: '1233', //小文字部分 14 | confirmButtonText: '啦啦啦' //确定按钮的文字显示 15 | }) 16 | ``` 17 | 18 | * callback: 点击确定时回调，只有在options.buttons为空时才生效。 19 | 20 | ```js 21 | Alert('abc', () => { 22 | alert('点击了确定') 23 | }); 24 | ``` 25 | 26 | ## Example 27 | 28 | ```js 29 | import {Alert} from 'vm'; 30 | 31 | Alert('1233', () => { 32 | //2个按钮 33 | Alert('自定义alert', { 34 | extras: '说明文字', 35 | buttons: { 36 | '按钮1'(){ 37 | Alert('点击了按钮1'); 38 | this.destroy(); 39 | }, 40 | '按钮2'(){ 41 | Alert('点击了按钮2'); 42 | this.destroy(); 43 | } 44 | } 45 | }); 46 | }); 47 | ``` 48 | 49 | ## Alert.confirm(content, options, callback, cancelCallback) confirm模拟框 50 | 51 | * options: 包含一个cancelButtonText, 表示取消按钮的文字 52 | 53 | ```js 54 | import {Alert} from 'vm'; 55 | 56 | Alert.confirm('123', { 57 | cancelButtonText: '取消' 58 | }); 59 | ``` -------------------------------------------------------------------------------- /doc/select.md: -------------------------------------------------------------------------------- 1 | Select 2 | ============= 3 | 表单下拉选择框，此组件组合了iosselect组件，所以点击时会自动打开iosselect 4 | 5 | ```html 6 |
7 | 8 |
9 | ``` 10 | 11 | ```js 12 | import Vue from 'vue'; 13 | import {Select as vSelect} from 'vm'; 14 | 15 | new Vue({ 16 | el: '#app', 17 | data:{ 18 | select_value: '', 19 | options:[ 20 | { 21 | label: '不限', 22 | value: '0' 23 | }, 24 | { 25 | label: '选项1', 26 | value: '1' 27 | }, 28 | { 29 | label: '选项2', 30 | value: '2' 31 | } 32 | ] 33 | }, 34 | watch: { 35 | select_value(){ 36 | console.log(arguments); 37 | } 38 | }, 39 | components:{ 40 | vSelect 41 | } 42 | }); 43 | ``` 44 | 45 | 46 | ### Props 47 | 48 | * label: String 字段标题 49 | * placeholder: String 50 | * options: Array 选项数组, 同iosselect组件的source 51 | * value: String 可直接使用v-model对其进行双向绑定 52 | 53 | #### 注： 当select只有一级时，则value不会一个数租，如果为多级时，则返回一个数租 54 | 55 | ### Slots 56 | 57 | * label -------------------------------------------------------------------------------- /doc/single.md: -------------------------------------------------------------------------------- 1 | SingleFilter 2 | ====================== 3 | 1级单选组件 4 | 5 | ### Example 6 | 7 | ```html 8 |
9 | 10 |
11 | 12 | 35 | ``` 36 | 37 | ### Props 38 | 39 | * source: Array 数据源，数据源的要求必须是对象数组，且对象必须有value属性 40 | * itemFormatter: Function 格式化输出的每一项的显示文字 41 | 42 | ```html 43 | 47 | 48 | ``` 49 | 50 | * disabled: Boolean 是否禁用 51 | * selectedClassName: String 选中后的class 52 | 53 | 54 | ### Events 55 | 56 | * change: 当值改变时触发 57 | * reject: 拒绝选择操作时触发 58 | 59 | -------------------------------------------------------------------------------- /doc/lazyload.md: -------------------------------------------------------------------------------- 1 | Lazyload 2 | ============= 3 | 延迟加载图片，lazyload会适应容器内元素的变化来判定当前加载哪些图片 4 | 5 | 6 | ### 使用 7 | 8 | ```html 9 |
10 |
11 | 12 |
13 | 14 |
15 | 16 |
17 | 18 |
19 | 20 |
21 | 22 |
23 | 24 |
25 | 26 |
27 | 28 |
29 | 30 |
31 | 32 |
33 | 34 |
35 | 36 |
37 | 38 |
39 | 40 |
41 |
42 |
43 | ``` 44 | 45 | ### Options 46 | 47 | * srcAttr: 指定读取src的属性是什么，默认lazyload不对具有src属性的元素进行加载 48 | * placeholder -------------------------------------------------------------------------------- /doc/search.md: -------------------------------------------------------------------------------- 1 | Search 2 | ====================== 3 | searchview组件 4 | 5 | ## Props 6 | 7 | * maxlength: Number 最大输入长度 8 | * placeholder：String input的placeholder 9 | * autofocus: Boolean 默认为true，自动获取焦点 10 | * delay：Number 输入时延 11 | * caching：Boolean 默认为true，是否缓存查询信息 12 | * empty2load: Boolean 默认为false，如果输入为空时，同样做请求 13 | * kw：String 请求时关键词的参数名，默认为kw 14 | * source: Array|String 数据源，字符串为远程数据 15 | * dataFormatter：Function，格式化数据，返回一个数组 16 | * params：Object 请求远程时额外参数设置 17 | * useHistory: Boolean 开启历史记录，注，历史记录只有在empty2load为false且关键词为空时才会显示出来 18 | * historyMark: String 历史记录的id标识，用于处理应用history区分的时候 19 | * closeAfterSelectHistory: Boolean 选择history时，是否关闭 20 | * inputBgColor: String input框的背景色，可为rgba，默认为rgba(204, 204, 204, 0.2) 21 | 22 | # Slots 23 | 24 | * header： 头部显示 25 | * desc：搜索结果的描述 26 | * default：搜索关键词为空时且empty2load为false时 27 | * nores：搜索结果为空时显示 28 | * row: 记录行渲染 29 | 30 | ```html 31 | 32 | 35 | 36 | ``` 37 | 38 | # Methods 39 | 40 | * open 41 | * close 42 | * clearHistory 清空历史记录 43 | -------------------------------------------------------------------------------- /src/components/toast/index.js: -------------------------------------------------------------------------------- 1 | import Component from './toast'; 2 | import {Util} from '../../helper'; 3 | 4 | let instance; 5 | 6 | function Toast (options, type) { 7 | Toast.destroy(false); 8 | 9 | let props = { 10 | duration: 1000, 11 | visible: true 12 | }; 13 | 14 | if (typeof options == 'string') { 15 | props.message = options; 16 | } else { 17 | props = Object.assign(props, options); 18 | } 19 | 20 | type && (props.type = type); 21 | 22 | instance = Util.factory(Component, props); 23 | 24 | if (props.duration && props.duration > 0) { 25 | instance.$id = setTimeout(Toast.destroy, props.duration); 26 | } 27 | 28 | return instance; 29 | } 30 | 31 | Toast.destroy = (fx = true) => { 32 | if (instance) { 33 | instance.destroy(fx); 34 | instance.$id && clearTimeout(instance.$id); 35 | instance = null; 36 | } 37 | }; 38 | 39 | ['success', 'loading'].forEach((type) => { 40 | Toast[type] = (options) => { 41 | return Toast(options, type); 42 | }; 43 | }); 44 | 45 | Toast.Component = Component; 46 | export default Util.register(Toast, false, (Vue) => { 47 | Vue.prototype.$toast = Toast; 48 | }); -------------------------------------------------------------------------------- /examples/src/example/components/image.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | -------------------------------------------------------------------------------- /src/directives/wipe/wipe.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable standard/no-callback-literal */ 2 | import Draggable from '../draggable'; 3 | import {Dom, Event} from '../../helper'; 4 | 5 | const MIN_PERCENT = 0.3; 6 | 7 | export default { 8 | bind (element, data) { 9 | let percent, callback; 10 | 11 | if (typeof data.value == 'function') { 12 | callback = data.value; 13 | } else { 14 | percent = data.value.percent; 15 | callback = data.value.callback; 16 | } 17 | 18 | let min; 19 | 20 | setTimeout(() => { 21 | min = Dom.width(element) * (percent || MIN_PERCENT); 22 | }, 100); 23 | 24 | const instance = new Draggable.Constructor(element, { 25 | axis: 'x', 26 | canDrag () { 27 | return false; 28 | } 29 | }); 30 | 31 | let x; 32 | 33 | Event.on(element, 'drag:start', (e) => { 34 | x = e.data.clientX; 35 | }); 36 | 37 | Event.on(element, 'drag:end', (e) => { 38 | let change = e.data.e.changedTouches[0].clientX - x; 39 | 40 | Math.abs(change) > min && callback(change > 0 ? 1 : -1); 41 | }); 42 | }, 43 | 44 | name: 'wipe' 45 | }; -------------------------------------------------------------------------------- /examples/src/doc/pages/layout/picker.md: -------------------------------------------------------------------------------- 1 | ## Picker 2 | 3 | ### 代码演示 4 | 5 | ```html 6 | 7 | ``` 8 | ```js 9 | export default { 10 | data () { 11 | return { 12 | options: [ 13 | {label: 'option1', value: 1}, 14 | {label: 'option2', value: 2}, 15 | {label: 'option3', value: 3}, 16 | {label: 'option4', value: 4} 17 | ], 18 | visible: false 19 | }; 20 | }, 21 | methods: { 22 | onShow () { 23 | this.visible = true; 24 | }, 25 | confirm (str, arr) { 26 | console.log('您点击了确认') 27 | }, 28 | onSelect (currData) { 29 | console.log(currData); 30 | } 31 | } 32 | }; 33 | ``` 34 | 35 | ### Props 36 | 属性 | 说明 | 类型 | 默认值 37 | -----|-----|-------|------ 38 | options | 选择项，可直接对象数组,保持{label,value}格式 | Array | [] 39 | confirmText | 确认按钮 | String | 确定 40 | cancelText | 取消按钮 | String | 取消 41 | title | 标题文字 | String | - 42 | 43 | ### Events 44 | 事件名称|说明|回调参数 45 | ---|----|---- 46 | update:visible | 遮罩变更时触发 | Boolean 47 | confirm | 确定时触发（获取当前被选中的值） | String, Array 48 | cancel | 隐藏时触发 | Boolean 49 | select | 当前选择项 | currData:Any -------------------------------------------------------------------------------- /examples/src/example/components/dropdown.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | -------------------------------------------------------------------------------- /examples/src/example/components/uploader.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 29 | 30 | -------------------------------------------------------------------------------- /src/components/textarea/textarea.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 34 | 35 | -------------------------------------------------------------------------------- /examples/src/doc/pages/layout/list.md: -------------------------------------------------------------------------------- 1 | ## List 2 | 3 | ### 代码演示 4 | 5 | ```html 6 | 7 | 13 | 14 | ``` 15 | 16 | ### Solts 17 | 名称 | 说明 | Slot-Scpoe 18 | -----|-----|-------|------ 19 | header | 固定在列表滚动顶部位置 | - 20 | footer | 固定在列表滚动底部位置 | - 21 | rows | 自定义列表内容 | rows:Array 22 | row | 自定义列表内容对应的节点 | row:Any 23 | if-loading | 正在加载时提示文字 | - 24 | if-failed | 加载失败时提示文字 | - 25 | if-empty | 返回空数组时提示文字 | - 26 | if-nomore | 最后一页时提示文字 | - 27 | 28 | ### Props 29 | 属性 | 说明 | 类型 | 默认值 30 | -----|-----|-------|------ 31 | api | 设置请求地址，返回Promise[resolve:Array]， | Function:Promise | - 32 | params | 请求参数（可设置固定参数 简化触发刷新操作更改参数后自动触发列表刷新） | Object | - 33 | autoRefresh | 首次渲染时或Promise返回时，设置是否自动刷新 | Boolean | true 34 | maxCountPerPage | 设置请求分页值 | Number | 20 35 | pulldown2refresh | 下拉刷新 | Boolean | false 36 | pullup2load | 上拉加载数据 | Boolean | false 37 | scrollbars | 是否显示侧边滚动条 | Boolean | true 38 | 39 | ### Events 40 | 事件名称|说明|回调参数 41 | -----|-----|-------|------ 42 | rows:render | 数据Render时触发 | rows:Array | 43 | scrolling | 列表滚动时触发 | event | 44 | nomore | 上拉加载数据没有更多数据时触发 | - | 45 | refresh | 列表刷新后触发 | - | 46 | fetch:success | 每一次请求成功后触发 | data | 47 | fetch:fail | 请求失败后触发 | error | 48 | -------------------------------------------------------------------------------- /src/components/loading/loading.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 36 | 37 | -------------------------------------------------------------------------------- /examples/src/example/components/actionsheet.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | -------------------------------------------------------------------------------- /examples/src/example/directives/draggable.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 24 | 25 | -------------------------------------------------------------------------------- /doc/draggable.md: -------------------------------------------------------------------------------- 1 | Draggable指令 2 | ==================== 3 | 该指令实现了基本的拖拽功能，更多更强大的功能可以由该指令扩展，vm中很多组件都使用到了该指令，如scroll等 4 | 5 | ### Props 6 | 7 | * axis|String: 拖拽轴，默认xy表示任意拖拽，可指定x或y 8 | * stackTimes|Number: 粘度，可使用其做出粘性拖动效果，默认为1 9 | * ignores|RegExp: 忽略哪些标签，匹配tagName 10 | * canDrag|Function: 判定当前是否可拖拽的回调函数，默认 return true 11 | 12 | ```html 13 |
14 |
18 |
19 | ``` 20 | 21 | ```js 22 | new Vue({ 23 | el: '#app', 24 | methods: { 25 | canDrag(x/*当前x偏移*/, y, rx/*当前偏移距离上次偏移*/, ry){ 26 | //只能在translateX为-100和0的区间内移动 27 | return x > -100 && x < 0; 28 | } 29 | } 30 | }); 31 | ``` 32 | 33 | ### Methods 34 | 35 | * stack(times|Number): 动态设置粘度 36 | 37 | ### Static Methods 38 | 39 | * getTransform(element|HTMLElement): 静态方法，获取某个元素的transform 40 | 41 | ```js 42 | import {Draggable} from 'vm'; 43 | console.log(Draggable.getTransform($('#test'))); 44 | ``` 45 | 46 | ### Events 47 | 48 | * drag:start({x/*元素当前偏移值*/, y, pageX/*鼠标距离屏幕的X坐标*/, pageY, e})：鼠标按下后触发 49 | 50 | ```html 51 |
52 | ``` 53 | 54 | * drag:reject({x, y, pageX, pageY, e})：未通过canDrag判定时触发 55 | * drag:other({x, y, pageX, pageY, e})：如果当前拖拽时，是其他元素（这里主要用于2个可拖拽元素重叠时） 56 | * draging({x, y, pageX, pageY, e})：拖拽中 57 | * drag:end({x, y, e})：拖拽结束，鼠标弹起 58 | -------------------------------------------------------------------------------- /src/mixins/input.js: -------------------------------------------------------------------------------- 1 | import Model from './model'; 2 | import Config from '../config'; 3 | 4 | const INPUT_PRE_STYLES = { 5 | 'default': 'background: #F3F6FB', 6 | 'transparent': 'background: transparent', 7 | 'underline': 'border-bottom: 1px solid #333', 8 | ...Config('input.pre-themes') 9 | }; 10 | 11 | export default { 12 | mixins: [Model], 13 | 14 | data () { 15 | return { 16 | style: INPUT_PRE_STYLES[this.theme] 17 | }; 18 | }, 19 | 20 | props: { 21 | placeholder: { 22 | type: String, 23 | default: null 24 | }, 25 | 26 | readonly: { 27 | type: Boolean, 28 | default: false 29 | }, 30 | 31 | clearable: { 32 | type: Boolean, 33 | default: false 34 | }, 35 | 36 | maxlength: { 37 | type: [Number, String], 38 | default: 100000000 39 | }, 40 | 41 | autofocus: { 42 | type: Boolean, 43 | default: false 44 | }, 45 | 46 | theme: { 47 | type: String, 48 | default: 'default' 49 | } 50 | }, 51 | 52 | methods: { 53 | onFocus () { 54 | !this.readonly && this.$emit('focus'); 55 | }, 56 | 57 | onBlur () { 58 | this.$emit('blur'); 59 | }, 60 | 61 | onClick () { 62 | this.$emit('click'); 63 | } 64 | } 65 | }; -------------------------------------------------------------------------------- /src/cfg.default.js: -------------------------------------------------------------------------------- 1 | export default { 2 | 'theme': '#E74D4D', 3 | 'box.margin-top': '12px', 4 | // components 5 | 'page.background': '#fff', 6 | 'topbar.padding-top': '0px', 7 | 'topbar.border-bottom': '0px', 8 | 'topbar.background': '#fff', 9 | 'topbar.color': '#000', 10 | 'topbar.font-size': '18px', 11 | 'button.radius': '100px', 12 | 'button.sizes': ['46px', '36px', '23px', '23px'], // large|normal|small|mini 13 | 'button.colors': { 14 | primary: '' 15 | }, 16 | 'segment.color': '#fff', 17 | 'segment.active-color': '', 18 | 'loading.color': '', 19 | 'tabs.header-active-color': '', 20 | 'loading.color': '', 21 | 'scroll.ignores': null, 22 | 'scroll.use-transform': false, 23 | 'list.label.page': 'page', 24 | 'list.label.persize': 'size', 25 | 'swipeout-action.background': '', 26 | 'swipeout-action.color': '#fff', 27 | 'popover.background': '#333', 28 | 'popover.actions-gap': '0.5px solid #eee', 29 | 'popover.actions-color': '#fff', 30 | 'form-row.label-min-width': '80px', 31 | 'input.pre-themes': {}, 32 | 'checker.color': '', 33 | 'checker.icon-size': '16px', 34 | 'checker.square-radius': '2px', 35 | 'switch.color': '', 36 | 'timepicker.units': ['时', '分'], 37 | 'datepicker.units': ['年', '月', '日'], 38 | 39 | 'modal.button.normal': '', 40 | 'modal.button.confirm': '', 41 | 'swiper.indicator-color': 'rgba(0, 0, 0, 0.2)', 42 | 'swiper.indicator-active-color': '' 43 | }; -------------------------------------------------------------------------------- /src/components/badge/badge.vue: -------------------------------------------------------------------------------- 1 | 50 | 51 | -------------------------------------------------------------------------------- /examples/src/example/components/popover.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 30 | 31 | -------------------------------------------------------------------------------- /src/components/actionsheet/item.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 37 | 38 | -------------------------------------------------------------------------------- /src/components/image/image.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 66 | 67 | -------------------------------------------------------------------------------- /src/components/forward/forward.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 38 | 39 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var webpack = require('webpack'); 3 | 4 | process.env.NODE_ENV = 'production'; 5 | 6 | module.exports = { 7 | entry: { 8 | vm: './src' 9 | }, 10 | 11 | resolve: { 12 | extensions: ['.js', '.vue'] 13 | }, 14 | 15 | output: { 16 | path: path.join(__dirname, 'dist'), 17 | filename: '[name].js', 18 | library: 'this', 19 | libraryTarget: 'umd' 20 | }, 21 | 22 | module: { 23 | rules: [ 24 | { 25 | test: /\.css$/, 26 | loader: 'style-loader!css-loader' 27 | }, 28 | { 29 | test: /\.vue$/, 30 | loader: 'vue-loader', 31 | options: { 32 | loaders: [ 33 | 'vue-style-loader', 34 | 'css-loader', 35 | { 36 | loader: 'postcss-loader', 37 | options: { 38 | plugins: { 39 | autoprefixer: {} 40 | } 41 | } 42 | } 43 | ] 44 | } 45 | }, 46 | 47 | { 48 | test: /\.js$/, 49 | loader: 'babel-loader' 50 | }, 51 | 52 | { 53 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 54 | loader: 'url-loader' 55 | }, 56 | 57 | { 58 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 59 | loader: 'url-loader' 60 | } 61 | ] 62 | } 63 | }; -------------------------------------------------------------------------------- /examples/src/doc/pages/forms/form.md: -------------------------------------------------------------------------------- 1 | form组件集合 2 | ================ 3 | form相关组件都是基于FormRow组件进行的封装，且可以通过v-model进行双向绑定，开发者也可以基于FormRow进行自己的组件扩展 4 | 5 | ### 代码演示 6 | ```html 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 提交 33 | ``` 34 | 35 | ```js 36 | export default { 37 | data () { 38 | return { 39 | checkers: [2018], 40 | years: [ 41 | {label: 2015, value: 2015}, 42 | {label: 2016, value: 2016}, 43 | {label: 2017, value: 2017}, 44 | {label: 2018, value: 2018} 45 | ] 46 | } 47 | }, 48 | methods: { 49 | submit () { 50 | ... 51 | }, 52 | onCheckerChange (...args) { 53 | console.log(...args); 54 | } 55 | } 56 | } 57 | ``` 58 | 59 | ### Props 60 | 属性 | 说明 | 类型 | 默认值 61 | -----|-----|-------|------ 62 | label | 表单标题文字 | String | null 63 | align | 显示位置 | String | left 64 | verticalLayout | 竖直排版 | Boolean | false -------------------------------------------------------------------------------- /examples/src/doc/pages/forms/checker.md: -------------------------------------------------------------------------------- 1 | ## Textarea 2 | 3 | ### 代码演示 4 | ```html 5 | 选中 6 | 7 | 确定 8 | 9 | 10 | 11 | 12 | ``` 13 | 14 | ```js 15 | export default { 16 | data () { 17 | return { 18 | years: [ 19 | { 20 | label: 2015, 21 | value: 2015 22 | }, 23 | { 24 | label: 2016, 25 | value: 2016 26 | }, 27 | { 28 | label: 2017, 29 | value: 2017 30 | }, 31 | { 32 | label: 2018, 33 | value: 2018 34 | } 35 | ], 36 | checkers: [2018] 37 | } 38 | }, 39 | methods: { 40 | onCheckerChange (...args) { 41 | console.log(...args); 42 | } 43 | } 44 | } 45 | ``` 46 | 47 | ### Props 48 | 属性 | 说明 | 类型 | 默认值 49 | -----|-----|-------|------ 50 | label | 指定文字 | String | - 51 | disabled | 禁止改变状态 | Boolean | false 52 | square | 设置圆角像素,可设置公共配置 | Boolean | false[,100px] 53 | highColor | 设置是否为圆形，可设置公共配置 | String | - 54 | 55 | ### Events 56 | 事件名称|说明|回调参数 57 | ---|----|---- 58 | change | 切换是否选中状态 | checked => void 59 | 60 | ### Config 61 | checker.square-radius 62 | checker.high-color 63 | checker.icon-size 64 | 65 | ### checker-group 66 | 属性 | 说明 | 类型 | 默认值 67 | -----|-----|-------|------ 68 | options | 配置指定数据 | Array[Object{label,value}] | - 69 | radio | 是否为单选 | Boolean | false 70 | iconType | 是否显示iocn，可设置公共配置 | String | - -------------------------------------------------------------------------------- /src/components/actionsheet/actionsheet.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 59 | 60 | -------------------------------------------------------------------------------- /examples/src/doc/pages/layout/box~row.md: -------------------------------------------------------------------------------- 1 | ## Box & Row 2 | 3 | ### 代码演示 4 | 5 | ```html 6 | 7 | 11 | 12 | 13 |
14 | 商品名称 15 |
商品价格
16 |
17 | 购物 18 | 19 | 20 | 21 |
22 |
商品名称 商品副标题
23 |
商品价格
24 |
25 | 购物 26 | 27 | 啦啦啦 28 | 29 | 30 | 31 | 35 | 36 | 37 | 38 |
39 | 商品名称 40 |
商品价格
41 |
42 | 购物 43 | 44 | 45 | 46 |
47 |
商品名称 商品副标题
48 |
商品价格
49 |
50 | 购物 51 | 52 | 啦啦啦 53 | 查看更多信息 54 | 55 | ``` 56 | 57 | ### Slot 58 | 名称 | 说明 | Slot-Scpoe 59 | -----|-----|-------|------ 60 | icon | 自定义布局icon | - 61 | -------------------------------------------------------------------------------- /doc/iosselect.md: -------------------------------------------------------------------------------- 1 | Iosselect 2 | ==================== 3 | 弹出式选择组件 4 | 5 | ### Example 6 | 7 | ```js 8 | import {Iosselect} from 'vm'; 9 | ``` 10 | 11 | ### Props 12 | 13 | * source: Array|String，选择对象，里面单个元素为{label: **, value: **}结构，如果不是，可通过dataFormatter进行格式化 14 | 15 | ```html 16 | 17 | 18 | ``` 19 | 20 | ```js 21 | ... 22 | data(){ 23 | return { 24 | list: [ 25 | { 26 | label: '第一个', 27 | value: 1 28 | }, 29 | 30 | { 31 | label: '第二个', 32 | value: 2 33 | } 34 | ] 35 | }; 36 | } 37 | ... 38 | ``` 39 | 40 | 如果选择为多级时，可进行这样的赋值： 41 | 42 | ```js 43 | ...data(){ 44 | return { 45 | list: [ 46 | [ 47 | { 48 | label: '第一组第一个', 49 | value: '1-1' 50 | } 51 | ], 52 | 53 | [ 54 | { 55 | '第二组第一个', 56 | value: '2-1' 57 | } 58 | ] 59 | ] 60 | } 61 | } 62 | ``` 63 | 64 | 这种格式的数据不是无联动效果，只是多级效果，如果想多级联动时，可为item赋值一个children属性，则会自动变为多级联动: 65 | 66 | ```js 67 | ...data(){ 68 | return { 69 | list: [ 70 | { 71 | label: '第一组第一个', 72 | value: '1-1', 73 | children: [....] 74 | } 75 | ] 76 | } 77 | } 78 | ``` 79 | 80 | 同时source还支持远程数据, 多个值时，效果只是多级，如果需要联动效果，需要一次将数据全部返回: 81 | ```html 82 | ... 83 | 84 | ``` 85 | 86 | 87 | ```js 88 | ... 89 | methods(){ 90 | formatSource(data){ 91 | return data.data; 92 | } 93 | } 94 | ``` 95 | 96 | * value：Array，初始值，映射source元素的value值，默认第一个选中，value被格式化后一定是返回一个数组。 97 | * dataFormatter: Function, 对于每个数据源的处理 98 | 99 | 100 | #### 注：上面可使用v-model进行父子元素的双向数据绑定，iosselect对此作了相关处理 101 | 102 | ### Events 103 | 104 | * confirm(vals)： 点击确定会调用 105 | * close: 关闭 -------------------------------------------------------------------------------- /src/components/checker/checker.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 44 | 45 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vmui", 3 | "version": "2.0.1", 4 | "description": "基于vue2的ui组件库", 5 | "main": "dist/vm.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "release": "sh ./build/release.sh", 9 | "build": "webpack", 10 | "example": "webpack --config ./examples/webpack.config.js", 11 | "ef": "eslint --fix --ext .js,.vue ./src ./examples/src" 12 | }, 13 | "author": "zhanghao ", 14 | "license": "ISC", 15 | "devDependencies": { 16 | "app-transition": "github:feather-components/app-transition", 17 | "autoprefixer": "^7.1.1", 18 | "autoprefixer-loader": "^3.2.0", 19 | "babel-core": "^6.24.1", 20 | "babel-eslint": "^10.0.1", 21 | "babel-loader": "^7.0.0", 22 | "babel-plugin-syntax-jsx": "^6.18.0", 23 | "babel-plugin-transform-runtime": "^6.23.0", 24 | "babel-plugin-transform-vue-jsx": "^3.7.0", 25 | "babel-preset-env": "^1.7.0", 26 | "babel-preset-stage-2": "^6.24.1", 27 | "component-ajax": "0.0.2", 28 | "css-loader": "^0.28.3", 29 | "eslint": "^5.16.0", 30 | "eslint-config-standard": "^12.0.0", 31 | "eslint-plugin-import": "^2.17.3", 32 | "eslint-plugin-node": "^9.1.0", 33 | "eslint-plugin-promise": "^4.1.1", 34 | "eslint-plugin-standard": "^4.0.0", 35 | "eslint-plugin-vue": "^5.2.2", 36 | "express": "^4.17.1", 37 | "fastclick": "^1.0.6", 38 | "file-loader": "^0.11.2", 39 | "html-webpack-plugin": "^2.28.0", 40 | "less": "^2.7.2", 41 | "less-loader": "^4.0.3", 42 | "markdown-it-anchor": "^5.2.4", 43 | "postcss-loader": "^2.0.5", 44 | "style-loader": "^0.18.1", 45 | "type-of": "^2.0.1", 46 | "url-loader": "^0.5.8", 47 | "vue": "^2.6.10", 48 | "vue-loader": "^12.2.0", 49 | "vue-md-loader": "^1.1.0", 50 | "vue-router": "^2.5.3", 51 | "vue-template-compiler": "^2.3.3", 52 | "webpack": "^3.6.0", 53 | "webpack-cli": "^3.3.2" 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | // https://eslint.org/docs/user-guide/configuring 2 | 3 | module.exports = { 4 | root: true, 5 | parserOptions: { 6 | parser: 'babel-eslint' 7 | }, 8 | env: { 9 | browser: true, 10 | es6: true 11 | }, 12 | extends: [ 13 | // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention 14 | // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules. 15 | 'plugin:vue/essential', 16 | // https://github.com/standard/standard/blob/master/docs/RULES-en.md 17 | 'standard' 18 | ], 19 | // required to lint *.vue files 20 | plugins: [ 21 | 'vue' 22 | ], 23 | // add your custom rules here 24 | rules: { 25 | "vue/no-unused-vars": "off", 26 | "vue/no-unused-components": "off", 27 | "no-unused-vars": "off", 28 | "prefer-promise-reject-errors": "off", 29 | "no-redeclare": "off", 30 | "padded-blocks": ["error", "never"], 31 | "arrow-spacing": ["error", { "before": true, "after": true }], 32 | "space-before-blocks": ["error", "always"], 33 | "space-before-function-paren": ["error", "always"], 34 | "semi": ["error", "always"], 35 | "newline-after-var": ["error", "always"], 36 | "comma-spacing": ["error", { 37 | "before": false, 38 | "after": true 39 | }], 40 | "space-infix-ops": "error", 41 | "key-spacing": ["error", { "beforeColon": false }], 42 | "object-curly-spacing": ["error", "never"], 43 | "indent": ["error", 4, {"SwitchCase": 1}], 44 | "no-spaced-func": "error", 45 | "generator-star-spacing": "off", 46 | 'eqeqeq': 'off', 47 | 'camelcase': 'off', 48 | 'eol-last': ['error', 'never'], 49 | // allow debugger during development 50 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' 51 | } 52 | } -------------------------------------------------------------------------------- /examples/src/doc/pages/layout/search.md: -------------------------------------------------------------------------------- 1 | ## Search 2 | 3 | ### 代码演示 4 | 5 | ```html 6 | 7 | 8 | 9 | ``` 10 | 11 | ```js 12 | export default { 13 | data () { 14 | return { 15 | wd: '', 16 | overlayVisible: false 17 | }; 18 | }, 19 | 20 | methods: { 21 | api (params) { 22 | if (typeof params == 'string') { 23 | params = { 24 | wd: params 25 | }; 26 | } 27 | 28 | return new Promise((resolve, reject) => { 29 | Ajax({ 30 | url: 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?json=1&cb=?', 31 | data: params, 32 | dataType: 'json', 33 | success (data) { 34 | resolve(data.s); 35 | }, 36 | error () { 37 | reject(); 38 | } 39 | }); 40 | }); 41 | }, 42 | 43 | onClick () { 44 | this.overlayVisible = true; 45 | this.$refs.search.focus(); 46 | }, 47 | 48 | hide () { 49 | this.overlayVisible = false; 50 | } 51 | } 52 | }; 53 | ``` 54 | 55 | ### Props 56 | 属性 | 说明 | 类型 | 默认值 57 | -----|-----|-------|------ 58 | api | 设置请求地址，返回Promise[resolve:Array]， | Function:Promise | - 59 | barStyle | 搜索框自定义样式 | String，Object | - 60 | historyId | 制定搜索历史使用的标识 | - | [hash [,pathname]] 61 | placeholder | 规定帮助用户填写输入字段的提示 | String | - 62 | autofocus | 规定输入字段在页面加载时是否获得焦点 | Boolean | false 63 | maxlength | 规定输入字段中的字符的最大长度 | Number | - 64 | 65 | ### Events 66 | 事件名称|说明|回调参数 67 | ---|----|---- 68 | input | 搜索时输入的内容 | value:[Number,String] 69 | confirm | 点击搜索结果中的选中的值 | data:Any 70 | cancel | 取消搜索 | - -------------------------------------------------------------------------------- /src/components/checker/abstract.vue: -------------------------------------------------------------------------------- 1 | 82 | 83 | -------------------------------------------------------------------------------- /src/components/picker/time.js: -------------------------------------------------------------------------------- 1 | import Picker from './picker'; 2 | import Overlay from '../overlay'; 3 | import Model from '../../mixins/model'; 4 | import Config from '../../config'; 5 | import {Util} from '../../helper'; 6 | 7 | const HOURS = 23; const MINUTES = 59; 8 | 9 | let TimePicker = { 10 | name: 'timepicker', 11 | 12 | mixins: [Overlay, Model], 13 | 14 | props: { 15 | units: { 16 | type: Array, 17 | default () { 18 | return Config('timepicker.units'); 19 | } 20 | } 21 | }, 22 | 23 | data () { 24 | return { 25 | options: [ 26 | TimePicker.lv(HOURS, 0, this.units[0]), 27 | TimePicker.lv(MINUTES, 0, this.units[1]) 28 | ], 29 | vals: this.analyseValue(this.value) 30 | }; 31 | }, 32 | 33 | methods: { 34 | onConfirm (vals) { 35 | this.vals = vals; 36 | this.$emit('confirm', this.val = vals.join(':')); 37 | }, 38 | 39 | setValue (value) { 40 | this.analyseValue(this.val = value); 41 | }, 42 | 43 | analyseValue (value) { 44 | return (value || '').split(':'); 45 | } 46 | }, 47 | 48 | render (h) { 49 | return h( 50 | Picker, 51 | { 52 | props: { 53 | options: this.options, 54 | visible: this.visibility, 55 | value: this.vals 56 | }, 57 | 58 | on: { 59 | hide: this.hide, 60 | confirm: this.onConfirm 61 | } 62 | } 63 | ); 64 | } 65 | }; 66 | 67 | TimePicker.lv = (end, start = 0, unit = '') => { 68 | let arr = []; 69 | 70 | for (let i = start; i <= end; i++) { 71 | let label = Util.pad(i) + unit; 72 | 73 | arr.push({ 74 | label, 75 | value: i 76 | }); 77 | }; 78 | 79 | return arr; 80 | }; 81 | 82 | export default TimePicker; -------------------------------------------------------------------------------- /doc/list.md: -------------------------------------------------------------------------------- 1 | List 2 | =========== 3 | 该列表组件，自动集成了scroll功能，并支持下拉刷新，上滑加载功能 4 | 5 | ## Props 6 | 7 | ```html 8 |
9 | 10 |
11 | ``` 12 | 13 | * params: Object 远程数据源请求时所带的参数 14 | 15 | ```html 16 |
17 | 18 |
19 | ``` 20 | 21 | * dataFormatter: Function 格式化数据源，输出必须为一个数组 22 | 23 | ```html 24 |
25 | 26 |
27 | ``` 28 | 29 | * pulldown2refresh: 开启下拉刷新 30 | 31 | ```html 32 |
33 | 34 |
35 | ``` 36 | 37 | * pullup2load: 上滑加载下一页 38 | 39 | ```html 40 |
41 | 42 |
43 | ``` 44 | 45 | ## Slot 46 | 47 | * header： 组件头部显示 48 | * nores： 无结果时显示 49 | * row: 每条渲染 50 | 51 | ```html 52 | 53 |
这里是头部
54 |
无结果时显示我
55 | 56 | 57 | 68 | 69 | ``` -------------------------------------------------------------------------------- /src/components/checker/icon.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 57 | 58 | -------------------------------------------------------------------------------- /examples/src/example/components/popup.vue: -------------------------------------------------------------------------------- 1 | 31 | 32 | -------------------------------------------------------------------------------- /examples/src/example/main.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 38 | 39 | -------------------------------------------------------------------------------- /src/components/topbar/topbar.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 64 | 65 | -------------------------------------------------------------------------------- /examples/src/example/components/datepicker.vue: -------------------------------------------------------------------------------- 1 | 39 | 40 | -------------------------------------------------------------------------------- /src/components/checker/group.vue: -------------------------------------------------------------------------------- 1 | 100 | 101 | -------------------------------------------------------------------------------- /src/components/lightbox/lightbox.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 54 | 55 | -------------------------------------------------------------------------------- /examples/src/example/components/searchbar.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 42 | 43 | -------------------------------------------------------------------------------- /src/components/input/input.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 79 | 80 | -------------------------------------------------------------------------------- /examples/src/example/components/search.vue: -------------------------------------------------------------------------------- 1 | 28 | 29 | 45 | 46 | 97 | -------------------------------------------------------------------------------- /examples/src/example/components/filter.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 30 | 31 | -------------------------------------------------------------------------------- /src/components/switch/switch.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 77 | 78 | -------------------------------------------------------------------------------- /src/components/toast/toast.vue: -------------------------------------------------------------------------------- 1 | 84 | 85 | -------------------------------------------------------------------------------- /examples/src/example/components/alert.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /src/components/form/row.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 68 | 69 | -------------------------------------------------------------------------------- /examples/src/example/directives/lazyload.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 31 | 32 | -------------------------------------------------------------------------------- /src/components/button/button.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 88 | 89 | -------------------------------------------------------------------------------- /src/components/search/history.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 94 | 95 | -------------------------------------------------------------------------------- /src/components/swipeout/swipeout.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 100 | 101 | -------------------------------------------------------------------------------- /src/components/segment/segment.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 95 | 96 | -------------------------------------------------------------------------------- /src/components/modal/modal.vue: -------------------------------------------------------------------------------- 1 | 35 | 36 | 99 | 100 | -------------------------------------------------------------------------------- /examples/src/example/components/scroll.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 56 | 57 | -------------------------------------------------------------------------------- /doc/link.md: -------------------------------------------------------------------------------- 1 | LinkFilter 2 | ====================== 3 | 多级联动 4 | 5 | ### Example 6 | 7 | #### 远程数据源 8 | 9 | ```html 10 |
11 | 14 | 15 |
16 | ``` 17 | 18 | ```js 19 | import {LinkFilter} from 'vm'; 20 | import Vue from 'vue'; 21 | 22 | new Vue({ 23 | el: '#test', 24 | components: { 25 | LinkFilter: Filter.Link 26 | }, 27 | 28 | methods: { 29 | print: function(v){ 30 | console.log(v); 31 | } 32 | } 33 | }); 34 | ``` 35 | 36 | ```js 37 | //ajax/filter.json 38 | { 39 | "data": [ 40 | { 41 | "label": "1", 42 | "value": 1 43 | }, 44 | 45 | { 46 | "label": "2", 47 | "value": 2 48 | } 49 | ] 50 | } 51 | ``` 52 | 53 | #### 多个远程数据源 54 | 55 | ```html 56 |
57 | 60 | 61 |
62 | ``` 63 | 64 | ```html 65 |
66 | 70 | 71 |
72 | ``` 73 | 74 | #### 本地数据源 75 | 76 | ```html 77 |
78 | 79 | 97 |
98 | ``` 99 | 100 | ### Props 101 | 102 | * source: Array|Object|String 为string则为远程请求， 如果为数组,且第一项为string，则同样表示为远程请求，如果是Object，需要通过dateFormatter进行格式化转换为数组， 103 | * params: Object 请求时额外带的参数 104 | * names: Array 请求时，每一级的id参数名，如果为一个，则始终使用该值 105 | * level: Number 共多少级 106 | * dataFormatter: Function 进行数据的格式化，如果通过ajax回来的数据中不存在value属性，可通过该函数格式化下 107 | * itemFormatter: Function 格式化输出的每一项的显示文字 108 | * unlimitLabel: String 当不限选项启用时显示的文字，默认为 不限 109 | * unlimitValue: Number|String 设置不限选项的值，默认为undefined，表示不启用 110 | * unlimitStartLevel: Number 第几层开始才启用不限，默认为0，表示第一级 111 | 112 | ```html 113 | 131 | ``` 132 | 133 | ### Events 134 | 135 | * paths:change： 当点击路径改变时触发 136 | * xhr:success: 请求成功返回后触发 137 | * filter:render: 每一级渲染时触发 138 | * change: 当值改变时触发 139 | * reject: 拒绝选择操作时触发 140 | -------------------------------------------------------------------------------- /examples/webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var webpack = require('webpack'); 3 | var HtmlWepackPlugin = require('html-webpack-plugin'); 4 | 5 | process.env.NODE_ENV != 'ci' && require('./app'); 6 | 7 | function resolve(dir) { 8 | return path.join(__dirname, dir); 9 | } 10 | 11 | module.exports = { 12 | watch: process.env.NODE_ENV != 'ci', 13 | 14 | entry: { 15 | example: resolve('src/example/example'), 16 | doc: resolve('src/doc/doc') 17 | }, 18 | 19 | resolve: { 20 | alias: { 21 | vue: 'vue/dist/vue.js', 22 | vm: resolve('../src'), 23 | type: 'type-of', 24 | ajax: 'component-ajax' 25 | }, 26 | extensions: ['.js', '.vue'] 27 | }, 28 | 29 | output: { 30 | path: resolve('_build_'), 31 | filename: '[name].js', 32 | library: 'this', 33 | libraryTarget: 'umd' 34 | }, 35 | 36 | module: { 37 | rules: [ 38 | { 39 | test: /\.css$/, 40 | loader: 'style-loader!css-loader' 41 | }, 42 | { 43 | test: /\.vue$/, 44 | loader: 'vue-loader', 45 | options: { 46 | loaders: [ 47 | 'vue-style-loader', 48 | 'css-loader', 49 | { 50 | loader: 'postcss-loader', 51 | options: { 52 | plugins: { 53 | autoprefixer: {} 54 | } 55 | } 56 | } 57 | ] 58 | } 59 | }, 60 | 61 | { 62 | test: /\.js$/, 63 | loader: 'babel-loader' 64 | }, 65 | 66 | { 67 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 68 | loader: 'url-loader' 69 | }, 70 | 71 | { 72 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 73 | loader: 'url-loader' 74 | }, 75 | 76 | { 77 | test: /\.md$/, 78 | loaders: [ 79 | 'vue-loader', 80 | { 81 | loader: 'vue-md-loader', 82 | options: { 83 | preProcess(source) { 84 | // console.log('pre', source) 85 | return source 86 | }, 87 | afterProcess(result) { 88 | // console.log('after', result) 89 | return result 90 | }, 91 | afterProcessLiveTemplate(template) { 92 | return `
${template}
` 93 | }, 94 | rules: { 95 | 'table_open': () => '
', 96 | 'table_close': () => '
' 97 | } 98 | } 99 | } 100 | ] 101 | } 102 | ] 103 | }, 104 | 105 | plugins: [ 106 | new HtmlWepackPlugin({ 107 | filename: 'example.html', 108 | template: resolve('src/example/index.html'), 109 | chunks: ['example', 'lib', 'vm'] 110 | }), 111 | 112 | new HtmlWepackPlugin({ 113 | filename: 'doc.html', 114 | template: resolve('src/doc/index.html'), 115 | chunks: ['doc', 'lib', 'vm'] 116 | }) 117 | ] 118 | }; --------------------------------------------------------------------------------