Commit 46dfe96f by web

fix: 修改变量名

1 parent 0c2b9037
<template>
<div :style="{ columnCount }">
<img v-for="(item, index) in list" :key="index" :src="setUrl(item)" />
<img v-for="(item, index) in imageUrl" :key="index" :src="setUrl(item)" />
</div>
</template>
......@@ -22,31 +22,31 @@ const IMG_MAPPING = {
export default {
name: 'bi-photo-wall-images',
props: {
list: {
imageUrl: {
type: Array,
default() {
return [];
}
},
imgStyle: {
layout: {
type: Object,
default() {
return {
layout: 2, // 1流式 2平铺 流式不限制高度,但是有max-height,平铺为正方形
size: 2 // 1大548px 2中355px 3小262px
imageStyle: 2, // 1流式 2平铺 流式不限制高度,但是有max-height,平铺为正方形
imageSize: 2 // 1大548px 2中355px 3小262px
};
}
}
},
computed: {
columnCount() {
return IMG_MAPPING[this.imgStyle.size].column;
return IMG_MAPPING[this.layout.imageSize].column;
},
width() {
return IMG_MAPPING[this.imgStyle.size].width;
return IMG_MAPPING[this.layout.imageSize].width;
},
height() {
if (this.imgStyle.layout === 2) {
if (this.layout.imageStyle === 2) {
return this.width;
}
return 'auto';
......@@ -56,7 +56,7 @@ export default {
setUrl(url) {
// x-oss-process=image/resize,w_355 流式
// ?x-oss-process=image/resize,m_fill,w_355,h_355
if (this.imgStyle.layout === 1) {
if (this.layout.imageStyle === 1) {
return `${url}?x-oss-process=image/resize,w_${this.width}`;
}
return `${url}?x-oss-process=image/resize,m_fill,w_${this.width},h_${this.width}`;
......
......@@ -7,13 +7,13 @@
<BiTitle :index="index" :name="name">
<template #handler>
<div class="bi-title-photo-btn">
<SelectStyle :imgStyle="imgStyle" @handleSave="selectStyleSave" />
<SelectImages :selected="list" @handleSave="selectImgSave" />
<SelectStyle :layout="layout" @handleSave="selectStyleSave" />
<SelectImages :imageUrl="imageUrl" @handleSave="selectImgSave" />
<Del @del="onDel" />
</div>
</template>
</BiTitle>
<BiImages :list="list" :imgStyle="imgStyle" />
<BiImages :imageUrl="imageUrl" :layout="layout" />
</div>
</template>
......@@ -47,21 +47,21 @@ export default {
},
data() {
return {
list: [],
imgStyle: {
layout: 2, // 1流式 2平铺
size: 2 // 1大 2中 3小
imageUrl: [],
layout: {
imageStyle: 2, // 1流式 2平铺 流式不限制高度,但是有max-height,平铺为正方形
imageSize: 2 // 1大548px 2中355px 3小262px
}
};
},
methods: {
// 选择图片的保存
selectImgSave(e) {
this.list = e;
this.imageUrl = e;
},
// 选择样式的保存
selectStyleSave(e) {
this.imgStyle = e;
this.layout = e;
},
onDel() {
this.$refs['bi-photo'].style.display = 'none';
......
......@@ -70,7 +70,8 @@ import {
export default {
name: 'select-img',
props: {
selected: {
// 已勾选数据 [url,url]
imageUrl: {
type: Array,
default() {
return [];
......
......@@ -16,13 +16,13 @@
>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="布局样式:">
<el-radio-group v-model="form.layout">
<el-radio-group v-model="form.imageStyle">
<el-radio :label="1">流式布局</el-radio>
<el-radio :label="2">平铺布局</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="图片大小:">
<el-radio-group v-model="form.size">
<el-radio-group v-model="form.imageSize">
<el-radio :label="1">大图</el-radio>
<el-radio :label="2">中图</el-radio>
<el-radio :label="3">小图</el-radio>
......@@ -43,12 +43,12 @@ import { Dialog, Button, Radio, RadioGroup, Form, FormItem } from 'element-ui';
export default {
name: 'select-style',
props: {
imgStyle: {
layout: {
type: Object,
default() {
return {
layout: 2,
size: 2
imageStyle: 2,
imageSize: 2
};
}
}
......@@ -65,15 +65,15 @@ export default {
return {
selectStyleShow: false,
form: {
layout: 2,
size: 2
imageStyle: 2,
imageSize: 2
}
};
},
methods: {
openDialog() {
this.selectStyleShow = true;
Object.assign(this.form, this.imgStyle);
Object.assign(this.form, this.layout);
},
handleClose() {
this.selectStyleShow = false;
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!