Vue.use（...）

Question

我正在尝试从require d javascript文件访问我的Vue元素，但到目前为止我已经失败了......我想从外部获取element-ui的el-form-item组件的规则验证器。也许我的逻辑是错误的，但这种方式也应该有效（我猜）

Vue@2.5.13
  element-ui@2.0.11
  npm@5.6.0

Vue.use（...）

我试过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'＆amp;＆amp;
     ！（这个Vue $ 3的实例）
   ）{
     警告（'Vue是构造函数，应该使用new关键字调用'）;
   }
   this._init（选项）;
  }

的console.log（本）;

{ “需要”：真， “字段”： “用户名”， “fullField”： “用户名”， “类型”： “串” ...}

beforeCreate

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({
    // ...
});

Answer 1

你在哪里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访问组件中的插件方法。

从导入的文件访问vue

Vue.use（...）

beforeCreate

更新

1 个答案: