Skip to content

Commit 742ab76

Browse files
quanquan2100quanquan2100
committed
feat(imgUploadDemo): 更新用例
1 parent 33e2702 commit 742ab76

1 file changed

Lines changed: 59 additions & 16 deletions

File tree

‎src/plugins/custom/views/Demo.vue‎

Lines changed: 59 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,18 @@
33
<div class="lin-title">插件ImgsUpload舞台页面</div>
44
<div class="lin-wrap">
55
<el-form label-width="220px">
6-
<el-form-item label="带初始化至少4张, 至多5张">
6+
<el-form-item label="带初始化, 至少4张至多5张, 不立即上传">
77
<upload-imgs
88
ref="uploadEle"
99
:value="initData"
10+
:auto-upload="false"
1011
:rules="rules"
1112
:multiple="true"
1213
:max-num="5"
1314
:min-num="4" />
14-
<div>
15-
<el-button @click="getValue">获取数据</el-button>
16-
</div>
15+
<div>
16+
<el-button @click="getValue">获取当前图像数据</el-button>
17+
</div>
1718
</el-form-item>
1819
<el-form-item label="普通示例">
1920
<upload-imgs :rules="rules" :multiple="true" />
@@ -22,10 +23,19 @@
2223
<upload-imgs :rules="rules2" :multiple="true" :disabled="true" />
2324
</el-form-item>
2425
<el-form-item label="禁用+初始化">
25-
<upload-imgs :rules="rules2" :multiple="true" :disabled="true" :value="initData" />
26+
<upload-imgs
27+
:rules="rules2"
28+
:multiple="true"
29+
:disabled="true"
30+
:value="initData" />
2631
</el-form-item>
2732
<el-form-item label="禁用+初始化+不预览">
28-
<upload-imgs :rules="rules2" :multiple="true" :disabled="true" :value="initData" :preview="false" />
33+
<upload-imgs
34+
:rules="rules2"
35+
:multiple="true"
36+
:disabled="true"
37+
:value="initData"
38+
:preview="false" />
2939
</el-form-item>
3040
<el-form-item label="排序+固定数量">
3141
<upload-imgs
@@ -39,16 +49,38 @@
3949
<upload-imgs :rules="rules" :multiple="true" :max-num="3" />
4050
</el-form-item>
4151
<el-form-item label="定制宽高-排序">
42-
<upload-imgs :rules="rules" :width="200" :height="150" :value="initData" :sortable="true" />
52+
<upload-imgs
53+
:rules="rules"
54+
:width="200"
55+
:height="150"
56+
:value="initData"
57+
:sortable="true" />
4358
</el-form-item>
4459
<el-form-item label="重新初始化">
45-
<upload-imgs :rules="rules" :width="200" :height="150" :value="initData1" :sortable="true" />
60+
<upload-imgs
61+
:rules="rules"
62+
:width="200"
63+
:height="150"
64+
:value="initData1"
65+
:sortable="true" />
4666
<div>
4767
<el-button @click="changeData">重新初始化</el-button>
4868
</div>
4969
</el-form-item>
5070
<el-form-item label="图像缩略图展示模式">
51-
<upload-imgs :rules="rules" :width="200" :height="150" fit="cover" :value="initData" />
71+
<el-radio-group v-model="fit">
72+
<el-radio label="fill">fill</el-radio>
73+
<el-radio label="contain">contain</el-radio>
74+
<el-radio label="cover">cover</el-radio>
75+
<el-radio label="none">none</el-radio>
76+
<el-radio label="scale-down">scale-down</el-radio>
77+
</el-radio-group>
78+
<upload-imgs
79+
:rules="rules"
80+
:width="200"
81+
:height="150"
82+
:fit="fit"
83+
:value="initData" />
5284
</el-form-item>
5385
</el-form>
5486
</div>
@@ -65,6 +97,7 @@ export default {
6597
},
6698
data() {
6799
return {
100+
fit: 'cover',
68101
rules: {
69102
minWidth: 100,
70103
minHeight: 100,
@@ -77,28 +110,34 @@ export default {
77110
initData1: [{
78111
id: '123',
79112
display: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
80-
src: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
113+
src: '/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg',
114+
imgId: '123dk98',
81115
}, {
82116
id: '12d3',
83117
display: 'http://img-home.7yue.pro/images/index/Lin_cms_%E5%B0%81%E9%9D%A2.png',
84-
src: 'http://img-home.7yue.pro/images/index/Lin_cms_%E5%B0%81%E9%9D%A2.png',
118+
src: '/images/index/Lin_cms_%E5%B0%81%E9%9D%A2.png',
119+
imgId: 'sd9873429',
85120
}, {
86121
id: 'hahah',
87122
display: 'http://img-home.7yue.pro/images/index/Lin_UI_%E5%B0%81%E9%9D%A2.png',
88-
src: 'http://img-home.7yue.pro/images/index/Lin_UI_%E5%B0%81%E9%9D%A2.png',
123+
src: '/images/index/Lin_UI_%E5%B0%81%E9%9D%A2.png',
124+
imgId: 'ccsd2123',
89125
}],
90126
initData: [{
91127
id: '123',
92128
display: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
93129
src: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
130+
imgId: '12381900',
94131
}, {
95132
id: '12d3',
96133
display: 'http://img-home.7yue.pro/images/index/Lin_cms_%E5%B0%81%E9%9D%A2.png',
97-
src: 'http://img-home.7yue.pro/images/index/Lin_cms_%E5%B0%81%E9%9D%A2.png',
134+
src: '/images/index/Lin_cms_%E5%B0%81%E9%9D%A2.png',
135+
imgId: '238287',
98136
}, {
99137
id: 'hahah',
100138
display: 'http://img-home.7yue.pro/images/index/Lin_UI_%E5%B0%81%E9%9D%A2.png',
101-
src: 'http://img-home.7yue.pro/images/index/Lin_UI_%E5%B0%81%E9%9D%A2.png',
139+
src: '/images/index/Lin_UI_%E5%B0%81%E9%9D%A2.png',
140+
imgId: '1232323',
102141
}],
103142
}
104143
},
@@ -117,16 +156,20 @@ export default {
117156
methods: {
118157
async getValue() {
119158
console.log(await this.$refs.uploadEle.getValue())
159+
// eslint-disable-next-line
160+
alert('已获取数据, 打印在控制台中')
120161
},
121162
changeData() {
122163
this.initData1 = [{
123164
id: 'hahah',
124165
display: 'http://img-home.7yue.pro/images/index/Lin_UI_%E5%B0%81%E9%9D%A2.png',
125-
src: 'http://img-home.7yue.pro/images/index/Lin_UI_%E5%B0%81%E9%9D%A2.png',
166+
src: '/images/index/Lin_UI_%E5%B0%81%E9%9D%A2.png',
167+
imgId: '2477899809',
126168
}, {
127169
id: '12d3',
128170
display: 'http://img-home.7yue.pro/images/index/Lin_cms_%E5%B0%81%E9%9D%A2.png',
129-
src: 'http://img-home.7yue.pro/images/index/Lin_cms_%E5%B0%81%E9%9D%A2.png',
171+
src: '/images/index/Lin_cms_%E5%B0%81%E9%9D%A2.png',
172+
imgId: '4dfg43234',
130173
}]
131174
},
132175
},

0 commit comments

Comments
 (0)