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

update

Browse Source
This commit is contained in:
7small7
2023-07-08 20:44:19 +08:00
parent f5718ab30b
commit f710c14879
283 changed files with 68347 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
basicPage/utils/color/index.vue Normal file
View File

@@ -0,0 +1,105 @@
<template>
<view class="basic-utils__color tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed>Color工具</tn-nav-bar>
<!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="获取内置随机颜色">
<tn-list-view backgroundColor="tn-bg-white">
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view class="bg-color-item" :class="randomBgColorClass">背景颜色</view>
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="getRandomBgColor">获取</tn-button></view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view class="bg-color-item" :class="randomColorClass">文字颜色</view>
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="getRandomColor">获取</tn-button></view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view class="bg-color-item" :class="randomCoolBgColorClass">酷炫背景颜色</view>
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="getRandomCoolColor">获取</tn-button></view>
</view>
</tn-list-cell>
</tn-list-view>
</demo-title>
<demo-title title="hex与rgb互转">
<view class="tn-bg-white">
<tn-form-item>
<view class="tn-margin-left">
<tn-input v-model="hexRGBValue"></tn-input>
</view>
<template slot="right">
<view class="tn-margin-right-sm">
<tn-button size="sm" backgroundColor="#01BEFF" fontColor="#FFFFFF" @click="convertToRGBOrHex">{{ rgbFlag ? '转换为hex' : '转换为rgb' }}</tn-button>
</view>
</template>
</tn-form-item>
</view>
</demo-title>
<view class="tn-padding-bottom-lg"></view>
</view>
</view>
</template>
<script>
import demoTitle from '@/libs/components/demo-title.vue'
export default {
name: 'basicUtilsColor',
components: {demoTitle},
data() {
return {
randomBgColorClass: '',
randomColorClass: '',
randomCoolBgColorClass: '',
hexRGBValue: '#01BEFF',
rgbFlag: false
}
},
methods: {
// 获取随机背景颜色
getRandomBgColor() {
this.randomBgColorClass = this.$tn.color.getRandomColorClass()
},
// 获取随机颜色
getRandomColor() {
this.randomColorClass = this.$tn.color.getRandomColorClass('color')
},
// 获取随机酷炫背景颜色
getRandomCoolColor() {
this.randomCoolBgColorClass = this.$tn.color.getRandomCoolBgClass()
},
// 将hex与rgb互转
convertToRGBOrHex() {
if (this.rgbFlag) {
this.hexRGBValue = this.$tn.color.rgbToHex(this.hexRGBValue)
} else {
this.hexRGBValue = this.$tn.color.hexToRGB(this.hexRGBValue)
}
this.rgbFlag = !this.rgbFlag
}
}
}
</script>
<style lang="scss" scoped>
.basic-utils__color {
background-color: $tn-bg-gray-color;
min-height: 100vh;
.bg-color-item {
height: 100%;
width: auto;
padding: 10rpx 20rpx;
}
}
</style>

176
basicPage/utils/message/index.vue Normal file
View File

