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一个案例引发「动画」的使用总结
项目开发中动画有着很重要的作用,而且也是用到的地方非常多,例如:鼠标的进入离开,弹窗效果,组件的显示隐藏,列表的切换等等,可以说我们网页上的动画无处不在,也有人说了,这些东西也可以不使用动画. 对,你 ...
随机推荐
- ubuntu 12.04 以固定 IP 地址连接网络并配置DNS
sudo vim /etc/network/interfaces auto eth0 iface eth0 inet static address 192.168.2.155 netmask 255. ...
- 阶段5 3.微服务项目【学成在线】_day18 用户授权_15-细粒度授权-我的课程细粒度授权-实现
先定义接口 实现接口 service 需要通过conpanyId去查询课程的列表 定义dao 要查课程的图片 名称 等相关信息.所以使用Mybatis来实现 定义Mapper 看这个dao里面方法在哪 ...
- 123457123456#1#-----com.threeapp.qianShuiTingYX01-----潜水艇跑酷游戏01
com.threeapp.qianShuiTingYX01-----潜水艇跑酷游戏01
- Apache配置优化之开启KeepAlive
在HTTP 1.0中和Apache服务器的一次连接只能发出一次HTTP请求,而KeepAlive参数支持HTTP 1.1版本的一次连接,多次传输功能,这样就可以在一次连接中发出多个HTTP请求.从而避 ...
- Linux使用shell解压tar.Z格式文件
建设当前目录下有一个名为test.tar.Z的文件. 使用如下指令可以将其解压,并将解压后的所有文件放置在当前目录下: zcat test.tar.Z | tar -xvf - 如果想要将解压缩的文件 ...
- Python扫描器-HTTP协议
1.HTTP协议 1.1.HTTP协议简介 #1.HTTP协议,全称Hyper Text Transfer Protocol(超文本传输协议) HTTP协议是用于从(WWW:World Wide We ...
- js中遍历对象(5种)和遍历数组(6种)的方法总结(转载)
一.遍历对象方法 1.for...in遍历输出的是对象自身的属性以及原型链上可枚举的属性(不含Symbol属性),原型链上的属性最后输出说明先遍历的是自身的可枚举属性,后遍历原型链上的 eg: var ...
- SQL 创建表
SQL 创建表是通过SQL CREATE TABLE 语句来实现,该语句是DDL SQL语句.CREATE TABLE语句用于创建用于存储数据的表.在创建表时,可以为列定义主键.惟一键和外键等完整性约 ...
- VS2010 如何在调试的时候输入参数
VS2010 如何在调试的时候输入参数 声明:引用请注明出处http://blog.csdn.net/lg1259156776/ 很明显,好多算法程序实现的时候提供的例程都是需要在命令行中输入参数,比 ...
- mysql--简单操作
一.数据库的基本操作 查看当前所有存在的数据库 show databases; //mysql 中不区分大小写.(databank 是之前创建的) 创建数据库 create database data ...