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

79
pages/component/data/alert/alert.vue Normal file
View File

@ -0,0 +1,79 @@
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1861 4 0 72549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
<view class="fui-wrap">
<view class="fui-page__hd">
<view class="fui-page__title">Alert</view>
<view class="fui-page__desc">Alert 警告框。</view>
</view>
<view class="fui-page__bd fui-page__spacing">
<view class="fui-section__title">基础使用</view>
<fui-alert title="An info alert"></fui-alert>
<fui-alert type="success" isLeft title="An success alert" :marginTop="24"></fui-alert>
<fui-alert type="warn" isLeft title="An warn alert" :marginTop="24"></fui-alert>
<fui-alert type="clear" isLeft title="An error alert" :marginTop="24"></fui-alert>
<fui-alert isLeft title="An info alert" desc="Content of alert. Content of alert." :marginTop="24">
</fui-alert>
<fui-alert type="clear" isLeft title="An error alert" desc="Content of alert. Content of alert."
:marginTop="24">
</fui-alert>
<fui-alert type="warn" isLeft title="An warn alert" desc="Content of alert. Content of alert."
:marginTop="24">
</fui-alert>
<fui-alert type="success" title="An warn alert" desc="Content of alert. Content of alert." :marginTop="24">
</fui-alert>
<fui-alert type="info" title="An info alert" :marginTop="24"></fui-alert>
<fui-alert type="clear" title="An success alert" :marginTop="24"></fui-alert>
<fui-alert type="warn" title="An warn alert" :marginTop="24"></fui-alert>
<view class="fui-section__title" v-if="show || shown">可关闭</view>
<fui-alert closable title="An info alert" v-if="show" @close="close"></fui-alert>
<fui-alert type="success" closable title="An info alert"
desc="Content of alert. Content of alert.Content of alert." v-if="shown" @close="close2"
:marginTop="24"></fui-alert>
<view class="fui-section__title">自定义图标</view>
<fui-alert type="info" isLeft spacing title="An info alert" size="28rpx">
<fui-icon name="info" :size="48" color="#fff"></fui-icon>
</fui-alert>
<fui-alert type="success" isLeft spacing title="An info alert" size="28rpx" :marginTop="24">
<fui-icon name="checkbox" :size="48" color="#fff"></fui-icon>
</fui-alert>
<fui-alert type="warn" isLeft spacing title="An info alert" size="28rpx" :marginTop="24">
<fui-icon name="warning" :size="48" color="#fff"></fui-icon>
</fui-alert>
<fui-alert type="clear" isLeft spacing title="An info alert" size="28rpx" :marginTop="24">
<fui-icon name="clear" :size="48" color="#fff"></fui-icon>
</fui-alert>
<view class="fui-section__title">自定义颜色</view>
<fui-alert type="clear" iconColor="#FF2B2B" background="#fff" color="#181818" title="An info alert">
</fui-alert>
<fui-alert type="success" iconColor="#09BE4F" background="#fff" color="#181818" title="An info alert"
:marginTop="24"></fui-alert>
<fui-alert type="warn" iconColor="#FFB703" background="#fff" color="#181818" title="An info alert"
:marginTop="24"></fui-alert>
</view>
</view>
</template>
<script>
export default {
data() {
return {
show: true,
shown: true
}
},
methods: {
close() {
this.show = false;
},
close2() {
this.shown = false;
}
}
}
</script>
<style>
page {
font-weight: normal;
}
</style>

60
pages/component/data/avatar/avatar.vue Normal file
View File

