<template>
    <div>
        <h4>默认模式</h4>
        <div :style="{ width: '100%', height: '250px' }">
            <h-image src="https://front-xps-cdn.xsyx.xyz/2019/10/19/39933133.jpg"/>
        </div>
        <h4>contain模式</h4>
        <div :style="{ width: '100%', height: '250px' }">
            <h-image src="https://front-xps-cdn.xsyx.xyz/2019/10/19/39933133.jpg" mode="contain"/>
        </div>
        <h4>fill模式</h4>
        <div :style="{ width: '100%', height: '250px' }">
            <h-image src="https://front-xps-cdn.xsyx.xyz/2019/10/19/39933133.jpg" mode="fill"/>
        </div>
        <h4>scale-down模式</h4>
        <div :style="{ width: '100%', height: '250px' }">
            <h-image src="https://front-xps-cdn.xsyx.xyz/2019/10/19/39933133.jpg" mode="scale-down"/>
        </div>
        <h4>none模式</h4>
        <div :style="{ width: '100%', height: '250px' }">
            <h-image src="https://front-xps-cdn.xsyx.xyz/2019/10/19/39933133.jpg" mode="none"/>
        </div>
    </div>
</template>

<script>
import hImage from './index'
export default {
    name: "image-demo",
    data() {
        return {
            type: 'primary',
            value: 2
        }
    },
    components: {
        hImage
    },
    methods: {
        aa() {
            console.log( '数字', this.value );
        }
    }
}
</script>