lingfeng-admin/src/components/common/singleImg.vue

<template>
    <div class="singleImg">
        <div class="single">
            <!--<img :src="defaultImg" v-if="HeadImg===''">-->
            <div v-if="HeadImg === ''" class="add-wrap">
                <div class="defaultImg">
                    <p class="add">+</p>
                    <p class="text">图片</p>
                    <p class="tips">支持扩展名：.jpg .png</p>
                </div>
                <input
                    type="file"
                    class="file"
                    @change="addChangeImg"
                    ref="inputImg"
                    accept="image/gif, image/jpeg, image/png, image/jpg"
                />
            </div>
            <div
                v-else
                class="edit-wrap"
                :style="{ width: setWidth, height: setHeight }"
            >
                <img :src="HeadImg" />
                <input
                    type="file"
                    class="file"
                    @change="addChangeImg"
                    ref="inputImg"
                    accept="image/gif, image/jpeg, image/png, image/jpg"
                />
            </div>
        </div>
        <p class="tips" v-if="size">建议尺寸：{{ size }}</p>
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
        name: 'singleImg',
        props: {
            img: {
                type: String,
            },
            imgType: {
                type: String,
                default: 'other',
            },
            Width: {
                type: Number,
            },
            Height: {
                type: Number,
            },
            Size: {
                type: String,
            },
        },
        data() {
            return {
                defaultImg: this.$Public.defaultImg,
                HeadImg: this.img,
                setWidth: this.Width + 'px',
                setHeight: this.Height + 'px',
                size: this.Size,
            }
        },
        created() {},
        methods: {
            addChangeImg(e) {
                // 上传主图
                this.upPic(e, (res) => {
                    console.log(111, res)
                    this.$emit('getPic', res)
                    this.HeadImg = res;
                    this.$refs.inputImg.value = ''
                })
            },
            upPic(e, fun) {
                // 上传图片
                let file = e.target.files[0]
                if (!file) {
                    return
                }
                this.request.upPic({ prefix: this.imgType, file: file }).then(
                    (res) => {
                        fun(res)
                    },
                    (res) => {}
                )
            },
        },
        watch: {
            img(val) {
                this.HeadImg = val
            },
            Width(val) {
                this.setWidth = val + 'px'
            },
            Height(val) {
                this.setHeight = val + 'px'
            },
            Size(val) {
                this.size = val
            },
        },
    }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    @import '~assets/main.styl';

    .single {
        flex-x(flex-start);

        .add-wrap {
            position: relative;
            width: 130px;
            height: 130px;
            // border: 1px solid border-color;

            .defaultImg {
                width: 130px;
                height: 130px;
                border: 2px dashed border-color;
                background:#F6F6F6

                .add {
                    font-size: 40px;
                    color: gray3;
                    font-weight:100
                    line-height: 1;
                }

                .text {
                    font-size: 14px;
                    color: gray3;
                }

                flex-y(center, center);

                p {
                    text-align: center;
                }
            }
        }

        .edit-wrap {
            position: relative;
            width: 100px;
            height: 100px;

            img {
                width: 100%;
                height: 100%;
            }
        }

        input {
            width: 100%;
            height: 100%;
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
        }
    }

    p {
        float: left;
        width: 150px;
    }
</style>