超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

VeeValidator

2020-1-17    前端達(dá)人

VeeValidator

語(yǔ)言設(shè)置

校驗(yàn)消息默認(rèn)是英文的,定義中文或其他語(yǔ)言的錯(cuò)誤提示消息


  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 + '輸入不符合設(shè)定規(guī)則!';
  12. },
  13. min : function (field,leng) {
  14. return field + '長(zhǎng)度不能小于'+leng+'位';
  15. }
  16. }
  17. }
  18. };
  19. VeeValidate.Validator.localize('zh_CN', dict.zh_CN);

校驗(yàn)的時(shí)候需要設(shè)置語(yǔ)言

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

錯(cuò)誤消息顯示

顯示指定字段的第一個(gè)錯(cuò)誤

this.$validator.first('fieldname')

顯示所有字段的第一個(gè)錯(cuò)誤消息

this.$validator.errors.all()

Mock.js

配置

路由攔截配置不需要修改之前的代碼,匹配的url請(qǐng)求會(huì)直接通過(guò)mock而不是請(qǐng)求服務(wù)器


  1. const handler = req => {
  2. return {mock數(shù)據(jù)};
  3. }
  4. Mock.mock('url攔截規(guī)則,正則表達(dá)式',handler)

配置延遲時(shí)間

模擬服務(wù)器請(qǐng)求的異步特性


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

Vuex

模塊化

多人協(xié)作,或者中大型的項(xiàng)目需要把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. }

在調(diào)用的時(shí)候,state 有命名空間的,而mutation和actions都與父模塊共用同樣的命名空間所以不能定義與父模塊同名的mutation 或 action

獲取模塊的state

 this.$store.state.module_name_a.foo

調(diào)用模塊的mutation

this.$store.commit('hello')

namespace

定義了namespace ,mutations 和 action 會(huì)帶上模塊的命名: module_name/muation


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

這時(shí)候調(diào)模塊內(nèi)的mutation

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

vuejs-datepicker

日期選擇控件

設(shè)置默認(rèn)值

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

日期格式化

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

語(yǔ)言選擇(默認(rèn)是英文)

導(dǎo)入語(yǔ)言資源文件,然后再設(shè)置:language

設(shè)置成中文


分享本文至:

日歷

鏈接

個(gè)人資料

存檔