前言: 实现功能:带切换动画效果的手风琴 每周分享一个vue3+typeScript的小组件,记录下实现过程,说不定对你有帮助。
预览地址:http://euzhi.com/demo/#/
源码地址:https://github.com/blockxia/vue3-typescript
html
<div class="accordion">
<div v-for="(vo,inx) in items" :key="inx">
<!-- 手风琴标题 -->
<div class="item" @click="changeItem(vo,inx)">
{{vo.title}}
</div>
<!-- 手风琴内容 -->
<div class="content" v-show="active==inx&&vo.show">
{{vo.content}}
<!-- 可以自定义内容结构 -->
<div v-if="inx===0">
我是自定义内容1
</div>
<div v-if="inx===1">
我是自定义内容2
</div>
<div v-if="inx===2">
我是自定义内容3
</div>
</div>
</div>
</div>
ts
<script lang="ts">
import {
defineComponent,
reactive,
toRefs
} from 'vue'
export default defineComponent({
setup() {
//定义接口类型
interface ItemObj {
title: string;
content: string;
show: boolean;
}
const data = reactive({
items: [{
title: "JavaScript",
content: "这是内容1",
show: true
},
{
title: "Java",
content: "这是内容2",
show: true
},
{
title: "C++",
content: "这是内容3",
show: true
}
],
active: 0,
changeItem: (vo: ItemObj, inx: number) => {
//如果重复点击一个栏目item 可以关闭和打开当前栏目手风琴内容
if (inx === data.active) {
vo.show = !vo.show
} else {
vo.show = true
}
data.active = inx
}
})
return {
...toRefs(data)
}
}
})
</script>
css
.accordion {
width: 800px;
padding: 50px 20px;
background: #ecf0f3;
height: 600px;
.item {
text-align: center;
line-height: 80px;
margin: 0 auto;
width: 600px;
height: 80px;
border-radius: 12px;
box-shadow: inset 12px 12px 20px #d1d9e6, inset -12px -12px 20px #fff;
cursor: pointer;
margin-bottom: 5px;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.content {
opacity: 0;
min-height: 80px;
width: 600px;
margin: 0 auto;
animation-name: fadeIn;
animation-duration: 1s;
animation-fill-mode: both;
}
}
vue3持续更新中...转载~
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!