vue實現點擊按鈕input保持聚焦狀態(tài)的示例代碼

更新時間：2025年06月06日 08:55:23 作者：雅痞yuppie

這篇文章主要介紹了vue實現點擊按鈕input保持聚焦狀態(tài),本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧

主要功能：

點擊"停頓"按鈕切換對話框顯示狀態(tài)
輸入框聚焦時保持狀態(tài)
點擊對話框外的區(qū)域自動關閉

以下是代碼版本：

<template>
  <div class="input-container">
    <el-input
      v-model="input"
      style="width: 240px"
      placeholder="Please input"
      ref="inputRef"
      class="input-ref"
      @focus="handleFocus"
    />
    <el-button 
      class="input-btn" 
      @click.stop="toggleDialog" 
      :disabled="!isFocused"
      :type="showDialog ? 'primary' : ''"
    >
      停頓 {{ isFocused ? 'ON' : 'OFF' }}
    </el-button>
    <transition name="fade">
      <div v-if="showDialog" class="dialog-wrapper" @click.stop>
        <dl class="dialog-content">
          <dt>插入內容</dt>
          <dd @click="closeDialog" style="cursor: pointer">插入btn</dd>
        </dl>
      </div>
    </transition>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
const showDialog = ref(false);
const input = ref("");
const inputRef = ref<HTMLInputElement>();
const isFocused = ref(false);
const handleDocumentClick = (e: MouseEvent) => {
  const target = e.target as HTMLElement;
  const clickedInside = target.closest(".input-container");
  if (!clickedInside && isFocused.value) {
    closeDialog();
  }
};
onMounted(() => {
  document.addEventListener("click", handleDocumentClick);
});
onBeforeUnmount(() => {
  document.removeEventListener("click", handleDocumentClick);
});
function closeDialog() {
  showDialog.value = false;
  if (inputRef.value) {
    inputRef.value.blur();
  }
  isFocused.value = false;
}
function handleFocus() {
  isFocused.value = true;
}
function toggleDialog() {
  showDialog.value = !showDialog.value;
  if (inputRef.value) {
    inputRef.value.focus();
  }
}
</script>
<style scoped>
.input-container {
  position: relative;
  display: inline-block;
}
.dialog-wrapper {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
  padding: 12px;
  background: white;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  z-index: 2000;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.2s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style>

主要優(yōu)點：

更好的結構：