vue递归组件实战之简单树形控件实例代码资源-CSDN下载

125 浏览量 2020-12-29 10:28:56 上传评论收藏 62KB PDF 举报

资源推荐

资源详情

资源评论

vue递归组件实战之简单树形控件实例代码递归组件实战之简单树形控件实例代码

1、递归组件-简单树形控件预览及问题

在编写树形组件时遇到的问题：

组件如何才能递归调用？

递归组件点击事件如何传递？

2、树形控件基本结构及样式

<template>

<ul class="vue-tree">

<li class="tree-item">

<div class="tree-content">

<div class="expand-arrow"></div>

<div class="tree-label">小学</div>

</div>

<ul class="sub-tree">

<li class="tree-item expand">

<div class="tree-content">

<div class="expand-arrow"></div>

<div class="tree-label">语文</div>

</div>

</li>

<li class="tree-item">

<div class="tree-content">

<div class="expand-arrow"></div>

<div class="tree-label">数学</div>

</div>

</li>

</ul>

</li>

</ul>

</template>

<style lang="stylus">

.vue-tree{

list-style: none;

padding: 0;

margin: 0;

.tree-item{

cursor: pointer;

transition: background-color .2s;

.tree-content{

position: relative;

padding-left: 28px;

&:hover{

background-color: #f0f7ff;

剩余6页未读，继续阅读

内容反馈

weixin_38747917

粉丝: 8

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip