vue-imgmode

description

这是一个简单的针对图片显示的组件，模仿了微信小程序组件<image/>的思路，让图片按照你的配置显示

安装

npm install vue-imgmode --save

Usage

步骤一

在 main.js 入口文件引入

import VueImgmode from 'vue-imgmode'
Vue.use(VueImgmode)

步骤二

在组件中即可使用
<vue-imgmode :mode="imgmode" :width="`300px`" :height="`200px`"  :src="require('@/assets/logo.png')"></vue-imgmode>

Attributes:

参数	说明	类型	可选值	默认值
src	要显示的图片路径>	String		空
alt	要显示的图片alt信息	String		空
title	要显示的图片title信息	String		空
width	要显示的图片容器div的宽度	String		300px
height	要显示的图片容器div的高度	String		200px
mode	要显示的图片的显示方式	String	scaleToFill、aspectFit、top等	widthFix
vclass	需要给图片容器添加的类名	String		空

mode 可选值:

参数	说明
scaleToFill	缩放：不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 img 元素
aspectFit	缩放：保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill	缩放：保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix	缩放：保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
top	裁剪：不缩放图片，只显示图片的顶部区域
bottom	裁剪：不缩放图片，只显示图片的底部区域
center	裁剪：不缩放图片，只显示图片的中间区域
left	裁剪：不缩放图片，只显示图片的左边区域
right	裁剪：不缩放图片，只显示图片的右边区域
topLeft	裁剪：不缩放图片，只显示图片的左上边区域
topRight	裁剪：不缩放图片，只显示图片的右上边区域
bottomLeft	裁剪：不缩放图片，只显示图片的左下边区域
bottomRight	裁剪：不缩放图片，只显示图片的右下边区域

example

#### 组件里面加入插槽 可以用来添加小图标等

<template>
    <vue-imgmode :mode="imgmode" :width="`300px`" :height="`200px`"  :src="src">
       <div style="width: 10px;height: 10px;background: red;position: absolute;left: 0;top:0;z-index: 9">小图标</div>
    </vue-imgmode>
</template>

<script>
    export default {
        name: 'DoImgmode',
        data () {
            return {
                imgmode: 'aspectFit',
                src: require('@/assets/logo.png')
            }
        }
    }
</script>