Vue.js+Element-UI实现点击按钮控制左侧菜单折叠与展开

JavaScript019

Vue.js+Element-UI实现点击按钮控制左侧菜单折叠与展开,第1张

在element-ui中采用NavMenu导航菜单作为系统菜单的实现。

官方文档中NavMenu导航菜单有一个Menu Attributes属性collapse，是一个 bollean 类型，用于控制是否水平折叠菜单。

我们可以通过设置collapse属性的值为 true 或 false 来控制菜单的折叠与展开。

解决方案

1.实现一个按钮，

2.在data中定义一个数据collapse

3.实现方法toggleCollapse

4.在el-menu中动态绑定属性值collapse

问题：在左侧菜单的展开与折叠中，文本和图标折叠了，但是菜单的长度并没有折叠，发现原因是菜单的长度给了一个固定的值，而实际上我们需要动态给定长度。如果菜单是展开的，长度是等于文本的长度+图标的长度。如果菜单是折叠的，长度是等于图标的长度。我们可以根据isCollapse的值进行判断，通过它的值为true或者是false，来给定不同的长度：

第一步，在HBuilder工具中已创建好的Web项目，指定目录下新建静态页面buttonClick.html，如下图所示：

如何使用Vue.js中的按钮点击事件并获取按钮属性

第二步，在title标签下引入vue.js核心JavaScript文件，注意压缩版本和开发版本，如下图所示：

如何使用Vue.js中的按钮点击事件并获取按钮属性

第三步，在<body></body>标签内，插入一个div和四个button，使用v-on绑定事件，如下图所示：

如何使用Vue.js中的按钮点击事件并获取按钮属性

第四步，在<div></div>标签下方，插入<script></script>标签，并在标签内编写事件函数，如下图所示：

如何使用Vue.js中的按钮点击事件并获取按钮属性

第五步，保存代码并在浏览器中查看结果，点击按钮，查看弹出的结果，如下图所示：

如何使用Vue.js中的按钮点击事件并获取按钮属性

第六步，弹出的结果为undefined，修改代码并在事件中传参数，然后再次查看结果，可以看到按钮的相关属性和方法（浏览器控制台），如下图所示：

如何使用Vue.js中的按钮点击事件并获取按钮属性

建议使用ref，给button添加注册ref引用，然后在表单提交的时候，获取button按钮，使其disable置灰。

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件。

<div id="app">

  <button ref="mybutton" type="primary" @click="save">保存</button>

</div> <script>

new Vue({

  el: "#app",

  data: {

  },

  methods: {

   save() {

     this.$refs.mybutton.disabled = true

    }

  }

})

</script>

<style>

:disabled{   

    border: 1px solid #DDD   

    background-color: #F5F5F5   

    color:#ACA899   

}  

</style>