Files
FirstUI-vue/pages/component/operate/actionsheet/actionsheet.vue
2023-08-17 21:28:49 +08:00

86 lines
2.4 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司手机号1 8614 0 72 54 9身份证尾号5A07X5专用请尊重知识产权勿私下传播违者追究法律责任-->
<template>
<view class="fui-wrap">
<view class="fui-page__hd">
<view class="fui-page__title">ActionSheet</view>
<view class="fui-page__desc">ActionSheet 上拉菜单从底部弹出的模态框提供和当前场景相关的操作菜单</view>
</view>
<view class="fui-page__bd fui-page__spacing">
<fui-button type="gray" btn-size="medium" text="带提示" bold :margin="['24rpx']"
@click="showActionSheet(1)"></fui-button>
<fui-button type="gray" btn-size="medium" text="无提示操作" bold @click="showActionSheet(2)">
</fui-button>
<fui-button type="gray" btn-size="medium" text="暗黑模式" :margin="['24rpx']" bold
@click="showActionSheet(3)">
</fui-button>
<fui-button type="gray" btn-size="medium" text="无取消按钮" bold @click="showActionSheet(4)">
</fui-button>
</view>
<fui-actionsheet :show="show" :tips="tips" :itemList="itemList" :isCancel="isCancel" :theme="theme"
@click="itemClick" @cancel="cancel"></fui-actionsheet>
</view>
</template>
<script>
export default {
data() {
return {
show: false,
tips: '',
itemList: [],
isCancel: true,
theme: 'light'
}
},
methods: {
showActionSheet(type) {
this.tips = '';
this.isCancel = true;
this.theme = 'light';
switch (type) {
case 1:
this.tips = '退出后不会删除任何历史数据,下次登录依然可以使用本账号。';
this.itemList = [{
text: '退出登录',
color: '#FF2B2B'
}]
break;
case 2:
this.itemList = ['点赞', '评论', '收藏']
break;
case 3:
this.itemList = ['点赞', '评论', '收藏']
this.theme = 'dark'
break;
case 4:
this.tips = '请选择性别';
this.itemList = ['男', '女', '未知']
this.isCancel = false;
break;
default:
break;
}
setTimeout(() => {
this.show = true
}, 50)
},
itemClick(e) {
console.log(e)
this.fui.toast(e.text)
this.cancel()
},
cancel() {
this.show = false
}
}
}
</script>
<style>
.fui-page__bd {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
</style>