149 lines
5.2 KiB
Vue
149 lines
5.2 KiB
Vue
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 18614 0 7 25 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||
<template>
|
||
<view class="fui-wrap">
|
||
<view class="fui-page__hd">
|
||
<view class="fui-page__title">Utils</view>
|
||
<view class="fui-page__desc">Utils 工具类，更多使用请查看文档。</view>
|
||
</view>
|
||
<view class="fui-page__bd fui-page__spacing">
|
||
<view class="fui-section__title">英文首字母大写</view>
|
||
<view class="fui-btn__flex-center">
|
||
<view class="fui-page__desc">转换：english</view>
|
||
<fui-button type="gray" btn-size="medium" text="首字母转大写" bold :margin="['24rpx']"
|
||
@click="titleCase"></fui-button>
|
||
</view>
|
||
<view class="fui-section__title">压缩连续的字母字符串</view>
|
||
<view class="fui-btn__flex-center">
|
||
<view class="fui-page__desc">压缩：aabbbcddddddddd</view>
|
||
<fui-button type="gray" btn-size="medium" text="压缩" bold :margin="['24rpx']"
|
||
@click="compressLetter"></fui-button>
|
||
</view>
|
||
<view class="fui-section__title">等待多少毫秒再执行 ，同步阻塞</view>
|
||
<view class="fui-btn__flex-center">
|
||
<fui-button type="gray" btn-size="medium" text="等待 1000毫秒" bold :margin="['24rpx']"
|
||
@click="sleep"></fui-button>
|
||
</view>
|
||
<view class="fui-section__title">去字符串左右空格</view>
|
||
<view class="fui-btn__flex-center">
|
||
<view class="fui-page__desc">字符串 abcd </view>
|
||
<fui-button type="gray" btn-size="medium" text="去左右空格" bold :margin="['24rpx']"
|
||
@click="trim"></fui-button>
|
||
</view>
|
||
<view class="fui-section__title">去字符串所有空格</view>
|
||
<view class="fui-btn__flex-center">
|
||
<view class="fui-page__desc">字符串 a b c d </view>
|
||
<fui-button type="gray" btn-size="medium" text="去所有空格" bold :margin="['24rpx']"
|
||
@click="trimAll"></fui-button>
|
||
</view>
|
||
<view class="fui-section__title">替换所有相同字符串</view>
|
||
<view class="fui-btn__flex-center">
|
||
<view class="fui-page__desc">将字符串：##a###b#######c# 中#替换为空</view>
|
||
<fui-button type="gray" btn-size="medium" text="替换" bold :margin="['24rpx']"
|
||
@click="replaceAll"></fui-button>
|
||
</view>
|
||
<view class="fui-section__title">格式化手机号码</view>
|
||
<view class="fui-btn__flex-center">
|
||
<view class="fui-page__desc">手机号：15715600012</view>
|
||
<fui-button type="gray" btn-size="medium" text="格式化" bold :margin="['24rpx']"
|
||
@click="numberFormatter"></fui-button>
|
||
</view>
|
||
<view class="fui-section__title">格式化金额，保留两位小数</view>
|
||
<view class="fui-btn__flex-center">
|
||
<view class="fui-page__desc">金额：2021</view>
|
||
<fui-button type="gray" btn-size="medium" text="格式化" bold :margin="['24rpx']"
|
||
@click="moneyFormatter"></fui-button>
|
||
</view>
|
||
<view class="fui-section__title">函数节流，连续触发事件</view>
|
||
<view class="fui-btn__flex-center">
|
||
<view class="fui-page__desc">3s执行一次，6s执行2次...：{{num}}</view>
|
||
<fui-button type="gray" btn-size="medium" text="执行 +1" bold :margin="['24rpx']"
|
||
@click="btnThrottle"></fui-button>
|
||
</view>
|
||
<view class="fui-section__title">其他功能</view>
|
||
<view class="fui-page__desc">
|
||
除以上功能以外，还有：日期时间格式化，RGB颜色转十六进制颜色，十六进制颜色转RGB颜色，获取唯一标识，获取uuid，简单数组合并去重，获取日期时间段，获取Url参数，函数防抖，函数节流等功能，具体使用请查看文档。
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import utils from '@/components/firstui/fui-utils';
|
||
export default {
|
||
data() {
|
||
return {
|
||
num: 0
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.throttle = utils.throttle(() => {
|
||
this.num++
|
||
}, 3000)
|
||
},
|
||
methods: {
|
||
titleCase() {
|
||
const text = 'english';
|
||
const val = utils.titleCase(text);
|
||
console.log(val);
|
||
this.fui.toast(val)
|
||
},
|
||
compressLetter() {
|
||
const text = 'aabbbcddddddddd';
|
||
const val = utils.compressLetter(text);
|
||
console.log(val);
|
||
this.fui.toast(val)
|
||
},
|
||
sleep() {
|
||
utils.sleep(1000)
|
||
this.fui.toast('1000ms后执行！')
|
||
},
|
||
trim() {
|
||
const text = ' abcd ';
|
||
const val = utils.trim(text);
|
||
console.log(val);
|
||
this.fui.toast(`字符串${val}`)
|
||
},
|
||
trimAll() {
|
||
const text = ' a b c d ';
|
||
const val = utils.trimAll(text);
|
||
console.log(val);
|
||
this.fui.toast(`字符串${val}`)
|
||
},
|
||
replaceAll() {
|
||
const text = '##a###b#######c#';
|
||
const val = utils.replaceAll(text, '#', '');
|
||
console.log(val);
|
||
this.fui.toast(val)
|
||
},
|
||
numberFormatter() {
|
||
const text = '15715600012';
|
||
const val = utils.numberFormatter(text);
|
||
console.log(val);
|
||
this.fui.toast(val)
|
||
},
|
||
moneyFormatter() {
|
||
const text = '2021';
|
||
const val = utils.moneyFormatter(text);
|
||
console.log(val);
|
||
this.fui.toast(val)
|
||
},
|
||
btnThrottle() {
|
||
this.throttle()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.fui-btn__flex-center {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.fui-section__title:not(:first-child) {
|
||
margin-top: 72rpx;
|
||
}
|
||
</style> |