molong/tuniao-ui
1
0
Fork 0
mirror of https://gitee.com/TSpecific/tuniao-ui.git synced 2026-06-08 12:33:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

更新组件演示页面，方便用户直接使用组件，去除tn-button的默认背景色，tn-avatar修改参数默认值，修复tn-avatar-group最开始头像进行了偏移、修复无法使用标签的bug，tn-badge修改参数默认值，tn-collapse-item修复背景颜色失效问题，滚动通知移除默认背景颜色和字体大小，tn-count-down修复时间单位不正确问题，列表组件修复背景颜色问题，tn-nav-bar返回按钮修改为可进行修改的图标，tn-step添加点击步骤进行跳转，tn-loading修复默认激活颜色出错问题，tn-tag移除默认背景颜色，优化阴影大小css

Browse Source
This commit is contained in:
JaylenTech
2022-02-08 19:55:15 +08:00
parent 043ee3f585
commit 946bb52c03
94 changed files with 6296 additions and 4727 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tuniao-ui/components/tn-avatar-group/tn-avatar-group.vue
+19 -17
View File
@@ -1,6 +1,6 @@
<template>
<view class="tn-avatar-group-class tn-avatar-group">
<view v-for="(item, index) in lists" :key="index" class="tn-avatar-group__item" :style="[itemStyle]">
<view v-for="(item, index) in lists" :key="index" class="tn-avatar-group__item" :style="[itemStyle(index)]">
<tn-avatar
:src="item.src || ''"
:text="item.text || ''"
@@ -54,24 +54,26 @@
},
computed: {
itemStyle() {
let style = {}
if (this._checkSizeIsInline()) {
switch(this.size) {
case 'sm':
style.marginLeft = `${-48 * this.gap}rpx`
break
case 'lg':
style.marginLeft = `${-96 * this.gap}rpx`
break
case 'xl':
style.marginLeft = `${-128 * this.gap}rpx`
break
return (index) => {
let style = {}
if (this._checkSizeIsInline()) {
switch(this.size) {
case 'sm':
style.marginLeft = index != 0 ? `${-48 * this.gap}rpx` : ''
break
case 'lg':
style.marginLeft = index != 0 ? `${-96 * this.gap}rpx` : ''
break
case 'xl':
style.marginLeft = index != 0 ? `${-128 * this.gap}rpx` : ''
break
}
} else {
const size = Number(this.size.replace(/(px|rpx)/g, '')) || 64
style.marginLeft = index != 0 ? `-${size * this.gap}rpx` : ''
}
} else {
const size = Number(this.size.replace(/(px|rpx)/g, '')) || 64
style.marginLeft = `-${size * this.gap}rpx`
return style
}
return style
}
},
data() {
tuniao-ui/components/tn-avatar/tn-avatar.vue
+2 -2
View File
@@ -112,7 +112,7 @@
// 设置显示角标后，角标大小
badgeSize: {
type: Number,
default: 28
default: 0
},
// 角标背景颜色
badgeBgColor: {
@@ -226,7 +226,7 @@
align-items: center;
justify-content: center;
background-color: $tn-font-holder-color;
color: #FFFFFF;
// color: #FFFFFF;
white-space: nowrap;
position: relative;
width: 64rpx;
tuniao-ui/components/tn-badge/tn-badge.vue
+8 -7
View File
@@ -37,7 +37,7 @@
// 外边距
margin: {
type: String,
default: '0'
default: ''
},
// 是否为一个点
dot: {
@@ -52,12 +52,12 @@
// top
top: {
type: [String, Number],
default: '0'
default: ''
},
// right
right: {
type: [String, Number],
default: '0'
default: ''
},
// 居中 对齐右上角
translateCenter: {
@@ -87,6 +87,7 @@
if (this.radius !== 0) {
style.width = this.radius + 'rpx'
style.height = this.radius + 'rpx'
style.lineHeight = this.radius + 'rpx'
// style.borderRadius = (this.radius * 8) + 'rpx'
}
@@ -142,17 +143,17 @@
.tn-badge {
width: auto;
height: auto;
line-height: 1;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
font-size: 18rpx;
background-color: $tn-main-color;
color: #FFFFFF;
font-size: 20rpx;
background-color: #FFFFFF;
// color: #FFFFFF;
border-radius: 100rpx;
padding: 4rpx 8rpx;
line-height: initial;
&--dot {
width: 8rpx;
tuniao-ui/components/tn-button/tn-button.vue
+11 -7
View File
@@ -129,7 +129,7 @@
// 阴影
if (this.shadow) {
if (this.backgroundColorClass !== '') {
if (this.backgroundColorClass !== '' && this.backgroundColorClass.indexOf('tn-bg') != -1) {
const color = this.backgroundColor.slice(this.backgroundColor.lastIndexOf('-') + 1)
clazz += ` tn-shadow-${color}`
} else {
@@ -202,15 +202,20 @@
if (!this.backgroundColorClass) {
if (this.plain) {
style.borderColor = this.backgroundColorStyle || '#01BEFF'
style.borderColor = this.backgroundColorStyle || '#080808'
} else {
style.backgroundColor = this.backgroundColorStyle || '#01BEFF'
style.backgroundColor = this.backgroundColorStyle || '#FFFFFF'
}
}
// 设置阴影
if (this.shadow && !this.backgroundColorClass) {
style.boxShadow = `6rpx 6rpx 8rpx ${(this.backgroundColorStyle || '#01BEFF')}10`
if (this.backgroundColorStyle.indexOf('#') != -1) {
style.boxShadow = `6rpx 6rpx 8rpx ${(this.backgroundColorStyle || '#000000')}10`
} else if (this.backgroundColorStyle.indexOf('rgb') != -1 || this.backgroundColorStyle.indexOf('rgba') != -1 || !this.backgroundColorStyle) {
style.boxShadow = `6rpx 6rpx 8rpx ${(this.backgroundColorStyle || 'rgba(0, 0, 0, 0.1)')}`
}
}
return style
@@ -278,12 +283,11 @@
text-align: center;
text-decoration: none;
overflow: visible;
margin-left: inherit;
transform: translate(0rpx, 0rpx);
margin-right: inherit;
// background-color: $tn-mai
border-radius: 12rpx;
color: #FFFFFF;
// color: $tn-font-color;
margin: 0;
&--plain {
background-color: transparent !important;
tuniao-ui/components/tn-collapse-item/tn-collapse-item.vue
+4
View File
@@ -195,7 +195,9 @@
font-size: 30rpx;
line-height: 1;
padding: 24rpx 0;
padding-left: 24rpx;
text-align: left;
background-color: #FFFFFF;
&__title {
flex: 1;
@@ -226,6 +228,8 @@
font-size: 28rpx;
color: $tn-font-color;
text-align: left;
background-color: #FFFFFF;
padding-left: 24rpx;
}
}
}
tuniao-ui/components/tn-column-notice/tn-column-notice.vue
+2 -2
View File
@@ -134,8 +134,8 @@
fontStyle() {
return (type) => {
let style = {}
style.color = this.fontColorStyle ? this.fontColorStyle : '#080808'
style.fontSize = this.fontSizeStyle ? this.fontSizeStyle : '26rpx'
style.color = this.fontColorStyle ? this.fontColorStyle : ''
style.fontSize = this.fontSizeStyle ? this.fontSizeStyle : ''
if (type === 'leftIcon' && this.leftIconSize) {
style.fontSize = this.leftIconSize + 'rpx'
}
tuniao-ui/components/tn-count-down/tn-count-down.vue
+3 -3
View File
@@ -11,7 +11,7 @@
</view>
</view>
<view
v-if="showDays && (hideZeroDay || (!hideZeroDay && d != '00'))"
v-if="showHours && (hideZeroDay || (!hideZeroDay && d != '00'))"
class="tn-countdown__separator"
:style="{
fontSize: separatorSize + 'rpx',
@@ -33,7 +33,7 @@
</view>
</view>
<view
v-if="showHours"
v-if="showMinutes"
class="tn-countdown__separator"
:style="{
fontSize: separatorSize + 'rpx',
@@ -55,7 +55,7 @@
</view>
</view>
<view
v-if="showMinutes"
v-if="showSeconds"
class="tn-countdown__separator"
:style="{
fontSize: separatorSize + 'rpx',
tuniao-ui/components/tn-fab/tn-fab.vue
+523
View File
@@ -0,0 +1,523 @@
<template>
<view class="tn-fab-class tn-fab" @touchmove.stop.prevent>
<view
class="tn-fab__box"
:class="{'tn-fab--right': left === 'auto'}"
:style="{
left: $t.string.getLengthUnitValue(fabLeft || left),
right: $t.string.getLengthUnitValue(fabRight || right),
bottom: $t.string.getLengthUnitValue(fabBottom || bottom),
zIndex: elZIndex
}"
>
<view
v-if="visibleSync"
class="tn-fab__btns"
:class="[`tn-fab__btns__animation--${animationType}`,
showFab ? `tn-fab__btns--visible--${animationType}` : ''
]"
>
<view
v-for="(item, index) in btnList"
:key="index"
class="tn-fab__item"
:class="[
`tn-fab__item__animation--${animationType}`,
{'tn-fab__item--left': right === 'auto'}
]"
:style="[fabItemStyle(index)]"
@tap.stop="handleClick(index)"
>
<!-- 带图标或者图片时显示的文字信息 -->
<view
v-if="animationType !== 'around' && (item.imgUrl || item.icon)"
:class="[left === 'auto' ? 'tn-fab__item__text--right' : 'tn-fab__item__text--left']"
:style="{
color: item.textColor || '#FFF',
fontSize: $t.string.getLengthUnitValue(item.textSize || 28)
}"
>{{ item.text || '' }}</view>
<!-- 带图片或者图标时的图片、图标信息 -->
<view
class="tn-fab__item__btn"
:class="[!item.bgColor ? backgroundColorClass : '']"
:style="{
width: $t.string.getLengthUnitValue(width),
height: $t.string.getLengthUnitValue(height),
lineHeight: $t.string.getLengthUnitValue(height),
backgroundColor: item.bgColor || backgroundColorStyle || '#01BEFF',
borderRadius: $t.string.getLengthUnitValue(radius)
}"
>
<!-- 无图片和无图标时只显示文字 -->
<view
v-if="!item.imgUrl && !item.icon"
class="tn-fab__item__btn__title"
:style="{
color: item.textColor || '#fff',
fontSize: $t.string.getLengthUnitValue(item.textSize || 28)
}"
>{{ item.text || '' }}</view>
<!-- 图标 -->
<view
v-if="item.icon"
class="tn-fab__item__btn__icon"
:class="[`tn-icon-${item.icon}`]"
:style="{
color: item.iconColor || '#fff',
fontSize: $t.string.getLengthUnitValue(item.iconSize || iconSize || 64)
}"
></view>
<!-- 图片 -->
<image
v-else-if="!item.icon && item.imgUrl"
class="tn-fab__item__btn__image"
:style="{
width: $t.string.getLengthUnitValue(item.imgWidth || 64),
height: $t.string.getLengthUnitValue(item.imgHeight || 64),
}"
:src="item.imgUrl"
></image>
</view>
</view>
</view>
<view
class="tn-fab__item__btn tn-fab__item__btn--fab"
:class="[backgroundColorClass, fontColorClass, {'tn-fab__item__btn--active': showFab}]"
:style="{
width: $t.string.getLengthUnitValue(width),
height: $t.string.getLengthUnitValue(height),
backgroundColor: backgroundColorStyle || !backgroundColorClass ? '#01BEFF' : '',
color: fontColorStyle || '#fff',
borderRadius: $t.string.getLengthUnitValue(radius),
zIndex: elZIndex - 1
}"
@tap.stop="fabClick"
>
<slot>
<view class="tn-fab__item__btn__icon" :class="[`tn-icon-${icon}`]" :style="{fontSize: $t.string.getLengthUnitValue(iconSize || 64)}"></view>
</slot>
</view>
</view>
<view v-if="visibleSync && showMask" class="tn-fab__mask" :class="{'tn-fab__mask--visible': showFab}" :style="{zIndex: elZIndex - 3}" @tap="clickMask()"></view>
</view>
</template>
<script>
import componentsColorMixin from '../../libs/mixin/components_color.js'
export default {
name: 'tn-fab',
mixins: [componentsColorMixin],
props: {
// 按钮列表
// {
// // 背景颜色
// bgColor: '#fff',
// // 图片地址
// imgUrl: '',
// // 图片宽度
// imgWidth: 60,
// // 图片高度
// imgHeight: 60,
// // 图标名称
// icon: '',
// // 图标尺寸
// iconSize: 60,
// // 图标颜色
// iconColor: '#fff',
// // 提示文字
// text: '',
// // 文字大小
// textSize: 30,
// // 字体颜色
// textColor: '#fff'
// }
btnList: {
type: Array,
default() {
return []
}
},
// 自定义悬浮按钮内容
customBtn: {
type: Boolean,
default: false
},
// 悬浮按钮的宽度
width: {
type: [String, Number],
default: 88
},
// 悬浮按钮的高度
height: {
type: [String, Number],
default: 88
},
// 图标大小
iconSize: {
type: [String, Number],
default: 64
},
// 图标名称
icon: {
type: String,
default: 'open'
},
// 按钮圆角
radius: {
type: [String, Number],
default: '50%'
},
// 按钮距离左边的位置
left: {
type: [String, Number],
default: 'auto'
},
// 按钮距离右边的位置
right: {
type: [String, Number],
default: 'auto'
},
// 按钮距离底部的位置
bottom: {
type: [String, Number],
default: 100
},
// 展示动画类型 up 往上展示 around 环绕
animationType: {
type: String,
default: 'up'
},
// 当动画为圆环时，每个弹出按钮之间的距离, 单位px
aroundBtnDistance: {
type: Number,
default: 10
},
zIndex: {
type: Number,
default: 0
},
// 显示遮罩
showMask: {
type: Boolean,
default: true
},
// 点击遮罩是否可以关闭
maskCloseable: {
type: Boolean,
default: true
}
},
data() {
return {
showFab: false,
visibleSync: false,
timer: null,
fabLeft: 0,
fabRight: 0,
fabBottom: 0,
fabBtnInfo: {
width: 0,
height: 0,
left: 0,
right: 0,
bottom: 0
},
systemInfo: {
width: 0,
height: 0
},
updateProps: false
}
},
computed: {
elZIndex() {
return this.zIndex || this.$t.zIndex.fab
},
propsData() {
return [this.width, this.height, this.left, this.right, this.bottom]
},
fabItemStyle() {
return (index) => {
let style = {
zIndex: this.elZIndex - 2
}
if (this.animationType === 'up' || !this.showFab) {
return style
}
let base = 1
if (this.left === 'auto') {
base = 1
} else if (this.right === 'auto') {
base = -1
}
style.transform = `rotate(${base * index * 60}deg) translateX(${(this.aroundBtnDistance + this.fabBtnInfo.width) * (-(base))}px)`
return style
}
}
},
watch: {
propsData() {
// 更新按钮信息
this.updateProps = true
}
},
mounted() {
this.$nextTick(() => {
this.getFabBtnRectInfo()
})
},
beforeDestroy() {
if (this.timer) {
clearTimeout(this.timer)
}
},
methods: {
// 按钮点击事件
handleClick(index) {
this.close()
this.$emit('click', {index: index})
},
// 点击悬浮按钮
fabClick() {
if (this.showFab) {
this.close()
} else {
// console.log(this.visibleSync);
if (this.visibleSync) {
this.visibleSync = false
return
}
this.open()
}
},
// 点击遮罩
clickMask() {
if (!this.showMask || !this.maskCloseable) return
this.close()
},
open() {
this.change('visibleSync', 'showFab', true)
this.translateFabPosition()
},
close() {
this.change('showFab', 'visibleSync', false)
this.fabLeft = 0
this.fabRight = 0
this.fabBottom = 0
},
// 关闭时先通过动画隐藏弹窗和遮罩，再移除整个组件
// 打开时，先渲染组件，延时一定时间再让遮罩和弹窗的动画起作用
change(param1, param2, status) {
this[param1] = status
if (status) {
// #ifdef H5 || MP
this.timer = setTimeout(() => {
this[param2] = status
this.$emit(status ? 'open' : 'close')
clearTimeout(this.timer)
}, 10)
// #endif
// #ifndef H5 || MP
this.$nextTick(() => {
this[param2] = status
this.$emit(status ? 'open' : 'close')
})
// #endif
} else {
this.timer = setTimeout(() => {
this[param2] = status
this.$emit(status ? 'open' : 'close')
clearTimeout(this.timer)
}, 250)
}
},
/******************** 旋转动画相关函数 ********************/
// 获取按钮的信息
async getFabBtnRectInfo() {
const systemInfo = uni.getSystemInfoSync()
const btnRectInfo = await this._tGetRect('.tn-fab__item__btn--fab')
if (!btnRectInfo) {
setTimeout(() => {
this.getFabBtnRectInfo()
}, 10)
return
}
console.log(btnRectInfo);
this.systemInfo = {
width: systemInfo.windowWidth,
height: systemInfo.windowHeight
}
this.fabBtnInfo.width = btnRectInfo.width
this.fabBtnInfo.height = btnRectInfo.height
this.fabBtnInfo.left = btnRectInfo.left
this.fabBtnInfo.right = btnRectInfo.right
this.fabBtnInfo.bottom = btnRectInfo.bottom
},
// 更新悬浮按钮的位置
translateFabPosition() {
if (this.updateProps) {
this.getFabBtnRectInfo()
this.updateProps = false
}
if (this.animationType === 'up') return
// 按钮组的宽度
const btnGroupWidth = this.fabBtnInfo.width + this.aroundBtnDistance + 10
// 判断当前按钮是在左边还是右边
if (this.left === 'auto' && btnGroupWidth > this.systemInfo.width - this.fabBtnInfo.right) {
// 距离不够需要移动
this.fabRight = btnGroupWidth + 'px'
} else if (this.right === 'auto' && btnGroupWidth > this.fabBtnInfo.left) {
this.fabLeft = btnGroupWidth + 'px'
}
if (btnGroupWidth > this.systemInfo.height - this.fabBtnInfo.bottom) {
this.fabBottom = btnGroupWidth + 'px'
}
}
}
}
</script>
<style lang="scss" scoped>
.tn-fab {
&__box {
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
position: fixed;
transition: all 0.25s ease-in-out;
}
&--right {
align-items: flex-end;
}
&__btns {
transition: all 0.25s cubic-bezier(0,.13,0,1.43);
transform-origin: 80% bottom;
&__animation--up {
opacity: 0;
transform: translateY(100%);
}
&__animation--around {
position: absolute;
top: 0;
left: 0;
}
&--visible--up {
// visibility: visible;
opacity: 1;
transform: translateY(0);
}
&--visible--around {
// visibility: visible;
// opacity: 1;
}
}
&__item {
display: flex;
justify-content: flex-end;
align-items: center;
padding-bottom: 20rpx;
&__animation--around {
position: absolute;
top: 0;
left: 0;
transition: transform 0.25s ease-in-out;
transform-origin: 50% 50%;
padding-bottom: 0 !important;
}
&--left {
flex-flow: row-reverse;
}
&__text {
&--left {
padding-left: 14rpx;
}
&--right {
padding-right: 14rpx;
}
}
&__btn {
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 5rpx 2rpx rgba(0, 0, 0, 0.07);
transition: all 0.2s linear;
&--active {
animation-name: fab-button-animation;
animation-duration: 0.2s;
animation-timing-function: cubic-bezier(0,.13,0,1.43);
}
&__title {
width: 90%;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
&__icon {
text-align: center;
font-size: 64rpx;
}
&__image {
display: block;
}
}
}
&__mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: $tn-mask-bg-color;
transition: all 0.2s ease-in-out;
opacity: 0;
&--visible {
opacity: 1;
}
}
}
@keyframes fab-button-animation {
0% {
transform: scale(0.6);
}
// 20% {
// transform: scale(1.8);
// }
// 40% {
// transform: scale(0.4);
// }
// 50% {
// transform: scale(1.4);
// }
// 80% {
// transform: scale(0.8);
// }
100% {
transform: scale(1);
}
}
</style>
tuniao-ui/components/tn-form-item/tn-form-item.vue
+1 -1
View File
@@ -332,7 +332,7 @@
validation(trigger, callback = ()=>{}) {
// 校验之前先获取需要校验的值
this.fieldValue = this.parent.model[this.prop]
// blur和唱歌是否有当前方式的校验规则
// blur和change是否有当前方式的校验规则
let rules = this.getFilterRule(trigger)
// 判断是否有验证规则，如果没有规则，也调用回调方法，否则父组件tn-form会因为
// 对count变量的统计错误而无法进入上一层的回调
tuniao-ui/components/tn-image-upload/tn-image-upload.vue
+41 -40
View File
@@ -1,51 +1,52 @@
<template>
<view v-if="!disabled" class="tn-image-upload-class tn-image-upload">
<view
v-if="showUploadList"
v-for="(item, index) in lists"
:key="index"
class="tn-image-upload__item tn-image-upload__item-preview"
:style="{
width: $t.string.getLengthUnitValue(width),
height: $t.string.getLengthUnitValue(height)
}"
>
<!-- 删除按钮 -->
<block v-if="showUploadList">
<view
v-if="deleteable"
class="tn-image-upload__item-preview__delete"
@tap.stop="deleteItem(index)"
v-for="(item, index) in lists"
:key="index"
class="tn-image-upload__item tn-image-upload__item-preview"
:style="{
borderTopColor: deleteBackgroundColor
width: $t.string.getLengthUnitValue(width),
height: $t.string.getLengthUnitValue(height)
}"
>
<!-- 删除按钮 -->
<view
class="tn-image-upload__item-preview__delete--icon"
:class="[`tn-icon-${deleteIcon}`]"
v-if="deleteable"
class="tn-image-upload__item-preview__delete"
@tap.stop="deleteItem(index)"
:style="{
color: deleteColor
borderTopColor: deleteBackgroundColor
}"
></view>
>
<view
class="tn-image-upload__item-preview__delete--icon"
:class="[`tn-icon-${deleteIcon}`]"
:style="{
color: deleteColor
}"
></view>
</view>
<!-- 进度条 -->
<tn-line-progress
v-if="showProgress && item.progress > 0 && !item.error"
class="tn-image-upload__item-preview__progress"
:percent="item.progress"
:showPercent="false"
:round="false"
:height="8"
></tn-line-progress>
<!-- 重试按钮 -->
<view v-if="item.error" class="tn-image-upload__item-preview__error-btn" @tap.stop="retry(index)">点击重试</view>
<!-- 图片信息 -->
<image
class="tn-image-upload__item-preview__image"
:src="item.url || item.path"
:mode="imageMode"
@tap.stop="doPreviewImage(item.url || item.path, index)"
></image>
</view>
<!-- 进度条 -->
<tn-line-progress
v-if="showProgress && item.progress > 0 && !item.error"
class="tn-image-upload__item-preview__progress"
:percent="item.progress"
:showPercent="false"
:round="false"
:height="8"
></tn-line-progress>
<!-- 重试按钮 -->
<view v-if="item.error" class="tn-image-upload__item-preview__error-btn" @tap.stop="retry(index)">点击重试</view>
<!-- 图片信息 -->
<image
class="tn-image-upload__item-preview__image"
:src="item.url || item.path"
:mode="imageMode"
@tap.stop="doPreviewImage(item.url || item.path, index)"
></image>
</view>
</block>
<!-- <view v-if="$slots.file || $slots.$file" style="width: 100%;">
</view> -->
@@ -320,7 +321,7 @@
this.showToast('超出可允许文件大小')
} else {
if (maxCount <= lists.length) {
this.$emit('on-exceed', val, list, this.index)
this.$emit('on-exceed', val, lists, this.index)
this.showToast('超出最大允许的文件数')
return
}
@@ -426,7 +427,7 @@
this.$t.messageUtils.closeLoading()
this.uploading = false
this.uploadFile(index + 1)
this.$emit('on-change', res, index, this.list, this.index)
this.$emit('on-change', res, index, this.lists, this.index)
}
})
this.lists[index].uploadTask = task
tuniao-ui/components/tn-list-view/tn-list-view.vue
+11 -8
View File
@@ -145,7 +145,7 @@
<style lang="scss" scoped>
.tn-list-view {
background-color: transparent;
background-color: #FFFFFF;
&__title {
width: 100%;
@@ -155,25 +155,28 @@
box-sizing: border-box;
&--card {
margin: 0rpx 30rpx;
// margin: 0rpx 30rpx;
}
}
&__content {
width: 100%;
position: relative;
border-radius: 0;
&--card {
width: auto;
overflow: hidden;
margin-right: 30rpx;
margin-left: 30rpx;
border-radius: 20rpx
// width: auto;
// overflow: hidden;
// margin-right: 30rpx;
// margin-left: 30rpx;
// border-radius: 20rpx
}
}
&--card {
padding-bottom: 30rpx;
// padding-bottom: 30rpx;
border-radius: 20rpx;
overflow: hidden;
}
}
tuniao-ui/components/tn-modal/tn-modal.vue
+37 -2
View File
@@ -22,7 +22,7 @@
:style="[boxStyle]"
>
<!-- 不是自定义弹框内容 -->
<view v-if="!custom">
<!-- <view v-if="!custom">
<view class="tn-modal__box__title" v-if="title && title !== ''">{{ title }}</view>
<view
class="tn-modal__box__content"
@@ -57,7 +57,42 @@
</view>
<view v-else>
<slot></slot>
</view>
</view> -->
<slot>
<view v-if="!custom">
<view class="tn-modal__box__title" v-if="title && title !== ''">{{ title }}</view>
<view
class="tn-modal__box__content"
:class="[
fontColorClass,
contentClass
]"
:style="contentStyle"
>{{ content }}</view>
<view v-if="button && button.length" class="tn-modal__box__btn-box" :class="[button.length != 2 ? 'tn-flex-direction-column' : '']">
<block v-for="(item, index) in button" :key="index">
<tn-button
width="100%"
height="68rpx"
:fontSize="26"
:backgroundColor="item.backgroundColor || ''"
:fontColor="item.fontColor || ''"
:plain="item.plain || false"
:shape="item.shape || 'round'"
:class="[
button.length > 2 ? 'tn-margin-bottom' : ''
]"
@click="handleClick(index)"
:style="{
width: button.length != 2 ? '80%' : '46%'
}"
>
{{ item.text }}
</tn-button>
</block>
</view>
</view>
</slot>
</view>
</tn-popup>
</view>
tuniao-ui/components/tn-nav-bar/tn-nav-bar.vue
+22 -9
View File
@@ -21,7 +21,7 @@
</view>
</view>
<view v-else class="tn-custom-nav-bar__bar__action" @tap="handlerBack">
<text class="tn-custom-nav-bar__bar__action--nav-back"></text>
<text class="tn-custom-nav-bar__bar__action--nav-back" :class="[`tn-icon-${backIcon}`]"></text>
<text class="tn-custom-nav-bar__bar__action--nav-back-text" v-if="backTitle">{{ backTitle }}</text>
</view>
</view>
@@ -61,6 +61,11 @@
type: Boolean,
default: true
},
// 返回按钮的图标
backIcon: {
type: String,
default: 'left'
},
// 返回按钮旁显示的文字
backTitle: {
type: String,
@@ -108,6 +113,9 @@
if (this.backgroundColorClass) {
clazz += ` ${this.backgroundColorClass}`
}
if (this.fontColorClass) {
clazz += `${this.fontColorClass}`
}
if (this.fixed) {
clazz += ' tn-custom-nav-bar__bar--fixed'
}
@@ -131,6 +139,9 @@
if(!this.backgroundColorClass) {
style.backgroundColor = this.backgroundColor !== '' ? this.backgroundColor : '#FFFFFF'
}
if (!this.fontColorClass && this.fontColor) {
style.color= this.fontColor
}
style.zIndex = this.elZIndex
@@ -240,7 +251,7 @@
const pages = getCurrentPages()
if (pages && pages.length > 0) {
const firstPage = pages[0]
if (!firstPage.route || firstPage.route != 'pages/index/index') {
if (pages.length == 1 && (!firstPage.route || firstPage.route != 'pages/index/index')) {
uni.reLaunch({
url: '/pages/index/index'
})
@@ -308,13 +319,15 @@
/* top: 50%; */
/* left: 20rpx; */
/* margin-top: -15rpx; */
width: 25rpx;
height: 25rpx;
margin-left: 25rpx;
border-width: 0 0 4rpx 4rpx;
border-color: #000000;
border-style: solid;
transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
// width: 25rpx;
// height: 25rpx;
margin-left: 20rpx;
font-size: 38rpx;
line-height: 100%;
// border-width: 0 0 4rpx 4rpx;
// border-color: #000000;
// border-style: solid;
// transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
}
&--nav-back-text {
tuniao-ui/components/tn-popup/tn-popup.vue
+9 -2
View File
@@ -281,6 +281,11 @@
watch: {
value(val) {
if (val) {
// console.log(this.visibleSync);
if (this.visibleSync) {
this.visibleSync = false
return
}
this.open()
} else if (!this.closeFromInner) {
this.close()
@@ -327,7 +332,8 @@
this.timer = setTimeout(() => {
this[param2] = status
this.$emit(status ? 'open' : 'close')
}, 50)
clearTimeout(this.timer)
}, 10)
// #endif
// #ifndef H5 || MP
this.$nextTick(() => {
@@ -339,6 +345,7 @@
this.timer = setTimeout(() => {
this[param2] = status
this.$emit(status ? 'open' : 'close')
clearTimeout(this.timer)
}, 250)
}
}
@@ -472,7 +479,7 @@
right: 0;
border: 0;
background-color: $tn-mask-bg-color;
transition: 0.25s ease-in-out;
transition: 0.25s linear;
transition-property: opacity;
opacity: 0;
tuniao-ui/components/tn-row-notice/tn-row-notice.vue
+2 -2
View File
@@ -138,8 +138,8 @@
fontStyle() {
return (type) => {
let style = {}
style.color = this.fontColorStyle ? this.fontColorStyle : '#080808'
style.fontSize = this.fontSizeStyle ? this.fontSizeStyle : '26rpx'
style.color = this.fontColorStyle ? this.fontColorStyle : ''
style.fontSize = this.fontSizeStyle ? this.fontSizeStyle : ''
if (type === 'leftIcon' && this.leftIconSize) {
style.fontSize = this.leftIconSize + 'rpx'
}
tuniao-ui/components/tn-steps/tn-steps.vue
+30 -14
View File
@@ -10,26 +10,27 @@
:key="index"
class="tn-steps__item"
:class="[`tn-steps__item--${direction}`]"
@tap="clickStepItem(index)"
>
<!-- 数值模式 -->
<view
v-if="mode === 'number'"
class="tn-steps__item__number"
:style="{
backgroundColor: current <= index ? 'transparent' : activeColor,
borderColor: current <= index ? inActiveColor : activeColor
backgroundColor: currentIndex <= index ? 'transparent' : activeColor,
borderColor: currentIndex <= index ? inActiveColor : activeColor
}"
>
<text
class="tn-steps__item__number__text"
:class="[{'tn-steps__item__number__text--visible': current <= index}]"
:class="[{'tn-steps__item__number__text--visible': currentIndex <= index}]"
:style="{
color: current <= index ? inActiveColor : activeColor
color: currentIndex <= index ? inActiveColor : activeColor
}"
>
{{ index + 1}}
</text>
<view class="tn-steps__item__number__icon" :class="[`tn-icon-${item.icon || icon}`,{'tn-steps__item__number__icon--visible': current > index}]"></view>
<view class="tn-steps__item__number__icon" :class="[`tn-icon-${item.icon || icon}`,{'tn-steps__item__number__icon--visible': currentIndex > index}]"></view>
</view>
<!-- 点模式 -->
@@ -37,7 +38,7 @@
v-if="mode === 'dot'"
class="tn-steps__item__dot"
:style="{
backgroundColor: current <= index ? inActiveColor : activeColor
backgroundColor: currentIndex <= index ? inActiveColor : activeColor
}"
></view>
@@ -47,13 +48,13 @@
class="tn-steps__item__icon"
:class="[iconModeClass(index)]"
:style="{
color: current <= index ? inActiveColor : activeColor
color: currentIndex <= index ? inActiveColor : activeColor
}"
></view>
<!-- 点图标模式 -->
<view v-if="mode === 'dotIcon'" class="tn-steps__item__dot-icon">
<view v-if="current <= index" class="tn-steps__item__dot-icon--dot" :style="{backgroundColor: inActiveColor}"></view>
<view v-if="currentIndex <= index" class="tn-steps__item__dot-icon--dot" :style="{backgroundColor: inActiveColor}"></view>
<view v-else class="tn-steps__item__dot-icon--icon" :class="[iconModeClass(index)]" :style="{color: activeColor}"></view>
</view>
@@ -63,7 +64,7 @@
class="tn-steps__item__text tn-text-ellipsis"
:class="[`tn-steps__item__text--${direction}`]"
:style="{
color: current <= index ? inActiveColor : activeColor
color: currentIndex <= index ? inActiveColor : activeColor
}"
>
{{ item.name }}
@@ -75,7 +76,7 @@
class="tn-steps__item__line"
:class="[`tn-steps__item__line--${mode}`]"
:style="{
borderColor: current <= index + 1 ? inActiveColor : activeColor
borderColor: currentIndex <= index + 1 ? inActiveColor : activeColor
}"
></view>
</view>
@@ -87,7 +88,7 @@
name: 'tn-steps',
props: {
// 模式类型
// dot -> 点 number -> 数字 icon -> 图标 dot_icon -> 点图标
// dot -> 点 number -> 数字 icon -> 图标 dotIcon -> 点图标
mode: {
type: String,
default: 'dot'
@@ -137,7 +138,7 @@
return (index) => {
const item = this.list[index]
// 状态被选中并且对应数据下存在selectIcon属性
if (this.current > index && item.hasOwnProperty('selectIcon')) {
if (this.currentIndex > index && item.hasOwnProperty('selectIcon')) {
return `tn-icon-${item.selectIcon}`
} else {
// 未选中
@@ -147,10 +148,25 @@
}
},
data() {
return {}
return {
currentIndex: 0
}
},
watch: {
current: {
handler(val) {
this.currentIndex = val
},
immediate: true
}
},
methods: {
// 点击了某一个选项
clickStepItem(index) {
const chooseIndex = index + 1
this.currentIndex = chooseIndex
this.$emit('click', { index: chooseIndex })
}
}
}
</script>
tuniao-ui/components/tn-sticky/tn-sticky.vue
+3
View File
@@ -121,6 +121,9 @@
} else {
this.initObserver()
}
},
customNavHeight(val) {
this.initObserver()
}
},
mounted() {
tuniao-ui/components/tn-switch/tn-switch.vue
+1 -1
View File
@@ -124,7 +124,7 @@
return style
},
loadingColor() {
return this.value ? this.activeColor : null
return this.value ? this.activeColor : ''
}
},
data() {
tuniao-ui/components/tn-tabbar/tn-tabbar.vue
+1
View File
@@ -54,6 +54,7 @@
v-if="!item.out && (item.count || item.dot)"
:dot="item.dot || false"
backgroundColor="tn-bg-red"
fontColor="#FFFFFF"
:radius="item.dot ? 14 : 0"
:fontSize="14"
padding="2rpx 4rpx"
tuniao-ui/components/tn-tabs-swiper/tn-tabs-swiper.vue
+1 -1
View File
@@ -13,7 +13,7 @@
:style="[tabItemStyle(index)]"
@tap="emit(index)"
>
<tn-badge v-if="item[count] || item['count']" backgroundColor="tn-bg-red" :absolute="true" :top="badgeOffset[0] || 0" :right="badgeOffset[1] || 0">{{ item[count] || item['count']}}</tn-badge>
<tn-badge v-if="item[count] || item['count']" backgroundColor="tn-bg-red" fontColor="#FFFFFF" :absolute="true" :top="badgeOffset[0] || 0" :right="badgeOffset[1] || 0">{{ item[count] || item['count']}}</tn-badge>
{{ item[name] || item['name'] }}
</view>
tuniao-ui/components/tn-tabs/tn-tabs.vue
+1 -1
View File
@@ -14,7 +14,7 @@
:style="[tabItemStyle(index)]"
@tap="clickTab(index)"
>
<tn-badge v-if="item[count] || item['count']" backgroundColor="tn-bg-red" :absolute="true" :top="badgeOffset[0] || 0" :right="badgeOffset[1] || 0">{{ item[count] || item['count']}}</tn-badge>
<tn-badge v-if="item[count] || item['count']" backgroundColor="tn-bg-red" fontColor="#FFFFFF" :absolute="true" :top="badgeOffset[0] || 0" :right="badgeOffset[1] || 0">{{ item[count] || item['count']}}</tn-badge>
{{ item[name] || item['name'] }}
</view>
tuniao-ui/components/tn-tag/tn-tag.vue
+8 -3
View File
@@ -128,7 +128,7 @@
break
}
style.width = this.width || '100%'
style.width = this.width || '120rpx'
style.height = this.height || style.height
style.padding = this.padding || style.padding
@@ -144,9 +144,14 @@
}
if (!this.backgroundColorClass) {
style.backgroundColor = !this.plain ? (this.backgroundColorStyle || '#01BEFF') : ''
style.backgroundColor = !this.plain ? (this.backgroundColorStyle || '#FFFFFF') : ''
if (this.plain) {
style.borderColor = (this.backgroundColorStyle || '#080808')
}
}
return style
},
},
@@ -179,7 +184,7 @@
box-sizing: border-box;
font-family: Helvetica Neue, Helvetica, sans-serif;
white-space: nowrap;
color: #FFFFFF;
// color: #FFFFFF;
&--fillet-left {
border-radius: 50rpx 0 0 50rpx;
tuniao-ui/libs/config/zIndex.js
+1
View File
@@ -8,5 +8,6 @@ export default {
tips: 19080,
sticky: 19075,
indexListSticky: 19070,
fab: 19060,
mask: 9999,
}
tuniao-ui/libs/css/color.scss
+1 -1
View File
@@ -50,7 +50,7 @@
@mixin getShadowColor($type: box, $color: #FFFFFF) {
@if $type == box {
box-shadow: 6rpx 6rpx 8rpx #{$color};
box-shadow: 12rpx 12rpx 16rpx #{$color};
} @else if $type == text {
text-shadow: 6rpx 6rpx 8rpx #{$color};
}
tuniao-ui/libs/css/main.scss
+9
View File
@@ -653,6 +653,15 @@ button::after {
-webkit-box-orient: vertical;
}
.tn-text-clip {
-webkit-background-clip: text;
color: transparent !important;
}
.tn-text-break-word {
word-wrap: break-word;
}
/* 文本 end */
/* hover 点击效果 start */
tuniao-ui/libs/css/style.h5.scss
-3
View File
@@ -21,14 +21,11 @@
&:first-child {
border-top-right-radius: 0rpx;
border-bottom-right-radius: 0rpx;
color: #FFFFFF;
background-color: $tn-main-color !important;
}
&:last-child {
&::after {
border-color: $tn-main-color !important;
border-top-left-radius: 0rpx;
border-bottom-left-radius: 0rpx;
}
tuniao-ui/libs/css/style.mp.scss
-3
View File
@@ -25,15 +25,12 @@
.tn-tag {
border-top-right-radius: 0rpx;
border-bottom-right-radius: 0rpx;
color: #FFFFFF !important;
background-color: $tn-main-color !important;
}
}
&:last-child {
.tn-tag {
&::after {
border-color: $tn-main-color !important;
border-top-left-radius: 0rpx;
border-bottom-left-radius: 0rpx;
}
tuniao-ui/libs/function/colorUtils.js
+6 -2
View File
@@ -20,6 +20,9 @@ let color = [
'gray'
]
// 酷炫颜色的数量
const COOL_BG_COLOR_COUNT = 16
/**
* 获取图鸟配色颜色列表
*/
@@ -42,7 +45,7 @@ function getRandomColorClass(type = 'bg') {
* 随机获取酷炫背景对应的类
*/
function getRandomCoolBgClass() {
const index = (Math.random() * 16) + 1
const index = (Math.random() * COOL_BG_COLOR_COUNT) + 1
return 'tn-cool-bg-color-' + Math.floor(index)
}
@@ -54,7 +57,7 @@ function getRandomCoolBgClass() {
function getBackgroundColorInternalClass(backgroundColor = '') {
if (!backgroundColor) return ''
if (['tn-bg', 'tn-dynamic-bg'].some(item => {
if (['tn-bg', 'tn-dynamic-bg', 'tn-main-gradient', 'tn-cool-bg'].some(item => {
return backgroundColor.includes(item)
})) {
return backgroundColor
@@ -252,6 +255,7 @@ function colorToRGBA(color, alpha = 0.3) {
}
export default {
COOL_BG_COLOR_COUNT: COOL_BG_COLOR_COUNT,
getTuniaoColorList,
getRandomColorClass,
getRandomCoolBgClass,
tuniao-ui/theme.scss
+1
View File
@@ -14,6 +14,7 @@ $tn-embellished-yellow: #FFF00D;
$tn-auxiliary-powder: #FF71D2;
$tn-auxiliary-blue: #82B2FF;
$tn-bg-color: #FFFFFF;
$tn-bg-gray-color: #F4F4F4;
$tn-space-color: #F8F7F8;
// 边框颜色