Vue项目中如何通过JS程序化打开Preline UI模态框？

要在Vue项目中通过JavaScript程序化打开Preline UI的模态框，你可以直接使用Preline提供的HSOverlay API，以下是具体实现方式：

方法一：直接调用Preline的Overlay实例方法 #

步骤1：获取模态框元素 #

通过ID选择器获取目标模态框元素（比如示例中的hs-basic-modal），或在Vue中使用ref引用元素。

步骤2：初始化并打开模态框 #

使用Preline的HSOverlay类创建实例，调用open()方法即可触发打开：

// 在Vue组件的方法中
openModal() {
  const modalElement = document.getElementById('hs-basic-modal');
  const modalInstance = new HSOverlay(modalElement);
  modalInstance.open();
}

如果使用Vue 3组合式API，可在<script setup>中这样实现：

<script setup>
import { onMounted } from 'vue';

let modalInstance = null;

onMounted(() => {
  const modalElement = document.getElementById('hs-basic-modal');
  modalInstance = new HSOverlay(modalElement);
});

const openModal = () => {
  modalInstance?.open();
};
</script>

方法二：使用Vue Refs（更符合Vue开发风格） #

为模态框添加ref属性，通过ref获取元素并初始化：

<template>
  <div ref="basicModal" id="hs-basic-modal" class="hs-overlay hs-overlay-open:opacity-100 hs-overlay-open:duration-500 hidden size-full fixed top-0 start-0 z-80 opacity-0 overflow-x-hidden transition-all overflow-y-auto pointer-events-none" role="dialog" tabindex="-1" aria-labelledby="hs-basic-modal-label">
    <!-- 模态框内部内容 -->
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const basicModal = ref(null);
let modalInstance = null;

onMounted(() => {
  if (basicModal.value) {
    modalInstance = new HSOverlay(basicModal.value);
  }
});

const openModal = () => {
  modalInstance?.open();
};
</script>

额外说明 #

• 确保Preline UI的JS已正确引入并初始化。若为SPA项目，路由切换后可能需要重新执行HSCore.init()来初始化组件。
• 关闭模态框可调用modalInstance.close()方法。
• 如需监听模态框状态变化，可使用Preline的事件回调：

  modalInstance.on('open', () => {
    console.log('模态框已打开');
  });
  
  modalInstance.on('close', () => {
    console.log('模态框已关闭');
  });
  

内容的提问来源于stack exchange，提问作者user5893820