Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

ctree适配vue3.0 #42

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
angrytoro merged 12 commits into wsfe:3.x from zhuzhibin1995:dev
Feb 10, 2023
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
出版组件
  • Loading branch information
zhuzhibin1995 committed Jan 11, 2023
commit c5a4ef5e72eae85a735e32df600df5f5b917a42a
8 changes: 6 additions & 2 deletions examples/App.vue
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,15 +20,19 @@
import {defineComponent,reactive,ref} from 'vue'
import Loading from './Loading.vue'
import Search from './Search.vue'
import Drop from './Drop.vue'

export default defineComponent({
components: {
Loading,
Search
Search,
Drop
},
setup(props) {
const components = {
Loading,
Search
Search,
Drop
}
const tabList = reactive(Object.keys(components)) as any[]
const currentTab = ref(tabList[0])
Expand Down
82 changes: 25 additions & 57 deletions examples/Drop.vue
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,49 +2,33 @@
<div>
<div style="width: 200px;">
<p>自定义展示 slot :</p>
<CTreeDrop
v-model="value"
:data="data"
checkable
clearable
drop-placeholder="请选择"
:placement="placement"
:dropdown-min-width="300"
dropdown-width-fixed
@checked-change="handleCheckedChange"
>
<CTreeDrop v-model="value" :data="data" checkable clearable drop-placeholder="请选择" :placement="placement"
:dropdown-min-width="300" dropdown-width-fixed @checked-change="handleCheckedChange">
<template v-slot:display="scope">
<div
style="width: 170px; text-overflow: ellipsis; overflow: hidden;"
>{{ scope.checkedNodes.map((node) => node.title).join(',') }}</div>
<div style="width: 170px; text-overflow: ellipsis; overflow: hidden;">{{
scope.checkedNodes.map((node) =>
node.title).join(',')
}}</div>
</template>
<span slot="empty">slot 传进来的暂无数据</span>

</CTreeDrop>
{{ value }}
</div>
<div style="width: 200px;">
<p>默认:</p>
<CTreeDrop
v-model="value"
:data="data"
checkable
clearable
drop-placeholder="请选择"
:placement="placement"
:dropdown-min-width="300"
dropdown-width-fixed
@checked-change="handleCheckedChange"
>
<span slot="empty">slot 传进来的暂无数据</span>
<CTreeDrop v-model="value" :data="data" checkable clearable drop-placeholder="请选择" :placement="placement"
:dropdown-min-width="300" dropdown-width-fixed @checked-change="handleCheckedChange">
<template #empty>slot 传进来的暂无数据</template>
</CTreeDrop>
{{ value }}
</div>
</div>
</template>

<script>
<script lang="ts">
import { CTreeDrop } from '../src'
import treeDataGenerator from '../tests/tree-data-generator'
import { defineComponent, ref } from 'vue'

const genData = (extra = {}) => {
return treeDataGenerator(Object.assign({
Expand All @@ -56,40 +40,24 @@ const genData = (extra = {}) => {
}, extra))
}

export default {
export default defineComponent({
name: 'Drop',
components: {
CTreeDrop,
},
data () {
const data = genData().data
// const data = [{
// id: '1',
// title: 'zzz',
// }]
// data[0].checked = true
// data[2].checked = true
// data[4].checked = true
setup() {
const data = ref(genData().data)
const value = ref('2')
const placement = ref('bottom-start')
function handleCheckedChange(){
console.log('checked-change')
}
return {
data,
value: '2',
placement: 'bottom-start',
value,
placement,
handleCheckedChange
}
},
methods: {
handleCheckedChange () {
console.log('checked-change')
},
},
// created () {
// setTimeout(() => {
// this.data = [
// {
// id: '2',
// title: 'xxcxxxx',
// }
// ]
// }, 3000)
// },
}
}
})
</script>
1 change: 0 additions & 1 deletion examples/Loading.vue
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ export default defineComponent({
},
setup(){
const basicUsage = ref(genData().data)
console.log(basicUsage.value)
const loading = ref(false)
function handleToggle(){
loading.value = !loading.value
Expand Down
39 changes: 20 additions & 19 deletions src/components/Tree.vue
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
</template>

<script lang="ts">
import { VNode, defineComponent, reactive, ref, Ref, computed, watch, onMounted, getCurrentInstance } from 'vue'
import { VNode, defineComponent, reactive, ref, Ref, computed, watch, onMounted, getCurrentInstance,toRef } from 'vue'
import TreeStore, { TreeNode } from '../store'
import CTreeNode from './TreeNode.vue'
import LoadingIcon from './LoadingIcon.vue'
Expand All @@ -62,10 +62,10 @@ export default defineComponent({
CTreeNode,
LoadingIcon,
},
emit: ['input', 'node-drop'],
emit: ['update:modelValue', 'node-drop'],
props: {
/** 单选模式下为字符串或数字,多选模式下为数组或者以 separator 分隔的字符串。当即可单选又可多选时,value 是多选的值 */
value: [
modelValue: [
String,
Number,
Array as () => TreeNodeKeyType[],
Expand Down Expand Up @@ -309,7 +309,7 @@ export default defineComponent({
const renderStart = ref(0)
const renderStartCache = ref(0)
const isRootLoading = ref(false)
const valueCache = ref(Array.isArray(props.value) ? props.value.concat() : props.value) as Ref<VModelType>
const valueCache = ref(Array.isArray(props.modelValue) ? props.modelValue.concat() : props.modelValue) as Ref<VModelType>
const debounceTimer = ref(undefined) as Ref<number | undefined>
const scrollArea = ref()
const iframe = ref()
Expand Down Expand Up @@ -391,9 +391,9 @@ export default defineComponent({
}),
blockNodes: [] as TreeNode[],
}
watch(() => props.value, (newVal) => {
watch(() => props.modelValue, (newVal) => {
if (props.checkable) {
// 检查是否由 input 事件触发
// 检查是否由 update:modelValue 事件触发
if (sameValue(newVal as VModelType, valueCache.value)) return

// 多选
Expand All @@ -406,7 +406,7 @@ export default defineComponent({
nonReactive.store.clearChecked(false, false)
nonReactive.store.setCheckedKeys(checkedKeys, true)
} else if (props.selectable) {
// 检查是否由 input 事件触发
// 检查是否由 update:modelValue 事件触发
if (newVal === valueCache.value) return

// 单选
Expand Down Expand Up @@ -435,13 +435,13 @@ export default defineComponent({
let checkableUnloadKeys: TreeNodeKeyType | TreeNodeKeyType[] | null = null
let selectableUnloadKey: TreeNodeKeyType | null = null
if (props.checkable) {
if (Array.isArray(props.value)) {
checkableUnloadKeys = props.value.concat()
} else if (typeof props.value === 'string') {
checkableUnloadKeys = props.value === '' ? [] : props.value.split(props.separator)
if (Array.isArray(props.modelValue)) {
checkableUnloadKeys = props.modelValue.concat()
} else if (typeof props.modelValue === 'string') {
checkableUnloadKeys = props.modelValue === '' ? [] : props.modelValue.split(props.separator)
}
} else if (props.selectable && !Array.isArray(props.value)) {
selectableUnloadKey = props.value as TreeNodeKeyType | null
} else if (props.selectable && !Array.isArray(props.modelValue)) {
selectableUnloadKey = props.modelValue as TreeNodeKeyType | null
}
nonReactive.store.setData(data, selectableUnloadKey, checkableUnloadKeys as TreeNodeKeyType[])
updateExpandedKeys()
Expand Down Expand Up @@ -647,7 +647,7 @@ export default defineComponent({
nonReactive.store.setSelected(node[props.keyField], !node.selected)
}
function handleNodeExpand(node: TreeNode): void {
nonReactive.store.setExpand(node.value[props.keyField], !node.expand)
nonReactive.store.setExpand(node[props.keyField], !node.expand)
}
function handleNodeDrop(data: TreeNode, e: DragEvent, hoverPart: dragHoverPartEnum): void {
if (!props.droppable) return
Expand All @@ -673,33 +673,33 @@ export default defineComponent({
//#endregion Handle node events

/**
* 触发多选 input 事件
* 触发多选 update:modelValue 事件
*/
function emitCheckableInput(checkedNodes: TreeNode[], checkedKeys: TreeNodeKeyType[]): void {
if (props.checkable) {
// 多选
let emitValue: TreeNodeKeyType[] | string = checkedKeys
if (!Array.isArray(props.value)) {
if (!Array.isArray(props.modelValue)) {
emitValue = emitValue.join(props.separator)
}
if (Array.isArray(emitValue)) {
valueCache.value = emitValue.concat()
} else {
valueCache.value = emitValue
}
content.emit('input', emitValue)
content.emit('update:modelValue', emitValue)
}
}

/**
* 触发单选 input 事件
* 触发单选 update:modelValue 事件
*/
function emitSelectableInput(selectedNode: TreeNode | null, selectedKey: TreeNodeKeyType | null): void {
if (props.selectable && !props.checkable) {
// 单选
const emitValue: TreeNodeKeyType = selectedKey ? selectedKey : ''
valueCache.value = emitValue
content.emit('input', emitValue)
content.emit('update:modelValue', emitValue)
}
}

Expand Down Expand Up @@ -835,6 +835,7 @@ export default defineComponent({
updateRenderNodes,
getNode
}
content.expose({methods,titleField:props.titleField})
onMounted(() => {
nonReactive.store.on('visible-data-change', updateBlockNodes)
nonReactive.store.on('render-data-change', updateRender)
Expand Down
Loading

AltStyle によって変換されたページ (->オリジナル) /