javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(autocomplete): popper usage (#429)

Browse Source 
* fix(autocomplete): dropdownWidth

* fix: el-popper usage

* test: change test file

* fix: remove storybook doc dir

* test: sleep time
This commit is contained in:
Caaalabash
2020-10-22 14:02:28 +08:00
committed by GitHub
parent 8e95db293c
commit b4c84cc00a
30 changed files with 132 additions and 1343 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
packages/tree/doc/basic.vue
View File

@@ -1,94 +0,0 @@
<template>
<div class="block">
<el-tree
ref="tree"
:data="data"
:props="defaultProps"
show-checkbox
node-key="id"
default-expand-all
/>
<button @click="test">test</button>
</div>
</template>
<script lang='ts'>
import { defineComponent } from 'vue'
export default defineComponent({
data() {
return {
count: 1,
defaultExpandedKeys: [1, 3],
data: [{
id: 1,
label: '一级 1',
children: [{
id: 11,
label: '二级 1-1',
children: [{
id: 111,
label: '三级 1-1',
}],
}],
}, {
id: 2,
label: '一级 2',
children: [{
id: 21,
label: '二级 2-1',
}, {
id: 22,
label: '二级 2-2',
}],
}, {
id: 3,
label: '一级 3',
children: [{
id: 31,
label: '二级 3-1',
}, {
id: 32,
label: '二级 3-2',
}],
}],
defaultProps: {
children: 'children',
label: 'label',
},
}
},
methods: {
loadNode(node, resolve) {
if (node.level === 0) {
return resolve([{ label: 'region1', id: this.count++ }, { label: 'region2', id: this.count++ }])
}
if (node.level > 2) return resolve([])
setTimeout(() => {
resolve([{
label: 'zone' + this.count,
id: this.count++,
}, {
label: 'zone' + this.count,
id: this.count++,
}])
}, 50)
},
handleCheck(...a) {
console.log(...a)
},
test() {
console.log(111)
// this.$refs.tree.updateKeyChildren(1, [{
// id: 111,
// label: '三级 1-1'
// }]);
},
handleNodeClick(data) {
console.log(data)
},
},
})
</script>

104
packages/tree/doc/basic10.vue
View File

@@ -1,104 +0,0 @@
<template>
<el-tree
:data="data"
node-key="id"
default-expand-all
draggable
:allow-drop="allowDrop"
:allow-drag="allowDrag"
@node-drag-start="handleDragStart"
@node-drag-enter="handleDragEnter"
@node-drag-leave="handleDragLeave"
@node-drag-over="handleDragOver"
@node-drag-end="handleDragEnd"
@node-drop="handleDrop"
/>
</template>
<script>
export default {
data() {
return {
data: [{
id: 1,
label: '一级 1',
children: [{
id: 4,
label: '二级 1-1',
children: [{
id: 9,
label: '三级 1-1-1',
}, {
id: 10,
label: '三级 1-1-2',
}],
}],
}, {
id: 2,
label: '一级 2',
children: [{
id: 5,
label: '二级 2-1',
}, {
id: 6,
label: '二级 2-2',
}],
}, {
id: 3,
label: '一级 3',
children: [{
id: 7,
label: '二级 3-1',
}, {
id: 8,
label: '二级 3-2',
children: [{
id: 11,
label: '三级 3-2-1',
}, {
id: 12,
label: '三级 3-2-2',
}, {
id: 13,
label: '三级 3-2-3',
}],
}],
}],
defaultProps: {
children: 'children',
label: 'label',
},
}
},
methods: {
handleDragStart(node) {
console.log('drag start', node)
},
handleDragEnter(draggingNode, dropNode) {
console.log('tree drag enter: ', dropNode.label)
},
handleDragLeave(draggingNode, dropNode) {
console.log('tree drag leave: ', dropNode.label)
},
handleDragOver(draggingNode, dropNode) {
console.log('tree drag over: ', dropNode.label)
},
handleDragEnd(draggingNode, dropNode, dropType) {
console.log('tree drag end: ', dropNode && dropNode.label, dropType)
},
handleDrop(draggingNode, dropNode, dropType) {
console.log('tree drop: ', dropNode.label, dropType)
},
allowDrop(draggingNode, dropNode, type) {
if (dropNode.data.label === '二级 3-1') {
return type !== 'inner'
} else {
return true
}
},
allowDrag(draggingNode) {
return draggingNode.data.label.indexOf('三级 3-2-2') === -1
},
},
}
</script>

60
packages/tree/doc/basic2.vue
View File

@@ -1,60 +0,0 @@
<template>
<el-tree
:props="props"
:load="loadNode"
lazy
show-checkbox
@check-change="handleCheckChange"
/>
</template>
<script>
export default {
data() {
return {
props: {
label: 'name',
children: 'zones',
},
count: 1,
}
},
methods: {
handleCheckChange(data, checked, indeterminate) {
console.log(data, checked, indeterminate)
},
handleNodeClick(data) {
console.log(data)
},
loadNode(node, resolve) {
if (node.level === 0) {
return resolve([{ name: 'region1' }, { name: 'region2' }])
}
if (node.level > 3) return resolve([])
var hasChild
if (node.data.name === 'region1') {
hasChild = true
} else if (node.data.name === 'region2') {
hasChild = false
} else {
hasChild = Math.random() > 0.5
}
setTimeout(() => {
var data
if (hasChild) {
data = [{
name: 'zone' + this.count++,
}, {
name: 'zone' + this.count++,
}]
} else {
data = []
}
resolve(data)
}, 500)
},
},
}
</script>

40
packages/tree/doc/basic3.vue
View File

@@ -1,40 +0,0 @@
<template>
<el-tree
:props="props"
:load="loadNode"
lazy
show-checkbox
/>
</template>
<script>
export default {
data() {
return {
props: {
label: 'name',
children: 'zones',
isLeaf: 'leaf',
},
}
},
methods: {
loadNode(node, resolve) {
if (node.level === 0) {
return resolve([{ name: 'region' }])
}
if (node.level > 1) return resolve([])
setTimeout(() => {
const data = [{
name: 'leaf',
leaf: true,
}, {
name: 'zone',
}]
resolve(data)
}, 500)
},
},
}
</script>

59
packages/tree/doc/basic4.vue
View File

@@ -1,59 +0,0 @@
<template>
<el-tree
:data="data"
show-checkbox
node-key="id"
:default-expanded-keys="[2, 3]"
:default-checked-keys="[5]"
:props="defaultProps"
check-on-click-node
highlight-current
/>
</template>
<script>
export default {
data() {
return {
data: [{
id: 1,
label: '一级 1',
children: [{
id: 4,
label: '二级 1-1',
children: [{
id: 9,
label: '三级 1-1-1',
}, {
id: 10,
label: '三级 1-1-2',
}],
}],
}, {
id: 2,
label: '一级 2',
children: [{
id: 5,
label: '二级 2-1',
}, {
id: 6,
label: '二级 2-2',
}],
}, {
id: 3,
label: '一级 3',
children: [{
id: 7,
label: '二级 3-1',
}, {
id: 8,
label: '二级 3-2',
}],
}],
defaultProps: {
children: 'children',
label: 'label',
},
}
},
}
</script>

49
packages/tree/doc/basic5.vue
View File

@@ -1,49 +0,0 @@
<template>
<el-tree
:data="data"
show-checkbox
node-key="id"
:default-expanded-keys="[2, 3]"
:default-checked-keys="[5]"
/>
</template>
<script>
export default {
data() {
return {
data: [{
id: 1,
label: '一级 2',
children: [{
id: 3,
label: '二级 2-1',
children: [{
id: 4,
label: '三级 3-1-1',
}, {
id: 5,
label: '三级 3-1-2',
disabled: true,
}],
}, {
id: 2,
label: '二级 2-2',
disabled: true,
children: [{
id: 6,
label: '三级 3-2-1',
}, {
id: 7,
label: '三级 3-2-2',
disabled: true,
}],
}],
}],
defaultProps: {
children: 'children',
label: 'label',
},
}
},
}
</script>

92
packages/tree/doc/basic6.vue
View File

@@ -1,92 +0,0 @@
<template>
<el-tree
ref="tree"
:data="data"
show-checkbox
default-expand-all
node-key="id"
highlight-current
:props="defaultProps"
check-on-click-node
/>
<div class="buttons">
<el-button @click="getCheckedNodes">通过 node 获取</el-button>
<el-button @click="getCheckedKeys">通过 key 获取</el-button>
<el-button @click="setCheckedNodes">通过 node 设置</el-button>
<el-button @click="setCheckedKeys">通过 key 设置</el-button>
<el-button @click="resetChecked">清空</el-button>
</div>
</template>
<script>
export default {
data() {
return {
data: [{
id: 1,
label: '一级 1',
children: [{
id: 4,
label: '二级 1-1',
children: [{
id: 9,
label: '三级 1-1-1',
}, {
id: 10,
label: '三级 1-1-2',
}],
}],
}, {
id: 2,
label: '一级 2',
children: [{
id: 5,
label: '二级 2-1',
}, {
id: 6,
label: '二级 2-2',
}],
}, {
id: 3,
label: '一级 3',
children: [{
id: 7,
label: '二级 3-1',
}, {
id: 8,
label: '二级 3-2',
}],
}],
defaultProps: {
children: 'children',
label: 'label',
},
}
},
methods: {
getCheckedNodes() {
console.log(this.$refs.tree.getCheckedNodes())
},
getCheckedKeys() {
console.log(this.$refs.tree.getCheckedKeys())
},
setCheckedNodes() {
this.$refs.tree.setCheckedNodes([{
id: 5,
label: '二级 2-1',
}, {
id: 9,
label: '三级 1-1-1',
}])
},
setCheckedKeys() {
this.$refs.tree.setCheckedKeys([3])
},
resetChecked() {
this.$refs.tree.setCheckedKeys([])
},
},
}
</script>

127
packages/tree/doc/basic7.vue
View File

@@ -1,127 +0,0 @@
<template>
<div class="custom-tree-container">
<div class="block">
<p>使用 render-content</p>
<el-tree
:data="data"
show-checkbox
node-key="id"
default-expand-all
:expand-on-click-node="false"
:render-content="renderContent"
/>
</div>
<div class="block">
<p>使用 scoped slot</p>
<el-tree
:data="data"
show-checkbox
node-key="id"
default-expand-all
:expand-on-click-node="false"
>
<template #default="{ node, data: innerData }">
<span class="custom-tree-node">
<span>{{ node.label }}</span>
<span>
<el-button
type="text"
size="mini"
@click="append(innerData)"
>
Append
</el-button>
<el-button
type="text"
size="mini"
@click="remove(node, innerData)"
>
Delete
</el-button>
</span>
</span>
</template>
</el-tree>
</div>
</div>
</template>
<script>
let id = 1000
export default {
data() {
const data = [{
id: 1,
label: '一级 1',
children: [{
id: 4,
label: '二级 1-1',
children: [{
id: 9,
label: '三级 1-1-1',
}, {
id: 10,
label: '三级 1-1-2',
}],
}],
}, {
id: 2,
label: '一级 2',
children: [{
id: 5,
label: '二级 2-1',
}, {
id: 6,
label: '二级 2-2',
}],
}, {
id: 3,
label: '一级 3',
children: [{
id: 7,
label: '二级 3-1',
}, {
id: 8,
label: '二级 3-2',
}],
}]
return {
data: JSON.parse(JSON.stringify(data)),
}
},
methods: {
append(data) {
const newChild = { id: id++, label: 'testtest', children: [] }
if (!data.children) {
data.children = []
}
data.children.push(newChild)
this.data = [...this.data]
},
remove(node, data) {
const parent = node.parent
const children = parent.data.children || parent.data
const index = children.findIndex(d => d.id === data.id)
children.splice(index, 1)
this.data = [...this.data]
},
renderContent(h) {
return h('div', { class: 'custom-tree-node' }, ['haha'])
},
},
}
</script>
<style>
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
}
</style>

