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

176
pages/component/nav/topPopup/topPopup.vue Normal file
View File

@ -0,0 +1,176 @@
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1861 40 7 2 5 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
<view class="fui-wrap">
<view class="fui-page__hd">
<view class="fui-page__title">TopPopup</view>
<view class="fui-page__desc">TopPopup 顶部弹出层，从顶部弹出的浮层，引导用户进行相关操作。</view>
</view>
<view class="fui-page__bd">
<fui-button type="gray" btn-size="medium" text="基础使用" bold :margin="['24rpx']"
@click="showPopup(1)"></fui-button>
<fui-button type="gray" btn-size="medium" text="案例一" bold @click="showPopup(2)">
</fui-button>
<fui-button type="gray" btn-size="medium" text="内容可滚动" :margin="['24rpx']" bold
@click="showPopup(3)">
</fui-button>
</view>
<fui-top-popup :show="show" @close="closePopup(1)">
<view class="fui-custom__wrap">
这是自定义内容区
</view>
</fui-top-popup>
<!--案例一-->
<fui-top-popup :show="show2" :maskClosable="false">
<view class="fui-popup__container">
<text class="fui-title">测试标题一</text>
<text class="fui-sub__title">测试标题一的副标题</text>
<text class="fui-descr">辅助描述内容，可根据实际需要安排</text>
<text class="fui-sub__descr">辅助提示内容，可根据实际需要安排</text>
<view class="fui-btn__box">
<fui-button type="gray" width="240rpx" height="80rpx" text="辅助操作" :margin="['0','16rpx']">
</fui-button>
<fui-button width="240rpx" height="80rpx" text="主操作" :margin="['0','16rpx']"></fui-button>
</view>
<view class="fui-icon__close" @tap="closePopup(2)">
<fui-icon name="close" :size="48"></fui-icon>
</view>
</view>
</fui-top-popup>
<fui-top-popup :show="show3" @close="closePopup(3)">
<view class="fui-scroll__wrap">
<view class="fui-title fui-title__pb">测试标题二</view>
<scroll-view scroll-y class="fui-scroll__view">
<fui-list-cell v-for="(item,index) in itemList" :key="index">item{{index+1}}</fui-list-cell>
</scroll-view>
<view class="fui-icon__close" @tap="closePopup(3)">
<fui-icon name="close" :size="48"></fui-icon>
</view>
</view>
</fui-top-popup>
</view>
</template>
<script>
export default {
data() {
return {
show: false,
show2: false,
show3: false,
itemList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
}
},
methods: {
showPopup(type) {
if (type === 1) {
this.show = true
} else if (type === 2) {
this.show2 = true
} else {
this.show3 = true
}
},
closePopup(type) {
if (type === 1) {
this.show = false
} else if (type === 2) {
this.show2 = false
} else {
this.show3 = false
}
}
}
}
</script>
<style>
page {
font-weight: normal;
}
.fui-page__bd {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.fui-custom__wrap {
width: 100%;
height: 520rpx;
display: flex;
align-items: center;
justify-content: center;
}
/* 案例一 start*/
.fui-popup__container {
width: 100%;
position: relative;
display: flex;
justify-content: center;
flex-direction: column;
padding: 24rpx 32rpx;
box-sizing: border-box;
}
.fui-title {
font-size: 30rpx;
font-weight: bold;
text-align: center;
}
.fui-sub__title {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
text-align: center;
font-size: 24rpx;
color: #7F7F7F;
transform: scale(.9);
}
.fui-descr {
font-weight: bold;
padding-top: 64rpx;
}
.fui-sub__descr {
font-size: 26rpx;
color: #B2B2B2;
padding: 32rpx 0;
}
.fui-btn__box {
display: flex;
justify-content: center;
padding: 32rpx 0;
box-sizing: border-box;
}
.fui-icon__close {
position: absolute;
top: 24rpx;
left: 24rpx;
}
/* 案例一 end*/
.fui-scroll__wrap {
padding-top: 30rpx;
padding-bottom: 24rpx;
position: relative;
}
.fui-scroll__view {
width: 100%;
height: 600rpx;
}
.fui-title__pb {
padding-bottom: 24rpx;
}
</style>