@@ -0,0 +1,176 @@
<template>
<view class="basic-utils__message tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed>Message工具</tn-nav-bar>
<!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="uni内置toast框">
<tn-list-view backgroundColor="tn-bg-white">
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>默认toast框</view>
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openToast_1">弹出</tn-button></view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>带图标 toast框</view>
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openToast_2">弹出</tn-button></view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>带透明mask toast框</view>
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openToast_3">弹出</tn-button></view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>设置时间 toast框</view>
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openToast_4">弹出</tn-button></view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>设置回调 toast框</view>
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openToast_5">弹出</tn-button></view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>关闭 toast框</view>
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="closeToast">关闭</tn-button></view>
</view>
</tn-list-cell>
</tn-list-view>
</demo-title>
<demo-title title="uni内置loading框">
<tn-list-view backgroundColor="tn-bg-white">
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>弹出loading框</view>
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openLoading">弹出</tn-button></view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>关闭loading框</view>
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="closeLoading">关闭</tn-button></view>
</view>
</tn-list-cell>
</tn-list-view>
</demo-title>
<demo-title title="uni内置modal框">
<tn-list-view backgroundColor="tn-bg-white">
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>默认modal框</view>
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openModal_1">弹出</tn-button></view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>隐藏取消按钮 modal框</view>
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openModal_2">弹出</tn-button></view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>修改文字 modal框</view>
<view><tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="openModal_3">弹出</tn-button></view>
</view>
</tn-list-cell>
</tn-list-view>
</demo-title>
<view class="tn-padding-bottom-lg"></view>
</view>
</view>
</template>
<script>
import demoTitle from '@/libs/components/demo-title.vue'
export default {
name: 'basicUtilsMessage',
components: {demoTitle},
data() {
return {
}
},
methods: {
// 弹出toast
openToast_1() {
this.$tn.message.toast('弹出toast')
},
openToast_2() {
this.$tn.message.toast('弹出toast icon', false, null, 'success')
},
openToast_3() {
this.$tn.message.toast('弹出toast mask', true)
},
openToast_4() {
this.$tn.message.toast('弹出toast duration', false, null, 'none', 3000)
},
openToast_5() {
this.$tn.message.toast('弹出toast cb', true, () => {
setTimeout(() => {
this.$tn.message.toast('执行完毕后弹出', true, null, 'success')
}, 500)
})
},
// 关闭Toast
closeToast() {
this.$tn.message.closeToast()
},
// 弹出loading
openLoading() {
this.$tn.message.loading('弹出loading')
setTimeout(() => {
this.closeLoading()
}, 3000)
},
// 关闭loading
closeLoading() {
this.$tn.message.closeLoading()
},
// 弹出modal
openModal_1() {
this.$tn.message.modal("提示", "请进行登录后进行操作", () => {
this.$tn.message.toast('点击了确认按钮')
}, true, () => {
this.$tn.message.toast('点击了取消按钮')
})
},
openModal_2() {
this.$tn.message.modal("提示", "请进行登录后进行操作", () => {
this.$tn.message.toast('点击了确认按钮')
}, false, null)
},
openModal_3() {
this.$tn.message.modal("提示", "请进行登录后进行操作", () => {
this.$tn.message.toast('点击了跳转按钮')
}, true, () => {
this.$tn.message.toast('点击了拒绝按钮')
}, "跳转登录", "拒绝登录")
}
}
}
</script>
<style lang="scss" scoped>
.basic-utils__message {
background-color: $tn-bg-gray-color;
min-height: 100vh;
}
</style>

159
basicPage/utils/number/index.vue Normal file
View File

@@ -0,0 +1,159 @@
<template>
<view class="basic-utils__number tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed>Number工具</tn-nav-bar>
<!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="超过指定长度自动添加'+'号">
<tn-list-view backgroundColor="tn-bg-white">
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>超过2位自动添加'+'号</view>
<view>{{ $tn.number.formatNumberString(56) }}</view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>超过2位自动添加'+'号</view>
<view>{{ $tn.number.formatNumberString(100) }}</view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>超过3位自动添加'+'号</view>
<view>{{ $tn.number.formatNumberString(899, 3) }}</view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>超过3位自动添加'+'号</view>
<view>{{ $tn.number.formatNumberString(1000, 3) }}</view>
</view>
</tn-list-cell>
</tn-list-view>
</demo-title>
<demo-title title="往数字前添加'0'">
<tn-list-view backgroundColor="tn-bg-white">
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>只有一位时会往前面添加'0'</view>
<view>{{ $tn.number.formatNumberAddZero(6) }}</view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>超过两位时不会往前面添加'0'</view>
<view>{{ $tn.number.formatNumberAddZero(16) }}</view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>超过两位时不会往前面添加'0'</view>
<view>{{ $tn.number.formatNumberAddZero(106) }}</view>
</view>
</tn-list-cell>
</tn-list-view>
</demo-title>
<demo-title title="数值转换为带单位金额">
<tn-list-view backgroundColor="tn-bg-white">
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>不带单位</view>
<view>{{ $tn.number.formatNumberAddPriceUnit(100) }}</view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>不带单位</view>
<view>{{ $tn.number.formatNumberAddPriceUnit(100.88) }}</view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>带K单位</view>
<view>{{ $tn.number.formatNumberAddPriceUnit(1000) }}</view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>带K单位</view>
<view>{{ $tn.number.formatNumberAddPriceUnit(1032.89) }}</view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>带W单位</view>
<view>{{ $tn.number.formatNumberAddPriceUnit(10000) }}</view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>带W单位</view>
<view>{{ $tn.number.formatNumberAddPriceUnit(10875.90) }}</view>
</view>
</tn-list-cell>
</tn-list-view>
</demo-title>
<demo-title title="获取随机值">
<view class="tn-bg-white">
<tn-form-item>
<view class="tn-margin-left"><tn-input v-model="randomValue" :disabled="true"></tn-input></view>
<template slot="right">
<view class="tn-margin-right-sm">
<tn-button size="sm" backgroundColor="#01BEFF" fontColor="#FFFFFF" @click="getRandomValue">获取随机值</tn-button>
</view>
</template>
</tn-form-item>
<tn-form-item>
<view class="tn-margin-left"><tn-input v-model="intRandomValue" :disabled="true"></tn-input></view>
<template slot="right">
<view class="tn-margin-right-sm">
<tn-button size="sm" backgroundColor="#01BEFF" fontColor="#FFFFFF" @click="getIntRandomValue">获取整数随机值</tn-button>
</view>
</template>
</tn-form-item>
</view>
</demo-title>
<view class="tn-padding-bottom-lg"></view>
</view>
</view>
</template>
<script>
import demoTitle from '@/libs/components/demo-title.vue'
export default {
name: 'basicUtilsNumber',
components: {demoTitle},
data() {
return {
randomValue: '',
intRandomValue: '',
}
},
methods: {
// 获取随机值
getRandomValue() {
this.randomValue = this.$tn.number.random(0, 100.99)
},
// 获取整数随机值
getIntRandomValue() {
this.intRandomValue = this.$tn.number.randomInt(0, 100)
}
}
}
</script>
<style lang="scss" scoped>
.basic-utils__number {
background-color: $tn-bg-gray-color;
min-height: 100vh;
}
</style>

89
basicPage/utils/string/index.vue Normal file
View File

@@ -0,0 +1,89 @@
<template>
<view class="basic-utils__string tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed>String工具</tn-nav-bar>
<!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="去除空格">
<view class="tn-bg-white">
<tn-form-item>
<tn-input v-model="trimValue" :trim="false"></tn-input>
<template slot="right">
<view class="tn-margin-right-sm">
<tn-button size="sm" backgroundColor="#01BEFF" fontColor="#FFFFFF" @click="handlerTrim">清除空格</tn-button>
</view>
</template>
</tn-form-item>
</view>
</demo-title>
<demo-title title="大写转指定连接符">
<view class="tn-bg-white">
<tn-form-item>
<tn-input v-model="humpCharValue"></tn-input>
<template slot="right">
<view class="tn-margin-right-sm">
<tn-button size="sm" backgroundColor="#01BEFF" fontColor="#FFFFFF" @click="handlerHumpChar">转换</tn-button>
</view>
</template>
</tn-form-item>
</view>
</demo-title>
<demo-title title="将自定的连接符转为大写">
<view class="tn-bg-white">
<tn-form-item>
<tn-input v-model="charHumpValue"></tn-input>
<template slot="right">
<view class="tn-margin-right-sm">
<tn-button size="sm" backgroundColor="#01BEFF" fontColor="#FFFFFF" @click="handlerCharHump">转换</tn-button>
</view>
</template>
</tn-form-item>
</view>
</demo-title>
<view class="tn-padding-bottom-lg"></view>
</view>
</view>
</template>
<script>
import demoTitle from '@/libs/components/demo-title.vue'
export default {
name: 'basicUtilsString',
components: {demoTitle},
data() {
return {
trimValue: ' 前后都有空格啊 ',
humpCharValue: 'TuniaoUI',
charHumpValue: 'Tuniao_u_i'
}
},
methods: {
// 处理去除空格
handlerTrim() {
this.trimValue = this.$tn.string.trim(this.trimValue)
},
// 处理将大写字符串转换为指定的连接符连接的字符串
handlerHumpChar() {
this.humpCharValue = this.$tn.string.humpConvertChar(this.humpCharValue, '_')
},
// 处理将指定的连接字符连接的字符串转换为大写的字符串
handlerCharHump() {
this.charHumpValue = this.$tn.string.charConvertHump(this.charHumpValue, '_')
}
}
}
</script>
<style lang="scss" scoped>
.basic-utils__string {
background-color: $tn-bg-gray-color;
min-height: 100vh;
}
</style>