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.
141 lines
2.4 KiB
141 lines
2.4 KiB
<template>
|
|
<view @click.stop="$emit('click')" class="niu-image" :class="[inline?'niu-image--inline':'']" :style="[customStyle]">
|
|
<image v-if="preview" @click.stop="clickPreview" class="image" :mode="mode" :src="src"
|
|
:style="{borderRadius: radius,border:border}" :class="[circle?'niu-image--circle':'']"></image>
|
|
<image v-if="!preview" class="image" :mode="mode" :src="src" :style="{borderRadius: radius,border:border}"
|
|
:class="[circle?'niu-image--circle':'']"></image>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
mode: {
|
|
type: String,
|
|
default: 'scaleToFill'
|
|
},
|
|
radius: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
border: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
src: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
width: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
inline: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
height: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
circle: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
rect: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
preview: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
left: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
right: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
top: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
bottom: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
margin: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
|
|
};
|
|
},
|
|
methods: {
|
|
clickPreview(e) {
|
|
if (!this.preview) {
|
|
return
|
|
}
|
|
uni.previewImage({
|
|
urls: [this.src]
|
|
})
|
|
}
|
|
},
|
|
computed: {
|
|
customStyle() {
|
|
let style = {};
|
|
if (this.left) {
|
|
style.marginLeft = this.left
|
|
}
|
|
if (this.right) {
|
|
style.marginRight = this.right
|
|
}
|
|
if (this.top) {
|
|
style.marginTop = this.top
|
|
}
|
|
if (this.bottom) {
|
|
style.marginBottom = this.bottom
|
|
}
|
|
if (this.margin) {
|
|
style.margin = this.margin
|
|
}
|
|
let obj = {
|
|
width: this.width ? this.width : this.rect ? this.rect : '100%',
|
|
height: this.height ? this.height : this.rect ? this.rect : '100%',
|
|
|
|
...style
|
|
}
|
|
return obj
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.niu-image {
|
|
|
|
// 不要设置inline-block，会出问题
|
|
&--circle {
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
&--inline {
|
|
display: inline-block;
|
|
line-height: 1;
|
|
}
|
|
|
|
font-size: 0;
|
|
|
|
.image {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
</style>
|
|
|