19 - 切换焦点指令

[shenrui1]

// 你的答案

<script setup lang="ts">
import { ref } from 'vue';

const state = ref(false);

/**
 * Implement the custom directive
 * Make sure the input element focuses/blurs when the 'state' is toggled
 *
 */

const changeState = (el, value) => {
  if (value) {
    el.focus();
  } else {
    el.blur();
  }
};

const VFocus = {
  mounted(el, { value }) {
    changeState(el, value);
  },
  updated(el, { value }) {
    changeState(el, value);
  },
};

setInterval(() => {
  state.value = !state.value;
}, 2000);
</script>

<template>
  <input v-focus="state" type="text" />
</template>