vue实现点击按钮input保持聚焦状态

主要功能：

1. 点击"停顿"按钮切换对话框显示状态
2. 输入框聚焦时保持状态
3. 点击对话框外的区域自动关闭
   

以下是代码版本：

<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>

主要优点：

1. 更好的结构：

   • 添加了容器元素 .input-container 方便定位
   • 使用 transition 实现平滑的对话框动画

2. 安全的实现：

   • 添加了类型定义 inputRef.value 为 HTMLInputElement
   • 使用生命周期钩子管理事件监听
   • 添加了点击对话框防止事件冒泡的 @click.stop

3. 用户体验：

   • 按钮状态更直观 (添加了 primary 样式)
   • 添加了过渡动画
   • 对话框样式更美观

4. 代码组织：

   • 重命名方法更语义化 (toggleDialog 替代 [pauseInput]
   • 分离了关闭逻辑到 closeDialog 方法

5. DOM 检查优化：

   • 使用整个容器检查替代具体元素检查