1.0.0 • Published 6 years ago

img_shadow_blur v1.0.0

Weekly downloads
1
License
MIT
Repository
github
Last release
6 years ago

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或remString
height图片高度,需自带单位如px或remString
transition阴影过渡动画,可选值为"none"、"hover"、"press"、"click"Stringhover
size阴影初始大小Number0.9
opacity阴影透明度Number0.6
blur阴影模糊度Number20
tranSize当hover或press或激活时阴影的大小Number1
tranOpacity当hover或press或激活时阴影的透明度Number0.8
tranBlur当hover或press或激活时阴影的模糊度Number25
animate过渡动画是否开启Booleantrue
time过渡动画的时间Number0.3