Vuetify菜单，使用自定义组件键盘编辑文本字段

Question

我正在用vuetify创建一个应用程序，并且我在v菜单上遇到了一些问题。

我有一个文本输入，当我点击它时，它会打开一个v菜单。在菜单中，我有一个我制作的组件，它是一个从0-9的简单键盘。用这个键盘我想改变文本输入。我想要一个保存按钮，应该保存所做的更改并关闭菜单。但是我不能让它工作。

我如何才能让它与多个文本输入一起工作。我知道这可能看起来过于复杂，只是为了编辑文本输入，但该应用程序将在更大的触摸屏上运行，我不想打开屏幕上的大键盘只是为了更改数字。

你会怎么做？

<v-menu bottom :close-on-content-click="false">
<template v-slot:activator="{ on, attrs }">
<v-text-field
v-bind="attrs"
v-on="on"
v-model="result"
readonly
></v-text-field>
</template>
<Calculator :data.sync="result" /> <-------- My keypad component
</v-menu>

键盘组件

<template>
<v-card class="widget" @contextmenu.prevent="" color="grey lighten-2" max-width="260" >
<v-card-text>
<v-card class="mb-2" elevation="1" min-height="64px" max-height="64px" tile flat color="lighten-grey" >
<v-card-text>
<v-text-field dense flat reverse v-model="value" :suffix="suffix" ></v-text-field>
</v-card-text>
</v-card>
<v-row no-gutters class="pb-1">
<v-col align="center" justify="center">
<v-btn color="grey lighten-5" @click="click1" tile elevation="1" height="55px" >1</v-btn>
</v-col>
<v-col align="center" justify="center">
<v-btn color="grey lighten-5" @click="click2" tile elevation="1" height="55px" >2</v-btn>
</v-col>
<v-col align="center" justify="center">
<v-btn color="grey lighten-5" @click="click3" tile elevation="1" height="55px" >3</v-btn>
</v-col>
</v-row>
<v-row no-gutters class="pb-1">
<v-col align="center" justify="center">
<v-btn color="grey lighten-5" @click="click0" tile elevation="1" height="55px" >0</v-btn >
</v-col>
<v-col align="center" justify="center">
<v-btn color="grey lighten-5" @click="clickDecimal" tile elevation="1" height="55px" >.</v-btn >
</v-col>
<v-col align="center" justify="center">
<v-btn color="grey lighten-5" @click="clickClear" tile elevation="1" height="55px" >C</v-btn >
</v-col>
</v-row>
<v-row no-gutters class="pt-2">
<v-col align="right">
<v-btn @click="cancel" tile small>Cancel</v-btn>
<v-btn class="ml-2 mr-0" @click="onSave" tile small>Save</v-btn>
</v-col>
</v-row>
</v-card-text>
</v-card>
</template>
<script>
export default {
props: ['data', 'suffix'],
data() {
return { value: '0', };
},
methods: {
click0() {
if (this.value.toString().length > 9) return;
if (this.value === '0') { this.value = ''; }
this.value = this.value + '0';
},
click1() {
if (this.value.toString().length > 9) return;
if (this.value === '0') { this.value = ''; }
this.value = this.value + '1';
},
click2() {
if (this.value.toString().length > 9) return;
if (this.value === '0') { this.value = ''; }
this.value = this.value + '2';
},
click3() {
if (this.value.toString().length > 9) return;
if (this.value === '0') { this.value = ''; }
this.value = this.value + '3';
},
clickClear() {
this.value = '0';
},
clickDecimal() {
if (this.value.includes('.')) return;
this.value = this.value + '.';
},
onSave() {},
cancel() {},
},
};
</script>

Answer 1

感谢分享您的键盘组件代码。检查我制作的这个代码沙盒：https://codesandbox.io/s/stack-70120821-5uyq4?file=/src/components/Keypad.vue

我通过删除内部文本字段和取消/保存按钮简化了键盘组件的使用，还优化了数字键盘的生成方式，但您可以根据自己的喜好进行修改。

我为键盘的内部值设置了一个观察程序。每当它被更新时，就会发出一个名为">"的事件；输出">将新值传递给他的父母。

watch: {
...
// When inner value gets a new value, emits and event to parent
value(val) {
this.$emit('output', val)
}
},

在父级，您可以通过设置自定义事件@output来接收新值。$eventvar包含从子组件发射的数据。在这个例子中，我只是简单地更新父组件的v-text-field的值。但是，如果您需要验证某个东西或用它做其他事情，也可以将此值传递给方法

<Keypad :input="result" @output="result = $event" />

如果您需要从父组件更新键盘值，您可以使用我定义的名为input的道具进行更新。为了能够在页面的初始加载中正常工作，您需要使用v菜单上的热切道具。这样，自定义键盘组件从一开始就被渲染。