颤抖吧·Alex 2018-10-18 10:04 采纳率: 25%
浏览 3055

iview的i-menu双向绑定active-name切换失效

iview的i-menu双向绑定v-model,然后点击其中的一个menu，
图片说明
触发监听事件，
图片说明
但是，当

改变的值等于改变之前的值的时候，menu会跳到点击的那个menu

图片说明
但是点击“使用限制”的时候，会跳到“领取设置”，

需求是：在点击menu的时候，要先进行验证，验证不通过，不能进入到下一个menu

  • 写回答

1条回答 默认 最新

  • 你知我知皆知 2024-08-07 07:36
    关注

    以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

    首先，你需要确保你的Vue应用已经正确安装和配置。如果出现任何错误，请检查你的项目是否包含以下文件：

    1. app.vue
    2. main.js
    3. index.html

    接下来，我将提供一个完整的示例代码来解决您的问题。在这个例子中，我们将使用v-on指令来监听菜单项的选择，并在选择时执行一些逻辑。

    app.vue

    <template>
  <div id="app">
    <i-menu :active-name="activeName" @on-select="handleSelect"></i-menu>

    <transition name="fade">
      <div v-if="isModalVisible" id="modal">
        <p>您选择了 {{ activeName }}。</p>
        <!-- 在此添加更多逻辑 -->
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: '',
      isModalVisible: false,
    };
  },
  methods: {
    handleSelect(item) {
      this.activeName = item.name;
      // 检查是否需要显示模态框
      if (item.name === '使用限制') {
        this.isModalVisible = true;
      }
    },
  },
};
</script>

    main.js

    import Vue from 'vue';
import App from './App.vue';

new Vue({
  render: h => h(App),
}).$mount('#app');

    index.html

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue Menu Example</title>
  <link rel="stylesheet" href="https://unpkg.com/iview/dist/iview.css">
  <style>
    #app {
      width: 100%;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #modal {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: white;
      border-radius: 4px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      padding: 20px;
      z-index: 999;
    }
  </style>
</head>
<body>
  <app></app>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/iview/dist/iview.min.js"></script>
</body>
</html>

    注意事项

    1. 确保你已经在项目根目录下安装并配置了Vue、Element UI（或IVIEW）。
    2. 在实际开发中，你可以根据需要添加更多的业务逻辑和组件。

    这只是一个基础的解决方案，可能需要根据具体的业务需求进行调整。希望对您有所帮助！

    评论

报告相同问题？