增加other分包页面
我的页面里增加跳转other分包跳转（仅在ios不是浏览器审核时展示）
This commit is contained in:
298
tuniao-ui/components/tn-avatar/tn-avatar.vue
Normal file
298
tuniao-ui/components/tn-avatar/tn-avatar.vue
Normal file
@@ -0,0 +1,298 @@
|
||||
<template>
|
||||
<view
|
||||
class="tn-avatar-class tn-avatar"
|
||||
:class="[backgroundColorClass,avatarClass]"
|
||||
:style="[avatarStyle]"
|
||||
@tap="click"
|
||||
>
|
||||
<image
|
||||
v-if="showImg"
|
||||
class="tn-avatar__img"
|
||||
:class="[imgClass]"
|
||||
:src="src"
|
||||
:mode="imgMode || 'aspectFill'"
|
||||
@error="loadImageError"
|
||||
></image>
|
||||
<view v-else class="tn-avatar__text" >
|
||||
<view v-if="text">{{ text }}</view>
|
||||
<view v-else :class="[`tn-icon-${icon}`]"></view>
|
||||
</view>
|
||||
|
||||
<!-- 角标 -->
|
||||
<tn-badge
|
||||
v-if="badge && (badgeIcon || badgeText)"
|
||||
:radius="badgeSize"
|
||||
:backgroundColor="badgeBgColor"
|
||||
:fontColor="badgeColor"
|
||||
:fontSize="badgeSize - 8"
|
||||
:absolute="true"
|
||||
:top="badgePosition[0]"
|
||||
:right="badgePosition[1]"
|
||||
>
|
||||
<view v-if="badgeIcon && badgeText === ''">
|
||||
<view :class="[`tn-icon-${badgeIcon}`]"></view>
|
||||
</view>
|
||||
<view v-else>
|
||||
{{ badgeText }}
|
||||
</view>
|
||||
</tn-badge>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import componentsColorMixin from '../../libs/mixin/components_color.js'
|
||||
export default {
|
||||
mixins: [componentsColorMixin],
|
||||
name: 'tn-avatar',
|
||||
props: {
|
||||
// 序号
|
||||
index: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
// 头像类型
|
||||
// square 带圆角正方形 circle 圆形
|
||||
shape: {
|
||||
type: String,
|
||||
default: 'circle'
|
||||
},
|
||||
// 大小
|
||||
// sm 小头像 lg 大头像 xl 加大头像
|
||||
// 如果为其他则认为是直接设置大小
|
||||
size: {
|
||||
type: [Number, String],
|
||||
default: ''
|
||||
},
|
||||
// 是否显示阴影
|
||||
shadow: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否显示边框
|
||||
border: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 边框颜色
|
||||
borderColor: {
|
||||
type: String,
|
||||
default: 'rgba(0, 0, 0, 0.1)'
|
||||
},
|
||||
// 边框大小, rpx
|
||||
borderSize: {
|
||||
type: Number,
|
||||
default: 2
|
||||
},
|
||||
// 头像路径
|
||||
src: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 文字
|
||||
text: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 图标
|
||||
icon: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 当设置为显示头像信息时，
|
||||
// 图片的裁剪模式
|
||||
imgMode: {
|
||||
type: String,
|
||||
default: 'aspectFill'
|
||||
},
|
||||
// 是否显示角标
|
||||
badge: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 设置显示角标后，角标大小
|
||||
badgeSize: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
// 角标背景颜色
|
||||
badgeBgColor: {
|
||||
type: String,
|
||||
default: '#AAAAAA'
|
||||
},
|
||||
// 角标字体颜色
|
||||
badgeColor: {
|
||||
type: String,
|
||||
default: '#FFFFFF'
|
||||
},
|
||||
// 角标图标
|
||||
badgeIcon: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 角标文字，优先级比icon高
|
||||
badgeText: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 角标坐标
|
||||
// [top, right]
|
||||
badgePosition: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [0, 0]
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 图片显示是否发生错误
|
||||
imgLoadError: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
showImg() {
|
||||
// 如果设置了图片地址，则为显示图片，否则为显示文本
|
||||
return this.text === '' && this.icon === ''
|
||||
},
|
||||
avatarClass() {
|
||||
let clazz = ''
|
||||
clazz += ` tn-avatar--${this.shape}`
|
||||
|
||||
if (this._checkSizeIsInline()) {
|
||||
clazz += ` tn-avatar--${this.size}`
|
||||
}
|
||||
|
||||
if (this.shadow) {
|
||||
clazz += ' tn-avatar--shadow'
|
||||
}
|
||||
|
||||
return clazz
|
||||
},
|
||||
avatarStyle() {
|
||||
let style = {}
|
||||
|
||||
if (this.backgroundColorStyle) {
|
||||
style.background = this.backgroundColorStyle
|
||||
} else if (this.shadow && this.showImg) {
|
||||
style.backgroundImage = `url(${this.src})`
|
||||
}
|
||||
|
||||
if (this.border) {
|
||||
style.border = `${this.borderSize}rpx solid ${this.borderColor}`
|
||||
}
|
||||
|
||||
if (!this._checkSizeIsInline()) {
|
||||
style.width = this.size
|
||||
style.height = this.size
|
||||
}
|
||||
|
||||
return style
|
||||
},
|
||||
imgClass() {
|
||||
let clazz = ''
|
||||
clazz += ` tn-avatar__img--${this.shape}`
|
||||
|
||||
return clazz
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 加载图片失败
|
||||
loadImageError() {
|
||||
this.imgLoadError = true
|
||||
},
|
||||
// 点击事件
|
||||
click() {
|
||||
this.$emit("click", this.index)
|
||||
},
|
||||
|
||||
// 检查是否使用内置的大小进行设置
|
||||
_checkSizeIsInline() {
|
||||
if (/^(xs|sm|md|lg|xl|xxl)$/.test(this.size)) return true
|
||||
else return false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.tn-avatar {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: inline-flex;
|
||||
/* #endif */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: $tn-font-holder-color;
|
||||
// color: #FFFFFF;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
z-index: 1;
|
||||
|
||||
&--sm {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
&--lg {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
}
|
||||
&--xl {
|
||||
width: 128rpx;
|
||||
height: 128rpx;
|
||||
}
|
||||
|
||||
&--square {
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
&--circle {
|
||||
border-radius: 5000rpx;
|
||||
}
|
||||
|
||||
&--shadow {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: " ";
|
||||
display: block;
|
||||
background: inherit;
|
||||
filter: blur(10rpx);
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 10rpx;
|
||||
left: 10rpx;
|
||||
z-index: -1;
|
||||
opacity: 0.4;
|
||||
transform-origin: 0 0;
|
||||
border-radius: inherit;
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
&__img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&--square {
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
&--circle {
|
||||
border-radius: 5000rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&__text {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user