我正在尝试从require
d javascript文件访问我的Vue元素,但到目前为止我已经失败了......我想从外部获取element-ui的el-form-item
组件的规则验证器。也许我的逻辑是错误的,但这种方式也应该有效(我猜)
Vue@2.5.13
element-ui@2.0.11
npm@5.6.0
我试过Vue.use(...)
我的javascript文件。
const MyPlugin = {
install(Vue, options) {
Vue.prototype.usernameValidator = function (rule, value, callback) {
console.log(Vue);
console.log(this);
// ...
我的控制台输出:
的console.log(Vue公司);
ƒVue$ 3(选项){
if(“development”!=='production'&&
!(这个Vue $ 3的实例)
){
警告('Vue是构造函数,应该使用new
关键字调用');
}
this._init(选项);
}
的console.log(本);
{ “需要”:真, “字段”: “用户名”, “fullField”: “用户名”, “类型”: “串” ...}
module.exports = function (rule, value, callback) {
console.log(this)
// ...
});
的console.log(本);
{ “需要”:真, “字段”: “用户名”, “fullField”: “用户名”, “类型”: “串” ...}
正如我所说,我的逻辑错了,但我只是好奇,我可以制作这样的方法吗?
此致
我在register.blade.php
<el-form-item label="Username" prop="username" :rules="[{required:true, validator: usernameValidator, trigger:'blur,change'}]">
<el-input v-model="form.username" name="username"></el-input>
</el-form-item>
在app.js
;
Vue.use(require('./plugins/usernameValidator'));
// ...
window.app = new Vue({
// ...
});
答案 0 :(得分:0)
你在哪里require
元素?我将详细介绍我如何使用您的示例创建插件。
定义一个插件:
// my-plugin.js
import {FormItem} from 'element-ui'
const MyPlugin = {
install(Vue, options) {
Vue.prototype.usernameValidator = function (rule, value, callback) {
// use FormItem's validator
然后通过Vue.use
注册插件:
// app.js
import MyPlugin from 'my-plugin'
// or require
const MyPlugin = require('my-plugin')
Vue.use(MyPlugin)
稍后在组件中,调用插件中定义的usernameValidator
方法:
<template>
<input name="username" v-model="username" :class="isValidUsername ? 'borderGreen' : 'borderRed'" />
<div>{{ usernameFeedback }}</div>
</template>
export default {
beforeCreate () {
// what would you validate in here?
// this.usernameValidator(rule, value, callback)
},
data () {
return {
username: null,
usernameFeedback: null
}
},
computed: {
isValidUsername () {
// assuming the validator returns a boolean, valid/invalid
return this.usernameValidator(rule, this.username, this.validationCallback)
}
},
methods: {
validationCallback (feedback) {
this.usernameFeedback = feedback
}
}
}
如果您有一个关于require
组件的示例,我可以更新我的答案,但是您可以使用this
访问组件中的插件方法。