日常开发中积累了不少可能对一些开发有帮助的简单易用的组件, 好记性不如烂笔头, 想对过去的一些零零乱乱的东西做一些总结, 反省自己的同时也便于思考一些更优的方法, 提升下开发思维.
代码传送门 (感觉有作用的的同学帮忙点下)
效果截图
这是一个简单的树形列表, 可展开收起.
Tree.gif
组件结构
由多层列表嵌套组成.
- <ul>
- <li>
- <ul>
- <li>...</li>
- </ul>
- </li>
- </ul>
核心代码
Tree
最顶层结构
- <template>
- <ul>
- <item :model="model" />
- </ul>
- </template>
- <script>
- import Item from './Item'
- export default {
- name: 'j-tree',
- components: { Item },
- props: {
- model: Object
- }
- }
- </script>
- Item
递归调用自己的核心
- <template>
- <li>
- <div @click="toggle">
- {{model.title}}
- <span>[{{isOpen?"-":"+"}}]</span>
- </div>
- <ul v-show="isOpen" class="item">
- // 递归组件自己本身, 要记得加上 name, 不然找不到自己.
- <item v-for="(item, index) in model.children" :key="index" :model="item" />
- </ul>
- </li>
- </template>
- <script>
- export default {
- name: 'item',
- components: {},
- props: {
- model: Object
- },
- data () {
- return {
- isOpen: false
- }
- },
- methods: {
- toggle () {
- this.isOpen = !this.isOpen
- }
- }
- }
- </script>
传入的数据格式
treeData: { title: '地球', children: [ { title: '人' }, { title: '水果', children: [ { title: '橘子' }, { title: '苹果' } ] }, { title: '植物', children: [ { title: '四君子', expand: true, children: [ { title: '梅' }, { title: '兰' }, { title: '竹' } ] }, { title: '动物', children: [ { title: '猪' }, { title: '狗' } ] }, { title: '气体', children: [ { title: '空气', children: [ { title: '氧气' }] }] } ] } ] }
关键点
在这里主要使用的一些技术包括:
技术 | 概述 | 备注 |
---|---|---|
递归组件 | 自己调用自己,要记得注明 name | / |
v-for | 在这里搭配递归,将数据一层一层遍历展示 | / |
后续会持续更新其他一些有用的组件提供参考...
来源: http://www.jianshu.com/p/e8bb1c990342