style.vue
1.94 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
<template>
<el-dialog
title="选择样式"
:visible.sync="selectStyleShow"
width="25%"
center
:before-close="handleClose"
>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="布局样式:">
<el-radio-group v-model="form.layoutStyle">
<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.imgSize">
<el-radio :label="1">大图</el-radio>
<el-radio :label="2">中图</el-radio>
<el-radio :label="3">小图</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="handleClose">取 消</el-button>
<el-button type="primary" @click="handleSave">保 存</el-button>
</span>
</el-dialog>
</template>
<script>
import { Dialog, Button, Radio, RadioGroup, Form, FormItem } from 'element-ui';
export default {
name: 'selectStyle',
props: {
selectStyleShow: Boolean
},
mixins: [],
components: {
[Form.name]: Form,
[FormItem.name]: FormItem,
[Dialog.name]: Dialog,
[Button.name]: Button,
[RadioGroup.name]: RadioGroup,
[Radio.name]: Radio
},
data() {
return {
form: {
layoutStyle: 1,
imgSize: 2
}
};
},
methods: {
handleClose() {
this.$emit('handleClose');
},
handleSave() {
this.$emit('handleSave', this.form);
}
},
computed: {},
created() {}
};
</script>
<style scoped lang="scss">
.select-img-main {
display: flex;
flex-wrap: wrap;
.select-img-item {
border: 1px solid rgb(182, 185, 188);
margin: 4px;
position: relative;
.select-box {
position: absolute;
top: 15px;
right: 15px;
}
}
img {
width: 200px;
height: 150px;
}
}
</style>