vue.2.4.0.js_Vue.js 2.0图像填充指令-CSDN博客

本文介绍了Vue.js 2.0的一个图像填充指令，该指令用于确保图像能完全填充其容器。内容包括安装、使用方法和可选参数。

vue.2.4.0.js

Vue图像填充 (vue-imagefill)

The Vue directive for making images fill their containers.

用于使图像填充其容器的Vue指令。

安装 (Install)

$ npm install vue-imagefill

用法 (Usage)

<template>
  <div>
    <div class="image-wrap" v-flex="1">
      <img v-center="img">
    </div>
  </div>
</template>

import Vue from 'vue'
import vueImagefill from 'vue-imagefill'
import 'vue-imagefill/src/style/vue-imagefill.css'
Vue.use(vueImagefill)

export default {
  data () {
    return {
      img: require('~/assets/images/text.jpg')
    }
  }
}

.image-wrap {
  width: 200px;
  overflow: hidden;
  margin: 150px auto;
}
img {
  width: 100%;
}

选件 (Options)

directives	description	default	options
`v-flex`	image scaling. width/height, example: `v-flex="150/200"`	`1`	`Number`
`v-center`	image src or none

指令	描述	默认	选项
`v-flex`	图像缩放。宽度/高度，例如： `v-flex="150/200"`	`1`	`Number`
`v-center`	图像src或无

翻译自: https://vuejsexamples.com/a-vue-js-2-0-images-fill-directives/

vue.2.4.0.js