如何从 VTextField 扩展？

Question

我想为 VTextField 道具设置默认值，为了实现这一点，我从它扩展并覆盖了一些默认道具：

<script>
import VTextField from 'vuetify/es5/components/VTextField';
const theme_config = require('@/theme/config.json');
export default {
    name: 'my-text-field',
    extends: VTextField,
    props: theme_config.components.default_input,
};
</script>

config.json 看起来像这样：

{
    "components": {
        "default_input":{
            "color": {
                "default": "secondary"
            },
            "outline": {
                "default": true
            }
        }
    }
}

使用 my-text-field 的父组件如下所示：

<template>
    <my-text-field 
        type="text" 
        append-icon="person"
    >
    </my-text-field>
</template>

但是当 vue 渲染时，它通过 v-text-field 更改 my-text-fiel:

这不是我第一次扩展 Vuetify 的组件，它只需一个按钮就可以完美工作，我不知道发生了什么

Answer 1

这不是我第一次回答自己的问题，但我还是回答了，因为这里可能有其他人也有同样的问题。

v-text-field 组件的问题是它是为多行和单行的使用而设计的，为了获得这个，他们在索引上放置了一个包装器，但这在新的 Vuetify2 中将变得过时他们现在有两个组件的原因是您可以自己完美地使用它们。这就是为什么我将原始文本输入 index.js 更改为我自己的输入，它像 vuetify 上的其他组件一样导入 VTextInput。

这是我的index.js

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.VTextField = undefined;

var _VTextField = require('./VTextField');

var _VTextField2 = _interopRequireDefault(_VTextField);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

exports.VTextField = _VTextField2.default;
exports.default = _VTextField2.default;

这不是一个奇特的解决方案，但也许可以帮助其他人解决问题。

如何从 VTextField 扩展？

How to extend from VTextField?

components

extends

vuejs2

vuetify.js