VeeValidator - 蓝蓝设计_UI设计公司

帝皇彩票官网

VeeValidator

2020-1-17 前端达人

VeeValidator

语言设置

校验消息默认是英文的,定义中文或其他语言的错误提示消息


  1. import VeeValidate from 'vee-validate';
  2. import Vue from 'vue'
  3. Vue.use(VeeValidate)
  4. var dict = {
  5. zh_CN: {
  6. messages: {
  7. required: function(field){
  8. return field + '不能为空!';
  9. },
  10. between: function(field){
  11. return field + '输入不符合设定规则!';
  12. },
  13. min : function (field,leng) {
  14. return field + '长度不能小于'+leng+'位';
  15. }
  16. }
  17. }
  18. };
  19. VeeValidate.Validator.localize('zh_CN', dict.zh_CN);

校验的时候需要设置语言

this.$validator.localize('zh_CN');

错误消息显示

显示指定字段的第一个错误

this.$validator.first('fieldname')

显示所有字段的第一个错误消息

this.$validator.errors.all()

Mock.js

配置

路由拦截配置不需要修改之前的代码,匹配的url请求会直接通过mock而不是请求服务器


  1. const handler = req => {
  2. return {mock数据};
  3. }
  4. Mock.mock('url拦截规则,正则表达式',handler)

配置延迟时间

模拟服务器请求的异步特性


  1. Mock.setup({
  2. timeout:1000
  3. })

Vuex

模块化

多人协作,或者中大型的项目需要把store分为模块


  1. const a = {
  2. state : {foo:1},
  3. mutations : {hello(state)=> {}},
  4. modules : {
  5. 。。。嵌套
  6. }
  7. }
  8. const b = {}
  9. const store = {
  10. state : {},
  11. mutations : {},
  12. actions : {},
  13. modules : {
  14. module_name_a:a,
  15. module_name_b:b
  16. }
  17. }

在调用的时候,state 有命名空间的,而mutation和actions都与父模块共用同样的命名空间所以不能定义与父模块同名的mutation 或 action

获取模块的state

 this.$store.state.module_name_a.foo

调用模块的mutation

this.$store.commit('hello')

namespace

定义了namespace ,mutations 和 action 会带上模块的命名: module_name/muation


  1. const store = {
  2. modules : {
  3. namespace : true,
  4. a: {
  5. muations : {
  6. test(state) => {...}
  7. }
  8. }
  9. }
  10. }

帝皇彩票官网 这时候调模块内的mutation

this.$store.commit('a/test')

vuejs-datepicker

帝皇彩票官网 日期选择控件

设置默认值

 <datepicker v-model="mydate" </datepicker> 

日期格式化

<datepicker :format="'yyyy-MM-dd'"> </datepicker> 

语言选择(默认是英文)

导入语言资源文件,然后再设置:language

设置成中文


Powered by sitemap
钱多多彩票开户 迪士尼彩乐园 山东群英会直播 桔子彩票开奖 桔子彩票开奖 迪士尼彩乐园 福建11选5开奖 桔子彩票官网 桔子彩票注册 大象彩票APP