molong/tuniao-ui
1
0
Fork 0
mirror of https://gitee.com/TSpecific/tuniao-ui.git synced 2026-03-07 16:24:01 +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

291
basicPage/tag/tag.vue
View File

@@ -1,6 +1,6 @@
<template>
<view class="basic-tag">
<view class="basic-tag tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed>标签</tn-nav-bar>
@@ -8,37 +8,85 @@
<!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click" @modeClick="modeClick">
<block v-if="singleTagFlag">
<tn-tag :backgroundColor="backgroundColor" :fontColor="fontColor" :fontSize="fontSize" :shape="shape"
:width="width" :height="height" :size="size" :padding="padding" :margin="margin" :plain="plain"
:originLeft="originLeft" :originRight="originRight" :class="{'origin-demo':showOriginDemo}">
演示标签
</tn-tag>
</block>
<block v-else>
<demo-title title="基础">
<tn-tag>标签</tn-tag>
</demo-title>
<demo-title title="大小">
<view>
<tn-tag size="sm" margin="10rpx 10rpx">标签</tn-tag>
<tn-tag margin="10rpx 10rpx">标签</tn-tag>
<tn-tag size="lg" margin="10rpx 10rpx">标签</tn-tag>
</view>
<view class="tn-margin-top">
<tn-tag width="200rpx" height="100rpx" :fontSize="40" margin="10rpx 10rpx">标签</tn-tag>
<tn-tag padding="40rpx 80rpx" margin="10rpx 10rpx">标签</tn-tag>
</view>
</demo-title>
<demo-title title="形状">
<view>
<tn-tag margin="10rpx 10rpx">标签</tn-tag>
<tn-tag shape="radius" margin="10rpx 10rpx">标签</tn-tag>
<tn-tag shape="circle" margin="10rpx 10rpx">标签</tn-tag>
<tn-tag shape="circleLeft" margin="10rpx 10rpx">标签</tn-tag>
<tn-tag shape="circleRight" margin="10rpx 10rpx">标签</tn-tag>
</view>
</demo-title>
<demo-title title="颜色">
<view>
<tn-tag backgroundColor="#01BEFF" fontColor="#FFFFFF" margin="10rpx 10rpx">标签</tn-tag>
<tn-tag backgroundColor="rgba(1, 190, 255, 0.8)" fontColor="tn-color-white" margin="10rpx 10rpx">标签</tn-tag>
<tn-tag backgroundColor="tn-bg-teal" fontColor="tn-color-white" margin="10rpx 10rpx">标签</tn-tag>
<tn-tag backgroundColor="tn-cool-bg-color-7" fontColor="tn-color-white" margin="10rpx 10rpx">标签</tn-tag>
</view>
<view>
<tn-tag backgroundColor="tn-main-gradient-indigo" fontColor="rgba(255, 255, 255, 0.8)" margin="10rpx 10rpx">标签</tn-tag>
<tn-tag backgroundColor="tn-main-gradient-indigo--reverse" fontColor="rgba(255, 255, 255, 0.8)" margin="10rpx 10rpx">标签</tn-tag>
<tn-tag backgroundColor="tn-main-gradient-indigo--light" margin="10rpx 10rpx">标签</tn-tag>
<tn-tag backgroundColor="tn-main-gradient-indigo--single" fontColor="rgba(255, 255, 255, 0.8)" margin="10rpx 10rpx">标签</tn-tag>
</view>
</demo-title>
<demo-title title="镂空">
<view>
<tn-tag :plain="true" backgroundColor="#01BEFF" margin="10rpx 10rpx">标签</tn-tag>
<tn-tag :plain="true" backgroundColor="rgba(1, 190, 255, 0.8)" margin="10rpx 10rpx">标签</tn-tag>
<tn-tag :plain="true" backgroundColor="tn-bg-teal" margin="10rpx 10rpx">标签</tn-tag>
</view>
</demo-title>
<demo-title title="标签使用">
<view class="tn-flex tn-flex-col-center tn-flex-row-left">
<view class="origin-demo">
<tn-tag class="origin-demo__tag" backgroundColor="#01BEFF" fontColor="#FFFFFF" width="auto" height="30rpx" shape="circle">99+</tn-tag>
</view>
<!-- #ifdef H5 -->
<view class="capsule">
<tn-tag class="capsule-tag" width="50%" height="100%" padding="0" shape="circleLeft" :plain="false">
<tn-tag class="capsule-tag" width="50%" height="100%" padding="0" shape="circleLeft" backgroundColor="#01BEFF" fontColor="#FFFFFF" :plain="false">
<text class="tn-icon-add"></text>
</tn-tag>
<tn-tag class="capsule-tag" width="50%" height="100%" padding="0" shape="circleRight" fontColor="#080808" :plain="true">
<tn-tag class="capsule-tag" width="50%" height="100%" padding="0" shape="circleRight" backgroundColor="#01BEFF" fontColor="#080808" :plain="true">
2
</tn-tag>
</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view class="capsule">
<tn-tag class="capsule-tag" width="100%" height="100%" padding="0" shape="circleLeft" :plain="false">
<tn-tag class="capsule-tag" width="100%" height="100%" padding="0" shape="circleLeft" backgroundColor="#01BEFF" fontColor="#FFFFFF" :plain="false">
<text class="tn-icon-add"></text>
</tn-tag>
<tn-tag class="capsule-tag" width="100%" height="100%" padding="0" shape="circleRight" fontColor="#080808" :plain="true">
<tn-tag class="capsule-tag" width="100%" height="100%" padding="0" shape="circleRight" backgroundColor="#01BEFF" fontColor="#080808" :plain="true">
2
</tn-tag>
</view>
<!-- #endif -->
</block>
</dynamic-demo-template>
</view>
</demo-title>
<view class="tn-padding-bottom-lg"></view>
</view>
@@ -47,213 +95,38 @@
</template>
<script>
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
import demoTitle from '@/libs/components/demo-title.vue'
export default {
name: 'basicTag',
components: {dynamicDemoTemplate},
components: {demoTitle},
data() {
return {
backgroundColor: '',
fontColor: '',
fontSize: 0,
shape: '',
width: '',
height: '',
size: '',
padding: '',
margin: '',
plain: false,
originLeft: false,
originRight: false,
// 演示基准点控制
showOriginDemo: false,
// 单双标签切换
singleTagFlag: true,
tips: ['无需依赖额外的样式文件','使用tn-tag组件'],
sectionList: [
{
name: '参数切换',
section: [
{
title: '自定义颜色',
optional: ['默认','自定义'],
methods: 'colorChange'
},
{
title: '自定义大小',
optional: ['默认','自定义'],
methods: 'sizeChange'
},
{
title: '内置大小',
optional: ['默认','sm','lg'],
methods: 'innerSizeChange'
},
{
title: '形状',
optional: ['默认','圆角','椭圆','左半圆','右半圆'],
methods: 'shapeChange'
},
{
title: '镂空',
optional: ['默认','镂空'],
methods: 'plainChange'
},
{
title: '基准点',
optional: ['不设置','左基准','右基准'],
methods: 'originChange'
}
]
},
{
name: '样式切换',
section: [
{
title: '单双标签',
optional: ['单标签','双标签'],
methods: 'singleTagChange'
}
]
}
]
}
},
methods: {
click(event) {
this[event.methods] && this[event.methods](event)
},
modeClick(event) {
if (event.index === 0) {
this.singleTagFlag = true
this.$refs.demoTemplate.updateSectionBtnsValue(1, 0, 0)
}
},
// 切换自定义颜色
colorChange(event) {
if (event.index === 0) {
this.backgroundColor = ''
this.fontColor = ''
} else {
this.backgroundColor = 'tn-bg-red'
this.fontColor = '#FFFFFF'
}
},
// 切换自定义大小
sizeChange(event) {
if (event.index === 0) {
this.width = ''
this.height = ''
this.padding = ''
this.margin = ''
this.fontSize = 0
this.size = ''
this.$refs.demoTemplate.updateSectionBtnsState(2, true)
} else {
this.width = '240rpx'
this.height = '80rpx'
this.padding = '10rpx 20rpx'
this.margin = '10rpx'
this.fontSize = 36
this.$refs.demoTemplate.updateSectionBtnsState(2, false)
}
},
// 切换按钮形状
shapeChange(event) {
switch (event.index) {
case 0:
this.shape = ''
break
case 1:
this.shape = 'radius'
break
case 2:
this.shape = 'circle'
break
case 3:
this.shape = 'circleLeft'
break
case 4:
this.shape = 'circleRight'
break
}
},
// 切换内置大小状态
innerSizeChange(event) {
this.size = event.index === 0 ? '' : event.name
},
// 切换镂空状态
plainChange(event) {
switch(event.index) {
case 0:
this.plain = false
this.fontColor = '#FFFFFF'
break
case 1:
this.plain = true
this.fontColor = 'tn-color-black'
break
}
},
// 切换基准点状态
originChange(event) {
switch (event.index) {
case 0:
this.showOriginDemo = false
this.originLeft = false
this.originRight = false
break
case 1:
this.showOriginDemo = true
this.originLeft = true
this.originRight = false
break
case 2:
this.showOriginDemo = true
this.originLeft = false
this.originRight = true
break
}
},
// 切换单双标签
singleTagChange(event) {
this.singleTagFlag = event.index === 0
},
},
}
}
</script>
<style lang="scss" scoped>
/* #ifdef H5 */
.origin-demo {
transition: all 0.3s ease;
transform: scale(0.7);
.basic-tag {
background-color: $tn-bg-gray-color;
min-height: 100vh;
}
/* #endif */
/* #ifdef MP-WEIXIN */
tn-tag {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* #endif */
</style>
<style lang="scss">
/* #ifdef MP-WEIXIN */
.origin-demo {
.tn-tag-class {
transition: all 0.3s ease;
transform: scale(0.7);
width: 180rpx;
height: 180rpx;
background-color: #FFFFFF;
margin: 20rpx;
margin-right: 70rpx;
position: relative;
&__tag {
position: absolute;
top: 0;
right: 0;
transform: translate(50%, -50%);
}
}
/* #endif */
</style>