一、参考

Vue Popup - Getting Started - DevExtreme Vue Documentation v23.2 (devexpress.com)

DevExtreme Vue - 组件配置语法 - DevExtreme Vue 中文文档 v23.2 (devexpress.com)

二、核心操作

2.1 绑定Dom

为输入框绑定对应的 ref 变量，从而获取 dom

2.2 绑定focus事件

在弹框加载完毕后，调用刚刚获取的dom元素的foucns方法

2.3 演示

三、代码

<template>
   <DxPopup
      v-model:visible="popupVisible"
      :drag-enabled="false"
      :hide-on-outside-click="true"
      :show-close-button="false"
      :show-title="true"
      :width="300"
      :height="280"
      container=".dx-viewport"
      title="Information"
      @shown="onShown"
    >
    <div>
        <DxTextBox ref="textBoxRef" />
    </div>
    </DxPopup>

    <button @click="popup">show</button>
    <div id="tst"></div>
</template>

<script setup>
import { DxPopup} from 'devextreme-vue/popup';
import DxTextBox from 'devextreme-vue/text-box';
import {ref} from "vue"

const textBoxRef = ref(null);
const popupVisible = ref(false)

const popup = () =>{
  popupVisible.value = true
}

const onShown = ()=>{
  textBoxRef.value.instance.focus();
}

</script>