78
packages/tree/doc/basic8.vue
View File

@@ -1,78 +0,0 @@
<template>
<input
v-model="filterText"
placeholder="输入关键字进行过滤"
>
<el-tree
ref="tree"
class="filter-tree"
:data="data"
:props="defaultProps"
default-expand-all
:filter-node-method="filterNode"
/>
</template>
<script>
export default {
data() {
return {
filterText: '',
data: [{
id: 1,
label: '一级 1',
children: [{
id: 4,
label: '二级 1-1',
children: [{
id: 9,
label: '三级 1-1-1',
}, {
id: 10,
label: '三级 1-1-2',
}],
}],
}, {
id: 2,
label: '一级 2',
children: [{
id: 5,
label: '二级 2-1',
}, {
id: 6,
label: '二级 2-2',
}],
}, {
id: 3,
label: '一级 3',
children: [{
id: 7,
label: '二级 3-1',
}, {
id: 8,
label: '二级 3-2',
}],
}],
defaultProps: {
children: 'children',
label: 'label',
},
}
},
watch: {
filterText(val) {
this.$refs.tree.filter(val)
},
},
methods: {
filterNode(value, data) {
if (!value) return true
return data.label.indexOf(value) !== -1
},
},
}
</script>

62
packages/tree/doc/basic9.vue
View File

