Vue.JS & Semantic-UI 模态

Posted 2023-02-22

【中文标题】Vue.JS & Semantic-UI 模态

【英文标题】：Vue.JS & Semanti-UI modal

【发布时间】：2017-11-13 01:48:14

【问题描述】：

在我的一个 vue 组件中，我有一个按钮应该打开 Semantic-UI modal，如下所示：

模板：

<template>
<div>
 ...
 <button type="button" @click="openModal()"> Open </button>
 <div class="ui modal" id="confirmMod">
    <i class="close icon"></i>
    <div class="header">
      Modal Title
    </div>
    <div class="image content">
      <div class="image">
        An image can appear on left or an icon
      </div>
      <div class="description">
        A description can appear on the right
      </div>
    </div>
    <div class="actions">
      <div class="ui button">Cancel</div>
      <div class="ui button">OK</div>
    </div>
  </div>
 </div>
</div>
</template>

脚本：

<script>
  export default 
    ...
    methods: 
      openModal() 
        $('#confirmMod').modal('show')
      
    
  
</script>

但是，当我单击按钮打开模式时，控制台中会显示此错误：

Uncaught TypeError: $(...).modal is not a function

我在 html 和 webpack 中都添加了 jquery（我使用 vue-cli 来初始化 vue webpack 样板）。

任何帮助将不胜感激。

【参考方案1】：

找到解决方案。对于那些有此问题的人，请执行以下操作：

1) 在你的 webpack 配置文件中添加 jQuery 作为插件：

plugins: [
    ...
    // JQUERY plugin
    new webpack.ProvidePlugin(
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery"
    ),
    ...
]

2) 在 main.js（用于初始化 Vue 应用程序的文件）顶部添加语义 ui css/js：

import '../static/semantic/dist/semantic.css'
import '../static/semantic/dist/semantic.js'
import Vue from 'vue'
import App from './App'
...

3) 像在 jquery 中一样调用模态：$('.ui.modal').modal()

我希望这会有所帮助。