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

100
pages/component/nav/drawer/drawer.vue Normal file
View File

@ -0,0 +1,100 @@
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 8 61 4 07 2549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
<view class="fui-wrap">
<view class="fui-page__hd">
<view class="fui-page__title">Drawer</view>
<view class="fui-page__desc">Drawer 抽屉，抽屉式导航，用于展示侧滑菜单，侧滑导航。</view>
</view>
<view class="fui-page__bd">
<fui-button type="gray" btn-size="medium" text="从右往左开" bold :margin="['24rpx']"
@click="showDrawer(1)"></fui-button>
<fui-button type="gray" btn-size="medium" text="从左往右开" bold @click="showDrawer(2)">
</fui-button>
</view>
<fui-drawer :show="show" @close="closeDrawer(1)">
<scroll-view scroll-y class="fui-scroll__view">
<view>
<fui-list-cell arrow v-for="(item,index) in itemList" :key="index">
item{{index+1}}
</fui-list-cell>
</view>
</scroll-view>
</fui-drawer>
<fui-drawer :show="show2" direction="left" :radius="24" :maskClosable="false">
<view class="fui-scroll__view">
<view class="fui-title">左侧菜单栏</view>
<scroll-view scroll-y style="height: 720rpx;">
<view>
<fui-list-cell v-for="(item,index) in itemList" :key="index">
item{{index+1}}
</fui-list-cell>
</view>
</scroll-view>
<view class="fui-btn__box">
<fui-button type="warning" btn-size="medium" text="关闭菜单栏" bold @click="closeDrawer(2)">
</fui-button>
</view>
</view>
</fui-drawer>
</view>
</template>
<script>
export default {
data() {
return {
show: false,
show2: false,
itemList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
}
},
methods: {
showDrawer(type) {
if (type === 1) {
this.show = true
} else {
this.show2 = true
}
},
closeDrawer(type) {
if (type === 1) {
this.show = false
} else {
this.show2 = false
}
}
}
}
</script>
<style>
page {
font-weight: normal;
}
.fui-page__bd {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.fui-scroll__view {
width: 520rpx;
flex: 1;
overflow: hidden;
}
.fui-title {
padding: 64rpx 32rpx 32rpx;
box-sizing: border-box;
font-weight: bold;
}
.fui-btn__box {
padding: 40rpx 0;
display: flex;
justify-content: center;
}
</style>