lbp-slide__editor.js
2.44 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
export default {
props: {
elementProps: {
type: Object,
default: () => ({
items: [],
activeIndex: 0
})
}
},
computed: {
innerItems () {
return this.elementProps.items
}
},
data: () => ({
current: 1
}),
methods: {
itemRender (current, type, originalElement) {
if (type === 'prev') {
return <a-button style={{ marginRight: '8px' }} size="small" icon="minus" onClick={() => this.minus(current)} disabled={this.innerItems.length === 1}></a-button>
} else if (type === 'next') {
return <a-button style={{ marginLeft: '8px' }} size="small" icon="plus" onClick={this.add}></a-button>
}
return originalElement
},
add () {
// this.$emit('change', {
// activeIndex: this.innerItems.length,
// items: [
// ...this.innerItems,
// {
// image: '',
// value: `选项${this.innerItems.length + 1}-value`,
// label: `选项${this.innerItems.length + 1}-label`
// }
// ]
// })
this.elementProps.items.push({
image: '',
value: `选项${this.innerItems.length + 1}-value`,
label: `选项${this.innerItems.length + 1}-label`
})
},
minus (index) {
if (this.innerItems.length === 1) return
this.elementProps.items.splice(index, 1)
// this.elementProps.activeIndex = index > 0 ? index - 1 : 0
this.elementProps.activeIndex = Math.max(index - 1, 0)
// const items = this.innerItems.slice(0)
// items.splice(index, 1)
// this.$emit('change', {
// items,
// activeIndex: index > 0 ? index - 1 : 0
// })
}
},
render () {
const currentItem = this.innerItems[this.current - 1] || {}
return <div>
{
<a-pagination
current={this.current}
onChange={(page) => {
this.current = page
this.elementProps.activeIndex = page - 1
// this.$emit('change', {
// items: this.innerItems,
// activeIndex: page - 1
// })
}}
size="small"
total={this.innerItems.length}
defaultPageSize={1}
itemRender={this.itemRender}
/>
}
<lbs-image-gallery
style={{ margin: '16px 0' }}
value={currentItem.image}
onChange={url => {
currentItem.image = url
}}
/>
</div>
}
}