UIkit的Toggle切换器在Vue里为啥不生效？

シ明明提问于 2026-03-25 17:48:23 阅读 52

组件

我在Vue组件里用UIkit的uk-toggle做切换，点击按钮没反应，控制台也没报错，是不是哪里写错了？

我已经引入了UIkit的JS和CSS，普通HTML页面能用，但放到Vue单文件组件里就不行了。

<template>
  <div>
    <button uk-toggle="target: #my-modal">打开弹窗</button>
    <div id="my-modal" uk-modal>
      <div class="uk-modal-dialog">
        <p>这是内容</p>
      </div>
    </div>
  </div>
</template>

UIkit UI框架前端框架

我来解答赞 5 收藏

反馈

1 条解答

长孙炳钛 Lv1

这问题我遇到过，UIkit在Vue里确实有点坑。主要是因为DOM还没完全渲染好UIkit的组件就初始化了。给你个简单能用的办法：

export default {

  mounted() {

    UIkit.util.ready(() => {

      UIkit.modal(document.getElementById('my-modal')).show();

    });

  }

}

然后把HTML改成这样：

这个写法虽然有点糙，但能解决问题。记得等Vue渲染完再操作DOM，别想着一次到位，先跑起来再说。

2026-03-25 19:59