Vuejs webpack 环境中的语义 UI 侧边栏

Posted 2023-02-22

【中文标题】Vuejs webpack 环境中的语义 UI 侧边栏

【英文标题】：Semantic UI sidebar in Vuejs webpack environment

【发布时间】：2018-04-23 16:53:42

【问题描述】：

我正在使用 VueJS webpack 模板。

我在语义 UI 中的侧边栏上苦苦挣扎。有人可以指出我的代码有什么问题。它会切换侧边栏，但是当我再次单击该图标时，它不会隐藏侧边栏，而是会看到一个奇怪的闪烁。

<template>

<!-- Sidebar -->
<div class="ui right demo vertical sidebar labeled icon menu" id="mobile-sidebar">
  <a class="item">
    <i class="sticky note icon"></i>
    Bulletin
  </a>
  <a class="item">
    <i class="newspaper icon"></i>
    News
  </a>
  <a class="item">
    <i class="mail icon"></i>
    Contact us
  </a>
</div>

<div class="ui fixed inverted main menu mobile-menu">
  <div class="ui container">
    <div class="item">
      Menu
    </div>
    <div class="right menu">

      <a class="launch icon item" id="mobile-menu-trigger" v-on:click="toggle">
        <i class="content icon"></i>
      </a>
    </div>
  </div>
</div>
<div class="pusher">
  <h1>
    Hello Vue
  </h1>
</div>
</template>


<script>
     export default 
        name: 'home',
        methods: 
            toggle: function () 
               $('#mobile-sidebar').sidebar('toggle')
            
        
     

</script>

【问题讨论】：

您的代码中没有#mobile-sidebar 元素。

你能发布一个更完整的代码示例吗？此粘贴似乎只是 vue.js 组件，但不包括侧边栏的标记。

添加了代码而不是 pastebin。

【参考方案1】：

经过一段时间的努力，我终于解决了这个问题：

<script>
    export default 
    name: 'nav-bar',
    data: function () 
        return 
            isToggled: false,
            sideBar: null
        
    ,
    methods: 
         toggle: function () 
             if (this.isToggled) 
                 this.sideBar.sidebar('hide')
              else 
                 this.sideBar.sidebar('show')
             
         
    ,
    mounted: function () 
        this.sideBar = $('#mobile-sidebar')
        let self = this
        this.sideBar.sidebar(
            transition: 'push',
            onHidden: function () 
                self.isToggled = false
            ,
            onShow: function () 
                self.isToggled = true
            
        )
   
   
 </script>