Cidc-ui NPM | npm.io

cidc-ui

安装&使用

手动安装

在当前项目下使用npm进行安装
```
npm install cidc-ui
```

引入

使用babel-plugin-import
```
import { Button } from "cidc-ui"
```

按需引入

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

全局引入

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即可，代码：

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的时候设置默认显示语言

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

this.i18n.local = "en";

表单校验

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

this.i18n.local = "en";

使用

<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

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属性必须存在

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值。
```
this.errors.first(标签的name值)
```
通过submit进行表单校验
```
this.$validator.validate().then(valid => {
    if (valid) {
        // TODO
    }
})
```
注意
- 必须使用在携带v-model指令的标签上，如input、radio、checkbox等
- 标签的name值必须确保唯一性，要不然无法定位校验未通过的元素