├── .editorconfig
├── .gitignore
├── README.md
├── SUMMARY.md
├── about
    ├── PR.md
    ├── before.md
    ├── component-compatibility.md
    ├── component-standard.md
    ├── playground.md
    └── questions.md
├── book.json
├── chart
    └── circle.md
├── cover.jpg
├── date
    ├── clocker.md
    ├── format.md
    ├── seconds-countdown.md
    └── time-components.md
├── detection
    ├── enter-view.md
    ├── orientation.md
    └── shake.md
├── form
    ├── address.md
    ├── calendar.md
    ├── cell.md
    ├── checker.md
    ├── checklist.md
    ├── color-picker.md
    ├── datetime.md
    ├── group.md
    ├── inline-calendar.md
    ├── number.md
    ├── picker.md
    ├── popup-picker.md
    ├── radio.md
    ├── range.md
    ├── rater.md
    ├── selector.md
    ├── switch.md
    ├── textarea.md
    ├── validator.md
    ├── x-button.md
    ├── x-input.md
    ├── x-number.md
    └── x-textarea.md
├── guide
    ├── http.md
    └── router.md
├── image
    ├── blur.md
    ├── masker.md
    ├── swiper.md
    └── wechat-emotion.md
├── install
    ├── script.md
    ├── umd.md
    └── vue.md
├── layout
    ├── button-tab.md
    ├── flexbox.md
    ├── popup.md
    ├── scroller.md
    ├── sticky.md
    ├── tab.md
    ├── tabbar.md
    ├── timeline.md
    └── x-header.md
├── message
    ├── actionsheet.md
    ├── alert.md
    ├── confirm.md
    ├── dialog.md
    ├── loading.md
    ├── spinner.md
    └── toast.md
├── number
    └── number-roller.md
├── style
    ├── 1px.md
    └── reddot.md
├── styles
    ├── ebook.css
    ├── mobi.css
    └── website.css
├── template
    └── common.md
├── ui
    ├── badge.md
    ├── divider.md
    ├── icon.md
    ├── progress.md
    └── tips-components.md
└── wiki
    └── meta.md


/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 | 
3 | [*]
4 | charset = utf-8
5 | indent_style = space
6 | indent_size = 2
7 | end_of_line = lf
8 | insert_final_newline = true
9 | trim_trailing_whitespace = true


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Node rules:
 2 | ## Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
 3 | .grunt
 4 | 
 5 | ## Dependency directory
 6 | ## Commenting this out is preferred by some people, see
 7 | ## https://docs.npmjs.com/misc/faq#should-i-check-my-node_modules-folder-into-git
 8 | node_modules
 9 | 
10 | # Book build output
11 | _book
12 | 
13 | # eBook build output
14 | *.epub
15 | *.mobi
16 | *.pdf


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <p align="center">
 2 |   <a href="http://vux.li">
 3 |     <img src="https://raw.githubusercontent.com/airyland/vux/master/logo.png">
 4 |   </a>
 5 | </p>
 6 | <p align="center">Be Cool with Vue and WeUI.</p>
 7 | <p align="center">
 8 |   <a href="https://vuxjs.gitbooks.io/vux/content/about/questions.html">
 9 |     <img src="https://img.shields.io/badge/chat-%20on%20bearychat%20-82c547.svg?style=flat-square">
10 |   </a>
11 | </p>
12 | <p align="center">Vux = Vue + WeUI + A Bunch of Components </p>
13 | <p align="center">
14 |   <a href="https://www.npmjs.com/package/vux">
15 |     <img src="https://img.shields.io/npm/v/vux.svg?style=flat-square" alt="">
16 |   </a>
17 |   <a href="https://www.npmjs.com/package/vux">
18 |     <img src="https://img.shields.io/npm/dm/vux.svg?style=flat-square" alt="">
19 |   </a>
20 |   <a href="http://issuestats.com/github/airyland/vux">
21 |     <img src="http://issuestats.com/github/airyland/vux/badge/issue?style=flat-square" alt="">
22 |   </a>
23 | </p>
24 | 
25 | # Vux
26 | 
27 | Vux 基于`Vue`和`WeUI`的组件库。
28 | 
29 | Vux的目标是：
30 | 
31 | + 尽量满足手机端页面大部分组件需求。
32 | + 尽量保持小体积(甚至不依赖`Zepto`)。
33 | + 尽量简洁优雅。
34 | 
35 | ## Demo
36 | 
37 | <p align="center">
38 |   <a href="https://vux.li/?x-page=github_readme">https://vux.li</a><br/>
39 |   <img src="https://raw.githubusercontent.com/airyland/vux/master/assets/qr.png" width="300">
40 | </p>
41 | 
42 | ### 文档修订
43 | 
44 | 
45 | 
46 | ``` bash
47 | # clone the doc repo
48 | git clone https://github.com/vuxjs/vux-doc.git
49 | 
50 | # 安装gitbook-cli
51 | npm install gitbook-cli -g
52 | 
53 | # cd到文档目录
54 | gitbook install
55 | gitbook serve
56 | 
57 | ```
58 | 


--------------------------------------------------------------------------------
/SUMMARY.md:
--------------------------------------------------------------------------------
 1 | # Summary
 2 | 
 3 | * [关于Vux](README.md)
 4 |    * [开始使用之前](about/before.md)
 5 |    * [常见问题](about/questions.md)
 6 |    * [兼容](about/component-compatibility.md)
 7 |    * [组件规范](about/component-standard.md)
 8 |    * [PR规范](about/PR.md)
 9 |    * [playground](about/playground.md)
10 |    * 版本变更
11 |    * 谁在使用
12 |    * 最佳实践
13 | * 安装
14 |    * [vue-cli项目引用.vue组件(推荐)](install/vue.md)
15 |    * [vue-cli项目引用umd组件](install/umd.md)
16 |    * [使用script全局引入](install/script.md)
17 | * 布局组件
18 |    * [Flexbox](layout/flexbox.md)
19 |    * [Scroller](layout/scroller.md)
20 |    * [Tab 选项卡](layout/tab.md)
21 |    * [Popup 弹出层](layout/popup.md)
22 |    * [Sticky 自动固定在顶部](layout/sticky.md)
23 |    * [Tabbar 底部导航](layout/tabbar.md)
24 |    * [ButtonTab](layout/button-tab.md)
25 |    * [Timeline](layout/timeline.md)
26 |    * [XHeader](layout/x-header.md)
27 |    * Step
28 | * [UI组件](ui/readme.md)
29 |    * [divider 横向分隔线](ui/divider.md)
30 |    * [badge](ui/badge.md)
31 |    * [icon](ui/icon.md)
32 |    * Search 搜索
33 | * 常用样式
34 |    * [1px解决方案](style/1px.md)
35 |    * [reddot红点提示](style/reddot.md)
36 | * [表单组件](form.md)
37 |    * [Group表单分组组件](form/group.md)
38 |    * [Cell](form/cell.md)
39 |    * [Address](form/address.md)
40 |    * [x-button 按钮](form/x-button.md)
41 |    * [x-input 单行文本输入](form/x-input.md)
42 |    * [x-textarea 多行输入框](form/x-textarea.md)
43 |    * [x-number 数字输入](form/x-number.md)
44 |    * [checklist 多选](form/checklist.md)
45 |    * [selector 下拉选择](form/selector.md)
46 |    * [switch 开关](form/switch.md)
47 |    * [rater 评分](form/rater.md)
48 |    * [Inline-Calendar 内联日历](form/inline-calendar.md)
49 |    * [Calendar 日历](form/calendar.md)
50 |    * [Radio 单选](form/radio.md)
51 |    * [Checker 灵活的选择组件](form/checker.md)
52 |    * [Datetime 时间](form/datetime.md)
53 |    * [Range](form/range.md)
54 |    * picker
55 |    * popup-picker
56 |    * 表单验证(v0.1.1)
57 | * 时间组件
58 |    * [日期倒计时](date/clocker.md)
59 |    * [秒数倒计时](date/seconds-countdown.md)
60 |    * [轻量时间格式化](date/format.md)
61 |    * 相对时间
62 | * 数字组件
63 |    * [number-roller 数字滚动](number/number-roller.md)
64 | * 提示组件
65 |    * [Loading](message/loading.md)
66 |    * [Alert](message/alert.md)
67 |    * [Confirm](message/confirm.md)
68 |    * [Toast](message/toast.md)
69 |    * [Actionsheet](message/actionsheet.md)
70 |    * [Dialog](message/dialog.md)
71 |    * [Spinner](message/spinner.md)
72 | * [图片](image.md)
73 |    * [背景模糊](image/blur.md)
74 |    * [半透明遮罩](image/masker.md)
75 |    * [轮播](image/swiper.md)
76 |    * [表情图片](image/wechat-emotion.md)
77 |    * 上传(未支持)
78 |    * 点击全屏预览图片(未支持)
79 | * [动态检测](check/readme.md)
80 |    * [屏幕翻转](detection/orientation.md)
81 |    * [手机摇一摇](detection/shake.md)
82 | * 图表组件
83 |    * [Circle 圆圈](chart/circle.md)
84 | * [http请求](guide/http.md)
85 | * [router 路由](guide/router.md)
86 | * 手势操作
87 | 
88 | 


--------------------------------------------------------------------------------
/about/PR.md:
--------------------------------------------------------------------------------
 1 | # PR 规范
 2 | 
 3 | + 提交前确认已经`rebase`了开发分支代码
 4 | + 只修改组件源代码，不需要进行`xbuild`操作
 5 | + 遵从代码缩进规范，确认`npm run dev`时没有`eslint`错误
 6 | + 如果添加了新的`feature`或者修复了某个bug, 需要在相应的demo文件增加example
 7 | 
 8 | ## Commit Message
 9 | 
10 | 提交消息如果是修改了特定组件，请使用组件名+冒号+英文空格+英文提交信息的形式 
11 |   
12 |   粟子: `Cell: Add some prop`
13 | 
14 | 
15 | ## 特定组件依赖
16 | 
17 | 带有子组件并且有selected状态的需要使用multi-mixin, 工具库位于`src/mixins/multi-items.js`，可以参考`button-tab`、`tabbar`等组件。
18 | 


--------------------------------------------------------------------------------
/about/before.md:
--------------------------------------------------------------------------------
 1 | # 开始使用vux之前
 2 | 
 3 | 我们假设你应该已经写过`vue`页面或者看过文档，否则在使用过程中会遇到很多疑惑。这种疑惑的锅vux不背 :doge:。
 4 | 
 5 | 如果以下概念有不清楚的地方，需要再次查看文档，聪明如你，肯定花不了多少时间：
 6 | 
 7 | + `slot` 内容插槽
 8 | + `:prop` `:prop.sync` `:prop.once`
 9 | + `@click` `events` `$emit` 