@@ -1,62 +0,0 @@
<template>
<el-tree
:data="data"
:props="defaultProps"
accordion
@node-click="handleNodeClick"
/>
</template>
<script>
export default {
data() {
return {
data: [{
label: '一级 1',
children: [{
label: '二级 1-1',
children: [{
label: '三级 1-1-1',
}],
}],
}, {
label: '一级 2',
children: [{
label: '二级 2-1',
children: [{
label: '三级 2-1-1',
}],
}, {
label: '二级 2-2',
children: [{
label: '三级 2-2-1',
}],
}],
}, {
label: '一级 3',
children: [{
label: '二级 3-1',
children: [{
label: '三级 3-1-1',
}],
}, {
label: '二级 3-2',
children: [{
label: '三级 3-2-1',
}],
}],
}],
defaultProps: {
children: 'children',
label: 'label',
},
}
},
methods: {
handleNodeClick(data) {
console.log(data)
},
},
}
</script>

6
packages/tree/doc/index.stories.ts
View File

@@ -1,6 +0,0 @@
export { default as BasicUsage } from './index.vue'
export default {
title: 'Tree',
}

77
packages/tree/doc/index.vue
View File

@@ -1,77 +0,0 @@
<template>
<div class="item">
<div class="title">1</div>
<Basic />
</div>
<div class="item">
<div class="title">2</div>
<Basic2 />
</div>
<div class="item">
<div class="title">3</div>
<Basic3 />
</div>
<div class="item">
<div class="title">4</div>
<Basic4 />
</div>
<div class="item">
<div class="title">5</div>
<Basic5 />
</div>
<div class="item">
<div class="title">6</div>
<Basic6 />
</div>
<div class="item">
<div class="title">7</div>
<Basic7 />
</div>
<div class="item">
<div class="title">8</div>
<Basic8 />
</div>
<div class="item">
<div class="title">9</div>
<Basic9 />
</div>
<div class="item">
<div class="title">10</div>
<Basic10 />
</div>
</template>
<script>
import Basic from './basic.vue'
import Basic2 from './basic2.vue'
import Basic3 from './basic3.vue'
import Basic4 from './basic4.vue'
import Basic5 from './basic5.vue'
import Basic6 from './basic6.vue'
import Basic7 from './basic7.vue'
import Basic8 from './basic8.vue'
import Basic9 from './basic9.vue'
import Basic10 from './basic10.vue'
export default {
components: {
Basic,
Basic2,
Basic3,
Basic4,
Basic5,
Basic6,
Basic7,
Basic8,
Basic9,
Basic10,
},
}
</script>
<style>
.item {
border: 2px solid #eee;
padding: 10px;
margin-bottom: 15px;
}
</style>