0.0.11 • Published 5 years ago
cidc-test v0.0.11
cidc-ui
安装&使用
手动安装
在当前项目下使用
npm
进行安装npm install cidc-ui
引入
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"
,请确保输入的规则为字符串 - 预设的规则有:
- phone:手机号
- email:邮箱
- idCard:身份证号码
- bankCard:银行卡
- tel:固定电话
- account:账号
- 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
值必须确保唯一性,要不然无法定位校验未通过的元素
- 必须使用在携带
License
Apache-2.0