@ -0,0 +1,60 @@
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：18 6 140 7 2 5 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
<view class="fui-wrap">
<view class="fui-page__hd">
<view class="fui-page__title">Avatar</view>
<view class="fui-page__desc">Avatar 头像，用图标、图片或者字符的形式展示用户或事物信息。</view>
</view>
<view class="fui-page__bd fui-page__spacing">
<view class="fui-section__title">基础使用</view>
<fui-avatar size="small" text="A"></fui-avatar>
<fui-avatar text="B"></fui-avatar>
<fui-avatar size="large" text="丁"></fui-avatar>
<fui-avatar text="刘" background="#FFB703"></fui-avatar>
<fui-avatar size="small" text="邹" background="#465CFF"></fui-avatar>
<view class="fui-section__title">改变圆角值</view>
<fui-avatar size="small" text="A" shape="square" marginRight="24"></fui-avatar>
<fui-avatar text="B" shape="square" marginRight="24"></fui-avatar>
<fui-avatar size="large" text="丁" radius="30" marginRight="24"></fui-avatar>
<fui-avatar text="刘" background="#FFB703" radius="30" marginRight="24"></fui-avatar>
<fui-avatar size="small" text="邹" background="#465CFF" radius="0"></fui-avatar>
<view class="fui-section__title">使用图片</view>
<view class="fui-align__center">
<fui-avatar size="small" src="/static/images/common/img_logo.png" shape="square"></fui-avatar>
<fui-avatar src="/static/images/common/img_logo.png" radius="0"></fui-avatar>
<fui-avatar size="large" src="/static/images/common/img_logo.png" radius="30"></fui-avatar>
<fui-avatar src="/static/images/common/img_logo.png"></fui-avatar>
<fui-avatar size="small" src="/static/images/common/img_logo.png"></fui-avatar>
</view>
<view class="fui-section__title">自定义图标</view>
<fui-avatar marginRight="24">
<fui-icon name="my" color="#fff"></fui-icon>
</fui-avatar>
<fui-avatar>
<fui-icon name="my-fill" color="#fff"></fui-icon>
</fui-avatar>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
page{
background-color: #fff;
}
.fui-wrap{
padding-bottom: 64rpx;
}
</style>

118
pages/component/data/badge/badge.vue Normal file
View File

@ -0,0 +1,118 @@
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 86 1 4 0 7254 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
<view class="fui-wrap">
<view class="fui-page__hd">
<view class="fui-page__title">Badge</view>
<view class="fui-page__desc">Badge 徽章，可自定义颜色。</view>
</view>
<view class="fui-page__bd">
<view class="fui-section__title">基础使用</view>
<fui-list-cell :highlight="false">
<fui-badge value="1"></fui-badge>
<fui-badge type="success" value="2"></fui-badge>
<fui-badge type="warning" value="3"></fui-badge>
<fui-badge type="danger" value="4"></fui-badge>
<fui-badge type="purple" value="5"></fui-badge>
<fui-badge value="6" background="#eee" color="#333"></fui-badge>
<fui-badge dot></fui-badge>
<fui-badge type="success" dot></fui-badge>
<fui-badge type="warning" dot></fui-badge>
<fui-badge type="danger" dot></fui-badge>
<fui-badge type="purple" dot></fui-badge>
</fui-list-cell>
<view class="fui-section__title">新消息</view>
<fui-list-cell arrow topBorder>
<view class="fui-list__item">
<text>单行列表</text>
<fui-badge value="1" type="danger"></fui-badge>
</view>
</fui-list-cell>
<fui-list-cell arrow>
<view class="fui-list__item">
<text>单行列表</text>
<fui-badge dot type="danger"></fui-badge>
</view>
</fui-list-cell>
<fui-list-cell arrow>
<view class="fui-align__center">
<text>单行列表</text>
<fui-badge type="danger" :marginLeft="16" value="8"></fui-badge>
</view>
</fui-list-cell>
<fui-list-cell arrow :bottomLeft="0">
<view class="fui-align__center">
<text>单行列表</text>
<fui-badge type="danger" :marginLeft="16" value="new"></fui-badge>
</view>
</fui-list-cell>
<view class="fui-section__title">新消息、绝对定位</view>
<fui-list-cell topBorder>
<view class="fui-align__center">
<view class="fui-item__img-box">
<image class="fui-item__img" src="/static/images/common/icon_tabbar_3x.png" mode="widthFix">
</image>
<fui-badge absolute type="danger" :value="200" :max="99"></fui-badge>
</view>
<view>
<view>联系人名称</view>
<text class="fui-page__desc">摘要信息</text>
</view>
</view>
</fui-list-cell>
<fui-list-cell :bottomLeft="0">
<view class="fui-align__center">
<view class="fui-item__img-box">
<image class="fui-item__img" src="/static/images/common/icon_tabbar_3x.png" mode="widthFix">
</image>
<fui-badge absolute type="danger" dot></fui-badge>
</view>
<view>
<view>联系人名称</view>
<text class="fui-page__desc">摘要信息</text>
</view>
</view>
</fui-list-cell>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
page {
font-weight: normal;
}
.fui-section__title {
margin-left: 32rpx;
}
.fui-list__item {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
}
.fui-item__img-box {
position: relative;
margin-right: 24rpx;
}
.fui-item__img {
width: 96rpx;
height: 96rpx;
display: block;
}
</style>

47
pages/component/data/circle/circle.vue Normal file
View File

