vue slot的使用(transform动画)
slot的说明就看vue的官方文档 但是有点模糊
理解:
解决什么问题:
正常情况下,<Child><span style=”color:red;”>hello world</span></Child>在组件标签Child中的span标签会被组件模板template内容替换掉,当想让组件标签Child中内容传递给组件时需要使用slot插槽;
通俗的讲:
是“占坑”,在组件模板中占好了位置,当使用该组件标签时候,组件标签里面的内容就会自动填坑(替换组件模板中<slot>位置),当插槽也就是坑<slot name=”mySlot”>有命名时,组件标签中使用属性slot=”mySlot”的元素就会替换该对应位置内容;
例如下面使用的例子
第一次使用slot 练习的一个小例子有问题大家指正
最先编码的时候没有做到上下收缩,只能是列表式的,如下图
代码:
<p class="title" style="text-align:left;font-weight:bold">特有属性</p>
<div class="param-gap">
<label class="left" for="">圆角 :</label>
<div class="right">
<input class="data-value" :keep-selected="true" placeholder="请输入(上,右,下,左)" @input="updateData"/>
</div>
</div>
但是后面实际需要的效果是可以进行上下伸缩的,如下图
所以这样就得每一个 p元素上写成一个组件,组件里面写点击弹出下面的div,这种方式肯定可以实现,但是这里我就使用了插槽,讲需要下拉的内容通过一个参数传过去,放到对应的slot坑中
首先:
用一个组件讲下方的元素进行包裹起来 collapse-item 组件里面的内容就可以当做一个插槽
<collapse-item title="点击我进行收缩的" :isShow="true">
<div class="param-gap">
<label class="left" for="" title="线型">线型:</label>
<div class="right">
<select class="data-value" name="" id="">
<option value="1">线型一</option>
<option value="2">线型二</option>
<option value="3">线型三</option>
<option value="4">线型四</option>
<option value="5">线型五</option>
</select>
</div>
</div>
</collapse-item>
CollapseItem.vue进行正常引入
import CollapseItem from './CollapseItem'
CollapseItem.vue里面的代码
<template>
<div style="width:100%" class="testbox" :class="{'collapsed': !isActive }">
<p class="click" @click="handleHeaderClick">
<span>{{title}}</span>
<i class="arrow icon iconfont icon_down"></i>
</p>
<div v-show="isActive">
<slot></slot>
</div>
</div>
</template>
slot里面的最终解析出来的html就是上面collapse-item标签里面包裹的元素
效果图(点击可以上下收缩,图标切换)
最后还使用了一个动画效果,讲小图标进行旋转
注意:
下面的css 如果直接切换class 为 collapsed 的时候,会导致点击的时候图标会有动画的效果,但是再点击一下会瞬间回到初始位置,不会出现动画
.collapsed .arrow {
transition: transform 0.18s ease 0s;
transform: rotate(-180deg) scale(1, 0.9);
}
解决办法,就是让初始的位置就进行旋转180度,把图片icon原本是down换成up,这样初始的时候看起来就和原来一样,然后再在点击的时候切换 collapsed 具体看代码
CollapseItem.vue
<template>
<div style="width:100%" class="testbox" :class="{'collapsed': !isActive }">
<p class="click" @click="handleHeaderClick">
<span>{{title}}</span>
<i class="arrow icon iconfont icon_up"></i>
</p>
<div v-show="isActive">
<slot></slot>
</div>
</div>
</template>
<script> export default {
name: 'CollapseItem',
props:{
title:String,//指定title为string类型的
isShow: {
type: Boolean,
default() {
return true
}
}
},
data(){
return {
isActive : true
}
},
methods: {
handleHeaderClick(){
this.isActive = !this.isActive
}
}
}
</script>
<style lang="scss" scoped > .click {
display: flex;
justify-content: space-between;
}
.arrow{
transition: transform 0.18s ease 0s;
transform: rotate(-180deg) scale(1, 0.9);
}
.collapsed .arrow { transform: rotate(0deg) scale(1, 0.9);
} </style>
hutest
<template>
<div class="one">
<div class="box">
<p class="box-head">这是标题</p>
<div class="box-content">
<collapse-item title="点击我进行收缩的" :isShow="true">
<div class="param-gap">
<label class="left" for="" title="线型">线型:</label>
<div class="right">
<select class="data-value" name="" id="">
<option value="1">线型一</option>
<option value="2">线型二</option>
<option value="3">线型三</option>
<option value="4">线型四</option>
<option value="5">线型五</option>
</select>
</div>
</div>
</collapse-item>
</div>
</div>
</div>
</template>
<script>
import CollapseItem from './CollapseItem'
export default {
name:'hutest',
components: { CollapseItem },
data() {
return { }
},
methods: { }
}
</script>
<style lang="scss" scoped >
.param-pannel input,.param-pannel select{
border:1px solid #ddd;
width:100%
}
.param-pannel input[type=color]{
padding:0
}
.one{
position: fixed;
width:100%;
height:100%;
display: flex;
justify-content: center;
align-items: center;
}
.box{
width:400px;
height: 400px;
border: 1px solid #ddd;
display: flex;
flex-direction: column;
.box-head{
flex: 0 0 auto;
background-color: pink;
}
.box-content{
flex:1 1 0px;
background-color: #eee;
display: flex;
}
}
</style>
注意图标使用的是element ui 所以需要引入,,如果不想引入,也可以直接写字体,或者键盘的尖括号,或者小于号旋转一下,然后将选装的样式进行调一下也可以达到类似的效果
尖括号举例
.collapsed .arrow {
transform: translateX(-25%) translateY(25%) rotate(0deg) scale(1, 0.9);
}
效果同上图
上面所使用的插槽是默认插槽,如果没有给插槽命名,那么默认就是拿组件中的第一个子元素进行填充
需求二:如果如下图,在特有属性中需要添加一个文本内容,这个时候为了方便就需要再添加了一个插槽
代码:
Hutest.vue
<template>
<div class="one">
<div class="box">
<p class="box-head">这是标题</p>
<div class="box-content">
<collapse-item title="样式" :isShow="true">
<div class="param-gap">
<label class="left" for="" title="线型">线型:</label>
<div class="right">
<select class="data-value" name="" id="">
<option value="1">线型一</option>
<option value="2">线型二</option>
<option value="3">线型三</option>
<option value="4">线型四</option>
<option value="5">线型五</option>
</select>
</div>
</div>
</collapse-item>
<collapse-item title="特有属性" :isShow="true"> <div class="param-gap" slot="before">
<label for="" class="left">文本内容 :</label>
<div class="right">
<input class="data-value" placeholder="我是特有属性自己独有的 "/>
</div>
</div> <div class="param-gap">
<label class="left" for="" title="线型">线型:</label>
<div class="right">
<select class="data-value" name="" id="">
<option value="1">线型一</option>
<option value="2">线型二</option>
<option value="3">线型三</option>
<option value="4">线型四</option>
<option value="5">线型五</option>
</select>
</div>
</div>
</collapse-item>
</div>
</div>
</div>
</template>
<script>
import CollapseItem from './CollapseItem'
export default {
name:'hutest',
components: { CollapseItem },
data() {
return { }
},
methods: { }
}
</script>
<style lang="scss" scoped >
.param-pannel input,.param-pannel select{
border:1px solid #ddd;
width:100%
}
.param-pannel input[type=color]{
padding:0
}
.one{
position: fixed;
width:100%;
height:100%;
display: flex;
justify-content: center;
align-items: center;
}
.box{
width:400px;
height: 400px;
border: 1px solid #ddd;
display: flex;
flex-direction: column;
.box-head{
flex: 0 0 auto;
background-color: pink;
}
.box-content{
flex:1 1 0px;
background-color: #eee;
display: flex;
flex-direction: column
}
}
</style>
CollapseItem.vue
<template>
<div style="width:100%" class="testbox" :class="{'collapsed': !isActive }">
<p class="click" @click="handleHeaderClick">
<span >{{title}}</span>
<i class="arrow icon iconfont icon_up"></i>
</p>
<div v-show="isActive">
<slot name="before"></slot>
<slot></slot>
</div>
</div>
</template>
<script> export default {
name: 'CollapseItem',
props:{
title:String,//指定title为string类型的
isShow: {
type: Boolean,
default() {
return true
}
}
},
data(){
return {
isActive : true
}
},
methods: {
handleHeaderClick(){
this.isActive = !this.isActive
}
}
}
</script>
<style lang="scss" scoped > .click {
display: flex;
justify-content: space-between;
}
.arrow{
transition: transform 0.18s ease 0s;
transform: rotate(-180deg) scale(1, 0.9);
}
.collapsed .arrow { transform: rotate(0deg) scale(1, 0.9);
} </style>
vue slot的使用(transform动画)的更多相关文章
- Vue使用过渡类名实现动画和自定义前缀
Vue使用过渡类名实现动画和自定义前缀 1.效果演示 2.相关代码 <!DOCTYPE html> <html lang="en"> <head> ...
- 黑马vue---46、vue使用过渡类名实现动画
黑马vue---46.vue使用过渡类名实现动画 一.总结 一句话总结: vue动画的过渡类名的时间点中没有设置样式的话就是默认的样式 使用 transition 元素,把 需要被动画控制的元素,包裹 ...
- vue移动端转场动画
vue移动端转场动画 1.介绍:使用vue移动端做项目的时候,为了用户的体验良好,我们需要页面有一种进入和转出的效果 // 在App.vue根组件中 <template> <div ...
- Vue.js 相关知识(动画)
1. 简介 Vue 在插入.更新或移除 DOM 时,提供多种不同方式的过渡效果,并提供 transition 组件来实现动画效果(用 transition 组件将需执行过渡效果的元素包裹) 语法:&l ...
- transform动画效果
transform动画效果 transform :移动,旋转.倾斜.缩放. transform:translate(0,300px); x代表的是水平的偏移距离,y代表垂直的. t ...
- vue自学入门-4(vue slot)
vue自学入门-1(Windows下搭建vue环境) vue自学入门-2(vue创建项目) vue自学入门-3(vue第一个例子) vue自学入门-4(vue slot) vue自学入门-5(vuex ...
- vue slot nested bug
vue slot nested bug slot name bug Error <slot name="global-system-guide-slot"></s ...
- Vue slot 插槽用法:自定义列表组件
Vue 框架的插槽(slot)功能相对于常用的 v-for, v-if 等指令使用频率少得多,但在实现可复用的自定义组件时十分有用.例如,如果经常使用前端组件库的话,就会经常看到类似的用法: < ...
- Vue一个案例引发「动画」的使用总结
项目开发中动画有着很重要的作用,而且也是用到的地方非常多,例如:鼠标的进入离开,弹窗效果,组件的显示隐藏,列表的切换等等,可以说我们网页上的动画无处不在,也有人说了,这些东西也可以不使用动画. 对,你 ...
随机推荐
- python 适合的才是最好的
群里老有人问最新的破解码最新的包,最新的就是最好的吗? 今天说一下这些新手的坑: numpy 最好使用的版本是1.13.3 而非新的1.17.0 pandas最好使用的版本是0.18.0 而非新的0 ...
- MySQL数据库备份之mysqldump
创建用户备份的用户 MariaDB [mysql]> create user 'backdata'@'localhost' identified by 'test@123456';Query O ...
- Django使用request和response对象
当请求一张页面时,Django把请求的metadata数据包装成一个HttpRequest对象,然后Django加载合适的view方法,把这个HttpRequest 对象作为第一个参数传给view方法 ...
- Python命令行参数解析模块getopt使用实例
Python命令行参数解析模块getopt使用实例 这篇文章主要介绍了Python命令行参数解析模块getopt使用实例,本文讲解了使用语法格式.短选项参数实例.长选项参数实例等内容,需要的朋友可以参 ...
- MySQL学习笔记——MySQL5.7的启动过程(一)
MySQL的启动函数在 sql/main.cc 文件中. main.cc: extern int mysqld_main(int argc, char **argv); int main(int ar ...
- HTML滚动时位置固定
现在显示器一般都是宽屏,网页两端常常会留白. 两边可能会放一些推荐.标签或是导航什么的辅助模块. 现在有的网站页面内容过长时,用户将滚动条向下拉时,拉到一定程度,左右两侧的辅助模块就会固定在指定位置, ...
- 《CNCF × Alibaba云原生技术公开课》知识点自测(二):容器基本概念
(单选)1.已运行 docker run -d -t —name demo ubuntu top 和 docker run --name demo-x --pid container:demo ubu ...
- win10 1803 频繁死机,卡死不动
摘自微软官网的解决办法,我的目测好像是可以了. 小娜搜索框输入“PowerShell”选择在管理员命令提示符下键入以下命令: Dism /Online /Cleanup-Image /ScanHeal ...
- idea用maven创建web项目(详细)
引用:http://blog.csdn.net/u010361662/article/details/50605099 欢迎添加微信
- windows服务器入门 安装配置IIS和ASP
本人以windows2012R2为例 其他版本都大同小异 可以按照这个来 1) 点击Windows云服务器左下角[开始(Start)],选择[服务器管理器(Server Manager)],打 ...