vue为图像创建逼真的阴影– vue-image-shadow

vue为图像创建逼真的阴影– vue-image-shadow
插件名称 vue-image-shadow
发布时间 2020年12月15日
插件作者 image-component

一个Vue.js组件,可将可配置的,逼真的交互式阴影效果应用于图像。

安装和下载:

# Yarn
$ yarn add vue-image-shadow --save

# NPM
$ npm i vue-image-shadow --save

如何使用它:

1.导入并注册组件。

import ImageShadow from 'vue-image-shadow'
Vue.component('image-shadow', ImageShadow)

2.将图像阴影组件添加到应用程序,并按如下所示定义图像的路径:

<image-shadow :width="200" :src="this.myscr">
</image-shadow>
export default {
  data() {
    return {
      mySrc: '1.jpg'
    }
  }
}

3.使用以下组件道具配置图像阴影。

<image-shadow 
  :width="200" 
  :src="this.mySrc"
  class-name="example"
  :shadow-blur="10"
  shadow-hover>
</image-shadow>
className: {
  type: String
},
shadowBlur: {
  type: Number,
  default: 20
},
shadowHover: {
  type: Boolean,
  default: false
},
shadowRadius: {
  type: Number,
  default: 8
},
src: {
  type: String,
  required: true
},
width: {
  type: Number,
  default: 300
},

变更日志:

v1.1.0(12/15/2020)

  • 壮举:添加alt和perf CSS