img_shadow_blur

A Vue component to img_shadow_blur 一个图片阴影插件

安装

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

使用

// ES6
import imgshadowblur from 'img_shadow_blur.js'
// require
var imgshadowblur = require('imgShadowBlur')

Vue.use(imgshadowblur)

// 或者直接使用script导入
<script src="./img-shadow-blur.js"></script>

// 作为组件的方式使用
<is-img />

##配置

<is-img 
    url="bg.png" width="100px" height="100px" transition="hover"
    :size="1" :opacity="0.5" :blur="10" :tranSize="1.2"
    :tranOpacity="0.8" :tranBlur="20" :animate="true" :time="0.3"/>

##属性

| 属性名 | 描述 | 类型 | 默认值 | | :---------: | :-----------------------------------------------------: | :-----: | :-----: | | url | 图片地址 | String | | | width | 图片宽度，需自带单位如px或rem | String | | | height | 图片高度，需自带单位如px或rem | String | | | transition | 阴影过渡动画，可选值为"none"、"hover"、"press"、"click" | String | hover | | size | 阴影初始大小 | Number | 0.9 | | opacity | 阴影透明度 | Number | 0.6 | | blur | 阴影模糊度 | Number | 20 | | tranSize | 当hover或press或激活时阴影的大小 | Number | 1 | | tranOpacity | 当hover或press或激活时阴影的透明度 | Number | 0.8 | | tranBlur | 当hover或press或激活时阴影的模糊度 | Number | 25 | | animate | 过渡动画是否开启 | Boolean | true | | time | 过渡动画的时间 | Number | 0.3 |