看板
This commit is contained in:
@@ -0,0 +1,46 @@
|
||||
import type { ExtractPropTypes, PropType } from 'vue';
|
||||
import type { ActionSheetItem, ActionSheetTips } from '../../types/global';
|
||||
import { baseProps } from '../common/props';
|
||||
import { getColor, useLocale } from '../../';
|
||||
|
||||
const { t } = useLocale();
|
||||
|
||||
/**
|
||||
* actionSheet 操作菜单
|
||||
* @description 本组件用于从底部弹出一个操作菜单，供用户选择并返回结果。本组件功能类似于uni的uni.showActionSheetAPI，配置更加灵活，所有平台都表现一致。
|
||||
*/
|
||||
export const ActionSheetProps = {
|
||||
...baseProps,
|
||||
/** 点击遮罩是否可以关闭actionSheet */
|
||||
maskCloseAble: { type: Boolean, default: true },
|
||||
/** 按钮的文字数组，可以自定义颜色和字体大小，字体单位为rpx */
|
||||
list: {
|
||||
type: Array as unknown as PropType<ActionSheetItem[]>,
|
||||
default: () => []
|
||||
},
|
||||
/** 顶部的提示文字 */
|
||||
tips: {
|
||||
type: Object as unknown as PropType<ActionSheetTips>,
|
||||
default: () => ({ text: '', color: getColor('tipsColor'), fontSize: '26rpx' })
|
||||
},
|
||||
/** 底部的取消按钮 */
|
||||
cancelBtn: { type: Boolean, default: true },
|
||||
/** 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距 */
|
||||
safeAreaInsetBottom: { type: Boolean, default: false },
|
||||
/** 通过双向绑定控制组件的弹出与收起 */
|
||||
modelValue: { type: Boolean, default: false },
|
||||
/** 弹出的顶部圆角值 */
|
||||
borderRadius: { type: [String, Number], default: 0 },
|
||||
/** 弹出的z-index值 */
|
||||
zIndex: { type: [String, Number], default: 0 },
|
||||
/** 取消按钮的文字提示 */
|
||||
cancelText: { type: String, default: () => t('uActionSheet.cancelText') },
|
||||
/** 字体颜色 */
|
||||
color: { type: String, default: () => getColor('mainColor') },
|
||||
/** 字体大小 */
|
||||
fontSize: { type: [String, Number], default: '32rpx' },
|
||||
/** 是否异步关闭 */
|
||||
asyncClose: { type: Boolean, default: false }
|
||||
};
|
||||
|
||||
export type ActionSheetProps = ExtractPropTypes<typeof ActionSheetProps>;
|
||||
@@ -0,0 +1,190 @@
|
||||
<template>
|
||||
<u-popup
|
||||
mode="bottom"
|
||||
:border-radius="borderRadius"
|
||||
:popup="false"
|
||||
v-model="popupValue"
|
||||
:maskCloseAble="maskCloseAble"
|
||||
length="auto"
|
||||
:safeAreaInsetBottom="safeAreaInsetBottom"
|
||||
@close="popupClose"
|
||||
:z-index="uZIndex"
|
||||
:custom-class="customClass"
|
||||
:custom-style="customStyle"
|
||||
>
|
||||
<view class="u-tips u-border-bottom" v-if="tips.text" :style="[tipsStyle]">
|
||||
{{ tips.text }}
|
||||
</view>
|
||||
<block v-if="list && list.length > 0" v-for="(item, index) in list" :key="index">
|
||||
<view
|
||||
@touchmove.stop.prevent
|
||||
@tap="itemClick(index)"
|
||||
:style="[itemStyle(index)]"
|
||||
class="u-action-sheet-item u-line-1"
|
||||
:class="[index < list.length - 1 ? 'u-border-bottom' : '']"
|
||||
:hover-stay-time="150"
|
||||
>
|
||||
<text>{{ item.text }}</text>
|
||||
<text class="u-action-sheet-item__subtext u-line-1" v-if="item.subText">{{ item.subText }}</text>
|
||||
</view>
|
||||
</block>
|
||||
<template v-else>
|
||||
<slot></slot>
|
||||
</template>
|
||||
<view class="u-gab" v-if="cancelBtn"> </view>
|
||||
<view
|
||||
@touchmove.stop.prevent
|
||||
class="u-action-sheet-cancel u-action-sheet-item"
|
||||
hover-class="u-hover-class"
|
||||
:hover-stay-time="150"
|
||||
v-if="cancelBtn"
|
||||
@tap="close"
|
||||
>
|
||||
{{ cancelText }}
|
||||
</view>
|
||||
</u-popup>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'u-action-sheet',
|
||||
options: {
|
||||
addGlobalClass: true,
|
||||
// #ifndef MP-TOUTIAO
|
||||
virtualHost: true,
|
||||
// #endif
|
||||
styleIsolation: 'shared'
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { $u, useParent } from '../..';
|
||||
import { ActionSheetProps } from './types';
|
||||
|
||||
/**
|
||||
* actionSheet 操作菜单
|
||||
* @description 本组件用于从底部弹出一个操作菜单，供用户选择并返回结果。本组件功能类似于uni的uni.showActionSheetAPI，配置更加灵活，所有平台都表现一致。
|
||||
* @tutorial https://uviewpro.cn/zh/components/actionSheet.html
|
||||
* @property {Array<{ text: string; subText?: string; color?: string; fontSize?: string; disabled?: boolean }>} list 按钮的文字数组，见官方文档示例
|
||||
* @property {{text: string; color?: string; fontSize?: string}} tips 顶部的提示文字，见官方文档示例
|
||||
* @property {String} cancel-text 取消按钮的提示文字
|
||||
* @property {Boolean} cancel-btn 是否显示底部的取消按钮（默认true）
|
||||
* @property {Number String} border-radius 弹出部分顶部左右的圆角值，单位rpx（默认0）
|
||||
* @property {Boolean} mask-close-able 点击遮罩是否可以关闭（默认true）
|
||||
* @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配（默认false）
|
||||
* @property {Number String} z-index z-index值（默认1075）
|
||||
* @property {String} cancel-text 取消按钮的提示文字
|
||||
* @event {Function} click 点击ActionSheet列表项时触发
|
||||
* @event {Function} close 点击取消按钮时触发
|
||||
* @example <u-action-sheet :list="list" @click="click" v-model="show"></u-action-sheet>
|
||||
*/
|
||||
|
||||
const props = defineProps(ActionSheetProps);
|
||||
|
||||
const emit = defineEmits(['update:modelValue', 'click', 'close']);
|
||||
|
||||
useParent('u-action-sheet');
|
||||
|
||||
const popupValue = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (val: boolean) => emit('update:modelValue', val)
|
||||
});
|
||||
|
||||
// 顶部提示的样式
|
||||
const tipsStyle = computed(() => {
|
||||
let style: Record<string, string> = {};
|
||||
style.color = String(props.tips?.color || $u.color.tipsColor);
|
||||
style.fontSize = $u.addUnit(String(props.tips?.fontSize || '26rpx'));
|
||||
return style;
|
||||
});
|
||||
|
||||
// 操作项目的样式
|
||||
const itemStyle = (index: number) => {
|
||||
let style: Record<string, string> = {};
|
||||
style.color = String(props.list[index]?.color || props.color);
|
||||
style.fontSize = $u.addUnit(String(props.list[index]?.fontSize || props.fontSize));
|
||||
// 选项被禁用的样式
|
||||
if (props.list[index]?.disabled) style.color = String($u.color.lightColor || '');
|
||||
return style;
|
||||
};
|
||||
|
||||
// 计算z-index
|
||||
const uZIndex = computed(() => {
|
||||
// 如果用户有传递z-index值，优先使用
|
||||
return props.zIndex ? props.zIndex : $u.zIndex.popup;
|
||||
});
|
||||
|
||||
/**
|
||||
* 点击取消按钮
|
||||
*/
|
||||
function close() {
|
||||
// 发送input事件，并不会作用于父组件，而是要设置组件内部通过props传递的value参数
|
||||
// 这是一个vue发送事件的特殊用法
|
||||
popupClose();
|
||||
emit('close');
|
||||
}
|
||||
|
||||
/**
|
||||
* 弹窗关闭
|
||||
*/
|
||||
function popupClose() {
|
||||
emit('update:modelValue', false);
|
||||
}
|
||||
|
||||
/**
|
||||
* 点击某一个item
|
||||
* @param index 选项索引
|
||||
*/
|
||||
function itemClick(index: number) {
|
||||
// disabled的项禁止点击
|
||||
if (props.list[index]?.disabled) return;
|
||||
emit('click', index);
|
||||
if (props.asyncClose) return;
|
||||
emit('update:modelValue', false);
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
props,
|
||||
close,
|
||||
itemClick
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../../libs/css/style.components.scss';
|
||||
|
||||
.u-tips {
|
||||
font-size: 26rpx;
|
||||
text-align: center;
|
||||
padding: 34rpx 0;
|
||||
line-height: 1;
|
||||
color: $u-tips-color;
|
||||
}
|
||||
|
||||
.u-action-sheet-item {
|
||||
@include vue-flex;
|
||||
line-height: 1;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 32rpx;
|
||||
padding: 34rpx 0;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.u-action-sheet-item__subtext {
|
||||
font-size: 24rpx;
|
||||
color: $u-tips-color;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.u-gab {
|
||||
height: 12rpx;
|
||||
background-color: rgb(234, 234, 236);
|
||||
}
|
||||
|
||||
.u-action-sheet-cancel {
|
||||
color: $u-main-color;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user