vue同个按钮控制展开和折叠同个事件操作


Posted in Javascript onJuly 29, 2020

我就废话不多说了,大家还是直接看代码吧~

<el-button :icon="!moreshow?'el-icon-arrow-down':'el-icon-arrow-up'" @click="getmoreshow">{{!moreshow?更多:隐藏}}</el-button>

data() {
  return {
  moreshow:false,
  count:1,
  }
}
mounted() {
  this.getmoreshow()//避免点击两次才生效
},
methods: {
  getmoreshow(){
  if(this.count%2==0){
   this.moreshow=true
  }else{
   this.moreshow=false
  }
  this.count++
  },
}

补充知识:vue 可折叠面板的工作区组件

这个组件中使用了elementui的两个图标

组件Js:

Vue.component('work-container', {
  props: ['height'],
  data: function () {
    return {
      isCollapse: false
    }
  },
  computed: {
    topbarcssobj: function () {
      var obj = { padding: '3px' };
      if (this.isCollapse) {
        obj.display = 'none';
      }
      else {
        obj.display = 'block';
        if (this.height) {
          obj.height = this.height + 'px';
        } else {
          obj.height = '40px';
        }
      }
      return obj;
    },
    btniconcssobj: function () {
      return this.isCollapse ? 'el-icon-caret-bottom' : 'el-icon-caret-top';
    },
    strview: function () {
      return this.isCollapse ? '显示' : '隐藏';
    }
  },
  methods: {
    togglebar: function () {
      this.isCollapse = !this.isCollapse;
    }
  },
  template: '<el-container>\
          <el-header v-bind:style="topbarcssobj">\
          <slot name="tbar"></slot>\
          </el-header>\
          <el-main>\
          <div style="margin:3px;">\
            <div style="float:left;margin-right:10px;cursor:pointer;color: #d3dce6;display:none;" v-on:click="togglebar">\
              <i v-bind:class="btniconcssobj">{{strview}}查询条件</i>\
            </div>\
            <div>\
            <slot name="btn"></slot>\
            </div>\
          </div>\
          <div>\
            <slot name="work"></slot>\
          </div>\
          </el-main>\
         </el-container>'
});

调用:

<script src="~/Scripts/vue/workcontainer.js"></script>

 <work-container v-bind:height="80">
    <template v-slot:tbar>
      <spec-combo v-on:selectspec="setSpec"></spec-combo>
      <ban-input v-on:selectban="setBan"></ban-input>
      <grade-input v-on:selectban="setGrade"></grade-input>

    </template>
    <template v-slot:work>
      {{spec}}
      {{ban}}
      {{grade}}
    </template>
  </work-container>

以上这篇vue同个按钮控制展开和折叠同个事件操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 页面自动加载函数(兼容多浏览器)
May 18 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
Nov 20 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
Sep 18 Javascript
三分钟带你玩转jQuery.noConflict()
Feb 15 Javascript
一款简单的jQuery图片标注效果附源码下载
Mar 22 Javascript
JavaScript中数组的22种方法必学(推荐)
Jul 20 Javascript
jquery实现拖动效果
Aug 10 Javascript
js注入 黑客之路必备!
Sep 14 Javascript
Bootstrap和Java分页实例第二篇
Dec 23 Javascript
jquery加载单文件vue组件的方法
Jun 20 jQuery
react 国际化的实现代码示例
Sep 14 Javascript
js的Object.assign用法示例分析
Mar 05 Javascript
JavaScript编写开发动态时钟
Jul 29 #Javascript
js编写简易的计算器
Jul 29 #Javascript
从0到1学习JavaScript编写贪吃蛇游戏
Jul 28 #Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
Jul 28 #Javascript
Node.js 深度调试方法解析
Jul 28 #Javascript
vue-列表下详情的展开与折叠案例
Jul 28 #Javascript
js 数组当前行添加数据方法详解
Jul 28 #Javascript
You might like
php4的session功能评述(三)
2006/10/09 PHP
也谈截取首页新闻 - 范例
2006/10/09 PHP
LotusPhp笔记之:Logger组件的使用方法
2013/05/06 PHP
Laravel+jQuery实现AJAX分页效果
2016/09/14 PHP
PHP 实现文件压缩解压操作的方法
2019/06/14 PHP
Jquery 插件学习实例1 插件制作说明与tableUI优化
2010/04/02 Javascript
JS获取html对象的几种方式介绍
2013/12/05 Javascript
JavaScript中奇葩的假值示例应用
2014/03/11 Javascript
显示今天的日期js代码(阳历和农历)
2014/09/30 Javascript
javascript实现简单的贪吃蛇游戏
2015/03/31 Javascript
跟我学习javascript的Date对象
2015/11/19 Javascript
详解JavaScript中Hash Map映射结构的实现
2016/05/21 Javascript
angularjs下拉框空白的解决办法
2017/06/20 Javascript
基于vue中对鼠标划过事件的处理方式详解
2018/08/22 Javascript
原生js添加一个或多个类名的方法分析
2019/07/30 Javascript
JavaScript和TypeScript中的void的具体使用
2019/09/12 Javascript
微信小程序停止其他视频播放当前视频的实例代码
2019/12/25 Javascript
js实现盒子移动动画效果
2020/08/09 Javascript
Python3基础之输入和输出实例分析
2014/08/18 Python
使用Python下的XSLT API进行web开发的简单教程
2015/04/15 Python
Python实现向服务器请求压缩数据及解压缩数据的方法示例
2017/06/09 Python
Python探索之实现一个简单的HTTP服务器
2017/10/28 Python
Python机器学习算法库scikit-learn学习之决策树实现方法详解
2019/07/04 Python
python实现获取单向链表倒数第k个结点的值示例
2019/10/24 Python
python matplotlib imshow热图坐标替换/映射实例
2020/03/14 Python
jupyter修改文件名方式(TensorFlow)
2020/04/21 Python
Python如何生成xml文件
2020/06/04 Python
python-图片流传输的思路及示例(url转换二维码)
2020/12/21 Python
最受欢迎的自我评价
2013/12/22 职场文书
测控技术与通信工程毕业生自荐信范文
2013/12/28 职场文书
白血病捐款倡议书
2014/05/14 职场文书
人事专员岗位职责
2015/02/03 职场文书
后勤个人工作总结
2015/02/28 职场文书
外贸采购员岗位职责
2015/04/03 职场文书
2015年政治教研组工作总结
2015/07/22 职场文书
Python中的min及返回最小值索引的操作
2021/05/10 Python