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

2024-09-28 14:01:39

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

<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同个按钮控制展开和折叠同个事件操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

vuejs实现折叠面板展开收缩动画效果

vuejs通过css3实现元素固定高度到auto高度的动画和auto高度到固定高度的动画. 循环列表,html: <template> <div class="newslist"> <ul> <li v-for="(item,index) in newslist" :key="index"> <p class="p" ref="liCon">{{i
vue控制多行文字展开收起的实现示例

这里讲一下,如何使用vue控制多行文字展开收起(也叫控制文字展开隐藏). 效果: 这里设置了控制三行,如果超过三行会展示,"显示更多" 超出文字显示省略号.点击"显示更多"会展开所有文案,按钮变成"收起" (未超出三行的时候) (展开) (收起) 代码实现: <template> <div> <p class="m-content overflow-line" id="J_descrip
vue 点击展开显示更多(点击收起部分隐藏)

功能如下: 这里就需要一开始只显示6个数据,点击展开才显示全部 HTML里调用showdetailList: <div> <p v-for="(item, index) in showdetailList"> <span>{{item.title}}</span> <span>{{item.name}}</span> </p> </div> <div v-if="detail
vue-列表下详情的展开与折叠案例

如下所示: 功能描述 1.默认折叠,点击时展示全部数据 2.点击A项,A展开,之后有两种情况:①再次点击A,A折叠:②点击其他项,如B,这时B展开,A折叠解决方式 1.给展开折叠图标添加一个样式,显示成动画效果 <div class="arrow" :class="{'open':showDetail === index}"></div> .arrow{ position absolute width: 0.6rem; height: 0.
vue同个按钮控制展开和折叠同个事件操作

我就废话不多说了,大家还是直接看代码吧~ <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()//避
Vue element-ui父组件控制子组件的表单校验操作

方法一: 父组件代码: <template> <div> <child-form ref="childRules" :addForm="addForm" > </child-form> <el-button @click="saveForm()" size='medium'>保存</el-button> </div> </template> <
Vue中实现权限控制的方法示例

一.前言在广告机项目中,角色的权限管理是卡了挺久的一个难点.首先我们确定的权限控制分为两大部分,其中根据粒的大小分的更细: 1.接口访问的权限控制 2.页面的权限控制菜单中的页面是否能被访问页面中的按钮(增.删.改)的权限控制是否显示下面我们就看一看是如何实现这些个权限控制的. 二.接口访问的权限控制接口权限就是对用户的校验.正常来说,在用户登录时服务器需要给前台返回一个Token,然后在以后前台每次调用接口时都需要带上这个Token,然后服务端获取到这个Token后进行比对,如果通过
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件

需求分析: 如图,有很多高度不固定的模块(图中只显示两个,本人项目有十三个),点击模块标题展开相应的模块,再次点击此模块匿藏,如何实现此需求并实现复用? 点击红框前: 点击后: 难点分析: 模块高度不固定.比如,本人一开始想到的方法如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title
Vue 指令实现按钮级别权限管理功能

在项目中经常有需求要根据用户的权限对界面上的元素进行控制,这里介绍了一直简单的实现,仅供参考. 当前用户的权限列表储存在 store 里,也可以是其他地方. 指令 // src/directives/permission.js import Vue from 'vue'; import store from '@/store'; import {get} from '@/utils'; // 是否有权限 const hasPermission = userPermission => { let
vue基于Element按钮权限实现方案

背景需求:ERP系统需增加 "按钮权限控制" 功能,对权限的控制粒度要普及到按钮层级. 预期按钮权限控制的交互方式无非两种:"不可见" 和 "可见不可点". 不可见不可见的交互方式相对简单,我们可使用 v-if 控制其是否显示.使用 v-show 也行,但不够保险,毕竟 v-show 只是把样式改成 display: none,在真实的 DOM 渲染还是存在的,所以更推荐 v-if 来控制不可见. 可见不可点 "看是能看了,但你不行
vue实现前端按钮组件权限管理

目录方案1:数组+自定义指令关于路由权限方案2: 二进制表达权限: 权限判断判断和使用小结方案1:数组+自定义指令把权限放到数组中,通过vue的自定义指令来判断是否拥有该权限,有则显示,反之则不显示我们可以把这个按钮需要的权限放到组件上 <el-button v-hasPermi="['home:advertising:update']" >新建</el-button> 自定义指令: 逻辑就是我们在登陆后会获取该用户的权限,并存储到localS
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果

复制代码代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动</title> <meta name="description" cont
JS实现按钮控制计时开始和停止功能

下面给大家分享一段实例代码关于JS实现按钮控制计时开始和停止功能,具体代码如下所示: <span style="font-size:18px;"><body> 小闹钟: <span id="nz"></span> <input type="button" value="开始计时" onclick="nzbg(this)"> <input ty

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

相关推荐

随机推荐