home.vue
2.73 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
91
92
93
94
95
96
97
98
<template>
<div>
<div class="container contaNEW">
<p class="t-center"><a v-link="{ path: '/readme' }">查看组件用法</a></p>
<button v-on:click="delete">delete</button>
<!-- uploads-->
<div class="product-pics clearfix">
<div class="pro-pics-tit clearfix">
<h3>商品照片</h3>
<div class="pro-ctrl">
<uploads v-bind:class="['class1','class2']" v-bind:readonly="readonly"
v-on:file-change="fileChange" v-bind:multiple="true">
<a class="pro-btn pro-add" href="javascript:">批量添加</a>
</uploads>
<!-- <a class="pro-btn pro-add" href="###">批量添加</a> -->
</div>
</div>
<div class="pro-pics">
<!--效果图没有左右按钮-->
<!-- <div class="prev"></div>
<div class="next"></div> -->
<div class="pic-container">
<ul class="pic-list">
<li class="has-image" v-for="item in uploads">
<div class="pic-contain"
:style="{backgroundImage:'url('+item.path+')'}"
>
<span class="rm-pic" v-on:click="deleteimg($index)"></span>
</div>
</li>
<li>
<uploads v-bind:class="['pic-contain']" :display="'block'"
v-on:file-change="fileChange" v-bind:multiple="false"
v-bind:readonly="readonly"
>
</uploads>
</li>
</ul>
</div>
</div>
</div>
<!--end uploads-->
<listbox :list="children" :show="true" openclass="active"
focus="' '" focusclass="focus" @call="treecall"
:class="['department-category-root']">
</listbox>
</div>
</div>
</template>
<script>
module.exports={
data:function(){
return {
children:[
{name:'一级1'},
{name:'一级2',children:[
{name:'二级1',children:[
{name:'三级1'},{name:'三级2'}
]},
{name:'二级2'},{name:'二级3'}
]}
],
uploads:[],
readonly:1
}
},methods:{
delete:function(){
//是否删除
this.MessageBox({
title: '提示',
message: '是否删除',
type: 'success',
showCancelButton: true
}).then(function(action) {
});
},fileChange:function(data){
data=JSON.parse(data);
for(var i=0;i<data.length;i++){
this.uploads.push(data[i])
}
},deleteimg:function(index){
this.uploads.splice(index,1);
},treecall:function(item){
}
}
}
</script>