可复用的显示隐藏按钮组件

先上效果图

子组件代码1

<template  ><transition name="slide-fade"><div v-show="show"> //是否显示隐藏<slot></slot>  //使用插槽</div></transition>
</template>
<script>
export default {data() {return {show: false};},methods: {showss() {let than = this;than.show = !than.show;}}
};
</script>
<style scoped>
.slide-fade-enter-active {transition: all 1s ease;
}
.slide-fade-leave-active {transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {transform: translateX(10px);opacity: 0;
}
</style>

子组件代码2

<template  ><div><f-button v-if="show" icon="unfold" @click="handleClick(false)" :icon-size="14">更多</f-button><f-button v-else icon="packup" @click="handleClick(true)" :icon-size="14">收起</f-button></div>
</template>
<script>
export default {data() {return {show: true};},methods: {handleClick(state) {this.show = state;this.$emit("click")}}
};
</script>

父组件

//html代码<t-button @click="control(selectRow)">1</t-button><t-button  @click="track(selectRow)">2</t-button><t-button  @click="customcode(selectRow)">3</t-button><t-button @click="remark(selectRow)">4</t-button><t-button  @click="handleOne(selectRow)">5</t-button><button-show ref="btshow"><t-button  @click="handleTwo(selectRow)">6</t-button><t-button  @click="handleThree(selectRow)">7</t-button><t-button  @click="handleFour(selectRow)">8</t-button><t-button @click="chongdian(selectRow)" type="warning" class="one">9</t-button><t-button @click="chongdian(selectRow)" type="warning class="one oneBtn">10</t-button><t-button  @click="fangdian(selectRow)" type="warning" class="two" >11</t-button><t-button @click="fangdian(selectRow)" type="warning" class="two oneBtn">12</t-button><t-button @click="Locate(selectRow)" type="warning" >13</t-button> </button-show><div style="text-align:center"><gen-duo @click="genduo()"></gen-duo></div>//js代码<script>import ButtonShow from "@/components/ButtonShow/index";import GenDuo from "@/components/ButtonShow/Genduo";export default {components: {ButtonShow,GenDuo},data() {return {}},methods: {genduo(){this.$refs.btshow.showss()},}
}</script>

可复用的显示隐藏按钮组件相关推荐

如何将echarts图标的显示/隐藏按钮改成圆形
将显示/隐藏按钮从默认的方块改成原型效果图如下: legend: {itemHeight: 24,itemWidth: 24,data: [{name: 'aaa',icon: 'circle',} ...
WIN7 X64 下 VS2008升级补丁 (显示隐藏按钮)
原文地址:http://blog.sina.com.cn/s/blog_57b5da120100gk7l.html 更新列表: 2010年3月26日:增加对日文版的支持. 2010年3月3日:更新代码 ...
微信小程序订单列表加一个“更多”来显示/隐藏按钮
1.效果图,点击订单列表的"更多",会显示出隐藏的按钮,再次点击"更多"就隐藏 2.wxml 这里是用订单id来判断的 <view class='orde ...
安卓浏览器中video组件会显示播放按钮
安卓浏览器中video组件会显示大的播放按钮方法一: *::-webkit-media-controls-start-playback-button{display: none;-webkit-ap ...
Qt实现侧边栏显示隐藏以及自定义提示框
1.目的最近在工作中需要实现一个Qt的侧边栏,通过按钮控制显示和隐藏,此外还要求实现自定义气泡提示框,最终参考网上知识进行了实现,效果如下: 1.窗口控件大小可以随窗体自由缩放: 2.侧边栏按钮 ...
vue点击input框出现弹窗_vue组件实现弹出框点击显示隐藏效果
本文实例为大家分享了vue实现弹出框点击显示隐藏的具体代码,供大家参考,具体内容如下效果如下图由于我的更改密码弹出框是一个组件引用的,所以在一开始是隐藏的,这就需要在当前的页面上对弹出框组件设置v ...
钉钉导航栏分享按钮的显示/隐藏
钉钉导航栏分享按钮的显示/隐藏隐藏进行钉钉开发后,打开应用时右上角会有三个小点点"-",打开之后会显示一些分享功能或者查看链接的功能,这样对于应用的安全是存在隐患的,那么如何来 ...
react 显示隐藏组件的方法_10种React组件之间通信的方法
来源 | https://segmentfault.com/a/1190000023585646 这两天被临时抽调到别的项目组去做一个小项目的迭代.这个项目前端是用React,只是个小型项目所以并没有 ...
vue 组件弹出框点击显示隐藏
本案实现的效果如下图由于我的更改密码弹出框是一个组件引用的,所以在一开始是隐藏的,这就需要在当前的页面上对弹出框组件设置v-show,但是在弹出框显示出来的时候,操作执行完后当前页面的更改按钮已经被 ...
【Flutter】Flutter 拍照示例 ( 浮动按钮及点击事件 | 底部显示按钮组件 | 手势检测器组件 | 拍照并获取当前拍摄照片 | 从相册中选择图片 )
文章目录一.浮动按钮及点击事件二.底部显示按钮组件三.手势检测器组件四.image_picker 完整代码示例五.相关资源一.浮动按钮及点击事件一般使用 Scaffold 组件作为界面的 ...

可复用的显示隐藏按钮组件

子组件代码1

子组件代码2

父组件

可复用的显示隐藏按钮组件相关推荐

最新文章

热门文章