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

198
componentsPage/slider/slider.vue
View File

@@ -1,6 +1,6 @@
<template>
<view class="components-slider">
<view class="components-slider tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed>slider滑动条</tn-nav-bar>
@@ -8,43 +8,39 @@
<!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" @click="click">
<tn-slider
v-if="useSlot"
v-model="value"
:min="min"
:max="max"
:step="step"
:disabled="disabled"
:blockWidth="blockWidth"
:blockColor="blockColor"
:lineHeight="lineHeight"
:activeColor="activeColor"
:inactiveColor="inactiveColor"
>
<demo-title title="基本使用">
<tn-slider v-model="value1"></tn-slider>
<view class="tn-margin-top">
<tn-slider v-model="value1" :disabled="true"></tn-slider>
</view>
</demo-title>
<demo-title title="设置最小最大值">
<tn-slider v-model="value2" :min="20" :max="80"></tn-slider>
</demo-title>
<demo-title title="设置步进值">
<tn-slider v-model="value3" :step="10"></tn-slider>
</demo-title>
<demo-title title="自定义滑块滑轨信息">
<tn-slider v-model="value5" :blockWidth="40" :lineHeight="10"></tn-slider>
</demo-title>
<demo-title title="自定义颜色信息">
<tn-slider v-model="value6" blockColor="#838383" inactiveColor="#FAD8D6" activeColor="#31E749"></tn-slider>
</demo-title>
<demo-title title="自定义滑块">
<tn-slider v-model="value7">
<view class="tn-slider__custom-block">
{{ value }}
{{ value7 }}
</view>
</tn-slider>
<tn-slider
v-else
v-model="value"
:min="min"
:max="max"
:step="step"
:disabled="disabled"
:blockWidth="blockWidth"
:blockColor="blockColor"
:lineHeight="lineHeight"
:activeColor="activeColor"
:inactiveColor="inactiveColor"
></tn-slider>
<view class="slider-value">
<view class="slider-value__text">当前选值为：{{ value }}</view>
</view>
</dynamic-demo-template>
</demo-title>
<view class="tn-padding-bottom-lg"></view>
</view>
</view>
@@ -52,137 +48,31 @@
</template>
<script>
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
import demoTitle from '@/libs/components/demo-title.vue'
export default {
name: 'componentsSlider',
components: {dynamicDemoTemplate},
components: {demoTitle},
data() {
return {
value: 0,
min: 0,
max: 100,
step: 1,
disabled: false,
blockWidth: 30,
blockColor: '#FFFFFF',
lineHeight: 8,
activeColor: '#01BEFF',
inactiveColor: '#E6E6E6',
useSlot: false,
tips: ['无需依赖额外的样式文件','使用tn-slider组件'],
sectionList: [
{
name: '参数切换',
section: [
{
title: '最小最大值',
optional: ['0-100','20-80'],
methods: 'minMaxChange'
},
{
title: '步进值',
optional: ['1','10','30'],
methods: 'stepChange'
},
{
title: '禁用状态',
optional: ['是','否'],
methods: 'disabledChange',
current: 1
},
{
title: '自定义尺寸',
optional: ['默认','自定义'],
methods: 'customSizeChange'
},
{
title: '自定义颜色',
optional: ['默认','自定义'],
methods: 'customColorChange'
},
{
title: '自定义滑块',
optional: ['默认','自定义'],
methods: 'customSliderBlockChange'
}
]
}
]
value1: 0,
value2: 0,
value3: 0,
value4: 0,
value5: 0,
value6: 0,
value7: 0
}
},
methods: {
click(event) {
this[event.methods] && this[event.methods](event)
},
// 切换最大最小值
minMaxChange(event) {
const value = event.name.split('-')
this.min = Number(value[0])
this.max = Number(value[1])
},
// 切换步进值
stepChange(event) {
this.step = Number(event.name)
},
// 切换禁用状态
disabledChange(event) {
this.disabled = event.index === 0 ? true : false
},
// 切换尺寸
customSizeChange(event) {
switch (event.index) {
case 0:
this.blockWidth = 30
this.lineHeight = 8
break
case 1:
this.blockWidth = 50
this.lineHeight = 12
break
}
this.$refs.demoTemplate.updateSectionScrollView()
},
// 切换颜色
customColorChange(event) {
switch (event.index) {
case 0:
this.activeColor = '#01BEFF'
this.inactiveColor = '#E6E6E6'
break
case 1:
this.activeColor = '#2DE88D'
this.inactiveColor = '#AAAAAA'
break
}
},
// 切换滑块
customSliderBlockChange(event) {
this.useSlot = event.index === 0 ? false : true
this.$refs.demoTemplate.updateSectionScrollView()
}
},
}
}
</script>
<style lang="scss" scoped>
.slider-value {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-top: 30rpx;
&__text {
width: 260rpx;
padding: 20rpx;
border-radius: 10rpx;
text-align: center;
background-color: $tn-font-holder-color;
}
.components-slider {
min-height: 100vh;
}
.tn-slider__custom-block {
@@ -190,7 +80,7 @@
width: auto;
height: 40rpx;
line-height: 40rpx;
padding: 0 5rpx;
padding: 0 10rpx;
border-radius: 50%;
text-align: center;
color: #FFFFFF;