通过遮罩层按钮点击事件来实现激活或焦点定位到关联的表单控件。

<template>

正文内容

<div   @click=" showMask = !showMask " ></div>

遮罩层内容

  <div v-show="isClick">

    <button @click="activateLabel">点击激活标签</button>

    <input type="text" ref="myInput" id="myInput">

    <label for="myInput" ref="myLabel">标签已激活</label>

  </div>

</template>

 

<script>

export default {

data中定义isClick为false;

  methods: {

    activateLabel() {

      // 获取<label>和<input>的引用

      const label = this.$refs.myLabel;

      const input = this.$refs.myInput;

      // 触发<label>的点击事件

      if (label) {

        label.click();

      }

      // 如果<label>已激活，将焦点定位到<input>

      if (input && label.getAttribute('for') === input.id) {

        input.click();

      }

     this.isClick=false;

    }

  }

};

</script>

首先使用`ref`属性获取了`<label>`和`<input>`元素的引用。然后，在`activateLabel`方法中，触发了`<label>`的点击事件，并检查是否已激活了`<label>`，以确定是否将焦点定位到关联的`<input>`元素。

重点是使用v-show不要用v-if因为会影响到input中方法的调用。