You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
96 lines
1.9 KiB
96 lines
1.9 KiB
<template>
|
|
<img :src="captchaSrc" @click="onClick" :class="isRotate ? 'run' : ''" :style="{
|
|
width:width ? width +'rpx' : '100%',
|
|
height:height ? height +'rpx' : '100%',
|
|
marginTop:marginTop ? marginTop +'rpx' : '',
|
|
marginBottom:marginBottom ? marginBottom +'rpx' : '',
|
|
marginLeft:marginLeft ? marginLeft +'rpx' : '',
|
|
marginRight:marginRight ? marginRight +'rpx' : '',
|
|
borderRadius:borderRadius ? borderRadius +'rpx' : '',
|
|
opacity: opacity ? opacity : '',
|
|
'background-size': `${width ? width+'rpx':'100%'} ${height ? height+'rpx':'100%'}`
|
|
}" alt="-">
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'imageBox',
|
|
props: {
|
|
src: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
width: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
height: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
marginTop: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
marginBottom: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
marginLeft: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
marginRight: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
borderRadius: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
opacity: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
isRotate: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
|
|
}
|
|
},
|
|
computed: {
|
|
captchaSrc() {
|
|
try{
|
|
if (this.src.indexOf('data:image/png;') !== -1) {
|
|
return this.src.replace(/[\r\n]/g, "")
|
|
} else {
|
|
return this.src
|
|
}
|
|
}catch(err){
|
|
console.info('err-----------------------',err)
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
onClick() {
|
|
this.$emit('click')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@keyframes rotate {
|
|
0%{-webkit-transform:rotate(0deg);}
|
|
25%{-webkit-transform:rotate(90deg);}
|
|
50%{-webkit-transform:rotate(180deg);}
|
|
75%{-webkit-transform:rotate(270deg);}
|
|
100%{-webkit-transform:rotate(360deg);}
|
|
}
|
|
.run { animation: rotate 2s linear infinite; }
|
|
</style>
|