nuxt项目踩坑

// .vue 页面
if (process.browser) {
  var Distpicker = require(‘v-distpicker‘)
  Vue.use(Distpicker)
  Vue.component(‘v-distpicker‘, Distpicker)
}

// nuxt.config.js
build: {
    vendor: [‘v-distpicker‘]
}　　

<no-ssr><v-distpicker :placeholders="form.placeholders"></v-distpicker></no-ssr>

//页面内
const dictionary = {
  zh_CN: {
    custom:{
      lender:{
        type:{
          required: () => ‘类型不能为空‘
        }
      }
    },
    messages: {
      lender: {
        code: () => ‘ssss‘,
      }
    },
    attributes: {
      lender: {
        code: ‘资方编码‘
      }
    }
  }
};

Validator.localize(dictionary);

//vue
<p>
	<input v-validate="‘required|sss‘" name="sss" type="text" placeholder="sss">
	<span v-show="errors.has(‘sss‘)">{{ errors.first(‘sss‘) }}</span>
</p>

//公用
Validator.extend(‘sss‘, {
  getMessage: field =>  field + ‘必须是一个手机号.‘,
  validate: value =>  {return value.length == 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)}
});

//按钮触发
onSubmit() {
      this.$validator.validateAll().then((result) => {
        if (result) {
          console.log(‘ok?‘)
          return;
        }
        console.log(‘咋啦‘);
      });
}   

// /plugs/vee-validate.js本地化配置

import Vue from ‘vue‘
import VeeValidate,{Validator} from ‘vee-validate‘;
import zh_CN from ‘vee-validate/dist/locale/zh_CN‘;
import VueI18n from ‘vue-i18n‘;

Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: ‘zh_CN‘
});

Vue.use(VeeValidate, {
  i18n,
  fieldsBagName: ‘field‘,
  dictionary: {
    zh_CN: {
      messages: {
        email: () => ‘请输入正确的邮箱格式，哼哼哼哼哼‘,
        required: (field) => "请输入" + field
      },
      attributes: {
        // email:‘邮箱有毒吗‘,
        password: ‘密码‘,
        name: ‘账号‘,
        phone: ‘手机‘,
        lender: {
          code: ‘资方编码‘
        }
      }
    }
  }
});