123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475 |
- <template>
- <div class="basic-image">
- <template v-for="(image,index) in fileList" :key="index">
- <img-row :file="image"
- :config="config"
- @preview="handlePictureCardPreview"></img-row>
- </template>
- <el-dialog title="图片预览" v-model="dialogVisible">
- <Media style="width:100%" :type="config.mediaType" :src="dialogImageUrl" alt=""/>
- </el-dialog>
- </div>
- </template>
- <script>
- import { ref } from 'vue'
- import { formInputProps } from '../../form-input-props'
- import { ElDialog } from 'element-plus'
- import ImgRow from './img-row'
- import Media from './media'
- import { uploadProps } from '../file/upload'
- export default {
- props: formInputProps,
- components: { ElDialog, ImgRow, Media },
- emits: ['update:modelValue'],
- setup (props, context) {
- const { fileList } = uploadProps(props, context)
- const dialogImageUrl = ref('')
- const dialogVisible = ref(false)
- const handlePictureCardPreview = (file) => {
- dialogImageUrl.value = props.config.imgTemplate ? props.config.imgTemplate(file.url) : file.url
- dialogVisible.value = true
- }
- return {
- fileList,
- handlePictureCardPreview,
- dialogVisible,
- dialogImageUrl
- }
- }
- }
- </script>
- <style lang="less" scoped>
- .basic-image{
- .image-plus{
- background-color: #fbfdff;
- border: 1px dashed #c0ccda;
- border-radius: 6px;
- box-sizing: border-box;
- width: 148px;
- height: 148px;
- cursor: pointer;
- line-height: 146px;
- vertical-align: top;
- text-align: center;
- i{
- font-size: 28px;
- color: #8c939d;
- }
- &:hover{
- border: 1px dashed #409eff;
- }
- }
- .upload-plus{
- display: inline-block;
- vertical-align: top;
- }
- .dialog-image{
- display: block;
- max-height: 50vh;
- margin: 0 auto;
- }
- }
- </style>
|