@ -0,0 +1,47 @@
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 186 140 7 2 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
<view class="fui-wrap">
<view class="fui-page__hd">
<view class="fui-page__title fui-align__center" @tap="vip">Circle <image
src="/static/images/index/light/icon_member_3x.png"></image>
</view>
<view class="fui-page__desc">Circle 圆形进度条，用于展现某个任务的当前进度。</view>
</view>
<view class="fui-page__bd fui-page__spacing">
<view class="fui-section__title">基础使用</view>
<fui-circle :percent="80"></fui-circle>
<view class="fui-section__title">调整样式/起始弧度/渐变</view>
<!-- 快手小程序暂不支持渐变 -->
<!--注意：头条小程序不支持颜色值简写 如：#EEEEEE 不可写成 #eee-->
<fui-circle :percent="75" color="#FFB703" background="#EEEEEE" foreground="#FFB703" gradient="#FAE845"
:sAngle="-0.5" :width="200" :strokeWidth="6" :size="16"></fui-circle>
<view class="fui-section__title">调整百分比</view>
<fui-circle :percent="percent"></fui-circle>
<view class="fui-btn__box">
<fui-button type="gray" btn-size="medium" text="percent" bold :margin="['24rpx']"
@click="percentChange"></fui-button>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
percent: 0
}
},
methods: {
vip() {
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
},
percentChange() {
let percent = this.percent + 25
this.percent = percent > 100 ? 25 : percent
}
}
}
</script>
<style></style>

159
pages/component/data/collapse/collapse.vue Normal file
View File

@ -0,0 +1,159 @@
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 18 61 40 7 2549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
<view class="fui-wrap">
<view class="fui-page__hd">
<view class="fui-page__title">Collapse</view>
<view class="fui-page__desc">Collapse 折叠面板，可以折叠/展开的内容区域。</view>
</view>
<view class="fui-page__bd">
<view class="fui-section__title">基础使用</view>
<!--fui-collapse-item可单独使用 @change事件仅无父组件fui-collapse时生效-->
<fui-collapse-item @change="change">
<view class="fui-item__box">
<image src="/static/images/common/logo.png" class="fui-logo"></image>
<text>First UI</text>
</view>
<template v-slot:content>
<view class="fui-descr">First UI 是一套基于uni-app开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。</view>
</template>
</fui-collapse-item>
<view class="fui-section__title">默认展开</view>
<fui-collapse @change="change">
<fui-collapse-item :index="index" :open="item.isOpen" v-for="(item,index) in items" :key="index">
<view class="fui-item__box">
<image :src="item.src" class="fui-logo"></image>
<text>{{item.title}}</text>
</view>
<template v-slot:content>
<view class="fui-descr" style="background-color: rgba(255, 183, 3, .1);">{{item.descr}}</view>
</template>
</fui-collapse-item>
</fui-collapse>
<view class="fui-section__title">手风琴效果</view>
<fui-collapse accordion @change="change">
<fui-collapse-item :index="index" v-for="(item,index) in items" :key="index">
<view class="fui-item__box">
<image :src="item.src" class="fui-logo"></image>
<text>{{item.title}}</text>
</view>
<template v-slot:content>
<view class="fui-descr" style="background-color: rgba(255, 183, 3, .1);">{{item.descr}}</view>
</template>
</fui-collapse-item>
</fui-collapse>
<view class="fui-section__title">无动画效果</view>
<fui-collapse @change="change">
<fui-collapse-item :animation="false" arrowColor="#333" :index="index" v-for="(item,index) in items"
:key="index">
<view class="fui-item__box">
<image :src="item.src" class="fui-logo"></image>
<text>{{item.title}}</text>
</view>
<template v-slot:content>
<view class="fui-descr" style="background-color: rgba(255, 183, 3, .1);">{{item.descr}}</view>
</template>
</fui-collapse-item>
</fui-collapse>
<view class="fui-section__title">禁用不可点击</view>
<fui-collapse @change="change">
<fui-collapse-item :disabled="index===1" arrowColor="#333" :index="index" v-for="(item,index) in items"
:key="index">
<view class="fui-item__box">
<image :src="item.src" class="fui-logo"></image>
<text>{{item.title}}</text>
</view>
<template v-slot:content>
<view class="fui-descr" style="background-color: rgba(255, 183, 3, .1);">{{item.descr}}</view>
</template>
</fui-collapse-item>
</fui-collapse>
<view class="fui-section__title">不显示箭头</view>
<fui-collapse accordion @change="change">
<fui-collapse-item :arrow="false" :index="index" v-for="(item,index) in list" :key="index">
<fui-list-cell :padding="['0','0']">
<view class="fui-item__box">
<text style="font-size: 28rpx;">{{item.question}}</text>
</view>
</fui-list-cell>
<template v-slot:content>
<view class="fui-descr" style="color: #09BE4F;">{{item.answer}}</view>
</template>
</fui-collapse-item>
</fui-collapse>
</view>
</view>
</template>
<script>
export default {
data() {
return {
items: [{
src: '/static/images/common/logo.png',
title: 'First UI',
descr: 'First UI 是一套基于uni-app开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。',
isOpen: true
}, {
src: '/static/images/common/icon_tabbar_2x.png',
title: '标题内容',
descr: '自定义折叠内容主体，这是一段比较长内容。默认折叠主要内容，只显示当前项标题。点击标题展开。再次点击标题，折叠内容。'
}],
list: [{
question: '我只想用某个组件可以吗？',
answer: '可以，组件支持按需引入，详见 First UI 文档 “快速上手”，使用组件前请先仔细阅读组件文档。'
}, {
question: '为什么文档或示例中有些组件在GitHub或npm下载的包中无法找到？',
answer: 'First UI 分为 “开源版” 和 “商业版”，所有示例或文档中加 “V” 的表示需要开通会员才可获取源码使用，会员内容不会发布到任何公开渠道。'
}, {
question: '组件支持Nvue、支付宝小程序...吗？',
answer: '支持。组件支持哪些平台请参考组件具体文档，每个组件文档中都有支持平台的说明。'
}]
}
},
methods: {
change(e) {
console.log(e)
}
}
}
</script>
<style>
page {
font-weight: normal;
}
.fui-wrap {
padding-bottom: 64rpx;
}
.fui-section__title {
margin-left: 32rpx;
}
.fui-item__box {
width: 100%;
padding: 26rpx 32rpx;
box-sizing: border-box;
display: flex;
align-items: center;
}
.fui-logo {
width: 48rpx;
height: 48rpx;
margin-right: 24rpx;
display: block;
}
.fui-descr {
width: 100%;
padding: 32rpx;
font-size: 28rpx;
line-height: 52rpx;
color: #7F7F7F;
word-break: break-all;
box-sizing: border-box;
}
</style>

129
pages/component/data/countdown/countdown.vue Normal file
View File

@ -0,0 +1,129 @@
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 18 6 1 4 072549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
<view class="fui-wrap">
<view class="fui-page__hd">
<view class="fui-page__title fui-align__center" @tap="vip">CountDown <image
src="/static/images/index/light/icon_member_3x.png"></image>
</view>
<view class="fui-page__desc">CountDown 倒计时，用于倒计时场景，可手动控制。</view>
</view>
<view class="fui-page__bd">
<view class="fui-section__title">基础使用</view>
<view class="fui-timer__box">
<fui-count-down :value="value" @end="end"></fui-count-down>
</view>
<view class="fui-section__title">冒号显示为文字</view>
<view class="fui-timer__box">
<fui-count-down :isColon="false" borderColor="transparent" background="transparent" :value="3600"
@end="end"></fui-count-down>
</view>
<view class="fui-section__title">显示天</view>
<view class="fui-timer__box">
<fui-count-down isDays :isColon="false" borderColor="transparent" background="transparent"
:value="244800" @end="end"></fui-count-down>
</view>
<view class="fui-section__title">仅显示秒</view>
<view class="fui-timer__box">
<fui-count-down :isHours="false" :isMinutes="false" :isColon="false" unitEn borderColor="transparent"
background="transparent" :value="180" @end="end"></fui-count-down>
</view>
<view class="fui-section__title">更换样式，显示毫秒</view>
<view class="fui-timer__box">
<fui-count-down background="#465CFF" color="#fff" colonColor="#465CFF" borderColor="#465CFF" isMs
msWidth="40" :value="3600" @end="end">
</fui-count-down>
</view>
<view class="fui-section__title">手动控制</view>
<view class="fui-timer__box">
<fui-count-down background="#333" color="#fff" colonColor="#333" isMs msWidth="36" :value="30"
:autoStart="false" @end="end" ref="countdown">
</fui-count-down>
</view>
<fui-grid @click="handleClick">
<fui-grid-item backgroundColor="#fff">
<view class="fui-grid__cell">
<fui-icon name="play"></fui-icon>
<text>开始</text>
</view>
</fui-grid-item>
<fui-grid-item backgroundColor="#fff" :index="1">
<view class="fui-grid__cell">
<fui-icon name="suspend"></fui-icon>
<text>暂停</text>
</view>
</fui-grid-item>
<fui-grid-item backgroundColor="#fff" :index="2">
<view class="fui-grid__cell">
<fui-icon name="refresh"></fui-icon>
<text>重置</text>
</view>
</fui-grid-item>
</fui-grid>
</view>
</view>
</template>
<script>
export default {
data() {
return {
value: 0
}
},
onReady() {
setTimeout(() => {
this.value = 20
}, 2000)
},
methods: {
vip() {
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
},
end(e) {
console.log(e)
this.fui.toast('倒计时结束~')
},
handleClick(e) {
let index = e.detail.index;
if (index == 0) {
this.$refs.countdown.startCountdown()
} else if (index == 1) {
this.$refs.countdown.endCountdown(true)
} else {
this.$refs.countdown.resetCountdown()
}
}
}
}
</script>
<style>
page {
font-weight: normal;
}
.fui-wrap {
padding-bottom: 64rpx;
}
.fui-section__title {
margin-left: 32rpx;
}
.fui-timer__box {
width: 100%;
padding-left: 32rpx;
padding-bottom: 16rpx;
box-sizing: border-box;
}
.fui-grid__cell {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
flex: 1;
font-size: 28rpx;
}
</style>

117
pages/component/data/dataTag/dataTag.vue Normal file
View File

@ -0,0 +1,117 @@
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 861 40725 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
<view class="fui-wrap">
<view class="fui-page__hd">
<view class="fui-page__title fui-align__center fui-rect" @tap="vip">DataTag <image
src="/static/images/index/light/icon_member_3x.png"></image>
</view>
<view class="fui-page__desc fui-rect">DataTag 标签选择，通过数据驱动的单选标签和复选标签。</view>
</view>
<view class="fui-page__bd fui-page__spacing">
<view class="fui-section__title">单选标签</view>
<fui-data-tag :options="options" @change="change"></fui-data-tag>
<view class="fui-section__title">单选标签/设置默认值/背景/边框</view>
<!--默认值vue2 使用value，vue3使用modelValue。建议使用v-model方式-->
<fui-data-tag defaultBorderColor="#FBDA41" background="#F1F4FA" activeBgColor="#FEDF48"
border-color="#FBDA41" active-color="#333" radius="20" :value="defVal" :modelValue="defVal"
:options="options" @change="change"></fui-data-tag>
<view class="fui-section__title">复选标签/带角标</view>
<fui-data-tag multiple mark :options="options" @change="change2"></fui-data-tag>
<view class="fui-section__title">复选标签/设置默认值</view>
<fui-data-tag multiple mark :options="options" :value="chkDefVal" :modelValue="chkDefVal" @change="change2">
</fui-data-tag>
<view class="fui-section__title">单选标签/v-model/可全部取消</view>
<fui-data-tag :min="0" :options="options" v-model="val"></fui-data-tag>
<view class="fui-section__title">多选标签/v-model/min/max/圆角值</view>
<fui-data-tag multiple :multiple-min="1" :max="2" :radius="40" activeBgColor="#F1F4FA" :options="options"
v-model="vals">
</fui-data-tag>
<view class="fui-section__title">单选标签/带角标/调整颜色/默认值</view>
<fui-data-tag :options="options" v-model="val2" width="180" activeColor="#FFB703" borderColor="#FFB703" mark
markColor="#FFB703"></fui-data-tag>
<view class="fui-section__title">复选标签/与全选标签互斥</view>
<fui-data-tag multiple mark :options="options2" @change="change2">
</fui-data-tag>
</view>
</view>
</template>
<script>
export default {
watch: {
val(newVal) {
if (newVal) {
this.fui.toast(newVal)
} else {
this.fui.toast('已全部取消')
}
},
vals(newVal) {
if (newVal.length > 0) {
this.fui.toast(newVal.join(','))
} else {
this.fui.toast('已全部取消')
}
}
},
data() {
return {
options: ['选项一', '选项二', '选项三', '选项四'],
defVal: '选项二',
chkDefVal: ['选项二', '选项三'],
val: '',
vals: [],
val2: '选项三',
//isAll仅可设置一个为true
options2: [{
text: '全部',
value: '-99',
isAll: true
}, {
text: '选项一',
value: '1',
//以下为扩展参数
id: 1,
param: 3
}, {
text: '选项二',
value: '2',
//扩展参数
id: 2,
param: 4
}, {
text: '选项三',
value: '3',
//扩展参数
id: 3,
param: 5
}]
}
},
methods: {
vip() {
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
},
change(e) {
console.log(e.detail)
this.fui.toast(e.detail.value)
},
change2(e) {
console.log(e.detail)
let arr = e.detail.value || []
if (arr.length > 0) {
this.fui.toast(arr.join(','))
} else {
this.fui.toast('已全部取消')
}
}
}
}
</script>
<style>
.fui-wrap {
background-color: #F1F4FA;
padding-bottom: 64rpx;
}
</style>

49
pages/component/data/divider/divider.vue Normal file
View File

@ -0,0 +1,49 @@
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1861 4 07 2 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
<view class="fui-wrap">
<view class="fui-page__hd">
<view class="fui-page__title">Divider</view>
<view class="fui-page__desc">Divider 分割线，可自定义线条宽度、颜色等。</view>
</view>
<view class="fui-page__bd">
<fui-divider text="没有更多了"></fui-divider>
<fui-divider dividerColor="#465CFF" text="没有更多了"></fui-divider>
<fui-divider dividerColor="#FFB703" color="#FFB703" text="没有更多了"></fui-divider>
<fui-divider dividerColor="#09BE4F" color="#09BE4F" width="100%" text="没有更多了"></fui-divider>
<fui-divider dividerColor="linear-gradient(to right,#eee,#ccc,#ccc,#eee)" text="没有更多了"></fui-divider>
<fui-divider text="已加载完全部数据"></fui-divider>
<fui-divider>
<view class="fui-flex__center">
<fui-icon name="like" color="#FF2B2B" :size="40"></fui-icon>
<text class="fui-text">猜你喜欢</text>
</view>
</fui-divider>
<fui-divider>
<view class="fui-flex__center">
<fui-icon name="fabulous" color="#FFB703" :size="40"></fui-icon>
<text class="fui-text">好物推荐</text>
</view>
</fui-divider>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
.fui-text {
font-size: 24rpx;
padding-left: 8rpx;
}
</style>

44
pages/component/data/empty/empty.vue Normal file
View File

@ -0,0 +1,44 @@
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：18 614 07 25 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
<view class="fui-wrap">
<view class="fui-page__hd">
<view class="fui-page__title">Empty</view>
<view class="fui-page__desc">Empty 缺省页，页面的信息内容为空或信息响应异常的状态。</view>
</view>
<view class="fui-page__bd">
<fui-empty :src="`${resUrl}/component/empty/img_data_3x.png`" title="暂无数据" descr="功能开发中，敬请期待！">
<fui-button text="返回首页" :size="28" width="336rpx" height="84rpx" radius="100rpx" background="#fff"
:margin="['64rpx','0']" borderColor="#465CFF" color="#465CFF" @click="goIndex"></fui-button>
</fui-empty>
<fui-empty :src="`${resUrl}/component/empty/img_news_3x.png`" title="暂无新消息" marginTop="64"></fui-empty>
<fui-empty :src="`${resUrl}/component/empty/img_address_3x.png`" title="暂无地址信息" marginTop="64">
</fui-empty>
<fui-empty :src="`${resUrl}/component/empty/img_network_3x.png`" title="请检查网络设置！" marginTop="64">
</fui-empty>
<fui-empty :src="`${resUrl}/component/empty/img_order_3x.png`" title="暂无订单" marginTop="64"></fui-empty>
<fui-empty :src="`${resUrl}/component/empty/img_search_3x.png`" title="没有找到搜索的内容额~" marginTop="64">
</fui-empty>
</view>
</view>
</template>
<script>
export default {
data() {
return {
resUrl: this.fui.resUrl()
}
},
methods: {
goIndex() {
this.fui.href('/pages/tabbar/index/index', true)
}
}
}
</script>
<style>
page {
background-color: #fff;
}
</style>

43
pages/component/data/loadmore/loadmore.vue Normal file
View File

@ -0,0 +1,43 @@
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 18 6140 725 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
<view class="fui-wrap">
<view class="fui-page__hd">
<view class="fui-page__title">LoadMore</view>
<view class="fui-page__desc">LoadMore 加载更多，主要使用场景如：上拉加载等。</view>
</view>
<view class="fui-page__bd">
<view class="fui-section__title">基本使用</view>
<fui-loadmore></fui-loadmore>
<fui-loadmore activeColor="#FFB703"></fui-loadmore>
<fui-loadmore iconColor="rgba(255, 183, 3, .2)" activeColor="#FFB703" color="#FFB703"></fui-loadmore>
<view class="fui-section__title">direction:col</view>
<fui-loadmore direction="col" text="加载中" color="#465CFF"></fui-loadmore>
<view class="fui-section__title">自定义图标</view>
<fui-loadmore src="/static/images/component/loading_gray.png" :iconWidth="36" text="加载中...">
</fui-loadmore>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
page {
font-weight: normal;
}
.fui-section__title {
margin-left: 32rpx;
}
</style>

64
pages/component/data/progress/progress.vue Normal file
View File

@ -0,0 +1,64 @@
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 861 40 725 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
<view class="fui-wrap">
<view class="fui-page__hd">
<view class="fui-page__title fui-align__center" @tap="vip">Progress <image
src="/static/images/index/light/icon_member_3x.png"></image>
</view>
<view class="fui-page__desc">Progress 进度条，用于展现某个任务的当前进度。</view>
</view>
<view class="fui-page__bd fui-page__spacing">
<view class="fui-section__title">基础使用</view>
<fui-progress :percent="80"></fui-progress>
<view class="fui-section__title">显示进度</view>
<fui-progress :percent="70" showInfo></fui-progress>
<view class="fui-section__title">改变颜色</view>
<fui-progress :percent="60" background="#ddd" activeColor="#FFB703"></fui-progress>
<view class="fui-section__title">设置高度</view>
<fui-progress :percent="70" height="16" radius="16" activeColor="#09BE4F"></fui-progress>
<view class="fui-section__title">控制进度</view>
<fui-progress :percent="percent" showInfo></fui-progress>
<view class="fui-btn__box">
<fui-button type="gray" btn-size="medium" text="percent" bold :margin="['24rpx']"
@click="percentChange"></fui-button>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
percent: 0
}
},
methods: {
vip() {
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
},
percentChange() {
if (this.percent >= 100) {
this.percent = 40;
} else {
//大于100按100处理
this.percent += 30;
}
}
}
}
</script>
<style>
.fui-btn__box {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-top: 48rpx;
}
.fui-wrap {
padding-bottom: 64rpx;
}
</style>

115
pages/component/data/skeleton/skeleton.vue Normal file
View File

@ -0,0 +1,115 @@
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 861 4 0 72 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
<view class="fui-wrap">
<view class="fui-page__hd">
<view class="fui-page__title fui-align__center fui-rect" @tap="vip">Skeleton <image
src="/static/images/index/light/icon_member_3x.png"></image>
</view>
<view class="fui-page__desc fui-rect">Skeleton 骨架屏，在需要等待加载内容的位置提供一个占位图形组合。</view>
</view>
<view class="fui-page__bd">
<view class="fui-sk__box fui-rect">骨架节点</view>
<view class="fui-sk__wrap fui-round">骨架节点</view>
<view class="fui-section__title fui-rect">手动绘制骨架</view>
<view class="fui-outer">
<!--手动绘制数据，外层设置relative定位节点-->
<fui-skeleton outerClass="fui-outer" :preloadList="preloadList"></fui-skeleton>
</view>
</view>
<!--查找骨架节点 fui-rect、fui-round-->
<fui-skeleton @change="change" v-if="show" background="#F1F4FA" outerClass="fui-wrap"></fui-skeleton>
</view>
</template>
<script>
export default {
data() {
return {
//手动绘制数据，比较繁琐。可通过动态查找节点，然后通过change事件返回节点数据缓存使用
preloadList: [{
left: 15,
top: 10,
bottom: 220,
width: 40,
height: 40,
type: 'round'
}, {
left: 60,
right: 365,
top: 10,
bottom: 220,
width: 180,
height: 19,
type: 'rect'
}, {
left: 60,
right: 365,
top: 40,
bottom: 220,
width: 240,
height: 19,
type: 'rect'
}, {
left: 60,
right: 365,
top: 70,
bottom: 220,
width: 200,
height: 19,
type: 'rect'
}],
show: true
}
},
onReady() {
setTimeout(() => {
this.show = false
}, 2000)
},
methods: {
vip() {
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
},
change(e) {
//返回查找的骨架节点信息，可在开发环境中获取缓存到本地，然后直接用于生产环境
//nvue端暂不支持动态获取节点，可考虑缓存节点数据直接传入使用
console.log(e.nodes)
}
}
}
</script>
<style>
.fui-section__title {
width: 300rpx;
margin-left: 32rpx;
white-space: nowrap;
}
.fui-outer {
width: 100%;
height: 300rpx;
position: relative;
}
.fui-sk__box {
width: 100%;
height: 300rpx;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
}
.fui-sk__wrap {
background: #16AB60;
color: #fff;
width: 200rpx;
height: 200rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 40rpx auto;
}
</style>

94
pages/component/data/tag/tag.vue Normal file
View File

@ -0,0 +1,94 @@
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 8 614 0 72 5 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
<view class="fui-wrap">
<view class="fui-page__hd">
<view class="fui-page__title">Tag</view>
<view class="fui-page__desc">Tag 标签，用于标记或分类。</view>
</view>
<view class="fui-page__bd fui-page__spacing">
<view class="fui-section__title">基础使用</view>
<view class="fui-align__center">
<fui-tag text="标签一" margin-bottom="24" margin-right="24"></fui-tag>
<fui-tag text="标签二" type="danger" margin-bottom="24" margin-right="24"></fui-tag>
<fui-tag text="标签三" type="success" margin-bottom="24" margin-right="24"></fui-tag>
<fui-tag text="标签四" type="warning" margin-bottom="24" margin-right="24"></fui-tag>
<fui-tag text="标签五" type="purple" margin-bottom="24"></fui-tag>
</view>
<view class="fui-section__title">浅色调</view>
<view class="fui-align__center">
<fui-tag text="标签一" margin-bottom="24" theme="light" margin-right="24"></fui-tag>
<fui-tag text="标签二" type="danger" theme="light" margin-bottom="24" margin-right="24"></fui-tag>
<fui-tag text="标签三" type="success" theme="light" margin-bottom="24" margin-right="24"></fui-tag>
<fui-tag text="标签四" type="warning" theme="light" margin-bottom="24" margin-right="24"></fui-tag>
<fui-tag text="标签五" type="purple" theme="light" margin-bottom="24" margin-right="24"></fui-tag>
</view>
<view class="fui-section__title">空心</view>
<view class="fui-align__center">
<fui-tag text="标签一" margin-bottom="24" theme="plain" margin-right="24"></fui-tag>
<fui-tag text="标签二" type="danger" theme="plain" margin-bottom="24" margin-right="24"></fui-tag>
<fui-tag text="标签三" type="success" theme="plain" margin-bottom="24" margin-right="24"></fui-tag>
<fui-tag text="标签四" type="warning" theme="plain" margin-bottom="24" margin-right="24"></fui-tag>
<fui-tag text="标签五" type="purple" theme="plain" margin-bottom="24"></fui-tag>
</view>
<view class="fui-section__title">带关闭按钮</view>
<view class="fui-align__center">
<fui-tag text="标签一" theme="light" margin-right="24" :padding="['12rpx','20rpx']">
<view class="fui-close__icon">
<fui-icon name="close" color="#465CFF" :size="32"></fui-icon>
</view>
</fui-tag>
<fui-tag text="标签二" type="danger" theme="light" margin-right="24" :padding="['12rpx','20rpx']">
<view class="fui-close__icon">
<fui-icon name="clear" color="#FF2B2B" :size="32"></fui-icon>
</view>
</fui-tag>
<fui-tag text="标签三" type="success" theme="light" margin-right="24" :padding="['12rpx','20rpx']">
<view class="fui-close__icon">
<fui-icon name="clear-fill" color="#09BE4F" :size="32"></fui-icon>
</view>
</fui-tag>
</view>
<view class="fui-section__title">自定义颜色、大小</view>
<view class="fui-align__center">
<fui-tag text="标签一" background="rgba(255, 43, 43, .05)" color="#333" margin-bottom="24"
margin-right="24"></fui-tag>
<fui-tag text="标签二" background="#CCCCCC" color="#fff" margin-bottom="24" margin-right="24"></fui-tag>
<fui-tag text="标签三" background="rgba(255, 183, 3, .1)" color="#FF2B2B" margin-bottom="24"
:scaleRatio="0.8" margin-right="24"></fui-tag>
<fui-tag text="标签四" background="rgba(104, 49, 255, .05)" color="#181818" margin-bottom="24"
:padding="['20rpx','40rpx']" margin-right="24"></fui-tag>
<fui-tag text="标签五" background="rgba(9, 190, 79, .05)" color="#181818" margin-bottom="24"
:padding="['12rpx','24rpx']"></fui-tag>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
page {
background-color: #fff;
}
.fui-align__center {
flex-wrap: wrap;
}
.fui-close__icon {
display: flex;
align-items: center;
padding: 6rpx 0 4rpx 24rpx;
}
</style>