thzxcx/FirstUI-vue
1
0
Fork 0
Code Pull Requests Packages Releases Activity

feat: 首次提交

Browse Source
This commit is contained in:
peerless_hero
2023-08-17 21:28:49 +08:00
parent 36f80fb971
commit ec1e5e16cd
571 changed files with 95322 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
pages/component/js/clipboard/clipboard.vue Normal file
View File

@ -0,0 +1,64 @@
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 86 14 07 2 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
<view class="fui-wrap">
<view class="fui-page__hd">
<view class="fui-page__title fui-align__center" @tap="vip">Clipboard<image
src="/static/images/index/light/icon_member_3x.png"></image>
</view>
<view class="fui-page__desc">Clipboard 复制文本，主要针对H5做兼容。</view>
</view>
<view class="fui-page__bd">
<fui-button type="gray" btn-size="medium" text="www.firstui.cn" bold :margin="['24rpx']"
@click="copy"></fui-button>
<fui-button type="gray" btn-size="medium" text="doc.firstui.cn" bold
@click="copyText($event,'doc.firstui.cn')">
</fui-button>
</view>
</view>
</template>
<script>
import {
mapState
} from 'vuex'
import $fui from '@/components/firstui/fui-clipboard';
export default {
data() {
return {
}
},
computed: mapState(['status']),
methods: {
copy(e) {
const text = "www.firstui.cn"
this.copyText(e, text, '官网地址复制成功')
},
copyText(e, text, tips) {
// #ifdef MP-BAIDU || MP-TOUTIAO
if (this.status == 0) {
this.fui.toast('功能完善中~');
return;
}
// #endif
$fui.getClipboardData(text, res => {
if (res) {
this.fui.toast(tips || '文档地址复制成功');
}
}, e);
},
vip() {
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
}
}
}
</script>
<style>
.fui-page__bd {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
</style>

167
pages/component/js/request/request.vue Normal file
View File

@ -0,0 +1,167 @@
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：186 1 4 07 2 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
<view class="fui-wrap">
<view class="fui-page__hd">
<view class="fui-page__title fui-align__center" @tap="vip">Request<image
src="/static/images/index/light/icon_member_3x.png"></image>
</view>
<view class="fui-page__desc">Request 网络请求，支持Promise，可在发起请求和请求响应之前进行拦截，更多使用请参考文档。</view>
</view>
<view class="fui-page__bd">
<fui-button type="gray" btn-size="medium" text="GET 返回全部数据" bold :margin="['24rpx']"
@click="get(false)"></fui-button>
<fui-button type="gray" btn-size="medium" text="GET 返回简洁数据" bold @click="get(true)">
</fui-button>
<fui-button type="gray" btn-size="medium" text="GET 传参数{id}" bold :margin="['24rpx']"
@click="get2">
</fui-button>
<fui-button type="gray" btn-size="medium" text="POST 返回全部数据" bold @click="post(false)">
</fui-button>
<fui-button type="gray" btn-size="medium" text="POST 返回简洁数据" bold :margin="['24rpx']"
@click="post(true)">
</fui-button>
<fui-button type="gray" btn-size="medium" text="自定义接口域名" bold @click="changeHost">
</fui-button>
<fui-button type="gray" btn-size="medium" text="合并多个请求" bold :margin="['24rpx']" @click="all">
</fui-button>
<fui-button type="gray" btn-size="medium" text="同步请求" bold @click="sync">
</fui-button>
<fui-button type="gray" btn-size="medium" text="使用request方法请求" bold :margin="['24rpx']"
@click="request">
</fui-button>
</view>
</view>
</template>
<script>
//该组件已全局引入，请查看文档使用
export default {
data() {
return {
}
},
methods: {
//brief 是否返回简洁数据
get(brief) {
this.http.get('/api/example/info', {
brief: brief
}).then(res => {
console.log(res)
if (brief) {
if (res.succeeded) {
this.fui.toast('请求成功！')
}
} else {
const d = res.data;
if (d.succeeded) {
this.fui.toast('请求成功！')
}
}
}).catch(e => {
console.log(e)
})
},
get2() {
this.http.get('/api/example/info', {
data: {
id: 1
}
}).then(res => {
console.log(res)
const d = res.data;
if (d.succeeded) {
this.fui.toast('请求成功！')
}
}).catch(e => {
console.log(e)
})
},
//brief 是否返回简洁数据
post(brief) {
this.http.post('/api/example/info', {
brief: brief,
data: {
Id: 2,
Name: '张三'
}
}).then(res => {
console.log(res)
if (brief) {
if (res.succeeded) {
this.fui.toast('请求成功！')
}
} else {
const d = res.data;
if (d.succeeded) {
this.fui.toast('请求成功！')
}
}
}).catch(e => {
console.log(e)
})
},
changeHost() {
this.http.get('/api/example/info', {
//此处只是为了演示
host: 'https://ffa.firstui.cn'
}).then(res => {
console.log(res)
const d = res.data;
if (d.succeeded) {
this.fui.toast('请求成功！')
}
}).catch(e => {
console.log(e)
})
},
all() {
//合并多个请求：都返回数据后再进行其他操作
let func1 = this.http.get('/api/example/info')
let func2 = this.http.get('/api/example/info', {
data: {
id: 3
}
})
this.http.all([func1, func2]).then(res => {
console.log(res)
this.fui.toast('请求成功！')
}).catch(e => {})
},
async sync() {
console.log('同步请求start...')
let res = await this.http.get('/api/example/info')
console.log(res)
console.log('同步请求end...')
this.fui.toast('请求成功！')
},
request() {
this.http.request({
url: '/api/example/info',
method: 'GET',
data: {
id: '100'
}
}).then(res => {
console.log(res)
const d = res.data;
if (d.succeeded) {
this.fui.toast('请求成功！')
}
}).catch(e => {})
},
vip() {
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
}
}
}
</script>
<style>
.fui-page__bd {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
</style>

149
pages/component/js/utils/utils.vue Normal file
View File

@ -0,0 +1,149 @@
<!--本文件由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>

127
pages/component/js/validator/validator.vue Normal file
View File

@ -0,0 +1,127 @@
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 8 61 4 07254 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
<view class="fui-wrap">
<view class="fui-page__hd">
<view class="fui-page__title fui-align__center" @tap="vip">Validator<image
src="/static/images/index/light/icon_member_3x.png"></image>
</view>
<view class="fui-page__desc">Validator 表单验证，提供了常用的表单校验方法（完整内容请查看文档），支持传入自定义校验方法。</view>
</view>
<view class="fui-page__bd">
<fui-input required label="姓名" borderTop placeholder="请输入姓名" v-model="formData.name"></fui-input>
<fui-input required label="手机号" placeholder="请输入手机号码" v-model="formData.mobile"></fui-input>
<fui-input required label="密码" password placeholder="请输入密码" v-model="formData.password">
</fui-input>
<fui-input required label="确认密码" password placeholder="请再次输入密码" v-model="formData.confirmPwd">
</fui-input>
<fui-input label="年龄" placeholder="请输入年龄" v-model="formData.age"></fui-input>
<fui-input label="身份证" placeholder="请输入身份证号码" v-model="formData.idCard"></fui-input>
<fui-input label="邮箱" placeholder="请输入邮箱" v-model="formData.email"></fui-input>
<fui-input label="个人主页" placeholder="请输入个人主页" v-model="formData.url">
</fui-input>
<fui-input label="商品金额" placeholder="请输入商品金额" v-model="formData.amount">
</fui-input>
<fui-input label="微信号" :bottomLeft="0" placeholder="自定义校验，6至20位，字母，数字..." v-model="formData.wechatNo">
</fui-input>
<view class="fui-btn__box">
<fui-button text="Submit" bold @click="submit"></fui-button>
</view>
</view>
</view>
</template>
<script>
import form from '@/components/firstui/fui-validator/fui-validator'
//自定义校验方法
function checkWxNo(value) {
return /^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/.test(value);
}
const rules = [{
name: "name",
rule: ["required", "isChinese", "minLength:2", "maxLength:6"],
msg: ["请输入姓名", "姓名必须全部为中文", "姓名必须2个或以上字符", "姓名不能超过6个字符"]
}, {
name: "mobile",
rule: ["required", "isMobile"],
msg: ["请输入手机号", "请输入正确的手机号"]
}, {
name: "password",
rule: ["required", "isEnAndNo"],
msg: ["请输入密码", "密码为4~30位数字和字母组合"]
}, {
name: "confirmPwd",
rule: ["required", "isSame:password"],
msg: ["请输入确认密码", "两次输入的密码不一致"]
}, {
name: "age",
rule: ["isNumber", "range:[1,149]"],
msg: ["请输入正确的年龄", "请输入正确的年龄范围：1~149"]
}, {
name: "idCard",
rule: ["isIdCard"],
msg: ["请输入正确的身份证号码"]
}, {
name: "email",
rule: ["isEmail"],
msg: ["请输入正确的邮箱"]
}, {
name: "url",
rule: ["isUrl"],
msg: ["请输入正确的URL地址"]
}, {
name: "amount",
rule: ["isAmount"],
msg: ["请输入正确的金额，允许保留两位小数"]
}, {
name: "wechatNo",
validator: [{
msg: "微信号不正确！请输入6~20位以字母开头，字母、数字、减号、下划线组合的微信号",
method: checkWxNo
}]
}];
export default {
data() {
return {
formData: {
name: '',
mobile: '',
password: '',
confirmPwd: '',
age: '',
idCard: '',
email: '',
url: '',
amount: '',
wechatNo: ''
}
}
},
methods: {
submit() {
console.log(this.formData)
let res = form.validator(this.formData, rules);
console.log(res)
if (res.isPassed) {
this.fui.toast('校验通过！')
} else {
this.fui.toast(res.errorMsg)
}
},
vip() {
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
}
}
}
</script>
<style>
page {
font-weight: normal;
}
.fui-btn__box {
width: 100%;
padding: 64rpx 32rpx;
box-sizing: border-box;
}
</style>