mirror of https://github.com/halo-dev/halo
Complete ThemeFile.vue
johnniang
parent
4976fdc20e
commit
8ab6711b67
|
|
@ -1,23 +0,0 @@
|
|||
<template>
|
||||
<fragment>
|
||||
<a-tree-node v-for="(item,index) in list" :title="item.name" :key="index">
|
||||
<theme-file :list="item.node"></theme-file>
|
||||
</a-tree-node>
|
||||
</fragment>
|
||||
<!-- <ul>
|
||||
<li v-for="(item,index) in list " :key="index">
|
||||
<p>{{item.name}}</p>
|
||||
<theme-file :list="item.node"></theme-file>
|
||||
</li>
|
||||
</ul> -->
|
||||
</template>
|
||||
<script>
|
||||
import { Fragment } from 'vue-fragment'
|
||||
export default {
|
||||
components: { Fragment },
|
||||
name: 'ThemeFile',
|
||||
props: {
|
||||
list: Array
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,124 +0,0 @@
|
|||
import { Menu, Icon, Input } from 'ant-design-vue'
|
||||
|
||||
const { Item, ItemGroup, SubMenu } = Menu
|
||||
const { Search } = Input
|
||||
|
||||
export default {
|
||||
name: 'Tree',
|
||||
props: {
|
||||
dataSource: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
openKeys: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
search: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.localOpenKeys = this.openKeys.slice(0)
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
localOpenKeys: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handlePlus(item) {
|
||||
this.$emit('add', item)
|
||||
},
|
||||
handleTitleClick(...args) {
|
||||
this.$emit('titleClick', { args })
|
||||
},
|
||||
|
||||
renderSearch() {
|
||||
return (
|
||||
<Search
|
||||
placeholder="input search text"
|
||||
style="width: 100%; margin-bottom: 1rem"
|
||||
/>
|
||||
)
|
||||
},
|
||||
renderIcon(icon) {
|
||||
return icon && (<Icon type={icon} />) || null
|
||||
},
|
||||
renderMenuItem(item) {
|
||||
return (
|
||||
<Item key={item.key}>
|
||||
{ this.renderIcon(item.icon) }
|
||||
{ item.title }
|
||||
<a class="btn" style="width: 20px;z-index:1300" {...{ on: { click: () => this.handlePlus(item) } }}><a-icon type="plus"/></a>
|
||||
</Item>
|
||||
)
|
||||
},
|
||||
renderItem(item) {
|
||||
return item.children ? this.renderSubItem(item, item.key) : this.renderMenuItem(item, item.key)
|
||||
},
|
||||
renderItemGroup(item) {
|
||||
const childrenItems = item.children.map(o => {
|
||||
return this.renderItem(o, o.key)
|
||||
})
|
||||
|
||||
return (
|
||||
<ItemGroup key={item.key}>
|
||||
<template slot="title">
|
||||
<span>{ item.title }</span>
|
||||
<a-dropdown>
|
||||
<a class="btn"><a-icon type="ellipsis" /></a>
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item key="1">新增</a-menu-item>
|
||||
<a-menu-item key="2">合并</a-menu-item>
|
||||
<a-menu-item key="3">移除</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
{ childrenItems }
|
||||
</ItemGroup>
|
||||
)
|
||||
},
|
||||
renderSubItem(item, key) {
|
||||
const childrenItems = item.children && item.children.map(o => {
|
||||
return this.renderItem(o, o.key)
|
||||
})
|
||||
|
||||
const title = (
|
||||
<span slot="title">
|
||||
{ this.renderIcon(item.icon) }
|
||||
<span>{ item.title }</span>
|
||||
</span>
|
||||
)
|
||||
|
||||
if (item.group) {
|
||||
return this.renderItemGroup(item)
|
||||
}
|
||||
// titleClick={this.handleTitleClick(item)}
|
||||
return (
|
||||
<SubMenu key={key}>
|
||||
{ title }
|
||||
{ childrenItems }
|
||||
</SubMenu>
|
||||
)
|
||||
}
|
||||
},
|
||||
render() {
|
||||
const { dataSource, search } = this.$props
|
||||
|
||||
// this.localOpenKeys = openKeys.slice(0)
|
||||
const list = dataSource.map(item => {
|
||||
return this.renderItem(item)
|
||||
})
|
||||
|
||||
return (
|
||||
<div class="tree-wrapper">
|
||||
{ search ? this.renderSearch() : null }
|
||||
<Menu mode="inline" class="custom-tree" {...{ on: { click: item => this.$emit('click', item), 'update:openKeys': val => { this.localOpenKeys = val } } }} openKeys={this.localOpenKeys}>
|
||||
{ list }
|
||||
</Menu>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -8,17 +8,5 @@ import Tree from '@/components/Tree/Tree'
|
|||
import MultiTab from '@/components/MultiTab'
|
||||
import Result from '@/components/Result'
|
||||
import IconSelector from '@/components/IconSelector'
|
||||
import ThemeFile from '@/components/Tree/ThemeFile'
|
||||
|
||||
export {
|
||||
AvatarList,
|
||||
Ellipsis,
|
||||
FooterToolbar,
|
||||
NumberInfo,
|
||||
DetailList,
|
||||
Tree,
|
||||
MultiTab,
|
||||
Result,
|
||||
IconSelector,
|
||||
ThemeFile
|
||||
}
|
||||
export { AvatarList, Ellipsis, FooterToolbar, NumberInfo, DetailList, Tree, MultiTab, Result, IconSelector }
|
||||
|
|
|
|||
|
|
@ -1,26 +1,38 @@
|
|||
<template>
|
||||
<div class="page-header-index-wide">
|
||||
<span class="page-header-index-wide">
|
||||
<a-row :gutter="12">
|
||||
<a-col :xl="18" :lg="18" :md="18" :sm="24" :xs="24">
|
||||
<a-col
|
||||
:xl="18"
|
||||
:lg="18"
|
||||
:md="18"
|
||||
:sm="24"
|
||||
:xs="24"
|
||||
>
|
||||
<a-card hoverable>
|
||||
<codemirror :value="value"></codemirror>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :xl="6" :lg="6" :md="6" :sm="24" :xs="24">
|
||||
<a-card hoverable title="Anatole 主题">
|
||||
<a-directory-tree multiple @select="onSelect" @expand="onExpand">
|
||||
<theme-file :list="files"></theme-file>
|
||||
</a-directory-tree>
|
||||
<!-- <theme-file :list="files"></theme-file> -->
|
||||
<a-col
|
||||
:xl="6"
|
||||
:lg="6"
|
||||
:md="6"
|
||||
:sm="24"
|
||||
:xs="24"
|
||||
>
|
||||
<a-card
|
||||
hoverable
|
||||
title="Anatole 主题"
|
||||
>
|
||||
<theme-file :files="files" />
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import themeApi from '@/api/theme'
|
||||
import ThemeFile from '@/components/Tree/ThemeFile'
|
||||
import ThemeFile from './components/ThemeFile'
|
||||
import { codemirror } from 'vue-codemirror-lite'
|
||||
export default {
|
||||
components: {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,52 @@
|
|||
<script>
|
||||
export default {
|
||||
name: 'ThemeFile',
|
||||
props: {
|
||||
files: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
renderNode(h, file) {
|
||||
if (file.node && file.node.length) {
|
||||
return h(
|
||||
'a-tree-node',
|
||||
{
|
||||
props: {
|
||||
key: file.path,
|
||||
title: file.name,
|
||||
isLeaf: file.isFile
|
||||
}
|
||||
},
|
||||
file.node.map(child => {
|
||||
return this.renderNode(h, child)
|
||||
})
|
||||
)
|
||||
}
|
||||
return h('a-tree-node', {
|
||||
props: {
|
||||
key: file.path,
|
||||
title: file.name,
|
||||
isLeaf: file.isFile
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
render(h) {
|
||||
if (this.files.length) {
|
||||
return h(
|
||||
'a-directory-tree',
|
||||
this.files.map(file => {
|
||||
return this.renderNode(h, file)
|
||||
})
|
||||
)
|
||||
}
|
||||
return h('p', 'No files')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
Loading…
Reference in New Issue