10 | 
11 | ## 文档链接
12 | 
13 | + [vue官方文档](http://cn.vuejs.org)
14 | + [webpack](http://webpack.github.io)
15 | + [vue-loader](https://github.com/vuejs/vue-loader)
16 | + [es6](http://es6.ruanyifeng.com/)
17 | + [vue-router](https://github.com/vuejs/vue-router)
18 | 
19 | ## 相关开源项目
20 | 
21 | 除了Vue 及 WeUI，组件部分代码及设计来自于以下开源项目或网站：
22 | 
23 | + [FrozenUI](https://github.com/frozenui/frozenui)
24 | + [Ant Design](https://github.com/ant-design/ant-design)
25 | + Ant UI
26 | + [XScroll](https://github.com/huxiaoqi567/xscroll)
27 | + [Ionic](https://github.com/driftyco/ionic)
28 | + [SUI Mobile](https://github.com/sdc-alibaba/SUI-Mobile)
29 | + Spmjs.io (已下线)
30 | 


--------------------------------------------------------------------------------
/about/component-compatibility.md:
--------------------------------------------------------------------------------
1 | ## 兼容
2 | 
3 | + Vux兼容`Android 4.0+`、微信webview及iOS 主流版本的`Safari`。
4 | + Vux没有对Android上的火狐做兼容
5 | 
6 | > 2016-04-19 微信官方发布消息，Android `x5`内核 已升级到`Blink`，可以愉快地写`flex`了。


--------------------------------------------------------------------------------
/about/component-standard.md:
--------------------------------------------------------------------------------
 1 | # 开发规范
 2 | 
 3 | ## 0. 代码规范
 4 | 
 5 | ### 主要原则
 6 | 
 7 | + 使用最新es6语法
 8 | + 通过项目的eslint
 9 | 
10 | ### 具体细则
11 | 
12 | + 用`const`或者`let`代替`var`
13 | + 依赖包括工具函数分离成单独的js文件`import`
14 | 
15 | ## 1. 组件
16 | 
17 | ### 组件命名
18 | 
19 | + 尽量简单、标准。如果与原生标签一样，在前面加上`x`，如`x-input`,`x-textarea`,`x-img`
20 | + export 出来的对象命名为`驼峰式`，如`Radio`,`XInput`,`XTextarea`
21 | + 假设存子组件，子组件命名在父组件后面加上`-item`, 如`flexbox`及`flexbox-item`, `tab`及`tab-item`
22 | 
23 | ### 组件目录
24 | 
25 | + 每个组件为单独的目录，位于`src/components/`下，目录名全小写，入口文件为`index.vue`
26 | + 若项目包含子组件，入口文件同样为`index.vue`，同时目录下包含与组件名同名的文件，如`tab.vue`、`tab-item.vue`
27 | 
28 | ### 组件属性
29 | 
30 | + 必须规定`type`或者`validator`进行类型验证
31 | + 不要加`coerce`
32 | 
33 | ## 2. 事件
34 | 
35 | ### 命名
36 | 
37 | + 统一以on前缀，如on-change。这样规范的原因：
38 |   + 避免与原生事件(如 `change`) 同名冲突重复收到DOM事件且参数错误
39 |   + 容易读写，与其他类型属性区分
40 | 
41 | ## 3. 模板
42 | 
43 | + 不能为`片断`模板(不会暴露至外部使用的公用小组件除外)
44 | + `class`和`style`超过两个属性要写到`computed`里
45 | 
46 | ## 4. 版本发布
47 | 
48 | + 修改`package.json`的version
49 | + 添加`git tag`
50 | + `npm publish`
51 | + `git push origin master`
52 | + `git push origin tag`
53 | + 登录`Github`修改最新release的发布信息


--------------------------------------------------------------------------------
/about/playground.md:
--------------------------------------------------------------------------------
  1 | # playground
  2 | 
  3 | ## 页面接口
  4 | 
  5 | ### https://vux.li/api/v1/demo.html
  6 | 
  7 | > 简易接口，用于把代码拼凑成完整的vue页面，文档中的例子都是使用该接口以iframe嵌入。
  8 | 
  9 | > 注意`GET`方式url长度有限制，所以这种方式用于相对简单的例子。
 10 | 
 11 | ### url参数
 12 | 
 13 | + `components` 使用的组件，英文逗号分隔，如 `Group,Radio`
 14 | + `javascript` js代码，以`export default {`开头， `}`结束
 15 | + `template` 模板，普通`html`代码
 16 | + `style` 样式,只支持一般css，不支持指定`lang`及`scoped`
 17 | 
 18 | 
 19 | ## 在文档中的例子：
 20 | 
 21 | 写法同`vue`文件，但是只支持普通css写法，不支持less等。不支持`import`外部组件。
 22 | 
 23 | > 通过components来注册使用到的组件，`必需`
 24 | 
 25 | > 宽度width默认为100%
 26 | 
 27 | > 高度height默认为 100
 28 | 
 29 | ```` html
 30 | ``` vux width=100% height=100 components=Circle raw=true
 31 | <template>
 32 |   <div style='width:100px;height:100px;'>
 33 |     <circle :percent='percent2' :stroke-width=6 :trail-width=6 :stroke-color='strokeColor2' trail-color="#ececec">
 34 |       <span :style="{color: strokeColor2}">{{percent2}}%</span>
 35 |     </circle>
 36 |   </div>
 37 | </template>
 38 | 
 39 | <script>
 40 | export default {
 41 |   ready () {
 42 |     setInterval(this.update, 2000)
 43 |   },
 44 |   data () {
 45 |     return {
 46 |       percent2: 30,
 47 |       strokeColor2: '#3FC7FA'
 48 |     }
 49 |   },
 50 |   methods: {
 51 |     update: function () {
 52 |       const colorMap = ['#3FC7FA', '#85D262', '#FE8C6A']
 53 |       this.percent2 = parseInt(Math.random() * 100, 10)
 54 |       this.strokeColor2 = colorMap[parseInt(Math.random() * 3, 10)]
 55 |     }
 56 |   }
 57 | }
 58 | </script>
 59 | 
 60 | <style>
 61 | .hello {
 62 | 
 63 | 
 64 | }
 65 | </style>
 66 | ```
 67 | ````
 68 | 
 69 | ### 渲染结果
 70 | 
 71 | ``` vux width=100% height=100 components=Circle
 72 | <template>
 73 | <div style='width:100px;height:100px;'>
 74 |   <circle :percent='percent2' :stroke-width=6 :trail-width=6 :stroke-color='strokeColor2' trail-color="#ececec">
 75 |     <span :style="{color: strokeColor2}">{{percent2}}%</span>
 76 |   </circle>
 77 | </div>
 78 | </template>
 79 | 
 80 | <script>
 81 | export default {
 82 |   ready () {
 83 |     setInterval(this.update, 2000)
 84 |   },
 85 |   data () {
 86 |     return {
 87 |       percent2: 30,
 88 |       strokeColor2: '#3FC7FA'
 89 |     }
 90 |   },
 91 |   methods: {
 92 |     update: function () {
 93 |       const colorMap = ['#3FC7FA', '#85D262', '#FE8C6A']
 94 |       this.percent2 = parseInt(Math.random() * 100, 10)
 95 |       this.strokeColor2 = colorMap[parseInt(Math.random() * 3, 10)]
 96 |     }
 97 |   }
 98 | }
 99 | </script>
100 | 
101 | <style>
102 | .hello {
103 | }
104 | </style>
105 | ```


--------------------------------------------------------------------------------
/about/questions.md:
--------------------------------------------------------------------------------
 1 | # 常见问题
 2 | 
 3 | ## 其他格式的文档有么?
 4 | 
 5 | + [PDF](https://www.gitbook.com/download/pdf/book/vuxjs/vux)
 6 | + [ePub](https://www.gitbook.com/download/epub/book/vuxjs/vux)
 7 | + [Mobi](https://www.gitbook.com/download/mobi/book/vuxjs/vux)
 8 | 
 9 | ## 不懂Vue， 怎么用
10 | 
11 | 去学
12 | 
13 | ## Vux是微信官方项目吗
14 | 
15 | 不是，但是Vux依赖于微信官方开发的[`WeUI`](https://github.com/weui/weui)
16 | 
17 | ## Vux和Vuex名字太像了
18 | 
19 | 真不是故意的
20 | 
21 | ## 可以在template中使用其他标签吗
22 | 
23 | 当然可以，局部注册组件的时候指定名字。
24 | 
25 | ``` js
26 | {
27 |   components: {
28 |     xalert: Alert
29 |   }
30 | }
31 | 
32 | ```
33 | 
34 | 如果使用全局注册，则
35 | 
36 | ``` js
37 | Vue.component('xalert', vuxAlert)
38 | ```
39 | 
40 | ## 为什么部分组件要加x-前缀
41 | 
42 | 若不更名，可能在开发时与标准html标签相同而导致冲突或者bug。
43 | 
44 | ## 有QQ交流群吗
45 | 
46 | 没有。
47 | 但是你可以**付费**加入Bearychat。
48 | Bearychat [vux@bearychat](https://vux.bearychat.com/)
49 | 
50 | ### 为什么要付费：
51 | 
52 | > 目前处理起来很费时间
53 | 
54 | > 设定门槛
55 | 
56 | > 时间有限，无法用同样的标准来对待每一位用户的每一个问题，并且不同的用户对技术支持的需求和紧急程度不同。
57 | 
58 | - 大部分人加入后没有任何问题建议，这不是我希望看到的，对项目开发无益，而我还需要去审核这些无用的申请
59 | - 一部分同学不熟悉Vue提的跟Vux没任何关系，回答无非帖个文档链接
60 | - 一部分同学不会正确提问题，过滤这些问题浪费时间，即使我有空，一步一步沟通也浪费时间
61 | - 一部分同学问的是Web相关的其他问题
62 | - 可能有惊喜
63 | 
64 | ### 不付费就提不了问题吗
65 | 
66 | 不是，你依然可以到Github上提交Vux相关issue。付费只是提供了**有门槛但更为快速**的沟通方式，同时你也可以咨询其他问题。
67 | 但是Bearychat不是即时沟通，不能保证随问随回。
68 | 
69 | 假如公司项目已经使用Vux，那么可以理解为支持开源项目以及获取更加快速的技术支持。
70 | 
71 | ### 如何付费
72 | 
73 | 扫下面支付码支付 **￥188**，然后把支付单号写在加入申请信息中。
74 | 
75 | ### 满足任一条目的请不要加入
76 | 
77 | - 觉得特别贵
78 | - 还没写过Vue
79 | - 觉得是在坑钱
80 | - 要求秒回
81 | - 纯粹观望
82 | - 先加入再退款
83 | 
84 | ## 我想给你发个红包，怎么发
85 | 
86 | <img src="https://o3e85j0cv.qnssl.com/vux_pay.png" width="450">
87 | 


--------------------------------------------------------------------------------
/book.json:
--------------------------------------------------------------------------------
1 | {
2 |   "plugins": [
3 |     "vuxcode"
4 |   ],
5 |   "pluginsConfig": {}
6 | }


--------------------------------------------------------------------------------
/chart/circle.md:
--------------------------------------------------------------------------------
 1 | # 圆圈
 2 | 
 3 | ## 应用场景
 4 | 
 5 | 圆圈组件一般用于显示进度，展示百分比数据。
 6 | 
 7 | 
 8 | ## 示例
 9 | 
10 | ### 简单示例
11 | 
12 | ``` vux components=Circle
13 | <template>
14 | <div style='width:100px;height:100px;'>
15 |   <circle :percent=30 :stroke-width=5 stroke-color=#04BE02>
16 |     <span>{{percent1}}</span>
17 |   </circle>
18 | </div>
19 | </template>
20 | ```
21 | 
22 | ### 添加中间内容
23 | 
24 | > 通过默认slot支持
25 | 
26 | ``` vux components=Circle
27 | <template>
28 | <div style='width:100px;height:100px;'>
29 |   <circle :percent='percent2' :stroke-width=6 :trail-width=6 :stroke-color='strokeColor2' trail-color="#ececec">
30 |     <span :style="{color: strokeColor2}">{{percent2}}%</span>
31 |   </circle>
32 | </div>
33 | </template>
34 | 
35 | <script>
36 | export default {
37 |   ready () {
38 |     setInterval(this.update, 2000)
39 |   },
40 |   data () {
41 |     return {
42 |       percent2: 30,
43 |       strokeColor2: '#3FC7FA'
44 |     }
45 |   },
46 |   methods: {
47 |     update: function () {
48 |       const colorMap = ['#3FC7FA', '#85D262', '#FE8C6A']
49 |       this.percent2 = parseInt(Math.random() * 100, 10)
50 |       this.strokeColor2 = colorMap[parseInt(Math.random() * 3, 10)]
51 |     }
52 |   }
53 | }
54 | </script>
55 | ```
56 | 
57 | 


--------------------------------------------------------------------------------
/cover.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vuxjs/vux-doc/a289f42949693fd3c5ca11c0d2fa077119c04be9/cover.jpg


--------------------------------------------------------------------------------
/date/clocker.md:
--------------------------------------------------------------------------------
 1 | # 倒计时
 2 | 
 3 | ## 常用场景
 4 | 
 5 | + 活动报名、商品折扣时间倒计时
 6 | + 有效支付时间倒计时
 7 | 
 8 | ## 选项
 9 | 
10 | 
11 | 
12 | ## 示例
13 | 
14 | ### 一般使用
15 | 
16 | ``` vux height=60 components=Clocker
17 | <template>
18 | <p style="padding:15px;">
19 |   <span>距离2017-04-01还有</span>
20 |   <clocker time="2017-04-01"></clocker>
21 | </p>
22 | </template>
23 | ```
24 | 
25 | ### 在Cell中使用
26 | 
27 | ``` vux height=65 components=Clocker,Group,Cell
28 | <template>
29 | <group>
30 |   <cell title="20170401">
31 |     <clocker time="2017-04-01" slot="value"></clocker>
32 |   </cell>
33 | </group>
34 | </template>
35 | ```
36 | ### 自定义html模板
37 | 
38 | > 分割数字只支持两位日期，如果有两位以上，可以考虑使用`on-tick`事件来处理
39 | 
40 | ``` vux height=120 components=Clocker,Group,Cell
41 | <template>
42 | <group>
43 |   <cell title="Date:0501">
44 |     <clocker time="2016-05-01" slot="value">
45 |       <span style="color:red">%D 天</span>
46 |       <span style="color:green">%H 小时</span>
47 |       <span style="color:blue">%M 分 %S 秒</span>
48 |     </clocker>
49 |   </cell>
50 |   <cell title="分割两位数字">
51 |     <clocker time="2018-08-08" slot="value">
52 |       <span class="day">%_D1</span>
53 |       <span class="day">%_D2</span>天
54 |       <span class="day">%_H1</span>
55 |       <span class="day">%_H2</span>时
56 |       <span class="day">%_M1</span>
57 |       <span class="day">%_M2</span>分
58 |       <span class="day">%_S1</span>
59 |       <span class="day">%_S2</span>秒
60 |     </clocker>
61 |   </cell>
62 | </group>
63 | </template>
64 | 
65 | <style>
66 | .day {
67 |   background-color:#000;
68 |   color:#fff;
69 |   text-align:center;
70 |   display:inline-block;
71 |   padding:0 3px;
72 |   border-radius:3px;
73 | }
74 | </style>
75 | ```
76 | 
77 | 


--------------------------------------------------------------------------------
/date/format.md:
--------------------------------------------------------------------------------
 1 | # 轻量日期格式化
 2 | 
 3 | 轻量简单的日期格式化工具函数，毕竟很多时候我们并不想引入`moment`这个大块头。
 4 | 
 5 | 可以引入`DateFormatter`组件作为`filter`, 参数为日期格式和时间及字符串格式。
 6 | 
 7 | ``` vux height=50 components=Group filters=DateFormatter
 8 | <template>
 9 | <div>
10 |   <span v-text="time1 | date-formatter 'YYYY-MM-DD'"></span>
11 |   <br/>
12 |   <span v-text="time2 | date-formatter 'YYYY-MM-DD HH:mm:ss'"></span>
13 | </div>
14 | </template>
15 | 
16 | <script>
17 | export default {
18 |   data: {
19 |     time1: new Date('2016/01/03 19:19:19'),
20 |     time2: new Date('2016-01-03 09:09:09')
21 |   }
22 | }
23 | </script>
24 | ```


--------------------------------------------------------------------------------
/date/seconds-countdown.md:
--------------------------------------------------------------------------------
 1 | # 秒数倒计时
 2 | 
 3 | ## 使用场景
 4 | 
 5 | > 用于发送短信等耗费操作时，不要依赖前端验证，`必须一定要`同时在后端进行ratelimit验证。
 6 | 
 7 | + 短信验证重发的场景中。一般为60s, 120s
 8 | 
 9 | ## API
10 | 
11 | | 参数         | 说明                  | 类型        | 默认值 |
12 | | ----------- | ---------------------- | ---------- | ------- |
13 | | time| 可选，计时秒数  | Number  | 60 |
14 | | start| 可选，默认自动倒计时，设为false时可以手动开始计时 | Boolean | true |
15 | 
16 | ## Demo
17 | 
18 | ``` vux height=65 components=Group,Cell,Countdown
19 | <template>
20 | <group>
21 |   <cell title="15s" :value="value">
22 |     <countdown slot="value" :time="15" @on-finish="finish" v-show="show"></countdown>
23 |   </cell>
24 | </group>
25 | </template>
26 | 
27 | <script>
28 | export default {
29 |   methods: {
30 |     finish: function (index) {
31 |       this.show = false
32 |       this.value = 'completed'
33 |       console.log('current index', index)
34 |     }
35 |   },
36 |   data () {
37 |     return {
38 |       show: true,
39 |       value: ''
40 |     }
41 |   }
42 | }
43 | </script>
44 | ```
45 | 
46 | ``` vux height=125 components=Group,Cell,Countdown,Switch
47 | <template>
48 | <group>
49 |   <switch title="start" :value.sync="start"></switch>
50 |   <cell title="15s">
51 |     <countdown slot="value" :time="time" :start="start" @on-finish="finish"></countdown>
52 |   </cell>
53 | </group>
54 | </template>
55 | 
56 | <script>
57 | export default {
58 |   methods: {
59 |     finish: function (index) {
60 |       this.start = false
61 |       this.time = 20
62 |     }
63 |   },
64 |   data () {
65 |     return {
66 |       time: 15,
67 |       start: false
68 |     }
69 |   }
70 | }
71 | </script>
72 | ```
73 | 


--------------------------------------------------------------------------------
/date/time-components.md:
--------------------------------------------------------------------------------
1 | # 时间组件
2 | 
3 | 


--------------------------------------------------------------------------------
/detection/enter-view.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vuxjs/vux-doc/a289f42949693fd3c5ca11c0d2fa077119c04be9/detection/enter-view.md


--------------------------------------------------------------------------------
/detection/orientation.md:
--------------------------------------------------------------------------------
 1 | # 横竖屏切换提示
 2 | 
 3 | 此组件以指令的形式控制DOM在横竖屏下的显示，支持的选项有
 4 | 
 5 | * landscape - 当横屏时显示
 6 | * portrait - 当竖屏时显示
 7 | 
 8 | [查看在线DEMO](https://vux.li/#!/component/orientation)
 9 | 
10 | ```
11 | <template>
12 |   <div>
13 |     <div v-orientation="landscape" class="landscape"><div>竖屏观看更合适哦</div></div>
14 |     <div v-orientation="portrait" class="portrait"><div>翻转手机看效果</div></div>
15 |   </div>
16 | </template>
17 | <script>
18 | export default {
19 |   directives: {
20 |     Orientation
21 |   }
22 | }
23 | </script>
24 | ```
25 | 


--------------------------------------------------------------------------------
/detection/shake.md:
--------------------------------------------------------------------------------
 1 | # Shake 摇一摇
 2 | 
 3 | ## API
 4 | 
 5 | | 参数         | 说明                  | 类型        | 默认值 |
 6 | | ----------- | ---------------------- | ---------- | ------- |
 7 | | stop| 是否停止派发摇动事件  | Boolean  | false |
 8 | | threshold| 可选，摇动力度阈值  | Number  | 15 |
 9 | | timeout| 可选，事件收集频率  | Number  | 1000 |
10 | 
11 | 
12 | ## Demo
13 | 
14 | ``` vux height=200 components=Shake,XButton
15 | <template>
16 | <div>
17 |   <p style="text-align:center">shake your phone</p>
18 |   <p><x-button text="停止接收摇动事件" type="primary" @click="stopShake = false"></x-button></p>
19 |   <shake @shake="shake" :threshold=5></shake>
20 | </div>
21 | </template>
22 | <script>
23 | export default {
24 |   data () {
25 |     return {
26 |       stopShake: false
27 |     }
28 |   },
29 |   methods: {
30 |     'on-shake': function () {
31 |       alert('shaked')
32 |     }
33 |   }
34 | }
35 | </script>
36 | ```
37 | 


--------------------------------------------------------------------------------
/form/address.md:
--------------------------------------------------------------------------------
 1 | # Address
 2 | 
 3 | > Address 依赖于`Popup`, `Picker`, `Cell`
 4 | 
 5 | ## Props
 6 | 
 7 | | 名字 | 类型 | 默认 | 描述 |
 8 | |-----|-----|-----|-----|
 9 | | title | String | 无 | 标题 |
10 | | value | Array | [] | 表单值，`双向绑定` |
11 | | list | Array | 无 | 地址库, address源码目录下有`list.json` |
12 | | inline-desc | String | 无 | cell的子标题 |
13 | 
14 | 
15 | ## Demos
16 | 
17 | ``` html
18 | <template>
19 |   <div>
20 |     <group>
21 |       <address :title="title" :value.sync="value" :list="addressData"></address>
22 |       <cell title="上面value值" :value="value | json"></cell>
23 |       <address :title="title2" :value.sync="value2" raw-value :list="addressData"></address>
24 |       <address title="二级省市" :value.sync="value3" raw-value :list="addressData"></address>
25 |     </group>
26 |     <br/>
27 |     <x-button type="primary" @click="changeData">改变数据</x-button>
28 |   </div>
29 | </template>
30 | 
31 | <script>
32 | import { Group, Address, AddressChinaData, XButton, Cell } from '../components'
33 | 
34 | export default {
35 |   components: {
36 |     Group,
37 |     Address,
38 |     XButton,
39 |     Cell
40 |   },
41 |   data () {
42 |     return {
43 |       title: '默认为北京',
44 |       value: [],
45 |       title2: '手动设定',
46 |       value2: ['广东省', '深圳市', '南山区'],
47 |       value3: ['海南省', '儋州市', '--'],
48 |       addressData: AddressChinaData
49 |     }
50 |   },
51 |   methods: {
52 |     changeData () {
53 |       this.value2 = ['430000', '430400', '430407']
54 |     }
55 |   }
56 | }
57 | </script>
58 | ```


--------------------------------------------------------------------------------
/form/calendar.md:
--------------------------------------------------------------------------------
 1 | # Calendar 日历
 2 | 
 3 | > `Calendar`组件直接依赖于`InlineCalendar`+`Popup` 
 4 | 
 5 | ## 与Datetime的使用场景差别
 6 | 
 7 | + `calendar` 不支持具体钟点选择，因此需要选择具体时间时需要使用 `datetime`
 8 | + `calendar` 支持范围选择，如果使用`datetime`需要使用两次来分别选择开始时间和结束时间
 9 | + `calendar` 更适合于需要更好展现整个月信息及星期信息的情况，如跨月的日程安排， `datetime`更适合于选择距离今天不远的日期场景，如近期任务安排
10 | 
11 | 
12 | ## Props
13 | 
14 | 日历相关属性同 [`inline-calendar`](inline-calendar.md)
15 | 
16 | | 名字 | 类型 | 默认 | 描述 |
17 | |-----|-----|-----|-----|
18 | | title | String | 无 | cell标题 |
19 | 
20 | ## Demo
21 | 
22 | ``` html
23 | <group>
24 |   <calendar :value.sync="value" title="Date Picker"></calendar>
25 | </group>
26 | ```
27 | 


--------------------------------------------------------------------------------
/form/cell.md:
--------------------------------------------------------------------------------
 1 | # Cell
 2 | 
 3 | ## Props
 4 | 
 5 | | 参数         | 说明                  | 类型        | 默认值 |
 6 | | ----------- | ---------------------- | ---------- | ------- |
 7 | | title | 可选，label文字 | String | 无 |
 8 | | value | 可选，右边文字 | String | 无 |
 9 | | inline-desc | 可选，label第二行文字 | String | 无 |
10 | | link | 可选,支持http绝对路径及`v-link`配置 | String or Object | 无 |
11 | | is-link | 可选，是否为链接，如果为true，样式上会出现箭头。当link存在时，is-link会自动设置为`true`  | Boolean  | false |
12 | | primary | 可选，可选值为title和content, 对应的div会加上weui_cell_primary类名实现内容宽度自适应 | String | title |
13 | 
14 | ## Slots
15 | 
16 | |    名字    | 说明                  | 
17 | | ----------- | ------------------- | 
18 | | 默认slot | value区域 |
19 | | icon | title前，用于定义icon区域 |
20 | | after-title | title 后面区域 |
21 | | value | value区域, 同默认slot, 保留仅出于兼容考虑，不建议再使用 |
22 | 
23 | ### Demo
24 | 
25 | ``` vux height=65 components=Group,Cell
26 | <template>
27 | <group>
28 |   <cell title="My Account" value="Protected" @click="click"></cell>
29 | </group>
30 | </template>
31 | <script>
32 | export default {
33 |   methods: {
34 |     click: function () {
35 |       alert('click')
36 |     }
37 |   }
38 | }
39 | </script>
40 | ```
41 | ### 链接
42 | 
43 | ``` vux height=65 components=Group,Cell
44 | <template>
45 | <group>
46 |   <cell title="My Account" value="Protected" is-link></cell>
47 | </group>
48 | </template>
49 | ```


--------------------------------------------------------------------------------
/form/checker.md:
--------------------------------------------------------------------------------
  1 | # checker 灵活的单选组件
  2 | 
  3 | 虽然有`Radio`组件提供单选功能，但是有很多情况下我们需要定义选项的样式布局，比如电商网站的商品属性选择。因此提供了`checker`，它提供了底层选择的抽象封装，使用者只需要考虑不同状态的样式。
  4 | 
  5 | > 当前组件由 `checker` 和 `checker-item` 组成
  6 | 
  7 | > 未来版本(可能在v0.2.0)将支持多选
  8 | 
  9 | ## checker 属性
 10 | 
 11 | | 参数         | 说明                  | 类型        | 
 12 | | ----------- | ---------------------- | ---------- | 
 13 | | default-item-class | 可选，应用于所有子选项 | String | 
 14 | | selected-item-class | 必选，选中时的class | String |
 15 | | disabled-item-class | 当有`不可点击`的选项时必选 | String | 
 16 | | value | 必选，双向绑定 | String |
 17 | | on-change | 选中值变化时触发 | 参数为`(value)` | 
 18 | | on-item-click | 当点击任何选项时触发 | 参数为`(itemValue, isDisabled)` |
 19 | 
 20 | ## checker-item 属性
 21 | 
 22 | | 参数         | 说明                  | 类型        | 默认值 |
 23 | | ----------- | ---------------------- | ---------- | ------- |
 24 | | value | 必选，选项值 | String | |
 25 | | disabled | 可选，是否不可点击 | Boolean | false |
 26 | 
 27 | ## 使用
 28 | 
 29 | ``` html
 30 | <checker :value.sync="somevalue"
 31 |          default-item-class="demo-item-defalut"
 32 |          selected-item-class="demo-item-selected">
 33 |   <checker-item value="1">1</checker-item>
 34 |   <checker-item value="2">2</checker-item>
 35 |   <checker-item value="3" disabled>3</checker-item>
 36 | </checker>
 37 | ```
 38 | 
 39 | ## 例子
 40 | 
 41 | ``` vux components=Checker,CheckerItem
 42 | <template>
 43 | <checker :value.sync="demo1" default-item-class="demo1-item" selected-item-class="demo1-item-selected">
 44 |   <checker-item value="1">1</checker-item>
 45 |   <checker-item value="2">2</checker-item>
 46 |   <checker-item value="3">3</checker-item>
 47 | </checker>
 48 | <br/>
 49 | <span>current value is: {{demo1}}</span>
 50 | </template>
 51 | 
 52 | <script>
 53 | export default {
 54 |   data () {
 55 |     return {
 56 |       demo1: ''
 57 |     }
 58 |   }
 59 | }
 60 | </script>
 61 | 
 62 | <style>
 63 | .demo1-item {
 64 |   display: inline-block;
 65 |   border: 1px solid #ececec;
 66 |   padding: 5px 15px;
 67 | }
 68 | .demo1-item-selected {
 69 |   border: 1px solid green;
 70 | }
 71 | </style>
 72 | ```
 73 | 
 74 | ### 默认值
 75 | 
 76 | ``` vux components=Checker,CheckerItem
 77 | <template>
 78 | <checker :value.sync="demo2" default-item-class="demo2-item" selected-item-class="demo2-item-selected">
 79 |   <checker-item value="1">1</checker-item>
 80 |   <checker-item value="2">2</checker-item>
 81 |   <checker-item value="3">3</checker-item>
 82 | </checker>
 83 | <br/>
 84 | <span>current value is: {{demo2}}</span>
 85 | </template>
 86 | 
 87 | <script>
 88 | export default {
 89 |   data () {
 90 |     return {
 91 |       demo2: '2'
 92 |     }
 93 |   }
 94 | }
 95 | </script>
 96 | 
 97 | <style>
 98 | .demo2-item {
 99 |   width: 40px;
100 |   height: 40px;
101 |   border: 1px solid #ccc;
102 |   display: inline-block;
103 |   border-radius: 50%;
104 |   line-height: 40px;
105 |   text-align: center;
106 | }
107 | .demo2-item-selected {
108 |   border-color: green;
109 | }
110 | </style>
111 | ```
112 | 
113 | ### disabled
114 | 
115 | ``` vux height=400 components=Checker,CheckerItem,Group,Cell,Popup
116 | <template>
117 | <group>
118 |   <cell title="select color" :value="demo4" is-link @click="showPopup=true"></cell>
119 | </group>
120 | <popup :show.sync="showPopup" class="checker-popup">
121 |   <div style="padding:10px 10px 40px 10px;">
122 |     <p style="padding: 5px 5px 5px 2px;color:#888;">Colors</p>
123 |     <checker
124 |     :value.sync="demo4"
125 |     default-item-class="demo4-item"
126 |     selected-item-class="demo4-item-selected"
127 |     disabled-item-class="demo4-item-disabled"
128 |     @on-item-click="showPopup=false">
129 |       <checker-item value="花跟叶">花跟叶</checker-item>
130 |       <checker-item value="鸟与树">鸟与树</checker-item>
131 |       <checker-item value="我和你">我和你</checker-item>
132 |       <checker-item value="全套礼品装" disabled>全套礼品装</checker-item>
133 |     </checker>
134 |   </div>
135 | </popup>
136 | </template>
137 | 
138 | <script>
139 | export default {
140 |   data () {
141 |     return {
142 |       demo4: '花跟叶',
143 |       showPopup: false
144 |     }
145 |   }
146 | }
147 | </script>
148 | 
149 | <style>
150 | .demo4-item {
151 |   display: inline-block;
152 |   background-color: #ddd;
153 |   color: #222;
154 |   font-size: 14px;
155 |   padding: 5px 10px;
156 |   margin-right: 10px;
157 |   line-height: 18px;
158 |   border-radius: 15px;
159 | }
160 | .demo4-item-selected {
161 |   background-color: #FF3B3B;
162 |   color: #fff;
163 | }
164 | .demo4-item-disabled {
165 |   color: #999;
166 | }
167 | </style>
168 | ```


--------------------------------------------------------------------------------
/form/checklist.md:
--------------------------------------------------------------------------------
  1 | # checklist 多选
  2 | 
  3 | ## Props
  4 | 
  5 | | 参数         | 说明                  | 类型        | 默认值 |
  6 | | ----------- | ---------------------- | ---------- | ------- |
  7 | | title | 选项标题 | String | 无 |
  8 | | required| 可选，是否为必选项 | Boolean | true |
  9 | | options | 选项数组 | Array | 无 |
 10 | | value | 可选，已选择条目值 | Array | 无 |
 11 | | max | 可选，至多选择条目个数 | Number | 无 |
 12 | | min | 可选，至少选择条目个数 | Number | 无 |
 13 | | random-order | 可选，是否打乱条目排序 | Boolean | false |
 14 | 
 15 | > 当设置`required=false`时，`min`设置将无效，即最少选定个数为0
 16 | 
 17 | ## Demo
 18 | 
 19 | ### 基本使用
 20 | 
 21 | ``` vux height=240 components=Checklist
 22 | 
 23 | <template>
 24 | <checklist title="请选择你的爱好" :options="hobbies" :value.sync="hobby" @change="change"></checklist>
 25 | </template>
 26 | <script>
 27 | export default {
 28 |   data () {
 29 |   	return {
 30 |   		hobbies: ['篮球', '足球', '羽毛球', '打飞机'],
 31 |   		hobby: ['打飞机']
 32 |   	}
 33 |   },
 34 |   methods: {
 35 |   	change (val) {
 36 |   		console.log('change', val)
 37 |   	}
 38 |   }
 39 | }
 40 | </script>
 41 | ```
 42 | 
 43 | ### 设定选择条目个数
 44 | 
 45 | ``` vux height=250 components=Checklist
 46 | 
 47 | <template>
 48 | <checklist title="至多选择两项" :options="items" :value.sync="selectedItems" :max=2 :required=false @change="change"></checklist>
 49 | </template>
 50 | <script>
 51 | export default {
 52 |   data () {
 53 |     return {
 54 |       items: ['篮球', '足球', '羽毛球', '台球'],
 55 |       selectedItems: []
 56 |     }
 57 |   },
 58 |   methods: {
 59 |     change (val) {
 60 |       console.log("change", val)
 61 |     }
 62 |   }
 63 | }
 64 | </script>
 65 | 
 66 | ```
 67 | 
 68 | 
 69 | ### key-value类型数组展示
 70 | 
 71 | > 每个条目的`key`必须为字符串
 72 | 
 73 | ``` vux height=200 components=Checklist
 74 | 
 75 | <template>
 76 | <checklist title="Please select" :options="objectList" :value.sync="objectListValue"></checklist>
 77 | </template>
 78 | <script>
 79 | export default {
 80 | 	data () {
 81 | 		return {
 82 | 			objectList: [{key: '1', value: '001 value'}, {key: '2', value: '002 value'}, {key: '3', value: '003 value'}],
 83 | 			objectListValue: ['1', '2']
 84 | 		}
 85 | 	}
 86 | }
 87 | </script>
 88 | ```
 89 | 
 90 | ### 打乱展示顺序
 91 | 
 92 | ``` vux height=250 components=Checklist
 93 | 
 94 | <template>
 95 | <checklist title="随机顺序显示" :options="items" :value.sync="selectedItems" random-order></checklist>
 96 | </template>
 97 | <script>
 98 | export default {
 99 |   data () {
100 |     return {
101 |       items: ['篮球', '足球', '羽毛球', '台球'],
102 |       selectedItems: []
103 |     }
104 |   }
105 | }
106 | </script>
107 | 
108 | ```


--------------------------------------------------------------------------------
/form/color-picker.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vuxjs/vux-doc/a289f42949693fd3c5ca11c0d2fa077119c04be9/form/color-picker.md


--------------------------------------------------------------------------------
/form/datetime.md:
--------------------------------------------------------------------------------
 1 | # datetime 时间
 2 | 
 3 | > 需要与`group`一起使用。
 4 | 
 5 | ## Props
 6 | 
 7 | | 名字 | 类型 | 默认 | 描述 |
 8 | |-----|-----|-----|-----|
 9 | | format | String | 'YYYY-MM-DD' | 显示格式 |
10 | | title | String | 无 | 显示标题 |
11 | | value | String | 默认为当前日期 | 日期值 |
12 | | inline-desc | String | 无 | 副标题 |
13 | | placeholder | String | 无 | 提示文字 |
14 | | min-year | Number | 无 | 最小可选年 |
15 | | max-year | Number | 无 | 最大可选年 |
16 | | confirm-text | String | ok | 确认按钮文字 |
17 | | cancel-text | String | cancel | 取消按钮文字 |
18 | | year-row | String | {value} |年份显示格式 |
19 | | month-row | String | {value} | 月份显示格式 |
20 | | day-row | String | {value} | 日期显示格式 |
21 | | hour-row | String | {value} | 小时显示格式 |
22 | | minute-row | String | {value} | 分钟显示格式 |
23 | 
24 | ## demos
25 | 
26 | ``` html
27 | <group>
28 |   <datetime title="select a date"></datetime>
29 | </group>
30 | 
31 | <!-- 可选分钟 -->
32 | <group>
33 |   <datetime title="select minutes" format="YYYY-MM-DD HH:mm"></datetime>
34 | </group>
35 | 
36 | <!-- 设置最小和最大可选年 -->
37 | <group>
38 |   <datetime 
39 |     title="specify min-year and max-year"
40 |     :min-year=2000 
41 |     :max-year=2016
42 |     value="please select"></datetime>
43 | </group>
44 | 
45 | <!-- 自定义确认按钮和取消按钮文字 -->
46 | <gropu>
47 |   <datetime
48 |     title="自定义按钮文字"
49 |     confirm-text="确认"
50 |     cancel-text="取消"></datetime>
51 | </gropu>
52 | 
53 | <!-- 自定义时间显示文字 -->
54 | <group>
55 |   <datetime
56 |     title="xx年xx月xx日xx点xx分"
57 |     year-row="{value}年"
58 |     month-row="{value}月"
59 |     day-row="{value}日"
60 |     hour-row="{value}点"
61 |     minute-row="{value}分"></datetime>
62 | </group>
63 | 
64 | <!-- change事件 -->
65 | <group>
66 |   <datetime
67 |     title="change事件"
68 |     @change="change"></datetime>
69 | </group>
70 | 
71 | <script>
72 | export default {
73 |     methods:{
74 |         change (val) {
75 |             console.log('change',val)
76 |         }
77 |     }
78 | }
79 | </script>
80 | ```
81 | 


--------------------------------------------------------------------------------
/form/group.md:
--------------------------------------------------------------------------------
 1 | # Group
 2 | 
 3 | `Group`是一个特殊的表单`wrapper`组件，主要用于将表单分组，单个表单元素也算一组。所以常见的`行内`组件都`必须`作为`Group`的子组件。
 4 | 
 5 | 
 6 | 包括：
 7 | 
 8 | + Cell
 9 | + XInput
10 | + XTextarea
11 | + Switch
12 | + Calendar
13 | + XNumber
14 | + Radio
15 | + Address
16 | + Datetime
17 | + Selector
18 | 
19 | ## Props
20 | 
21 | | 参数         | 类型                  | 默认      | 说明 |
22 | | ----------- | ---------------------- | ---------- | ------- |
23 | | title | String | 无 | 分组标题 |
24 | | title-color | String | 默认颜色 | -- |
25 | 
26 | ## Demo
27 | 
28 | ``` vux height=500 components=Group,Switch,Cell,XInput,XTextarea,Calendar,XNumber
29 | <template>
30 | <group title="I'm group title">
31 |   <cell title="cell" value="hello world" is-link></cell>
32 |   <x-input title="x-input"></x-input>
33 |   <switch title="switch"></switch>
34 |   <x-textarea placeholder="x-textarea"></x-textarea>
35 |   <calendar title="Calendar"></calendar>
36 | </group>
37 | 
38 | <group title="I'm another group title" title-color="green">
39 |   <cell title="cell" value="hello world" is-link></cell>
40 |   <x-input title="x-input"></x-input>
41 |   <x-number title="x-number"></x-number>
42 | </group>
43 | </template>
44 | ```


--------------------------------------------------------------------------------
/form/inline-calendar.md:
--------------------------------------------------------------------------------
 1 | # Inline Calendar
 2 | 
 3 | ## Props
 4 | 
 5 | | 参数         |      类型       |     默认值     |    说明    |
 6 | | ----------- | -------------- | ---------- | ------- |
 7 | | value | String | 无 | 当前选中日期，双向绑定，默认为空，即选中当天日期 |
 8 | | start-date | String | 无 | 可选起始日期，格式为'YYYY-MM-dd' |
 9 | | end-date | String | 无 | 可选结束日期，格式为'YYYY-MM-dd' |
10 | | render-month | Array | 无 | 可选，指定渲染日期，如 [2018, 8] |
11 | | show-last-month | Boolean | true | 是否显示上个月的日期 |
12 | | show-next-month | Boolean | true | 是否显示下个月的日期 |
13 | | highlight-weekend | Boolean | false | 是否高亮周末 |
14 | | return-six-rows | Boolean | true | 是否总是渲染6行日期 |
15 | | hideHeader | Boolean | false | 是否隐藏日历头部 |
16 | | hiddeWeekList | Boolean | false | 是否隐藏星期列表 |
17 | | replace-text-list | Object | {} | 替换列表，可以将默认的日期换成文字，比如今天的日期替换成`今`，{'TODAY':'今'} |
18 | | weeks-list | Array | ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'] | 导航星期列表，从周日开始 |
19 | | custom-slot-fn | Function | 无 | 用于为特定日期添加额外的html内容，参数为(行index,列index,日期详细属性) |
20 | | render-on-value-chhange | Boolean | true | 当日期变化时是否重新渲染日历，如果是渲染了多个日历的话需要设为false |
21 | | disable-past | Boolean | false | 禁止选择过去的日期，该选项可以与start-date同时使用 |
22 | 
23 | ## demos
24 | 
25 | > PC文档样式会有偏差，后面修复。
26 | 
27 | ### 设置开始和结束时间
28 | 
29 | ``` vux height=300 components=InlineCalendar
30 | <template>
31 | <inline-calendar start-date="2016-06-04" end-date="2017-06-18"></inline-calendar>
32 | </template>
33 | ```
34 | 
35 | ### 不显示上个月和下个月的日期
36 | ``` vux height=300 components=InlineCalendar
37 | <template>
38 | <inline-calendar :show-next-month="false" :show-last-month="false"></inline-calendar>
39 | </template>
40 | ```
41 | 
42 | ### 取值
43 | ``` vux height=400 components=InlineCalendar,Group,Cell
44 | <template>
45 | <inline-calendar :value.sync="value"></inline-calendar>
46 | <group>
47 |   <cell title="current value" :value="value"></cell>
48 | </group>
49 | </template>
50 | 
51 | <script>
52 | export default {
53 |   data () {
54 |     return {
55 |       value: 'TODAY'
56 |     }
57 |   }
58 | }
59 | </script>
60 | ```


--------------------------------------------------------------------------------
/form/number.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vuxjs/vux-doc/a289f42949693fd3c5ca11c0d2fa077119c04be9/form/number.md


--------------------------------------------------------------------------------
/form/picker.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vuxjs/vux-doc/a289f42949693fd3c5ca11c0d2fa077119c04be9/form/picker.md


--------------------------------------------------------------------------------
/form/popup-picker.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vuxjs/vux-doc/a289f42949693fd3c5ca11c0d2fa077119c04be9/form/popup-picker.md


--------------------------------------------------------------------------------
/form/radio.md:
--------------------------------------------------------------------------------
  1 | # Radio 单选
  2 | 
  3 | >  `Radio`必须和`Group`一起使用。
  4 | 
  5 | ## Props
  6 | 
  7 | | 名字 | 类型 | 默认 | 描述 |
  8 | |-----|-----|-----|-----|
  9 | | options | Array | 无 | 选项列表, 支持简单数组及key=>value键值对，使用键值对时表单值为key |
 10 | | value | String | 无 | 表单值，必选，双向绑定 |
 11 | | fill-mode | Boolean | false | 是否增加自定义输入框 |
 12 | | fill-placeholder | String | 无 |自定义输入框的提示 |
 13 | | fill-lable | String | 无 | 自定义输入框标签 |
 14 | 
 15 | ## Events
 16 | 
 17 | 
 18 | | 名字 | 参数  | 描述 |
 19 | |-----|-----|-----|
 20 | | on-change | value | 值变化时触发 |
 21 | 
 22 | 
 23 | ## 预设值
 24 | 
 25 | ``` vux height=140 components=Radio,Group
 26 | <template>
 27 | <group>
 28 |     <radio :options="options" value="China"></radio>
 29 | </group>
 30 | </template>
 31 | 
 32 | <script>
 33 | export default {
 34 |     data () {
 35 |         return {
 36 |             options:['China','Japan']
 37 |         }
 38 |     }
 39 | }    
 40 | </script>
 41 | ```
 42 | 
 43 | ## 自定义输入框
 44 | 
 45 | ``` vux height=200 components=Radio,Group
 46 | <template>
 47 | <group>
 48 |     <radio :options="options" fill-mode fill-label="Other" fill-placeholder="填写其他的哦"></radio>
 49 | </group>
 50 | </template>
 51 | 
 52 | <script>
 53 | export default {
 54 |     data () {
 55 |         return {
 56 |             options:['China','Japan']
 57 |         }
 58 |     }
 59 | }
 60 | </script>
 61 | ```
 62 | 
 63 | ## 数据双向绑定
 64 | 
 65 | ``` vux height=300 components=Radio,Group
 66 | <template>
 67 | <group title="radio1">
 68 |     <radio :options="options" :value.sync="value"></radio>
 69 | </group>
 70 | <group title="radio2">
 71 |     <radio :options="options" :value.sync="value"></radio>
 72 | </group>
 73 | </template>
 74 | 
 75 | <script>
 76 | export default {
 77 |     data () {
 78 |         return {
 79 |             options:['China','Japan'],
 80 |             value:'China'
 81 |         }
 82 |     }
 83 | }
 84 | </script>
 85 | ```
 86 | 
 87 | ## change事件
 88 | 
 89 | ``` vux height=200 components=Radio,Group
 90 | <template>
 91 | <group>
 92 |     <radio :options="options" @change="change"></radio>
 93 | </group>
 94 | </template>
 95 | 
 96 | <script>
 97 | export default {
 98 |     data () {
 99 |         return {
100 |             options:['China','Japan']
101 |         }
102 |     },
103 |     methods: {
104 |         change (val) {
105 |             console.log('change',val)
106 |         }
107 |     }
108 | }
109 | </script>
110 | ```
111 | 


--------------------------------------------------------------------------------
/form/range.md:
--------------------------------------------------------------------------------
  1 | # Range 组件
  2 | 
  3 | ## Props
  4 | 
  5 | | 参数         | 说明                  | 类型        | 默认值 |
  6 | | ----------- | ---------------------- | ---------- | ------- |
  7 | | decimal | 可选，是否开启小数支持 | Boolean | false |
  8 | | value | 可选，当前选择值 | Number | 0 |
  9 | | min | 可选，取值范围最小值 | Number | 0 |
 10 | | max | 可选，取值范围最大值 | Number | 100 |
 11 | | min-html | 可选，最小值定制内容 | String | 无 |
 12 | | max-html | 可选，最大值定制内容 | String | 无 |
 13 | | step | 可选，滑动步长 | Number | 0 |
 14 | | disabled | 可选，是否为禁止状态 | Boolean | false |
 15 | | disabled-opacity | 可选，禁止状态下控件的透明度 | Number | 0.75 |
 16 | | range-bar-height | 可选，状态条的高度 | Number | 1 |
 17 | | range-handle-height | 可选，滑柄位置 | Number | 30 |
 18 | 
 19 | 
 20 | ## Demo
 21 | 
 22 | ### 基本使用
 23 | 
 24 | ``` vux width=100% height=220px components=Group,Cell,Range
 25 | 
 26 | <template>
 27 | <group>
 28 |   <cell title="Default" :inline-desc="'value: '+value1" primary="content">
 29 |     <range slot="value" :value.sync="value1"></range>
 30 |   </cell>
 31 |   <cell title="allow decimals" :inline-desc="'value is: '+value2" primary="content">
 32 |     <range slot="value" :value.sync="value2" decimal></range>
 33 |   </cell>
 34 |   <cell title="value=20" :inline-desc="'value is: '+value3" primary="content">
 35 |     <range slot="value" :value.sync="value3"></range>
 36 |   </cell>
 37 | </group>
 38 | </template>
 39 | <script>
 40 | export default {
 41 |   data () {
 42 |     return {
 43 |       value1: 0,
 44 |       value2: 0,
 45 |       value3: 20
 46 |     }
 47 |   }
 48 | }
 49 | </script>
 50 | ```
 51 | 
 52 | ### 设置起始值和最大值
 53 | 
 54 | ``` vux width=100% height=210px components=Group,Cell,Range
 55 | 
 56 | <template>
 57 | <group>
 58 |   <cell title="min=8" :inline-desc="'value is: '+value1" primary="content">
 59 |     <range slot="value" :value.sync="value1" :min=8></range>
 60 |   </cell>
 61 |   <cell title="max=88" :inline-desc="'value is: '+value2" primary="content">
 62 |     <range slot="value" :value.sync="value2" :max=88></range>
 63 |   </cell>
 64 |   <cell title="min and max" :inline-desc="'value is: '+value3" primary="content">
 65 |     <range slot="value" :value.sync="value3" :min=7 :max=77></range>
 66 |   </cell>
 67 | </group>
 68 | </template>
 69 | <script>
 70 | export default {
 71 |   data () {
 72 |     return {
 73 |       value1: 25,
 74 |       value2: 25,
 75 |       value3: 25
 76 |     }
 77 |   }
 78 | }
 79 | </script>
 80 | ```
 81 | 
 82 | ### 自定义步长
 83 | 
 84 | ``` vux width=100% height=100px components=Group,Cell,Range
 85 | <template>
 86 | <group>
 87 |   <cell title="step=10" :inline-desc="'valus is: '+value" primary="content">
 88 |     <range slot="value" :value.sync="value" :min=7 :max=77 :step=10></range>
 89 |   </cell>
 90 | </group>
 91 | </template>
 92 | <script>
 93 | export default {
 94 |   data () {
 95 |     return {
 96 |       value: 25
 97 |     }
 98 |   }
 99 | }
100 | </script>
101 | ```
102 | 
103 | ### 禁用组件
104 | 
105 | ``` vux width=100% height=150px components=Group,Cell,Range
106 | 
107 | <template>
108 |   <group>
109 |     <cell title="disabled=true" :inline-desc="'valus is: '+value1" primary="content">
110 |       <range slot="value" :value.sync="value1" disabled></range>
111 |     </cell>
112 |     <cell title="Opacity" :inline-desc="'valus is: '+value2" primary="content">
113 |       <range slot="value" :value.sync="value2" disabled :disabled-opacity=0.1></range>
114 |     </cell>
115 |   </group>
116 | </template>
117 | <script>
118 | export default {
119 |   data () {
120 |     return {
121 |       value1: 25,
122 |       value2: 25
123 |     }
124 |   }
125 | }
126 | </script>
127 | ```
128 | 
129 | ### 设置bar的高度和手柄的位置
130 | 
131 | ``` vux width=100% height=150px components=Group,Cell,Range
132 | 
133 | <template>
134 | <group>
135 |   <cell title="Bar height" :inline-desc="'value is: '+value" primary="content">
136 |     <range slot="value" :value.sync="value" :range-bar-height=4></range>
137 |   </cell>
138 |   <cell title="Handle position" :inline-desc="'value is: '+value" primary="content">
139 |     <range slot="value" :value.sync="value" :range-handle-height=5></range>
140 |   </cell>
141 | </group>
142 | </template>
143 | <script>
144 | export default {
145 |   data () {
146 |     return {
147 |       value: 25
148 |     }
149 |   }
150 | }
151 | </script>
152 | ```
153 | 
154 | ### 自定义初始值和最大值
155 | 
156 | ``` vux width=100% height=150px components=Group,Cell,Range
157 | 
158 | <template>
159 | <group>
160 |   <cell title="文字大小" :inline-desc="'font size: ' + value1" primary="content">
161 |     <range slot="value" :value.sync="value1" :min="12" :max="22" min-HTML="<span style='font-size:12px;'>小</span>" max-HTML="<span style='font-size:22px;'>大</span>"></range>
162 |   </cell>
163 |   <cell title="bcontentness" :inline-desc="'value is: ' + value2 + '%'" primary="content">
164 |     <range slot="value" :value.sync="value2" min-HTML="<span style='font-size:16px;color:#F90;'>☼</span>" max-HTML="<span style='font-size:30px;color:#F90;'>☼</span>"></range>
165 |   </cell>
166 | </group>
167 | </template>
168 | <script>
169 | export default {
170 |   data () {
171 |     return {
172 |       value1: 14,
173 |       value2: 25
174 |     }
175 |   }
176 | }
177 | </script>
178 | ```
179 | 
180 | ### 双向绑定
181 | 
182 | ``` vux width=100% height=150px components=Group,Cell,Range
183 | 
184 | <template>
185 | <group>
186 |   <cell title="Default" :inline-desc="'value: '+value" primary="content">
187 |     <range slot="value" :value.sync="value"></range>
188 |   </cell>
189 |   <cell title="Default" :inline-desc="'value: '+value" primary="content">
190 |     <range slot="value" :value.sync="value"></range>
191 |   </cell>
192 | </group>
193 | </template>
194 | <script>
195 | export default {
196 |   data () {
197 |     return {
198 |       value: 0
199 |     }
200 |   }
201 | }
202 | </script>
203 | ```


--------------------------------------------------------------------------------
/form/rater.md:
--------------------------------------------------------------------------------
 1 | # Rater 评分组件
 2 | 
 3 | ## Props
 4 | 
 5 | | 参数         | 说明                  | 类型        | 默认值 |
 6 | | ----------- | ---------------------- | ---------- | ------- |
 7 | |max|可选，最高评分值|Number|5|
 8 | |value|可选，评分值，双向绑定|Number|0|
 9 | |disabled|可选，不可点击|Boolean|false|
10 | |star|可选，评分图标样式|String|★|
11 | |active-color|可选，激活颜色|String|#fc6|
12 | |margin|可选，图标间距离|Number|2|
13 | |fontSize|可选，图标大小|Number|25|
14 | 
15 | 
16 | ### 一般使用
17 | 
18 | ``` vux components=Rater height=130
19 | <template>
20 | <div>
21 |     <rater :value=3></rater>
22 | </div>
23 | <div>
24 |     <rater :value=2 :margin="15" active-color="#04BE02"></rater>
25 | </div>
26 | <div>
27 |     <rater :value=5 :max=6 :font-size=15 active-color="#FF9900"></rater>
28 | </div>
29 | </template>
30 | <style>
31 | div {
32 |     margin:5px 0;
33 | }
34 | </style>
35 | ```
36 | 
37 | ### 不可点击
38 | 
39 | ``` vux components=Rater
40 | <template>
41 | <div>
42 |     <rater :value=4 disabled></rater>
43 | </div>
44 | <div>
45 |     <rater :value=3.5  active-color="#04BE02" disabled></rater>
46 | </div>
47 | </template>
48 | <style>
49 | div {
50 |     margin:5px 0;
51 | }
52 | </style>
53 | ```
54 | 
55 | ### 自定义评分图标
56 | 
57 | ``` vux components=Rater height=100
58 | <template>
59 | <div>
60 |     <rater :value=5 star="☼" active-color="#FF9900"></rater>
61 | </div>
62 | <div>
63 |     <rater :value=4 star="囧" active-color="#FF9900"></rater>
64 | </div>
65 | </template>
66 | <style>
67 | div {
68 |     margin:5px 0;
69 | }
70 | </style>
71 | ```
72 | 
73 | ### 双向绑定
74 | 
75 | ``` vux components=Rater height=80
76 | <template>
77 | <rater :value.sync="rate"></rater>
78 | <div v-text="'评分:' + rate"></div>
79 | </template>
80 | <script>
81 | export default {
82 |     data: {
83 |         rate:3
84 |     }
85 | }
86 | </script>
87 | ```
88 | 


--------------------------------------------------------------------------------
/form/selector.md:
--------------------------------------------------------------------------------
 1 | # selector
 2 | 
 3 | > 需要配合`group`使用
 4 | 
 5 | ## Props
 6 | 
 7 | | 名字 | 类型 | 默认 | 描述 |
 8 | |-----|-----|-----|-----|
 9 | | title | String | 无 | 标题 |
10 | | placeholder | String | 无 | placeholder |
11 | | readonly | Boolean | false | 只读 |
12 | | value | String | 无 | 表单值，`双向绑定` |
13 | | options | Array | 无 | 选项，支持简单数组及key=>value键值对 |
14 | 
15 | ## Events
16 | 
17 | 
18 | | 名字 | 参数  | 描述 |
19 | |-----|-----|-----|
20 | | on-change | (value) | 值变化时触发 |
21 | 
22 | ## Demos
23 | 
24 | ``` vux height=500 components=Group,Selector
25 | <template>
26 | <div>
27 |   <group :title="'no placeholder, the current value is : ' + defaultValue">
28 |     <selector title="省份" :options="list" :value.sync="defaultValue"></selector>
29 |   </group>
30 | 
31 |   <group title="with placeholder">
32 |     <selector placeholder="请选择省份" title="省份" :options="list" @on-change="onChange"></selector>
33 |   </group>
34 | 
35 |   <group title="without title">
36 |     <selector placeholder="请选择省份" :options="list"></selector>
37 |   </group>
38 | 
39 |   <group title="set value=广西">
40 |     <selector :value.sync="value1" title="省份" :options="plainList" @on-change="onChange"></selector>
41 |   </group>
42 | 
43 |   <group title="readonly, displays just like a cell">
44 |     <selector value="gd" readonly title="省份" :options="list"></selector>
45 |   </group>
46 | 
47 |   <group title="use plain options">
48 |     <selector value="C" title="Selector" :options="list1" @on-change="onChange"></selector>
49 |   </group>
50 | 
51 |   <group title='multi selector'>
52 |     <selector placeholder="请选择省份" title="省份" :options="list"></selector>
53 |     <selector :value.sync="value2" title="省份" :options="list"></selector>
54 |   </group>
55 | </div>
56 | </template>
57 | 
58 | <script>
59 | export default {
60 |   data () {
61 |     return {
62 |       defaultValue: '',
63 |       plainList: ['广东', '广西'],
64 |       list: [{key: 'gd', value: '广东'}, {key: 'gx', value: '广西'}],
65 |       value1: '广西',
66 |       value2: 'gd',
67 |       list1: ['A', 'B', 'C']
68 |     }
69 |   },
70 |   methods: {
71 |     onChange (val) {
72 |       console.log(val)
73 |     }
74 |   }
75 | }
76 | </script>
77 | ```


--------------------------------------------------------------------------------
/form/switch.md:
--------------------------------------------------------------------------------
 1 | # Switch
 2 | 
 3 | > 作为行内表单组件，`Switch`必须和`Group`一起使用。
 4 | 
 5 | ## Props
 6 | 
 7 | | 名字 | 类型 | 默认 | 描述 |
 8 | |-----|-----|-----|-----|
 9 | | value | Boolean | false | 表单值,`双向绑定` |
10 | | title | String | 无 | cell标题 |
11 | | disabled | Boolean | false | 是否禁止操作 |
12 | | inline-desc| String | 无 | 副标题 |
13 | 
14 | 
15 | ## Events
16 | 
17 | 
18 | | 名字 | 参数  | 描述 |
19 | |-----|-----|-----|
20 | | on-change| (value) | 值变化时触发 |
21 | 
22 | 
23 | ## 直接值
24 | 
25 | ``` vux height=160 components=Switch,Group
26 | <template>
27 | <group>
28 |   <switch title="Switch" :value=true></switch>
29 |   <switch title="Switch" :value=false></switch>
30 | </group>
31 | </template>
32 | ```
33 | 
34 | ## 双向绑定
35 | 
36 | ``` vux height=140 components=Switch,Group
37 | <template>
38 | <group>
39 |   <switch :title="'双向绑定:值为' + value1" :value.sync="value1"></switch>
40 |   <switch :title="'双向绑定:值为' + value1" :value.sync="value1"></switch>
41 | </group>
42 | </template>
43 | 
44 | <script>
45 | export default {
46 |   data: {
47 |     value1: true
48 |   }
49 | }
50 | </script>
51 | ```
52 | 
53 | ### disabled 设置不可更改
54 | 
55 | ``` vux height=140 components=Switch,Group
56 | <components>
57 | Switch,Group
58 | </components>
59 | <template>
60 | <group>
61 |   <switch title="不可更改" :value=true disabled></switch>
62 |   <switch title="不可更改" :value=false disabled></switch>
63 | </group>
64 | </template>
65 | ```
66 | 
67 | ### title支持html
68 | 
69 | ``` vux height=80 components=Switch,Group
70 | <template>
71 | <group>
72 |   <switch title="<span style='color:red'>红色文字</span>" :value=true></switch>
73 | </group>
74 | </template>
75 | ```
76 | 
77 | ### on-change 事件
78 | 
79 | ``` vux height=80 components=Switch,Group
80 | <template>
81 | <group>
82 |   <switch title="监听事件" :value=true @on-change="change"></switch>
83 | </group>
84 | </template>
85 | <script>
86 | export default {
87 |   methods: {
88 |     change: function (val) {
89 |       console.log('change', val)
90 |     }
91 |   }
92 | }
93 | </script>
94 | ```
95 | 
96 | 


--------------------------------------------------------------------------------
/form/textarea.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vuxjs/vux-doc/a289f42949693fd3c5ca11c0d2fa077119c04be9/form/textarea.md


--------------------------------------------------------------------------------
/form/validator.md:
--------------------------------------------------------------------------------
 1 | # Validator
 2 | 
 3 | 
 4 | > `绝对不能只依赖前端验证`，后端必须同样做必要的验证。
 5 | 
 6 | 唯一需要设置的是`name`属性，用于保存验证信息
 7 | 
 8 | 如果想实现更可读的表单值，即`serialize`后的数据，需要为每个表单设置`name`属性，否则返回的`data` key 都为每个表单的`uuid`。
 9 | 
10 | 验证信息属性:
11 | 
12 | + valid 是否验证通过
13 | + invalid 是否验证不通过
14 | + data 表单数据，不包含`disabled`的表单值
15 | + allData 所有表单数据，包含`disabled`的表单值
16 | 
17 | {% vux with="100%" %}
18 | <script>
19 | <validator name="demo">
20 |   <input type="submit" value="send" v-if="$demo.valid">
21 | </validator>
22 | </script>
23 | {% endvux %}


--------------------------------------------------------------------------------
/form/x-button.md:
--------------------------------------------------------------------------------
 1 | # x-button 按钮
 2 | 
 3 | ## Props
 4 | 
 5 | > 按钮文字可以用text属性也可以用直接用默认slot
 6 | 
 7 | | 参数         | 说明                  | 类型        | 默认值 |
 8 | | ----------- | ---------------------- | ---------- | ------- |
 9 | | type | 可选，可选值为default,primary,warn | String | default |
10 | | disabled | 可选，是否disabled | Boolean | false |
11 | | text | 可选，按钮文字 | String | 无 |
12 | | mini | 可选，是否为小尺寸 | Boolean | false |
13 | | plain | 可选，是否为plain样式(没有背景色) | Boolan | false |
14 | 
15 | ## Slots
16 | 
17 | | 名字 | 说明  |
18 | |-----|-----|
19 | | 默认slot | 按钮文字 |
20 | 
21 | 
22 | ### 一般使用
23 | 
24 | ``` vux components=XButton height=170
25 | <template>
26 | <x-button>submit</x-button>
27 | <x-button type="primary">primary</x-button>
28 | <x-button type="warn">Delete</x-button>
29 | </template>
30 | ```
31 | 
32 | ### 不可点击
33 | 
34 | ``` vux components=XButton height=170
35 | <template>
36 | <x-button disabled>submit</x-button>
37 | <x-button type="primary" disabled>primary</x-button>
38 | <x-button type="warn" disabled>Delete</x-button>
39 | </template>
40 | ```
41 | 
42 | ### 直接用:text指定按钮文字
43 | 
44 | ``` vux components=XButton height=50
45 | <template>
46 | <x-button type="primary" :text="btnText" :disabled="isDisabled" @click="click"></x-button>
47 | </template>
48 | 
49 | <script>
50 | export default {
51 |   data: {
52 |     btnText: 'click me',
53 |     isDisabled: false
54 |   },
55 |   methods: {
56 |     click: function () {
57 |       const _this = this
58 |       this.isDisabled = true
59 |       this.btnText = 'Processing'
60 |       setTimeout(function () {
61 |         _this.btnText = 'Done'
62 |       }, 2000)
63 |     }
64 |   }
65 | }
66 | </script>
67 | ```


--------------------------------------------------------------------------------
/form/x-input.md:
--------------------------------------------------------------------------------
 1 | # x-input 单行文本输入
 2 | 
 3 | > 命名为`x-input`避免与原生`input`标签渲染冲突
 4 | 
 5 | > 注意不要混淆：`x-input`不是原生`input`,不能使用`v-model`,数据绑定语法为`:value.sync`,也不支持大多数`input`上的事件如`focus`等，如果实在需要处理input事件，可以直接参照WeUI文档直接用html标签。
 6 | 
 7 | > `x-input`需要与`group`配合使用
 8 | 
 9 | 
10 | ## Props
11 | 
12 | | 名字 | 类型 | 默认 | 描述 |
13 | |-----|-----|-----|-----|
14 | | title | String | 无 | 标题 |
15 | | value | String | 无 | 表单值，`双向绑定` |
16 | | inline-desc | String | 无 | 标题下文字 |
17 | | keyboard | String | 无 | 只支持 `number`,用于激活数字键盘 |
18 | | placeholder | String | 无 | 输入提示 |
19 | | show-clear | Boolean | true | 是否显示清除按钮 |
20 | | type | String | text | 设置组件内input的type |
21 | | is-type | String | 无 | 内置验证类型，支持`email`,`china-mobile`,`china-name` | 
22 | | readonly | Boolean | false | 只读，不要修改 |
23 | | min | Number | 无 | 最小字符数 |
24 | | max | Number | 无 | 最大字符数 |
25 | | equal-with | String | 无 | 当前input需要与某input输入完全一致，用于确认填写 |
26 | | text-align | String | left | input的对齐样式 |
27 | 
28 | ## Events
29 | 
30 | 
31 | | 名字 | 参数  | 描述 |
32 | |-----|-----|-----|
33 | | on-change | (value) | 当值改变时触发 |
34 | 
35 | 
36 | ## Demos
37 | 
38 | ``` html
39 | <!-- 必须输入6-10位的电子邮件地址 -->
40 | <x-input :min=6 :max=10 is-type=email :value.sync="value"></x-input>
41 | <!-- 手机号码验证 -->
42 | <x-input 
43 |     title="手机号"
44 |     is-type="china-mobile" 
45 |     :show-clear=true 
46 |     placeholder="请输入手机号"></x-input>
47 | <!-- 必须输入123456 -->
48 | <x-input
49 |     title="等值判断"
50 |     type="text"
51 |     equal-with="123456"></x-input>
52 | ```
53 | 
54 | ### 获取验证状态
55 | 
56 | ``` vux height=200 components=Group,Cell,XInput
57 | <template>
58 | <group title="check if value is valid when required===true">
59 |   <x-input :value.sync="value" title="message" placeholder="I'm placeholder" v-ref:input></x-input>
60 |   <cell title="get valid value" :value="'$valid value:' + $refs.input.valid"></cell>
61 | </group>
62 | </template>
63 | <script>
64 | export default {
65 |   data () {
66 |     value: ''
67 |   }
68 | }
69 | </script>
70 | ```


--------------------------------------------------------------------------------
/form/x-number.md:
--------------------------------------------------------------------------------
 1 | # x-number 数字输入组件
 2 | 
 3 | > `x-number`需要与`group`配合使用。
 4 | 
 5 | ## Props
 6 | 
 7 | | 参数         | 说明                  | 类型        | 默认值 |
 8 | | ----------- | ---------------------- | ---------- | ------- |
 9 | | title | 可选，标题 | String | 无 |
10 | | value | 当前输入框值 | Number | 0 |
11 | | min | 可选，数字范围最小值 | Number | 无 |
12 | | max | 可选，数字范围最大值 | Number | 无 |
13 | | step| 可选，步长 | Number | 1 |
14 | | fillable | 可选，是否可以输入 | Boolean | true |
15 | | width | 可选，输入框宽度 | Number | 50 |
16 | 
17 | 
18 | ## Events
19 | 
20 | 
21 | | 名字 | 参数  | 描述 |
22 | |-----|-----|-----|
23 | | on-change | value | 值变化时触发 |
24 | 
25 | 
26 | ## 示例
27 | 
28 | ### 基本使用
29 | 
30 | ``` vux width=100% height=100px components=Group,XNumber
31 | 
32 | <template>
33 | <group>
34 |   <x-number title="Number" :value=0 :min=0 :max=10 @on-change="change"></x-number>
35 | </group>
36 | </template>
37 | <script>
38 | export default {
39 |   methods: {
40 |     change: function (val) {
41 |       console.log('change', val)
42 |     }
43 |   }
44 | }
45 | </script>
46 | ```
47 | 
48 | ### 自定义步长
49 | 
50 | ``` vux height=150px components=Group,XNumber
51 | <template>
52 | <group title="set step=0.5">
53 |   <x-number title="Number" :step=0.5></x-number>
54 | </group>
55 | </template>
56 | ```
57 | 
58 | ### 禁止键盘输入
59 | 
60 | ``` vux height=150px components=Group,XNumber
61 | 
62 | <template>
63 | <group title="fillable = false">
64 |   <x-number :value=10 title="Number" :fillable=false></x-number>
65 | </group>
66 | </template>
67 | 
68 | ```
69 | 
70 | ### 和其他组件共用
71 | 
72 | ``` vux height=200px components=Switch,Group,XNumber
73 | 
74 | <template>
75 | <group title='with other element'>
76 |   <x-number title="Number" :min=-5 :max=8 :value=1 type="inline"></x-number>
77 |   <x-number title="Number" :min=-5 :max=8 :value=1 type="inline"></x-number>
78 |   <switch title="Other element" :value=true></switch>
79 | </group>
80 | </template>
81 | ```


--------------------------------------------------------------------------------
/form/x-textarea.md:
--------------------------------------------------------------------------------
 1 | # x-textarea 多行文本输入框
 2 | 
 3 | > 需要与`group`搭配使用
 4 | 
 5 | ## Props
 6 | 
 7 | | 参数         | 说明          | 类型       | 默认值     | 双向绑定    |
 8 | | -------     | ------------- | ------     | --------- | ---------- |
 9 | | required    | 是否必填       | Boolean    | true      | false      |
10 | | show-counter | 是否显示字数统计（需要设置max） | Boolean  | true     | false           |
11 | | max         | 最大字符数，超出字符数 | Number |        | false      |
12 | | value       | 绑定的值字段   | String     | 无       | true       |
13 | | placeholder | placeholder   | String     | 无        | false      |
14 | | rows | 行数 | Number | 3 | -- |
15 | | cols | 列数 | 30 | Number | -- |
16 | | height | 高度 | Number | 无 | -- |
17 | 
18 | ## Demo
19 | * 普通的多行输入框
20 | ``` vux height=160 components=Group,XTextarea
21 | <template>
22 |   <group title="textarea">
23 |     <x-textarea :max="200" placeholder="请输入详细描述"></x-textarea>
24 |   </group>
25 | </template>
26 | ```
27 | 
28 | 
29 | * 不显示字数统计
30 | ``` vux height=143 components=Group,XTextarea
31 | <template>
32 |   <group title="不显示字符统计">
33 |     <x-textarea :max="200" placeholder="请输入详细描述" :show-counter="false"></x-textarea>
34 |   </group>
35 | </template>
36 | ```
37 | 


--------------------------------------------------------------------------------
/guide/http.md:
--------------------------------------------------------------------------------
1 | # http请求
2 | 
3 | 
4 | vue有作者开发的 [vue-resource](https://github.com/vuejs/vue-resource) 可以直接使用，当然也可以选择`Zepto`或者`jQuery`，`fetch`的[polyfill](https://github.com/github/fetch)，甚至自己封装的库，具体考虑实际的开发情况，用于移动端在理想情况下体积越小越好。


--------------------------------------------------------------------------------
/guide/router.md:
--------------------------------------------------------------------------------
1 | # 路由
2 | 
3 | 请参照`vue-router`[文档](http://vuejs.github.io/vue-router/)


--------------------------------------------------------------------------------
/image/blur.md:
--------------------------------------------------------------------------------
 1 | # 背景模糊
 2 | 
 3 | ## 场景
 4 | 
 5 | 背景模糊常用于个人中心的头像背景, 音乐播放界面的背景。
 6 | 
 7 | ## Props
 8 | 
 9 | | 名字 | 类型 | 默认 | 描述 |
10 | |-----|-----|-----|-----|
11 | | url | String | 无 | 图片地址 |
12 | | height | Number | 200 | 高度 |
13 | | blur-amount| Number | 10 | 模糊程度 |
14 | 
15 | 
16 | ## Slots
17 | 
18 | 
19 | | 名字  | 描述 |
20 | |-----|-----|
21 | | 默认slot | 图片上面内容 |
22 | 
23 | 
24 | ## 示例
25 | 
26 | ### 纯背景
27 | 
28 | ``` vux height=200 components=Blur
29 | <style></style>
30 | <template>
31 | <blur :blur-amount=40 url="https://o3e85j0cv.qnssl.com/tulips-1083572__340.jpg"></blur>
32 | </template>
33 | ```
34 | 
35 | ### 背景上添加内容
36 | 
37 | > 通过默认slot支持
38 | 
39 | ``` vux height=200 components=Blur
40 | <template>
41 | <blur :blur-amount=40 url="https://o3e85j0cv.qnssl.com/hot-chocolate-1068703__340.jpg">
42 |   <p class="center">
43 |     <img src="https://o3e85j0cv.qnssl.com/hot-chocolate-1068703__340.jpg">
44 |   </p>
45 | </blur>
46 | </template>
47 | 
48 | <style>
49 | .center {
50 |   text-align: center;
51 |   padding-top: 20px;
52 |   color: #fff;
53 |   font-size: 18px;
54 | }
55 | .center img {
56 |   width: 100px;
57 |   height: 100px;
58 |   border-radius: 50%;
59 |   border: 2px solid #ececec;
60 | }
61 | </style>
62 | ```
63 | 


--------------------------------------------------------------------------------
/image/masker.md:
--------------------------------------------------------------------------------
  1 | # 半透明遮罩
  2 | 
  3 | ## Props
  4 | 
  5 | | 名字 | 类型 | 默认 | 描述 |
  6 | |-----|-----|-----|-----|
  7 | | color | String | 0,0,0 | 颜色 |
  8 | | opacity | Number | 0.5 | 透明度 |
  9 | 
 10 | 
 11 | ## Slots
 12 | 
 13 | 
 14 | | 名字  | 描述 |
 15 | |-----|-----|
 16 | | 默认slot | 遮罩层下面的内容 |
 17 | | content | 遮罩层上面的内容 |
 18 | 
 19 | 
 20 | ## 场景
 21 | 
 22 | 常见于电商网站，摄影网站的列表展示。
 23 | 
 24 | 
 25 | ``` vux height=600 width=400 components=Masker
 26 | <template>
 27 | <div>
 28 |   <div style="margin: 10px;overflow: hidden;" v-for="item in list">
 29 |     <masker style="border-radius: 2px;" :opacity="0.5">
 30 |       <div class="m-img" :style="{backgroundImage: 'url(' + item.img + ')'}"></div>
 31 |       <div slot="content" class="m-title">{{item.title}}<br/>
 32 |         <span class="m-time">2016-03-18</span>
 33 |       </div>
 34 |     </masker>
 35 |   </div>
 36 |   <div style="margin: 10px;overflow: hidden;">
 37 |     <masker style="border-radius: 2px;" color="F9C90C" :opacity="0.6">
 38 |       <div class="m-img" style="background-image:url(https://cdn.xiaotaojiang.com/uploads/56/4b3601364b86fdfd234ef11d8712ad/_.jpg)"></div>
 39 |       <div slot="content" class="m-title">
 40 |         VUX
 41 |         <br/>
 42 |         <span class="m-time">2016-03-18</span>
 43 |       </div>
 44 |     </masker>
 45 |   </div>
 46 | </div>
 47 | </template>
 48 | 
 49 | <script>
 50 | export default {
 51 |   data () {
 52 |     return {
 53 |       list: [{
 54 |         title: '洗颜新潮流！人气洁面皂排行榜',
 55 |         img: 'https://cdn.xiaotaojiang.com/uploads/82/1572ec37969ee263735262dc017975/_.jpg'
 56 |       }, {
 57 |         title: '美容用品 & 日用品（上）',
 58 |         img: 'https://cdn.xiaotaojiang.com/uploads/59/b22e0e62363a4a652f28630b3233b9/_.jpg'
 59 |       }, {
 60 |         title: '远离车内毒气，日本车载空气净化器精选',
 61 |         img: 'https://cdn.xiaotaojiang.com/uploads/56/4b3601364b86fdfd234ef11d8712ad/_.jpg'
 62 |       }]
 63 |     }
 64 |   }
 65 | }
 66 | </script>
 67 | 
 68 | <style>
 69 | .m-img {
 70 |   padding-bottom: 33%;
 71 |   display: block;
 72 |   position: relative;
 73 |   max-width: 100%;
 74 |   background-size: cover;
 75 |   background-position: center center;
 76 |   cursor: pointer;
 77 |   border-radius: 2px;
 78 | }
 79 | 
 80 | .m-time {
 81 |   font-size: 12px;
 82 |   padding-top: 4px;
 83 |   border-top: 1px solid #f0f0f0;
 84 |   display: inline-block;
 85 |   margin-top: 5px;
 86 | }
 87 | 
 88 | .m-title {
 89 |   color: #fff;
 90 |   text-align: center;
 91 |   text-shadow: 0 0 2px rgba(0,0,0,.5);
 92 |   font-weight: 500;
 93 |   font-size: 16px;
 94 |   position: absolute;
 95 |   left: 0;
 96 |   right: 0;
 97 |   width: 100%;
 98 |   text-align: center;
 99 |   top: 50%;
100 |   transform: translateY(-50%);
101 | }
102 | 
103 | </style>
104 | 
105 | ```


--------------------------------------------------------------------------------
/image/swiper.md:
--------------------------------------------------------------------------------
 1 | # swiper
 2 | 
 3 | > swiper提供了`list`快捷设置和`swiper-item`子组件方便定义。
 4 | 
 5 | ## Props
 6 | 
 7 | 
 8 | | 参数         | 说明                  | 类型        | 默认值 |
 9 | | ----------- | ---------------------- | ---------- | ------- |
10 | | list | 列表数据 | Array | 无 |
11 | | direction | 方向 | String |　horizontal |
12 | | show-dots | 是否显示indicator,只在list快捷形式下显示 | Boolean | true |
13 | | show-desc-mask | 是否显示描述梦曾 | Boolean | true | 
14 | | dots-position | indicator位置 | String | right |
15 | | dots-class | indicator的附加样式类 | String | 无 |
16 | | auto | 是否自动播放 | Boolean | false |
17 | | loop | 是否循环播放 | Boolean | 无 |
18 | | aspect-ratio | 纵横比,设置则自动根据宽度计算高度 | Number | 无 |
19 | | min-moving-distance | 最小滑动距离 | Number | 0 |
20 | | index | 指定显示item的 | Number | 0 | 
21 | | interval | 轮播时间间隔 | Number | 3000 |
22 | | threshold | 滑动距离阀值，当按住屏幕滑动超过此距离，松开手时，自动滑，否则不滑动 | Number | 50 |
23 | | duration | 滑屏动画时间，单位ms，数值越小，滑动越快 | Number | 300 |
24 | | height | 容器高度 | String | auto |
25 | 
26 | ## 示例
27 | 
28 | ### 基本使用
29 | 
30 | ``` vux height=200 components=Swiper
31 | <template>
32 | <div>
33 |   <swiper :list="list" auto></swiper>
34 | <div>
35 | </template>
36 | 
37 | <script>
38 | export default {
39 |   data: function () {
40 |     return {
41 |       list: [{
42 |         url: 'http://mp.weixin.qq.com/s?__biz=MzAxNjU0MDYxMg==&ampmid=400385458&ampidx=1&ampsn=78f6b8d99715384bdcc7746596d88359&ampscene=19#wechat_redirect',
43 |         img: 'http://7xqzw4.com2.z0.glb.qiniucdn.com/1.jpg',
44 |         title: '如何手制一份秋意的茶？'
45 |       }, {
46 |         url: 'http://mp.weixin.qq.com/s?__biz=MzAxNjU0MDYxMg==&ampmid=400160890&ampidx=1&ampsn=29ef02af25793a11a3f6aec92bfb46c1&ampscene=19#wechat_redirect',
47 |         img: 'http://7xqzw4.com2.z0.glb.qiniucdn.com/2.jpg',
48 |         title: '茶包VS原叶茶'
49 |       }, {
50 |         url: 'http://mp.weixin.qq.com/s?__biz=MzAxNjU0MDYxMg==&ampmid=400094682&ampidx=1&ampsn=8231a2053b772b2108784fccc254d28c&ampscene=19#wechat_redirect',
51 |         img: 'http://7xqzw4.com2.z0.glb.qiniucdn.com/3.jpg',
52 |         title: '播下茶籽，明春可发芽？'
53 |       }]
54 |     }
55 |   }
56 | }
57 | </script>
58 | ```
59 | 


--------------------------------------------------------------------------------
/image/wechat-emotion.md:
--------------------------------------------------------------------------------
 1 | # 表情图片
 2 | 
 3 | ## 选项
 4 | 
 5 | + `is-gif` 是否显示动态图，默认为`false`显示静态图
 6 | 
 7 | ## Demo
 8 | 
 9 | ``` vux height=250 components=WechatEmotion
10 | <template>
11 |   <div>
12 |     <wechat-emotion v-for="txt in list" track-by="$index">{{txt}}</wechat-emotion>
13 |     <br>
14 |     <wechat-emotion v-for="txt in list" track-by="$index" is-gif>{{txt}}</wechat-emotion>
15 |   </div>
16 | </template>
17 | <script>
18 | export default {
19 |   data () {
20 |     return {
21 |       list: ['微笑', '撇嘴', '色', '发呆', '得意', '流泪', '害羞', '闭嘴', '睡', '大哭', '尴尬', '发怒', '调皮', '呲牙', '惊讶', '难过', '酷', '冷汗', '抓狂', '吐', '偷笑', '可爱', '白眼', '傲慢', '饥饿', '困', '惊恐', '流汗', '憨笑', '大兵', '奋斗', '咒骂', '疑问', '嘘', '晕', '折磨', '衰', '骷髅', '敲打', '再见', '擦汗', '抠鼻', '鼓掌', '糗大了', '坏笑', '左哼哼', '右哼哼', '哈欠', '鄙视', '委屈', '快哭了', '阴险', '亲亲', '吓', '可怜', '菜刀', '西瓜', '啤酒', '篮球', '乒乓', '咖啡', '饭', '猪头', '玫瑰', '凋谢', '示爱', '爱心', '心碎', '蛋糕', '闪电', '炸弹', '刀', '足球', '瓢虫', '便便', '月亮', '太阳', '礼物', '拥抱', '强', '弱', '握手', '胜利', '抱拳', '勾引', '拳头', '差劲', '爱你', 'NO', 'OK', '爱情', '飞吻', '跳跳', '发抖', '怄火', '转圈', '磕头', '回头', '跳绳', '挥手', '激动', '街舞', '献吻', '左太极', '右太极']
22 |     }
23 |   }
24 | }
25 | 
26 | </script>
27 | ```
28 | 


--------------------------------------------------------------------------------
/install/script.md:
--------------------------------------------------------------------------------
 1 | # 使用script引入
 2 | 
 3 | 不推荐script的方式引入，在组件多的时候会存在比较多冗余的代码导致体积比较大。
 4 | 
 5 | 但是非新项目确实存在非.vue组件的调用形式。vux提供了所有组件的压缩包以及各个组件分别打包的文件。
 6 | 
 7 | ## 下载
 8 | 
 9 | + 从[Github Release](https://github.com/airyland/vux/releases)下载
10 | + `bower install vux`
11 | 
12 | ## 使用
13 | 
14 | ``` html
15 | <!--include Vux style-->
16 | <link rel="stylesheet" href="vux/dist/vux.css">
17 | <!--include Vue yourself-->
18 | <script src="vue.js"></script>
19 | 
20 | <div id="demo">
21 |   <group>
22 |     <cell title="vue" value="cool"></cell>
23 |   </group>
24 | </div>
25 | 
26 | <!--include the components you need-->
27 | <script src="vux/dist/components/group/index.js"></script>
28 | <script src="vux/dist/components/cell/index.js"></script>
29 | 
30 | <script>
31 | // register components
32 | Vue.component('group', vuxGroup)
33 | Vue.component('cell', vuxCell)
34 | 
35 | new Vue({
36 |   el: '#demo'
37 | })
38 | </script>
39 | ```
40 | 


--------------------------------------------------------------------------------
/install/umd.md:
--------------------------------------------------------------------------------
 1 | # vue项目
 2 | 
 3 | > `vue-cli`的使用请查看[文档][https://github.com/vuejs/vue-cli]
 4 | 
 5 | > `vue-loader`[文档](http://vuejs.github.io/vue-loader/)
 6 | 
 7 | ``` bash
 8 | # 安装 vue-cli
 9 | npm install -g vue-cli
10 | 
11 | # 初始化 webpack 项目
12 | vue init webpack my-project
13 | cd my-project
14 | # npm可能出现访问速度极慢的情况，推荐使用cnpm
15 | npm install
16 | #安装 vux 
17 | npm install vux
18 | # 开发版安装请使用 npm install vux@next
19 | # 调试
20 | npm run dev
21 | ```
22 | 
23 | 
24 | ```` html
25 | <template>
26 |   <div>
27 |     <group>
28 |       <cell title="vue" value="cool"></cell>
29 |     </group>
30 |   </div>
31 | </template>
32 | 
33 | <script>
34 | // 不推荐的方式，会打包所有vux模块
35 | import { Group, Cell } from 'vux'
36 | 
37 | // 推荐的方式，按需加载需要的组件
38 | import Group from 'vux/dist/components/group'
39 | import Cell from 'vux/dist/components/cell'
40 | 
41 | export default {
42 |   components: {
43 |     Group,
44 |     Cell
45 |   }
46 | }
47 | </script>
48 | 
49 | <style>
50 | @import '~vux/dist/vux.css';
51 | </style>
52 | ````
53 | 


--------------------------------------------------------------------------------
/install/vue.md:
--------------------------------------------------------------------------------
 1 | # vue项目
 2 | 
 3 | > `vue-cli`的使用请查看[文档][https://github.com/vuejs/vue-cli]
 4 | 
 5 | > `vue-loader`[文档](http://vuejs.github.io/vue-loader/)
 6 | 
 7 | ``` bash
 8 | # 安装 vue-cli
 9 | npm install -g vue-cli
10 | 
11 | # 初始化 webpack 项目
12 | vue init webpack my-project
13 | cd my-project
14 | # npm可能出现访问速度极慢的情况，推荐使用cnpm
15 | npm install
16 | #安装 vux 发版请使用 npm install vux@next
17 | npm install vux
18 | #安装less-loader, vuejs-templates模板默认不安装less less-loader
19 | npm install less less-loader --save-dev
20 | # 调试
21 | npm run dev
22 | ```
23 | 
24 | 
25 | ## 在webpack.base.conf.js添加loader
26 | 
27 | ``` javascript
28 | {
29 |   test: /vux.src.*?js$/,
30 |   loader: 'babel'
31 | }
32 | ```
33 | 
34 | 
35 | ```` html
36 | <template>
37 |   <div>
38 |     <group>
39 |       <cell title="vue" value="cool"></cell>
40 |     </group>
41 |   </div>
42 | </template>
43 | 
44 | <script>
45 | import Group from 'vux/src/components/group'
46 | import Cell from 'vux/src/components/cell'
47 | 
48 | export default {
49 |   components: {
50 |     Group,
51 |     Cell
52 |   }
53 | }
54 | </script>
55 | 
56 | <style>
57 | @import '~vux/dist/vux.css';
58 | </style>
59 | ````
60 | 
61 | > 可以配置alias使用更简短的引用路径
62 | 
63 | ``` javascript
64 | resolve: {
65 |   alias: {
66 |     'vux-components': 'vux/src/components/'
67 |   }
68 | }
69 | ```
70 | 
71 | > 那么就可以这样引用
72 | 
73 | ``` javascript
74 | import Group from 'vux-components/group'
75 | import Cell from 'vux-components/cell'
76 | ```
77 | 


--------------------------------------------------------------------------------
/layout/button-tab.md:
--------------------------------------------------------------------------------
 1 | # button-tab
 2 | 
 3 | ## Props
 4 | 
 5 | ### button-tab
 6 | 
 7 | | 属性 | 类型 | 默认 | 说明 |
 8 | |-----|-----|-----|-----|
 9 | | height | Boolean | 无 | 高度 |
10 | 
11 | ### button-tab-item
12 | 
13 | | 属性 | 类型 | 默认 | 说明 |
14 | |-----|-----|-----|-----|
15 | | selected | Boolean | false | 是否选中 |
16 | 
17 | 
18 | ## Demos
19 | 
20 | ``` vux height=200 components=ButtonTab,ButtonTabItem,Divider
21 | <template>
22 | <div>
23 |   <button-tab>
24 |     <button-tab-item>Today</button-tab-item>
25 |     <button-tab-item selected>This Week</button-tab-item>
26 |     <button-tab-item>This Month</button-tab-item>
27 |   </button-tab>
28 |   <br>
29 |   <button-tab>
30 |     <button-tab-item selected>文章订阅</button-tab-item>
31 |     <button-tab-item>商品订阅</button-tab-item>
32 |   </button-tab>
33 |   <br>
34 |   <divider>Red Dot</divider>
35 |   <button-tab>
36 |     <button-tab-item selected>All Message</button-tab-item>
37 |     <button-tab-item><span class="vux-reddot-s">New Message</span></button-tab-item>
38 |   </button-tab>
39 | </div>
40 | </template>
41 | ```


--------------------------------------------------------------------------------
/layout/flexbox.md:
--------------------------------------------------------------------------------
 1 | # Flexbox
 2 | 
 3 | > Flexbox功能由`Flexbox`及`FlexboxItem`子组件组成。
 4 | 
 5 | ### 简单平分
 6 | ``` vux height=200 components=Flexbox,FlexboxItem,Divider
 7 | <template>
 8 | <divider>Horizontal</divider>
 9 | <flexbox style="height:40px;">
10 |   <flexbox-item><div class="flex-demo">1</div></flexbox-item>
11 |   <flexbox-item><div class="flex-demo">2</div></flexbox-item>
12 | </flexbox>
13 | <divider>Vertical</divider>
14 | <flexbox orient="vertical" :margin-left=0>
15 |   <flexbox-item><div class="flex-demo" style="margin-left:0">1</div></flexbox-item>
16 |   <flexbox-item><div class="flex-demo" style="margin-left:0">2</div></flexbox-item>
17 | </flexbox>
18 | </template>
19 | 
20 | <style>
21 | .flex-demo {
22 |   text-align: center;
23 |   color: #fff;
24 |   background-color: #20b907;
25 |   margin-bottom: 8px;
26 |   border-radius: 4px;
27 |   -webkit-background-clip: padding-box;
28 | }
29 | </style>
30 | ```
31 | ### 嵌套布局
32 | 
33 | > 国内电商网站和支付应用最常见
34 | 
35 | > 1像素边框实现请参考1px解决方案
36 | 
37 | ``` vux height=210 components=Flexbox,FlexboxItem
38 | <template>
39 | <flexbox :margin-left=0 style="height: 200px; background-color: #fff;" class="vux-1px-tb vux-1px-l vux-1px-r">
40 |   <flexbox-item class="vux-1px-r" style="height:200px;"></flexbox-item>
41 |   <flexbox-item>
42 |     <flexbox orient="vertical" :margin-left=0>
43 |       <flexbox-item class="vux-1px-b"></flexbox-item>
44 |       <flexbox-item style="height: 100px;"><!--height: 100% doesnot work here-->
45 |         <flexbox :margin-left=0>
46 |           <flexbox-item class="vux-1px-r"></flexbox-item>
47 |           <flexbox-item></flexbox-item>
48 |         </flexbox>
49 |       </flexbox-item>
50 |     </flexbox>
51 |   </flexbox-item>
52 | </flexbox>
53 | </template>
54 | ```


--------------------------------------------------------------------------------
/layout/popup.md:
--------------------------------------------------------------------------------
 1 | # Popup弹出层
 2 | 
 3 | ## Props
 4 | 
 5 | | 参数         | 说明                  | 类型        | 默认值 |
 6 | | ----------- | ---------------------- | ---------- | ------- |
 7 | | show | 是否显示Popup，需要双向绑定 | Boolean | false |
 8 | | height | 弹出层高度 | String | auto |
 9 | 
10 | > 如果希望弹出层铺满整个屏幕，则可设置`height=100%`
11 | 
12 | ## Events
13 | 
14 | | 名字 | 参数  | 描述 |
15 | |-----|-----|-----|
16 | | on-first-show | - | 第一次出现时，用于需要在第一次进行异步数据获取或者必要的UI渲染（如Popup内有Scroller）|
17 | 
18 | ## Demo
19 | 
20 | ``` vux height=400 width=100% components=Popup,Group,Switch
21 | 
22 | <template>
23 | <div>
24 |   <group>
25 |     <switch title="Default popup" :value.sync="show"></switch>
26 |     <switch title="Full popup" :value.sync="show1"></switch>
27 |   </group>
28 |   <popup :show.sync="show">
29 |     <div class="popup0">
30 |       <group>
31 |         <switch title="Another Switcher" :value.sync="show"></switch>
32 |       </group>
33 |     </div>
34 |   </popup>
35 | 
36 |   <popup :show.sync="show1" height="100%">
37 |     <div class="popup1">
38 |       <group>
39 |         <switch title="Another Switcher" :value.sync="show1"></switch>
40 |       </group>
41 |     </div>
42 |   </popup>
43 | </div>
44 | </template>
45 | <script>
46 | export default {
47 | 	data () {
48 | 		return {
49 | 			show: false,
50 | 			show1: false
51 | 		}
52 | 	}
53 | }
54 | </script>
55 | <style>
56 | .popup0 {
57 |   padding-bottom:15px;
58 |   height:200px;
59 | }
60 | .popup1 {
61 |   width:100%;
62 |   height:100%;
63 | }
64 | </style>
65 | ```
66 | 


--------------------------------------------------------------------------------
/layout/scroller.md:
--------------------------------------------------------------------------------
  1 | # Scroller
  2 | 
  3 | > Scroller 依赖于[`xscroll`](https://github.com/huxiaoqi567/xscroll)
  4 | 
  5 | ## Props
  6 | 
  7 | | 名字 | 类型 | 默认 | 描述 |
  8 | |-----|-----|-----|-----|
  9 | | height | String | Viewport高度 | 高度 |
 10 | | lockX | Boolean | false | 锁定X方向 |
 11 | | lockY | Boolean | false | 锁定Y方向 |
 12 | | scrollbarX | Boolean | false | 横向滚动条 |
 13 | | scrollbarY | Boolean | false | 垂直方向滚动条 |
 14 | | bounce | Boolean | true | 是否有边缘回弹 |
 15 | | use-pulldown| Boolean | false | 是否使用下拉组件 |
 16 | | use-pullup | Boolean | false | 是否使用上拉组件 |
 17 | | pulldown-config | Object | 见下面 | 下拉组件配置 |
 18 | | pullup-config| Object | 见下面 | 上拉组件配置 |
 19 | | pulldown-status | String | 无 | 双向绑定，当需要自定义下拉刷新行为时配置 |
 20 | | pullup-status | String | 无 | 双向绑定，当需要自定义上拉行为时配置 |
 21 | 
 22 | pulldown-config默认：
 23 | 
 24 | ``` json
 25 | {
 26 |   content: 'Pull Down To Refresh',
 27 |   height: 60,
 28 |   autoRefresh: false,
 29 |   downContent: 'Pull Down To Refresh',
 30 |   upContent: 'Release To Refresh',
 31 |   loadingContent: 'Loading...',
 32 |   clsPrefix: 'xs-plugin-pulldown-'
 33 | }
 34 | ```
 35 | 
 36 | pullup-config默认
 37 | 
 38 | ``` json
 39 | {
 40 |   content: 'Pull Up To Refresh',
 41 |   pullUpHeight: 60,
 42 |   height: 40,
 43 |   autoRefresh: false,
 44 |   downContent: 'Release To Refresh',
 45 |   upContent: 'Pull Up To Refresh',
 46 |   loadingContent: 'Loading...',
 47 |   clsPrefix: 'xs-plugin-pullup-'
 48 | }
 49 | ```
 50 | 
 51 | ## Methods
 52 | 
 53 | | 名字 | 参数 | 描述  |
 54 | |-----|-----|-----|
 55 | | reset | 无 | 重新渲染，因为scroller并不知道内部内容是否变化，因此需要手动取得`ref`进行reset, 并且需要在`$nextTick`中执行。
 56 | 
 57 | 示例：
 58 | 
 59 | ``` javascript
 60 | this.$nextTick(() => {
 61 |   this.$refs.scroller.reset()
 62 | })
 63 | ```
 64 | 
 65 | ## Events
 66 | 
 67 | | 名字 | 参数  | 描述 |
 68 | |-----|-----|-----|
 69 | | pullup:loading| (scroller的uuid) | 上拉加载时触发的事件，需要在获取数据后使用`$broadcast`触发状态更新， `this.$broadcast('pullup:reset', uuid)` |
 70 | | pulldown:loading| (scroller的uuid) | 下拉加载时触发的事件，需要在获取数据后使用`$broadcast`触发状态更新， `this.$broadcast('pulldown:reset', uuid)` |
 71 | | pullup:disable | (scroller的uuid) | 禁用上拉加载，当没有更多数据需要禁用时使用`$broadcast`触发禁用，`this.$broadcast('pullup:disable', uuid)` |
 72 | | pullup:enable | (scroller的uuid) | 启用上拉加载，禁用插件后，当又重新需要时使用`$broadcast`触发重新启用，`this.$broadcast('pullup:enable', uuid)` |
 73 | 
 74 | 
 75 | 
 76 | ## Slots
 77 | 
 78 | > 注意，默认slot根元素必须有且只有一个, 如`<scroller><div>content</div></scroller>`
 79 | 
 80 | | 名字  | 描述 |
 81 | |-----|-----|
 82 | | 默认slot | 无 |
 83 | 
 84 | 
 85 | 
 86 | ## Demos
 87 | 
 88 | > 更多的demo请手机访问 `https://vux.li` 进行查看。
 89 | 
 90 | + [scroller](https://vux.li/#!/component/scroller)
 91 | + [pullup](https://vux.li/#!/component/pullup)
 92 | + [pulldown](https://vux.li/#!/component/pulldown)
 93 | + [pulldown & pullup](https://vux.li/#!/component/pulldown-pullup)
 94 | 
 95 | ``` html
 96 | <scroller lock-y :scrollbar-x="false">
 97 |   <div class="box1">
 98 |     many many content
 99 |   </div>
100 | </scroller>
101 | ```
102 | 


--------------------------------------------------------------------------------
/layout/sticky.md:
--------------------------------------------------------------------------------
 1 | # Sticky 自动固定在顶部
 2 | 
 3 | > 如果你在使用Chrome开发过程中发现并没有按预期起到作用，不要慌，这是正常现象！具体请参考[#246](https://github.com/airyland/vux/issues/246)
 4 | 
 5 | ## Demo
 6 | 
 7 | > 请打开新窗口查看效果
 8 | 
 9 | ``` vux width=100% height=400 components=Sticky,Tab,TabItem
10 | 
11 | <template>
12 | <br v-for="i in 8">
13 | <sticky>
14 | 	<tab :line-width=1>
15 | 	  <tab-item selected>正在正映</tab-item>
16 | 	  <tab-item>即将上映</tab-item>
17 | 	</tab>
18 | </sticky>
19 | <br v-for="i in 50">
20 | </template>
21 | ```
22 | 


--------------------------------------------------------------------------------
/layout/tab.md:
--------------------------------------------------------------------------------
 1 | # Tab 选项卡
 2 | 
 3 | ## Props
 4 | 
 5 | ### tab
 6 | 
 7 | | 参数         | 说明                  | 类型        | 默认值 |
 8 | | ----------- | ---------------------- | ---------- | ------- |
 9 | | line-width | 可选，边框大小 | Number | 3 |
10 | | active-color | 可选，高亮文字的颜色和线条颜色 | String | #04be02 |
11 | | default-color | 可选，默认文字的颜色 | String | #666 |
12 | | animate | 可选，是否使用动画 | Boolean | true |
13 | 
14 | ### tab-item
15 | 
16 | | 参数         | 说明                  | 类型        | 默认值 |
17 | | ----------- | ---------------------- | ---------- | ------- |
18 | | selected | 是否高亮 | Boolean | false |
19 | 
20 | ### Demo
21 | 
22 | ``` vux height=50 components=Tab,TabItem
23 | <template>
24 | <tab>
25 |   <tab-item :selected="demo1 === '已发货'" @click="demo1 = '已发货'">已发货</tab-item>
26 |   <tab-item :selected="demo1 === '未发货'" @click="demo1 = '未发货'">未发货</tab-item>
27 |   <tab-item :selected="demo1 === '全部订单'" @click="demo1 = '全部订单'">全部订单</tab-item>
28 | </tab>
29 | </template>
30 | 
31 | <script>
32 | export default {
33 |   data () {
34 |     return {
35 |       demo1: '未发货'
36 |     }
37 |   }
38 | }
39 | </script>
40 | ```
41 | 
42 | ### 更简洁的粟子
43 | 
44 | ``` vux height=50 components=Tab,TabItem
45 | 
46 | <template>
47 | <tab :line-width="2" active-color="#fc378c">
48 |   <tab-item :selected="demo2 === item" v-for="item in list2" @click="demo2 = item"><<item>></tab-item>
49 | </tab>
50 | </template>
51 | 
52 | <script>
53 | export default {
54 |   data () {
55 |     return {
56 |       demo2: '美食',
57 |       list2: ['精选', '美食', '电影', '酒店', '外卖']
58 |     }
59 |   }
60 | }
61 | </script>
62 | 
63 | ```
64 | 
65 | ### 禁用滑动动画
66 | 
67 | ``` vux height=50 components=Tab,TabItem
68 | <template>
69 | <tab :line-width="1" :animate="false">
70 |   <tab-item :selected="demo2 === item" v-for="item in list2" @click="demo2 = item"><<item>></tab-item>
71 | </tab>
72 | </template>
73 | 
74 | <script>
75 | export default {
76 |   data () {
77 |     return {
78 |       demo2: '美食',
79 |       list2: ['精选', '美食', '电影', '酒店', '外卖']
80 |     }
81 |   }
82 | }
83 | </script>
84 | ```


--------------------------------------------------------------------------------
/layout/tabbar.md:
--------------------------------------------------------------------------------
 1 | # Tabbar
 2 | 
 3 | ## Props
 4 | 
 5 | ### tabbar-item
 6 | 
 7 | | 属性 | 类型 | 默认 | 说明 |
 8 | |-----|-----|-----|-----|
 9 | | selected | Boolean | false | 是否选中 |
10 | | show-dot | Boolean | false | 是否显示红色提示点 |
11 | | link | String or Object | - | 普通链接或者`v-link`参数值, `0.1.2-rc1`开始支持。` <tabbar-item link="/somepath"></tabbar-item>` ｜
12 | 
13 | ## Slots
14 | 
15 | | 名字 | 说明 |
16 | |-----|-----|
17 | | icon | 图标 |
18 | | label | 文字 |
19 | 
20 | ## Demo
21 | 
22 | ``` vux height=300 components=Tabbar,TabbarItem
23 | <template>
24 | <div>
25 |   <tabbar>
26 |     <tabbar-item>
27 |       <img slot="icon" src="https://o84lhz5xo.qnssl.com/master/src/assets/demo/icon_nav_button.png">
28 |       <span slot="label">Wechat</span>
29 |     </tabbar-item>
30 |     <tabbar-item show-dot>
31 |       <img slot="icon" src="https://o84lhz5xo.qnssl.com/master/src/assets/demo/icon_nav_msg.png">
32 |       <span slot="label">Message</span>
33 |     </tabbar-item>
34 |     <tabbar-item selected>
35 |       <img slot="icon" src="https://o84lhz5xo.qnssl.com/master/src/assets/demo/icon_nav_article.png">
36 |       <span slot="label">Explore</span>
37 |     </tabbar-item>
38 |     <tabbar-item>
39 |       <img slot="icon" src="https://o84lhz5xo.qnssl.com/master/src/assets/demo/icon_nav_cell.png">
40 |       <span slot="label">News</span>
41 |     </tabbar-item>
42 |   </tabbar>
43 | </div>
44 | </template>
45 | ```
46 | 


--------------------------------------------------------------------------------
/layout/timeline.md:
--------------------------------------------------------------------------------
 1 | # Timeline 时间轴
 2 | 
 3 | ## Props
 4 | 
 5 | ### timeline
 6 | 
 7 | | 参数         | 说明                  | 类型        | 默认值 |
 8 | | ----------- | ---------------------- | ---------- | ------- |
 9 | | color | 可选，线条颜色 | String | #04BE02 |
10 | 
11 | 
12 | ### Demo
13 | 
14 | ``` vux height=250 components=Timeline,TimelineItem
15 | <template>
16 | <div class="timeline-demo">
17 |   <timeline :color="color">
18 |     <timeline-item>
19 |       <h4 class="recent">【广东】 广州市 已发出</h4>
20 |       <p class="recent">2016-04-17 12:00:00</p>
21 |     </timeline-item>
22 |     <timeline-item>
23 |       <h4> 申通快递员 广东广州 收件员 xxx 已揽件</h4>
24 |       <p>2016-04-16 10:23:00</p>
25 |     </timeline-item>
26 |     <timeline-item>
27 |       <h4> 商家正在通知快递公司揽件</h4>
28 |       <p>2016-04-15 9:00:00</p>
29 |     </timeline-item>
30 |   </timeline>
31 | </div>
32 | </template>
33 | ```
34 | 
35 | ### 动态改变条目数量
36 | 
37 | ``` vux height=600 components=Timeline,TimelineItem,XButton
38 | 
39 | <template>
40 | <div class="timeline-demo">
41 |   <timeline>
42 |     <timeline-item v-for="i in count">
43 |       <h4 :class="[i === 0 ? 'recent' : '']">Timeline Node {{i + 1}}</h4>
44 |       <p :class="[i === 0 ? 'recent' : '']">index {{i + 1}}</p>
45 |     </timeline-item>
46 |   </timeline>
47 |   <x-button type="primary" @click="count = 6"> Set to 6 nodes</x-button>
48 |   <x-button type="primary" @click="count = 3"> Set to 3 nodes</x-button>
49 | </div>
50 | </template>
51 | <script>
52 | export default {
53 |   data () {
54 |     return {
55 |       count: 3
56 |     }
57 |   }
58 | }
59 | </script>
60 | <style>
61 |   .timeline-demo p {
62 |     color: #888;
63 |     font-size: 0.8rem;
64 |   }
65 | 
66 |   .timeline-demo h4 {
67 |     color: #666;
68 |     font-weight: normal;
69 |   }
70 | 
71 |   .timeline-demo .recent {
72 |     color: rgb(4, 190, 2);
73 |   }
74 | </style>
75 | ```
76 | 


--------------------------------------------------------------------------------
/layout/x-header.md:
--------------------------------------------------------------------------------
 1 | # x-header
 2 | 
 3 | > 目前x-header并不处理定位，请手动用class或者style设置。
 4 | 
 5 | ## Props
 6 | 
 7 | | 名字 | 类型 | 默认 | 描述 |
 8 | |-----|-----|-----|-----|
 9 | | leftOptions.showBack | Boolean  | true | 是否显示返回箭头 |
10 | | leftOptions.backText | String | Back | 返回文字，可以为空 |
11 | | leftOptions.preventGoBack | Boolean | false | 是否阻止点击Back时的后退，默认会调用`history.back()` |
12 | | rightOptions.showMore | Boolean | false | 是否显示更多图标 |
13 | 
14 | 
15 | ## Events
16 | 
17 | 
18 | | 名字 | 参数  | 描述 |
19 | |-----|-----|-----|
20 | | on-click-back | - | 点击后退按钮或者文字时触发, 并且只有leftOptions.preventGoBack设为true时才触发 |
21 | | on-click-more | - | 点击更多图标时触发 |
22 | 
23 | 
24 | ## Slots
25 | 
26 | 
27 | | 名字  | 描述 |
28 | |-----|-----|
29 | | 默认slot | 标题文字 |
30 | | left | 位于Back之后的内容 |
31 | | right | 位于showMore之后的内容 |
32 | 
33 | 
34 | ## Demos
35 | 
36 | ``` vux height=570 components=XHeader,Divider
37 | <template>
38 | <divider>默认</divider>
39 | <x-header>This is the page title.</x-header>
40 | <divider>不显示后退</divider>
41 | <x-header :left-options="{showBack: false}">do not show Back</x-header>
42 | <divider>显示右侧更多</divider>
43 | <x-header :right-options="{showMore: true}">with more menu</x-header>
44 | <divider>使用 right 插槽</divider>
45 | <x-header>with right link<a slot="right">Feedback</a></x-header>
46 | <divider>自动文字截断</divider>
47 | <x-header>long long long long long long long ong long long long long long long text<a slot="right">Feedback</a></x-header>
48 | <divider>使用 left 插槽</divider>
49 | <x-header>with left slot<a slot="left">Close</a></x-header>
50 | <divider>更改背景颜色</divider>
51 | <x-header style="background-color:#000;">custom background color</x-header>
52 | </template>
53 | ```


--------------------------------------------------------------------------------
/message/actionsheet.md:
--------------------------------------------------------------------------------
 1 | # Actionsheet
 2 | 
 3 | ## Props
 4 | 
 5 | | 参数        | 类型        | 默认值 | 说明 |
 6 | | ----------- | ---------------------- | ---------- | ------- |
 7 | | show | Boolean | false | 显示绑定值，双向绑定 |
 8 | | show-cancel | Boolean | false | 是否显示取消按钮 |
 9 | | menus  | Object | {} |  菜单列表，格式见下|
10 | | cancelText | String | cancel | 取消按钮文字 |
11 | 
12 | > menus格式如下
13 | 
14 | ``` js
15 | {
16 |   menu1: 'Take Photo',
17 |   menu2: 'Choose from photos'
18 | }
19 | ```
20 | 
21 | ## Events
22 | 
23 | | 事件名       | 参数       | 说明 |
24 | | ----------- | ---------------------- | ---------- |
25 | | on-menu-click | (menuKey, menuValue) | 点击菜单时触发 |
26 | | on-cancel | -- | 点击取消时触发 |
27 | 
28 | 
29 | ## Demo
30 | 
31 | ``` vux height=400 components=Group,Switch,Actionsheet
32 | <template>
33 | <div>
34 |   <group>
35 |     <switch title="show actionsheet1" :value.sync="show1"></switch>
36 |     <switch title="show actionsheet2" :value.sync="show2"></switch>
37 |     <switch title="show actionsheet3" :value.sync="show3"></switch>
38 |   </group>
39 |   <actionsheet :show.sync="show1" :menus="menus1"></actionsheet>
40 |   <!-- 显示取消按钮 -->
41 |   <actionsheet :show.sync="show2" :menus="menus2" show-cancel></actionsheet>
42 |   <!-- 菜单响应 -->
43 |   <actionsheet :show.sync="show3" :menus="menus3" @on-click-menu="click" show-cancel @cancel-text="取消"></actionsheet>
44 | </div>
45 | </template>
46 | 
47 | <script>
48 | export default {
49 |   data () {
50 |     return {
51 |       show1:false,
52 |       menus1:{
53 |         menu1: 'Share to friends',
54 |         menu2: 'Share to timeline'
55 |       },
56 |       show2:false,
57 |       menus2: {
58 |         menu1: 'Take Photo',
59 |         menu2: 'Choose from photos'
60 |       },
61 |       show3:false,
62 |       menus3: {
63 |         menu1: 'friends comment'
64 |       }
65 |     }
66 |   },
67 |   methods: {
68 |     click (key) {
69 |       console.log(key)
70 |     }
71 |   }
72 | }
73 | </script>
74 | ```
75 | 


--------------------------------------------------------------------------------
/message/alert.md:
--------------------------------------------------------------------------------
 1 | # Alert
 2 | 
 3 | ## Props
 4 | 
 5 | | 参数         | 说明                  | 类型        | 默认值 |
 6 | | ----------- | ---------------------- | ---------- | ------- |
 7 | | button-text | 可选，按钮文字 | String | OK |
 8 | | 默认slot | 可选，提示消息内容 | DOM | 无 |
 9 | | title | 必选，提示标题 | String | 无 |
10 | | show | 必选，是否显示，`双向绑定` | Boolean | false |
11 | | on-show | 显示时事件 | 事件 | 无 |
12 | | on-hide | 关闭时事件 | 事件 | 无 |
13 | 
14 | 
15 | ## Demo
16 | 
17 | ### 默认按钮文字
18 | 
19 | ``` vux height=200 components=Alert,Group,Switch
20 | <template>
21 | <group>
22 |   <switch title="Toggle" :value.sync="show"></switch>
23 | </group>
24 | <alert :show.sync="show" title="恭喜您" button-text="好棒，去ATM转账">
25 |   <p style="text-align:center;">中大奖了！99999元只要转4000元手续费</p>
26 | </alert>
27 | </template>
28 | 
29 | <script>
30 | export default {
31 |   data () {
32 |     return {
33 |       show: true
34 |     }
35 |   }
36 | }
37 | </script>
38 | ```


--------------------------------------------------------------------------------
/message/confirm.md:
--------------------------------------------------------------------------------
 1 | # Confirm 
 2 | 
 3 | ## 使用场景
 4 | 
 5 | confirm用于需要用户确认操作的情况。
 6 | 
 7 | ## Props
 8 | 
 9 | | 参数         | 说明                  | 类型        | 默认值 |
10 | | ----------- | ---------------------- | ---------- | ------- |
11 | | cancel-text | 可选，取消按钮文字 | String | cancel |
12 | | confirm-text | 可选，确认按钮文字 | String | confirm |
13 | | 默认slot | 可选，提示消息内容 | DOM | 无 |
14 | | title | 必选，提示标题 | String | 无 |
15 | | show | 必选，是否显示，`双向绑定` | Boolean | false |
16 | | on-confirm | 确认事件 | 事件 | 无 |
17 | | on-cancel | 取消事件 | 事件 | 无 |
18 | 
19 | > 事件名字从`0.0.105`后从`confirm`和`cancel`重命名为`on-confirm`和`on-cancel`
20 | 
21 | ## Demo
22 | 
23 | ### 默认按钮文字
24 | 
25 | ``` vux height=200 components=Confirm,Group,Switch
26 | <template>
27 | <group>
28 |   <switch title="Toggle" :value.sync="show"></switch>
29 | </group>
30 | <confirm :show.sync="show" title="confirm deleting the item"><p style="text-align:center;">Are you sure?</p></confirm>
31 | </template>
32 | 
33 | <script>
34 | export default {
35 |   data () {
36 |     return {
37 |       show: false
38 |     }
39 |   }
40 | }
41 | </script>
42 | ```
43 | 
44 | ### 监听事件
45 | 
46 | ``` vux height=200 components=Confirm,Group,Switch
47 | <template>
48 | <group>
49 |   <switch title="Toggle" :value.sync="show"></switch>
50 | </group>
51 | <confirm :show.sync="show" confirm-text="确定" cancel-text="取消" title="操作提示" @on-confirm="onAction('确认')" @on-cancel="onAction('取消')">
52 |   <p style="text-align:center;">操作不可撤消哦?</p>
53 | </confirm>
54 | </template>
55 | 
56 | <script>
57 | export default {
58 |   methods: {
59 |     onAction: function (type) {
60 |       alert(type)
61 |     }
62 |   },
63 |   data () {
64 |     return {
65 |       show: false
66 |     }
67 |   }
68 | }
69 | </script>
70 | ```


--------------------------------------------------------------------------------
/message/dialog.md:
--------------------------------------------------------------------------------
 1 | # Dialog
 2 | 
 3 | `Alert`及`Confirm`依赖于`Dialog`。
 4 | 
 5 | ## Props
 6 | 
 7 | | 参数        | 类型        | 默认值 | 说明 |
 8 | | ----------- | ---------------------- | ---------- | ------- |
 9 | | show | Boolean | false | 是否显示，`双向绑定` |
10 | | mask-transition | String | vux-fade | 遮罩动画 |
11 | | dialog-transition | String | vux-dialog | 窗口动画 |
12 | 
13 | ## Events
14 | 
15 | | 事件名       | 参数       | 说明 |
16 | | ----------- | ---------------------- | ---------- |
17 | | on-show | 无 | 显示时触发 |
18 | | on-hide | 无 | 关闭时触发 |
19 | 
20 | ## Slots
21 | 
22 | | 名字       | 说明       | 
23 | | ----------- | ---------------------- | 
24 | | 默认slot | 弹窗主体内容 | 
25 | 
26 | ## Demo
27 | 
28 | ``` html
29 | <template>
30 |   <div>
31 |     <dialog :show.sync="show" class="dialog-demo">
32 |       <p class="dialog-title">I'm a Dialog.</p>
33 |     </dialog>
34 |   </div>
35 | </template>
36 | 
37 | ```


--------------------------------------------------------------------------------
/message/loading.md:
--------------------------------------------------------------------------------
 1 | # Loading
 2 | 
 3 | ## Props
 4 | 
 5 | | 参数         | 类型                 | 默认       | 说明 |
 6 | | ----------- | ---------------------- | ---------- | ------- |
 7 | | show  | Boolean | false | 是否显示，`双向绑定` |
 8 | | text | String or DOM  | Loading | 提示文字，与默认slot作用一致 |
 9 | 
10 | 
11 | ## Slots
12 | 
13 | | 名字         | 说明            | 
14 | | ----------- | --------------- | 
15 | | 默认slot | 提示文字，因和text属性功能一致，因此可以二选一 |
16 | 
17 | 
18 | ## Demo
19 | 
20 | 
21 | ``` vux height=450 components=Loading,Group,Switch
22 | <template>
23 | <div>
24 |   <group>
25 |     <switch title="Toggle" :value.sync="show" @on-change="delayHide"></switch>
26 |   </group>
27 |   <loading :show="show" :text="text1"></loading>
28 | </div>
29 | </template>
30 | 
31 | <script>
32 | export default {
33 |   methods: {
34 |     delayHide () {
35 |       setTimeout(() => {
36 |         this.show = false
37 |       }, 5000)
38 |     }
39 |   },
40 |   data () {
41 |     return {
42 |       show: false,
43 |       text1: 'Hello world'
44 |     }
45 |   }
46 | }
47 | </script>
48 | ```


--------------------------------------------------------------------------------
/message/spinner.md:
--------------------------------------------------------------------------------
 1 | # Spinner
 2 | 
 3 | ## Props
 4 | 
 5 | # 文档模板
 6 | 
 7 | ## Props
 8 | 
 9 | | 名字 | 类型 | 默认 | 描述 |
10 | |-----|-----|-----|-----|
11 | | type | String | ios | 类型,可选值有 'android', 'ios', 'ios-small', 'bubbles', 'circles', 'crescent', 'dots', 'lines', 'ripple', 'spiral' |
12 | 
13 | 
14 | ## Demos
15 | 
16 | ``` vux height=500 components=Group,Cell,Spinner
17 | <template>
18 | <div>
19 |   <group>
20 |     <cell v-for="type in types" :title="type">
21 |       <spinner :type="type"></spinner>
22 |     </cell>
23 |   </group>
24 | </div>
25 | </template>
26 | 
27 | <script>
28 | export default {
29 |   data () {
30 |     return {
31 |       types: ['android', 'ios', 'ios-small', 'bubbles', 'circles', 'crescent', 'dots', 'lines', 'ripple', 'spiral']
32 |     }
33 |   }
34 | }
35 | </script>
36 | ```


--------------------------------------------------------------------------------
/message/toast.md:
--------------------------------------------------------------------------------
 1 | # Toast
 2 | 
 3 | ## Props
 4 | 
 5 | | 参数         | 类型                 | 默认       | 说明 |
 6 | | ----------- | ---------------------- | ---------- | ------- |
 7 | | show  | Boolean | false | 是否显示，`双向绑定` |
 8 | | time  | Nummber  | 2000 | 显示时间 |
 9 | | type  | String   | success | 图标类型，可选为`success`,`text`,`cancel`,`warn` |
10 | | transition | String | vux-fade | 动画 |
11 | | width | String | `7.6em` | Toast宽度 |
12 | 
13 | > 尽管Toast组件提供了`cancel`和`warn`类型，但不推荐使用，需要用户关注的通知推荐使用`Alert`或者`Confirm`
14 | 
15 | ## Slot
16 | 
17 | | 名字         | 说明            | 
18 | | ----------- | --------------- | 
19 | | 默认slot | 提示文字 |
20 | 
21 | 
22 | 
23 | ## Demo
24 | 
25 | ### 默认按钮文字
26 | 
27 | ``` vux height=450 components=Toast,Group,Switch
28 | <template>
29 | <div>
30 |   <group>
31 |     <switch title="默认提示" :value.sync="show1"></switch>
32 |     <switch title="文字提示" :value.sync="show2"></switch>
33 |     <switch title="提示取消" :value.sync="show3"></switch>
34 |     <switch title="提示禁止" :value.sync="show4"></switch>
35 |     <switch title="设置出现时间1s" :value.sync="show5"></switch>
36 |     <switch title="long text" :value.sync="show6"></switch>
37 |   </group>
38 |   <toast :show.sync="show1" >默认提示</toast>
39 |   <toast :show.sync="show2" type="text">处理成功</toast>
40 |   <toast :show.sync="show3" type="cancel">取消操作</toast>
41 |   <toast :show.sync="show4" type="warn">禁止操作</toast>
42 |   <toast :show.sync="show5" :time="1000">1s关闭</toast>
43 |   <toast :show.sync="show6" type="text" width="20em">Talk is cheap, show me the code.</toast>
44 | </div>
45 | </template>
46 | 
47 | <script>
48 | export default {
49 |   data () {
50 |     return {
51 |       show1: false,
52 |       show2: false,
53 |       show3: false,
54 |       show4: false,
55 |       show5: false,
56 |       show6: false
57 |     }
58 |   }
59 | }
60 | </script>
61 | ```


--------------------------------------------------------------------------------
/number/number-roller.md:
--------------------------------------------------------------------------------
 1 | # number-roller
 2 | 
 3 | ## 属性
 4 | 
 5 | | 参数         | 说明                  | 类型        | 默认值 |
 6 | | ----------- | ---------------------- | ---------- | ------- |
 7 | | number | 可选(异步赋值)，选项值 | Number | 0 |
 8 | | width | 必选，数字位数 | Number | -- |
 9 | 
10 | ## demo
11 | 
12 | ``` vux height=100 components=NumberRoller
13 | <template>
14 | <number-roller :number="number" :width="6"></number-roller>
15 | </template>
16 | 
17 | <script>
18 | export default {
19 |   ready () {
20 |     setInterval(() => {
21 |       this.number = 100000 + Math.round(Math.random() * 899999)
22 |     }, 3000)
23 |   },
24 |   data () {
25 |     return {
26 |       number: 123765
27 |     }
28 |   }
29 | }
30 | </script>
31 | ```


--------------------------------------------------------------------------------
/style/1px.md:
--------------------------------------------------------------------------------
 1 | # 1px边框解决方案
 2 | 
 3 | ## 应用场景
 4 | 
 5 | 1px边框问题来源于在Retina屏幕下边框宽度大于1像素，略丑，解决方案来源于`FronzenUI`
 6 | 
 7 | 一般用于`九宫格`等布局，在vux中配合`Flexbox`使用，常见于电商首页，支付工具服务列表页
 8 | 
 9 | ## 使用
10 | 
11 | ``` html
12 | <style lang="less">
13 | @import '~vux/src/styles/1px.less';
14 | </style>
15 | ```
16 | 根据位置可用类名为：
17 | + `vux-1px-t`
18 | + `vux-1px-b`
19 | + `vux-1px-tb`
20 | + `vux-1px-l`
21 | + `vux-1px-r`
22 | 
23 | ## 示例
24 | 
25 | ``` vux height=180 components=Flexbox,FlexboxItem
26 | <template>
27 |   <flexbox class="vux-1px-tb" :margin-left=0 style="height:50px;">
28 |     <flexbox-item class="vux-1px-r test"><div>北京</div></flexbox-item>
29 |     <flexbox-item class="vux-1px-r test"><div>上海</div></flexbox-item>
30 |     <flexbox-item class="vux-1px-r test"><div>广州</div></flexbox-item>
31 |     <flexbox-item class="vux-1px-r test"><div>深圳</div></flexbox-item>
32 |     <flexbox-item class="test"><div>其他</div></flexbox-item>
33 |   </flexbox>
34 |   <flexbox class="vux-1px-b" :margin-left=0 style="height:50px;">
35 |     <flexbox-item class="vux-1px-r test"><div>天津</div></flexbox-item>
36 |     <flexbox-item class="vux-1px-r test"><div>西安</div></flexbox-item>
37 |     <flexbox-item class="vux-1px-r test"><div>重庆</div></flexbox-item>
38 |     <flexbox-item class="vux-1px-r test"><div>杭州</div></flexbox-item>
39 |     <flexbox-item class="test"><div>其他</div></flexbox-item>
40 |   </flexbox>
41 |   <flexbox class="vux-1px-b" :margin-left=0 style="height:50px;">
42 |     <flexbox-item class="vux-1px-r test"><div>南京</div></flexbox-item>
43 |     <flexbox-item class="vux-1px-r test"><div>武汉</div></flexbox-item>
44 |     <flexbox-item class="vux-1px-r test"><div>成都</div></flexbox-item>
45 |     <flexbox-item class="vux-1px-r test"><div></div></flexbox-item>
46 |     <flexbox-item class="test"><div>其他</div></flexbox-item>
47 |   </flexbox>
48 | </template>
49 | 
50 | <style>
51 | .test{
52 |   height:50px;
53 |   text-align:center;
54 |   line-height: 50px;
55 | }
56 | </style>
57 | ```


--------------------------------------------------------------------------------
/style/reddot.md:
--------------------------------------------------------------------------------
 1 | # Reddot
 2 | 
 3 | 一般用于新消息提示。
 4 | 
 5 | ## Demo
 6 | 
 7 | ``` vux components=Group
 8 | <template>
 9 | <div>
10 |   <br>
11 |   <div class="reddot-demo vux-reddot">Hi, you got a new message </div>
12 |   <br>
13 |   <div class="reddot-demo vux-reddot-border">中文文字</div>
14 |   <br>
15 |   <div class="reddot-demo vux-reddot-s">small dot</div>
16 | </div>
17 | </template>
18 | <style>
19 | .reddot-demo {
20 |   display: inline-block
21 | }
22 | </style>
23 | ```


--------------------------------------------------------------------------------
/styles/ebook.css:
--------------------------------------------------------------------------------
1 | /* CSS for ebook */
2 | 


--------------------------------------------------------------------------------
/styles/mobi.css:
--------------------------------------------------------------------------------
1 | /* CSS for mobi */
2 | 


--------------------------------------------------------------------------------
/styles/website.css:
--------------------------------------------------------------------------------
1 | /* CSS for website */
2 | 


--------------------------------------------------------------------------------
/template/common.md:
--------------------------------------------------------------------------------
 1 | # 文档模板
 2 | 
 3 | ## Props
 4 | 
 5 | | 名字 | 类型 | 默认 | 描述 |
 6 | |-----|-----|-----|-----|
 7 | 
 8 | 
 9 | ## Events
10 | 
11 | 
12 | | 名字 | 参数  | 描述 |
13 | |-----|-----|-----|
14 | 
15 | 
16 | ## Slots
17 | 
18 | 
19 | | 名字  | 描述 |
20 | |-----|-----|
21 | 
22 | 
23 | ## Demos
24 | 
25 | ``` vux height=500 components=Group,Cell
26 | <template>
27 | </template>
28 | ```


--------------------------------------------------------------------------------
/ui/badge.md:
--------------------------------------------------------------------------------
 1 | # badge
 2 | 
 3 | ## Props
 4 | 
 5 | | 名字 | 类型 | 默认 | 描述 |
 6 | |-----|-----|-----|-----|
 7 | | text | String | 无 | 文字 |
 8 | 
 9 | ## Demo
10 | 
11 | ``` vux height=120 components=Badge,Group,Cell
12 | <template>
13 | <div>
14 |   <badge text="1"></badge>
15 |   <br>
16 |   <badge text="123"></badge>
17 |   <br>
18 |   <group>
19 |     <cell title="Used in a Cell">
20 |       <div class="badge-value">
21 |         New Message &nbsp;
22 |         <badge text="8"></badge>
23 |       </div>
24 |     </cell>
25 |   </group>
26 | </div>
27 | </template>
28 | ```


--------------------------------------------------------------------------------
/ui/divider.md:
--------------------------------------------------------------------------------
 1 | # Divider
 2 | 
 3 | > 目前线条颜色不可配置。
 4 | 
 5 | ### Demo
 6 | 
 7 | ``` vux height=65 components=Divider
 8 | <template>
 9 | <divider>华丽分割线</divider>
10 | <divider><span style="color:green;">华丽分割线</span></divider>
11 | </template>
12 | ```


--------------------------------------------------------------------------------
/ui/icon.md:
--------------------------------------------------------------------------------
 1 | # icon
 2 | 
 3 | ## Props
 4 | 
 5 | | 名字 | 类型 | 默认 | 描述 |
 6 | |-----|-----|-----|-----|
 7 | | type | String | 无 | 类型, 可选值见demo |
 8 | 
 9 | 
10 | ## Demos
11 | 
12 | ``` vux height=300 components=Icon
13 | <template>
14 | <div>
15 |   <icon type="success"></icon>
16 |   <icon type="info"></icon>
17 |   <icon type="info_circle"></icon>
18 |   <icon type="warn"></icon>
19 |   <icon type="waiting"></icon>
20 |   <icon type="waiting_circle"></icon>
21 |   <icon type="safe_success"></icon>
22 |   <icon type="safe_warn"></icon>
23 |   <icon type="success_circle"></icon>
24 |   <icon type="success_no_circle"></icon>
25 |   <icon type="circle"></icon>
26 |   <icon type="download"></icon>
27 |   <icon type="cancel"></icon>
28 |   <icon type="search"></icon>
29 |   <icon type="clear"></icon>
30 |   <br/>
31 |   <icon type="success" class="icon_big"></icon>
32 |   <icon type="info" class="icon_big"></icon>
33 |   <icon type="safe_success" class="icon_big"></icon>
34 |   <icon type="safe_warn" class="icon_big"></icon>
35 | </div>
36 | </template>
37 | ```


--------------------------------------------------------------------------------
/ui/progress.md:
--------------------------------------------------------------------------------
 1 | # Progress 进度条
 2 | 
 3 | ## API
 4 | 
 5 | | 参数         | 说明                  | 类型        | 默认值 |
 6 | | ----------- | ---------------------- | ---------- | ------- |
 7 | | template | 进度条模板编号 | Number | 0 |
 8 | | percent | 当前进度百分比 | Number | 0 |
 9 | 
10 | ### template
11 | 
12 | 
13 | * `template=0`，默认值，使用weui提供的进度条样式进行展示。
14 | 
15 | * `template=1`，Determinate
16 | 
17 | [![](https://raw.githubusercontent.com/lightningtgc/MProgress.js/gh-pages/styles/images/determinate.gif)](https://github.com/lightningtgc/MProgress.js#types-and-preview)
18 | 
19 | * `template=2`，Buffer
20 | 
21 | [![](https://raw.githubusercontent.com/lightningtgc/MProgress.js/gh-pages/styles/images/buffer.gif)](https://github.com/lightningtgc/MProgress.js#types-and-preview)
22 | 
23 | * `template=3`，Indeterminate
24 | 
25 | [![](https://raw.githubusercontent.com/lightningtgc/MProgress.js/gh-pages/styles/images/indeterminate.gif)](https://github.com/lightningtgc/MProgress.js#types-and-preview)
26 | 
27 | * `template=4`，Query Indeterminate and Determinate
28 | 
29 | [![](https://raw.githubusercontent.com/lightningtgc/MProgress.js/gh-pages/styles/images/query.gif)](https://github.com/lightningtgc/MProgress.js#types-and-preview)
30 | 
31 | 
32 | ## Demo
33 | 
34 | ``` vux height=300 components=Group,Progress
35 | <template>
36 | <div>
37 | 	<group title="默认">
38 | 		<progress></progress>
39 | 	</group>
40 | 	<group :title="'双向绑定: ' + percent1 + '%">
41 | 		<progress :percent.sync="percent1"></progress>
42 | 	</group>
43 |   <group title="template=2, Buffer">
44 |  		 <progress :template="2"></progress>
45 |   </group>
46 |   <group title="template=3, Indeterminate">
47 |   		<progress :template="3"></progress>
48 |   </group>
49 |   <group title="template=4, Query Indeterminate and Determinate">
50 |   		<progress :template="4"></progress>
51 |   </group>
52 | </div>
53 | </template>
54 | <script>
55 | export default {
56 | 	data () {
57 | 		return {
58 | 			percent1: 50
59 | 		}
60 | 	}
61 | }
62 | </script>
63 | ```


--------------------------------------------------------------------------------
/ui/tips-components.md:
--------------------------------------------------------------------------------
1 | # 提示组件
2 | 
3 | 


--------------------------------------------------------------------------------
/wiki/meta.md:
--------------------------------------------------------------------------------
1 | # Meta
2 | 
3 | ## 指定是否将网页内容中的手机号码显示为拨号的超链接
4 | 
5 | `<meta name="format-detection" content="telephone=no"/> `


--------------------------------------------------------------------------------