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

Question

我正在使用 vuetify 创建一个应用，但我在使用 v-menu 时遇到了一些问题。

我有一个文本输入，当我点击它时，它会打开一个 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

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

我为键盘的内部 value 编号设置了一个监视程序。并且每当它更新时，都会向其父级发出一个名为 "output" 的事件，并带有新值。

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

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

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

如果您需要从父组件更新键盘值，您可以使用我定义的称为 input 的道具来完成。为了能够在页面的初始加载时正常工作，您需要使用 v-menu 上的 eager 属性。这样一来，自定义键盘组件就会从一开始就呈现出来。