快捷導(dǎo)航

vue實(shí)現(xiàn)點(diǎn)擊按鈕input保持聚焦?fàn)顟B(tài)的示例代碼

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

這篇文章主要介紹了vue實(shí)現(xiàn)點(diǎn)擊按鈕input保持聚焦?fàn)顟B(tài),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧

主要功能：

點(diǎn)擊"停頓"按鈕切換對(duì)話框顯示狀態(tài)
輸入框聚焦時(shí)保持狀態(tài)
點(diǎn)擊對(duì)話框外的區(qū)域自動(dòng)關(guān)閉

以下是代碼版本：

<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>插入內(nèi)容</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)點(diǎn)：

更好的結(jié)構(gòu)：

添加了容器元素 .input-container 方便定位
使用 transition 實(shí)現(xiàn)平滑的對(duì)話框動(dòng)畫

安全的實(shí)現(xiàn)：

添加了類型定義 inputRef.value 為 HTMLInputElement
使用生命周期鉤子管理事件監(jiān)聽
添加了點(diǎn)擊對(duì)話框防止事件冒泡的 @click.stop

用戶體驗(yàn)：

按鈕狀態(tài)更直觀 (添加了 primary 樣式)
添加了過渡動(dòng)畫
對(duì)話框樣式更美觀

代碼組織：

重命名方法更語義化 (toggleDialog 替代 [pauseInput]
分離了關(guān)閉邏輯到 closeDialog 方法

DOM 檢查優(yōu)化：

使用整個(gè)容器檢查替代具體元素檢查

到此這篇關(guān)于vue實(shí)現(xiàn)點(diǎn)擊按鈕input保持聚焦?fàn)顟B(tài)的文章就介紹到這了,更多相關(guān)vue實(shí)現(xiàn)點(diǎn)擊按鈕input保持聚焦?fàn)顟B(tài)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: