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/basics/animation/animation.vue Normal file
View File

@ -0,0 +1,79 @@
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 186 14 0 72 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
<view class="fui-wrap">
<view class="fui-page__hd">
<view class="fui-page__title">Animation</view>
<view class="fui-page__desc">Animation 动画，过渡效果。</view>
</view>
<view class="fui-page__bd fui-page__spacing">
<fui-button type="gray" btn-size="medium" text="Fade" bold :margin="['24rpx']"
@click="ani(['fade'], true)"></fui-button>
<fui-button type="gray" btn-size="medium" text="Slide Top" bold @click="ani(['slide-top'])">
</fui-button>
<fui-button type="gray" btn-size="medium" text="Slide Left" bold :margin="['24rpx']"
@click="ani(['slide-left'])">
</fui-button>
<fui-button type="gray" btn-size="medium" text="Slide Right" bold @click="ani(['slide-right'])">
</fui-button>
<fui-button type="gray" btn-size="medium" text="Slide Bottom" bold :margin="['24rpx']"
@click="ani(['slide-bottom'])">
</fui-button>
<fui-button type="gray" btn-size="medium" text="Zoom In" bold @click="ani(['zoom-in', 'fade'])">
</fui-button>
<fui-button type="gray" btn-size="medium" text="Zoom Out" bold :margin="['24rpx']"
@click="ani(['zoom-out', 'fade'])"></fui-button>
<fui-button type="gray" btn-size="medium" text="Custom" bold
@click="ani(['slide-left','slide-top','fade'])"></fui-button>
</view>
<fui-animation :duration="500" :animationType="mode" :styles="styles" :show="show" @click="handleClick"
@change="change">
<view class="fui-ani__box fui-flex__center">transition</view>
</fui-animation>
</view>
</template>
<script>
export default {
data() {
return {
show: false,
mode: ['fade'],
styles: {}
}
},
methods: {
ani(mode, mask) {
if (mask) {
this.$set(this.styles, 'backgroundColor', 'rgba(0,0,0,0.6)');
} else {
this.$set(this.styles, 'backgroundColor', 'rgba(0,0,0,0)');
}
setTimeout(() => {
this.mode = mode;
this.show = !this.show;
}, 80);
},
handleClick() {
this.show = false;
},
change(e) {
console.log(e);
}
}
}
</script>
<style>
.fui-page__bd {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.fui-ani__box{
width: 240rpx;
height: 240rpx;
background-color: #6831FF;
color: #FFFFFF;
}
</style>

60
pages/component/basics/button/button.vue Normal file
View File

@ -0,0 +1,60 @@
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 86 14 07 2 5 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
<view class="fui-wrap">
<view class="fui-page__hd">
<view class="fui-page__title">Button</view>
<view class="fui-page__desc">Button 按钮，支持自定义大小、颜色等。</view>
</view>
<view class="fui-page__bd fui-page__spacing">
<view class="fui-section__title">按钮类型</view>
<fui-button text="默认按钮" @click="btnClick"></fui-button>
<fui-button :margin="['24rpx']" type="success">success</fui-button>
<fui-button type="warning">warning</fui-button>
<fui-button :margin="['24rpx']" type="danger">danger</fui-button>
<fui-button type="purple">purple</fui-button>
<fui-button :margin="['24rpx']" type="link" color="#465CFF">链接 link</fui-button>
<view class="fui-section__title">禁用状态</view>
<fui-button disabled>禁用按钮</fui-button>
<fui-button :margin="['24rpx']" disabled loading>禁用按钮</fui-button>
<fui-button disabled disabledBackground="#F8F8F8" disabledColor="#CCCCCC">禁用按钮
</fui-button>
<view class="fui-section__title">按钮形状</view>
<fui-button radius="0">方形按钮</fui-button>
<fui-button radius="96rpx" :margin="['24rpx']">圆形按钮</fui-button>
<view class="fui-section__title">按钮大小</view>
<fui-button btn-size="medium">medium</fui-button>
<fui-button type="warning" :margin="['24rpx']" btn-size="small">small</fui-button>
<fui-button type="danger" btn-size="mini">mini</fui-button>
<view class="fui-section__title">自定义按钮大小</view>
<fui-button plain color="#465CFF" borderColor="#465CFF">默认大小</fui-button>
<fui-button type="purple" :margin="['24rpx']" width="224rpx" height="84rpx" :size="28">小型按钮</fui-button>
<fui-button type="danger" width="200rpx" height="72rpx" :size="28">小型按钮</fui-button>
<view class="fui-section__title">自定义颜色</view>
<fui-button background="#fff" color="#465CFF" borderColor="#465CFF">朴素按钮</fui-button>
<fui-button :margin="['24rpx']" background="#fff" color="#6831FF" borderColor="#6831FF">朴素按钮</fui-button>
<fui-button background="linear-gradient(300deg, #6831FF 0%, #465CFF 100%)" border-width="0">渐变按钮
</fui-button>
<fui-button :margin="['24rpx']" background="linear-gradient(127deg, #FF416C 0%, #FF2B2B 100%)"
border-width="0">渐变按钮
</fui-button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
btnClick() {
this.fui.toast('click~')
// console.log('click~')
}
}
}
</script>
<style></style>

118
pages/component/basics/color/color.js Normal file
View File

@ -0,0 +1,118 @@
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 8 6140 72 549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
export default [{
text: '主色',
key:'key_01',
data: [{
color: '#FFFFFF',
text: '蓝色',
value: '#465CFF'
}]
}, {
text: '辅助色',
key:'key_02',
data: [{
color: '#FFFFFF',
text: '红色',
value: '#FF2B2B'
}, {
color: '#FFFFFF',
text: '黄色',
value: '#FFB703'
}, {
color: '#FFFFFF',
text: '紫色',
value: '#6831FF'
}, {
color: '#FFFFFF',
text: '绿色',
value: '#09BE4F'
}]
}, {
text: '字体颜色',
key:'key_03',
data: [{
color: '#FFFFFF',
text: '深黑色',
value: '#181818'
}, {
color: '#FFFFFF',
text: '深灰色',
value: '#333333'
}, {
color: '#FFFFFF',
text: '灰色',
value: '#B2B2B2'
}, {
color: '#FFFFFF',
text: '浅灰色',
value: '#CCCCCC'
}, {
color: '#181818',
text: '白色',
value: '#FFFFFF'
}]
}, {
text: '背景色',
key:'key_04',
data: [{
color: '#181818',
text: '浅蓝',
value: '#F1F4FA'
}, {
color: '#181818',
text: '白色',
value: '#FFFFFF'
}, {
color: '#181818',
text: '灰色',
value: '#F8F8F8'
}, {
color: '#181818',
text: '红色 5%',
value: 'rgba(255, 43, 43, .05)'
}, {
color: '#181818',
text: '黄色 10%',
value: 'rgba(255, 183, 3, .1)'
}, {
color: '#181818',
text: '紫色 5%',
value: 'rgba(104, 49, 255, .05)'
}, {
color: '#181818',
text: '绿色 5%',
value: 'rgba(9, 190, 79, .05)'
}, {
color: '#FFFFFF',
text: '黑色 60%',
value: 'rgba(0, 0, 0, 0.6)'
}, {
color: '#FFFFFF',
text: '黑色 20%',
value: 'rgba(0, 0, 0, 0.2)'
}]
}, {
text: '边框颜色',
key:'key_05',
data: [{
color: '#181818',
text: '灰色',
value: '#EEEEEE'
}]
}, {
text: '渐变色',
key:'key_06',
data: [{
color: '#FFFFFF',
text: '渐变色',
value: '#465CFF #6831FF',
gradual: 'linear-gradient(90deg, #465CFF 0%, #6831FF 100%)'
}, {
color: '#FFFFFF',
text: '渐变色',
value: '#FD8C8C #FF2B2B',
gradual: 'linear-gradient(90deg, #FD8C8C 0%, #FF2B2B 100%)'
}]
}]

72
pages/component/basics/color/color.vue Normal file
View File

@ -0,0 +1,72 @@
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 18 6 1 407 2 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
<view class="fui-wrap">
<view class="fui-page__hd">
<view class="fui-page__title">Color</view>
<view class="fui-page__desc">Color 色彩，First UI用色指南。</view>
</view>
<view class="fui-page__bd fui-page__spacing">
<block v-for="(item,index) in colors" :key="item.key">
<view class="fui-section__title">{{item.text}}</view>
<view @tap="getColor($event,model.gradual || model.value)" v-for="(model,idx) in item.data" :key="idx"
class="fui-color__item fui-page__spacing fui-align__center"
:style="{background:model.gradual || model.value,color:model.color}">
<text>{{model.text}}</text>
<text>{{model.value}}</text>
</view>
</block>
</view>
</view>
</template>
<script>
// #ifdef MP-BAIDU
import {
mapState
} from 'vuex'
// #endif
import colors from './color.js';
import $fui from '@/components/firstui/fui-clipboard';
export default {
data() {
return {
colors: colors
}
},
// #ifdef MP-BAIDU
computed: mapState(['status']),
// #endif
methods: {
getColor(e, color) {
// #ifdef MP-BAIDU
if (this.status == 1) {
$fui.getClipboardData(color, res => {
this.fui.toast('颜色复制成功');
}, e);
}
// #endif
// #ifndef MP-BAIDU
$fui.getClipboardData(color, res => {
this.fui.toast('颜色复制成功');
}, e);
// #endif
}
}
}
</script>
<style>
.fui-color__item {
width: 100%;
justify-content: space-between;
height: 84rpx;
border-radius: 42px;
margin-bottom: 24rpx;
font-size: 28rpx;
font-weight: 400;
box-shadow: 0 4rpx 8rpx 0 rgba(2, 4, 38, 0.05);
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
</style>

42
pages/component/basics/footer/footer.vue Normal file
View File

@ -0,0 +1,42 @@
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1861 4 072 5 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
<view class="fui-wrap">
<view class="fui-page__hd">
<view class="fui-page__title">Footer</view>
<view class="fui-page__desc">Footer 页脚。</view>
</view>
<view class="fui-page__bd">
<fui-footer text="Copyright © 2021 firstui.cn"></fui-footer>
<fui-footer :navigate="navigate" text="Copyright © 2021 firstui.cn"></fui-footer>
<fui-footer :navigate="navigate2" text="Copyright © 2021 firstui.cn"></fui-footer>
<fui-footer isFixed :navigate="navigate" text="Copyright © 2021 firstui.cn"></fui-footer>
</view>
</view>
</template>
<script>
export default {
data() {
return {
navigate: [{
text: '底部链接',
openType: 'navigateBack'
}],
navigate2: [{
text: '底部链接',
openType: 'navigateBack'
}, {
text: '底部链接',
openType: 'navigateBack'
}]
}
},
methods: {
}
}
</script>
<style>
</style>

168
pages/component/basics/icon/icon.js Normal file
View File

@ -0,0 +1,168 @@
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：18 6 140 72 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
export default [
"addfriends",
"addfriends-fill",
"backspace",
"backspace-fill",
"bankcard",
"bankcard-fill",
"camera",
"camera-fill",
"captcha",
"captcha-fill",
"cart",
"cart-fill",
"classify",
"classify-fill",
"comment",
"comment-fill",
"community",
"community-fill",
"coupon",
"coupon-fill",
"delete",
"delete-fill",
"edit",
"edit-fill",
"fabulous",
"fabulous-fill",
"find",
"find-fill",
"help",
"help-fill",
"home",
"home-fill",
"idcard",
"idcard-fill",
"info",
"info-fill",
"invite",
"invite-fill",
"kefu",
"kefu-fill",
"like",
"like-fill",
"location",
"location-fill",
"lock",
"lock-fill",
"mail",
"mail-fill",
"message",
"message-fill",
"mobile",
"mobile-fill",
"more",
"more-fill",
"my",
"my-fill",
"notice",
"notice-fill",
"order",
"order-fill",
"picture",
"picture-fill",
"setup",
"setup-fill",
"share",
"share-fill",
"shop",
"shop-fill",
"star",
"starhalf",
"star-fill",
"stepon",
"stepon-fill",
"wait",
"wait-fill",
"warning",
"warning-fill",
"plus",
"plussign",
"plussign-fill",
"minus",
"minussign",
"minussign-fill",
"close",
"clear",
"clear-fill",
"checkbox-fill",
"checkround",
"checkbox",
"check",
"pulldown-fill",
"pullup",
"pullup-fill",
"pulldown",
"roundright-fill",
"roundright",
"arrowright",
"arrowleft",
"arrowdown",
"left",
"up",
"right",
"back",
"top",
"dropdown",
"turningleft",
"turningup",
"turningright",
"turningdown",
"refresh",
"loading",
"search",
"rotate",
"screen",
"signin",
"calendar",
"scan",
"qrcode",
"wallet",
"telephone",
"visible",
"invisible",
"menu",
"operate",
"slide",
"list",
"nonetwork",
"partake",
"qa",
"barchart",
"piechart",
"linechart",
"at",
"face",
"redpacket",
"suspend",
"link",
"keyboard",
"play",
"video",
"voice",
"addressbook",
"principal",
"sina",
"browser",
"moments",
"qq",
"wechat",
"balance",
"bankcardpay",
"wxpay",
"alipay",
"payment",
"receive",
"sendout",
"evaluate",
"aftersale",
"warehouse",
"transport",
"delivery",
"switch",
"goods",
"goods-fill",
"",
""
]

87
pages/component/basics/icon/icon.vue Normal file
View File

@ -0,0 +1,87 @@
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 86 1 40 72 549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
<view class="fui-wrap">
<view class="fui-page__hd">
<view class="fui-page__title">Icon</view>
<view class="fui-page__desc">Icon 图标，First UI字体图标库，可自行扩展。</view>
</view>
<view class="fui-page__bd fui-page__spacing">
<fui-grid :columns="3" @click="getName">
<fui-grid-item v-for="(item, index) in icons" :highlight="item!=''" :index="index" :key="index">
<view class="fui-icon__item">
<fui-icon :name="item"></fui-icon>
<text class="fui-icon__name">{{ item }}</text>
</view>
</fui-grid-item>
</fui-grid>
</view>
</view>
</template>
<script>
// #ifdef MP-BAIDU
import {
mapState
} from 'vuex'
// #endif
import icons from './icon.js';
import $fui from '@/components/firstui/fui-clipboard';
export default {
data() {
return {
icons: icons
}
},
// #ifdef MP-BAIDU
computed: mapState(['status']),
// #endif
methods: {
getName(e) {
const name = this.icons[e.detail.index]
if (!name) return;
// #ifdef MP-BAIDU
if (this.status == 1) {
$fui.getClipboardData(name, res => {
this.fui.toast('图标名称复制成功');
}, e);
}
// #endif
// #ifndef MP-BAIDU
$fui.getClipboardData(name, res => {
this.fui.toast('图标名称复制成功');
}, e);
// #endif
}
}
}
</script>
<style>
/* 头条小程序组件内不能引入字体 */
/* #ifdef MP-TOUTIAO */
@font-face {
font-family: 'fuiFont';
src: url("~@/components/firstui/fui-icon/fui-icon.ttf") format("truetype");
}
/* #endif */
page {
background-color: #FFFFFF;
}
.fui-icon__item {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
}
.fui-icon__name {
font-size: 28rpx;
font-weight: 400;
padding-top: 16rpx;
}
</style>

55
pages/component/basics/text/text.vue Normal file
View File

@ -0,0 +1,55 @@
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 861 4072 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
<view class="fui-wrap">
<view class="fui-page__hd">
<view class="fui-page__title">Text</view>
<view class="fui-page__desc">Text 文本，用于包裹文本内容。</view>
</view>
<view class="fui-page__bd fui-page__spacing">
<view class="fui-section__title">基本使用</view>
<fui-text :text="text" :size="28"></fui-text>
<view class="fui-section__title">不同样式类型</view>
<fui-text text="primary" type="primary"></fui-text>
<fui-text text="success" type="success"></fui-text>
<fui-text text="warning" type="warning"></fui-text>
<fui-text text="danger" type="danger"></fui-text>
<fui-text text="purple" type="purple"></fui-text>
<fui-text text="gray" type="gray"></fui-text>
<fui-text text="black" type="black"></fui-text>
<view class="fui-section__title">块状 | 自定义颜色</view>
<fui-text text="block" color="brown" block></fui-text>
<fui-text text="yellow" color="yellow" block></fui-text>
<view class="fui-section__title">数据脱敏-姓名</view>
<fui-text text="张三" text-type="name" format block></fui-text>
<fui-text text="王小仙" text-type="name" format block></fui-text>
<view class="fui-section__title">数据脱敏-手机号</view>
<fui-text text="13544339908" text-type="mobile" format></fui-text>
<view class="fui-section__title">金额格式化</view>
<fui-text text="20000" text-type="amount" format>￥</fui-text>
<view class="fui-section__title">点击效果</view>
<fui-text text="https://firstui.cn" highlight @click="handleClick"></fui-text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
text: 'First UI是一套超高性能、超高颜值的移动端UI综合解决方案，包含业内顶尖的组件库、强大的功能库、丰富精美的模板库，提供uni-app(完美支持nvue)、微信小程序、支付宝小程序等版本，兼顾高效率与高性能，让您的开发获得百倍提质提速！'
}
},
methods: {
handleClick(e) {
console.log(e)
this.fui.toast('点击了~');
}
}
}
</script>
<style>
.fui-wrap {
padding-bottom: 96rpx;
}
</style>