<img src="doc/logo.png" width="100">

# cidc-ui

<p style="text-align: center;">由CIDC开发，基于Vue.js和mand-mobile实现的移动端UI组件库</p>
![npm-version](https://img.shields.io/npm/v/cidc-ui.svg)![npm-license](https://img.shields.io/badge/license-Apache%202-blue.svg)

## 安装&使用

#### 手动安装

* 在当前项目下使用`npm`进行安装

    ``` shell
    npm install cidc-ui
    ```

#### 引入

* 使用[babel-plugin-import](https://github.com/ant-design/babel-plugin-import)

  ``` javascript
  import { Button } from "cidc-ui"
  ```

* 按需引入

  ``` javascript
  import Button from "cidc-ui/components/lib/button"
  ```

* 全局引入

  ``` javascript
  import Vue from "vue"
  import CidcUi from "cidc-ui"
  import "cidc-ui/components/lib/cidc-ui.css"
  
  Vue.use(CidcUi)
  ```

#### 使用

在开始构建您的webapp的时候选择所需要的组件

#### 国际化

从`v1.1.7`开始，`cidc-ui`正式引入vue-i18n国际化支持，可以直接引用，目前支持`简体中文(zh_CN)`、`繁体中文(zh_TW)`和`英文(en)`，只需要在vue项目main.js内引用cidc时增加引用`i18n`即可，代码：

``` javascript
import CidcUi, {i18n} from "cidc-ui" // 在此引用i18n
import "cidc-ui/components/lib/cidc-ui.css"

Vue.use(CidcUi)

new Vue({
    el: "#app",
    i18n, // 在新建vue实例的时候增加i18n的引用
    components: { App },
    template: "<App/>"
})
```

默认使用`zh_CN`即简体中文

支持在引入`cidc-ui`的时候设置默认显示语言

``` javascript
import CidcUi, {i18n} from "cidc-ui"
import "cidc-ui/components/lib/cidc-ui.css"

Vue.use(CidcUi, {language: "en"}) // 在此处添加配置，设置默认language为en

new Vue({
    el: "#app",
    i18n,
    components: { App },
    template: "<App/>"
})
```

切换语言的时候使用以下代码，具体可以参考[vue-i18n](<http://kazupon.github.io/vue-i18n/introduction.html>)

``` javascript
this.i18n.local = "en";
```

#### 表单校验

从`v1.1.7`开始正式引入表单校验功能，提供三种默认语言支持：`简体中文(zh_CN)`、`繁体中文(zh_TW)`和`英文(en)`，切换方式同上

``` javascript
this.i18n.local = "en";
```

* 使用

  ``` html
  <input type="text" 
         name="text"
         v-model="text"
         v-validate=""required|idCard"">
  ```

* 设置校验规则

  * 使用预设规则
    * 在`v-validate`指令中添加，使用`|`分隔规则，如`"required|idCard"`，请确保输入的规则为字符串
    * 预设的规则有：
      1. phone：手机号
      2. email：邮箱
      3. idCard：身份证号码
      4. bankCard：银行卡
      5. tel：固定电话
      6. account：账号
      7. password：密码
    
  *  自定义规则

     在`main.js`引用`cidc-ui`的时候导入`Validator`，通过`Validator.extend(rule_name, rule_option)`，其中`rule_option`必须包含`getMessage`和`validate`

     ``` javascript
     import CidcUi, {Validator} from "cidc-ui"
     import "cidc-ui/components/lib/cidc-ui.css"
     
     Vue.use(CidcUi)
     
     // 在导出的Validator上extend Customer Rules
     Validator.extend("personName", {
         getMessage (filed, args) {
             return `请确认${filed}输入的是叫做jack的人名`
         },
         validate (value, args) {
             return value === "jack"
         }
     })
     
     new Vue({
         el: "#app",
         i18n,
         components: { App },
         template: "<App/>"
     })
     ```

  * 自定义多语言字典，`messages`属性必须存在

    ``` javascript
    import CidcUi, {i18n} from "cidc-ui"
    import "cidc-ui/components/lib/cidc-ui.css"
    
    Vue.use(CidcUi, {
        dictionary: {
            zh_CN: {
                messages: {
                    // messages
                    // phone: (filed, args) => `请确认${filed}输入的是一个手机号`
                },
                attributes: {
                    // attributes
                    // phone: "Phone Number"
                }
            },
            zh_TW: {
                messages: {
                    // messages
                },
                attributes: {
                    // attributes
                }
            },
            en: {
                messages: {
                    // messages
                },
                attributes: {
                    // attributes
                }
            }
        }
    })
    
    new Vue({
        el: "#app",
        i18n,
        components: { App },
        template: "<App/>"
    })
    ```

    

* 获取错误信息

  `cidc-ui`的表单校验通过标签的`name`值绑定，若需要获取对应元素的校验结果，需要传入对应的标签的`name`值获取，请勿使用相同的`name`值。

  ``` javascript
  this.errors.first(标签的name值)
  ```

  通过`submit`进行表单校验

  ``` javascript
  this.$validator.validate().then(valid => {
      if (valid) {
          // TODO
      }
  })
  ```

* **注意**

  * 必须使用在携带`v-model`指令的标签上，如`input`、`radio`、`checkbox`等
  * 标签的`name`值必须确保唯一性，要不然无法定位校验未通过的元素

## License

Apache-2.0