You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
218 lines
6.9 KiB
218 lines
6.9 KiB
3 years ago
|
<template>
|
||
|
|
<view class="s-action-sheet" :class="custom_class" :style="custom_style">
|
||
|
|
<s-popup
|
||
|
|
position="bottom"
|
||
|
|
:value="value"
|
||
|
|
:round="round"
|
||
|
|
:z-index="zIndex"
|
||
|
|
:animate="animate"
|
||
|
|
:animate-duration="animateDuration"
|
||
|
|
:mask="mask"
|
||
|
|
:mask-opacity="maskOpacity"
|
||
|
|
:mask-close="maskClose"
|
||
|
|
:safe-area-inset-bottom="safeAreaInsetBottom"
|
||
|
|
@mask-close="triggerCancel"
|
||
|
|
@open="$emit('open')"
|
||
|
|
@opend="$emit('opend')"
|
||
|
|
@close="onClose"
|
||
|
|
@closed="$emit('closed')"
|
||
|
|
>
|
||
|
|
<view v-if="title" class="s-action-sheet__header" :style="title_style">
|
||
|
|
{{ title }}
|
||
|
|
</view>
|
||
|
|
<view
|
||
|
|
v-if="description"
|
||
|
|
class="s-action-sheet__description"
|
||
|
|
:style="description_style"
|
||
|
|
>
|
||
|
|
{{ description }}
|
||
|
|
</view>
|
||
|
|
<scroll-view v-if="list.length" class="s-action-sheet__content" scroll-y>
|
||
|
|
<view class="s-action-sheet__list">
|
||
|
|
<s-button
|
||
|
|
v-for="(item, index) of list"
|
||
|
|
:key="index"
|
||
|
|
custom
|
||
|
|
hairline
|
||
|
|
custom-class="s-action-sheet__item"
|
||
|
|
:custom-style="item.customStyle"
|
||
|
|
:color="item.color"
|
||
|
|
:loading="item.loading"
|
||
|
|
:disabled="item.disabled"
|
||
|
|
:icon="item.icon"
|
||
|
|
:icon-size="item.iconSize"
|
||
|
|
:icon-color="item.iconColor"
|
||
|
|
:icon-style="item.iconStyle"
|
||
|
|
:lang="item.lang"
|
||
|
|
:open-type="item.openType"
|
||
|
|
:app-parameter="item.appParameter"
|
||
|
|
:session-from="item.sessionFrom"
|
||
|
|
:send-message-title="item.sendMessageTitle"
|
||
|
|
:send-message-path="item.sendMessagePath"
|
||
|
|
:send-message-img="item.sendMessageImg"
|
||
|
|
:show-message-card="item.showMessageCard"
|
||
|
|
:options="item.shareOptions"
|
||
|
|
@click="onSheetItemClick(index)"
|
||
|
|
@getuserinfo="$emit('getuserinfo', $event)"
|
||
|
|
@contact="$emit('contact', $event)"
|
||
|
|
@getphonenumber="$emit('getphonenumber', $event)"
|
||
|
|
@error="$emit('error', $event)"
|
||
|
|
@opensetting="$emit('opensetting', $event)"
|
||
|
|
@launchapp="$emit('launchapp', $event)"
|
||
|
|
>
|
||
|
|
<view class="s-action-sheet__name">{{ item.name }}</view>
|
||
|
|
<view v-if="item.subname" class="s-action-sheet__subname">
|
||
|
|
{{ item.subname }}
|
||
|
|
</view>
|
||
|
|
</s-button>
|
||
|
|
</view>
|
||
|
|
</scroll-view>
|
||
|
|
<template v-if="showCancel && cancelText">
|
||
|
|
<view class="s-action-sheet__gap" />
|
||
|
|
<s-button
|
||
|
|
custom
|
||
|
|
custom-class="s-action-sheet__cancel"
|
||
|
|
:color="cancelColor"
|
||
|
|
@click="onCancel"
|
||
|
|
>
|
||
|
|
{{ cancelText }}
|
||
|
|
</s-button>
|
||
|
|
</template>
|
||
|
|
</s-popup>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import componentMixin from '../../mixins/componentMixin';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* s-action-sheet 动作面板
|
||
|
|
* @description 底部弹起的模态面板，包含与当前情境相关的多个选项。
|
||
|
|
* @property {Boolean} value 双向绑定v-model，显示隐藏
|
||
|
|
* @property {Array} actions 面板选项列表 [{
|
||
|
|
* name:string,
|
||
|
|
* subname:string,
|
||
|
|
* color:string,
|
||
|
|
* disabled:boolean,
|
||
|
|
* openType:string,
|
||
|
|
* customStyle:string|object,
|
||
|
|
* icon:string,
|
||
|
|
* iconSize:number|string,
|
||
|
|
* iconColor:string,
|
||
|
|
* iconStyle:string|object
|
||
|
|
* }]
|
||
|
|
* @property {String} title 顶部标题
|
||
|
|
* @property {String} description 选项上方的描述信息
|
||
|
|
* @property {String|Object} titleStyle 顶部标题样式
|
||
|
|
* @property {String|Object} descriptionStyle 选项上方的描述信息样式
|
||
|
|
* @property {Boolean} showCancel 是否显示取消按钮
|
||
|
|
* @property {String} cancelText 取消按钮文字
|
||
|
|
* @property {String} cancelColor 取消按钮文字颜色
|
||
|
|
* @property {Boolean} actionClose 是否在点击选项后关闭
|
||
|
|
* @property {Boolean} round 是否显示圆角
|
||
|
|
* @property {Number|String} zIndex 同popup组件zIndex属性
|
||
|
|
* @property {Boolean} mask 同popup组件mask属性
|
||
|
|
* @property {Number|String} maskOpacity 同popup组件maskOpacity属性
|
||
|
|
* @property {Boolean} maskClose 是否在点击遮罩后关闭
|
||
|
|
* @property {String|Boolean|Object} animate 同popup组件animate属性
|
||
|
|
* @property {Number|String|Object} animateDuration 同popup组件animateDuration属性
|
||
|
|
* @property {Boolean} safeAreaInsetBottom 同popup组件safeAreaInsetBottom属性，默认true
|
||
|
|
* @event {Function} select (index) 点击选项时触发，禁用或加载状态下不会触发
|
||
|
|
* @event {Function} cancel 点击取消按钮或遮罩关闭时触发
|
||
|
|
* @event {Function} getuserinfo 获取用户信息回调，openType="getUserInfo"时有效
|
||
|
|
* @event {Function} contact 客服消息回调，openType="contact"时有效
|
||
|
|
* @event {Function} getphonenumber 获取用户手机号回调，openType="getPhoneNumber"时有效
|
||
|
|
* @event {Function} launchapp 打开 APP 成功的回调，openType="launchApp"时有效
|
||
|
|
* @event {Function} opensetting 在打开授权设置页后回调，openType="openSetting"时有效
|
||
|
|
* @event {Function} open 打开弹出层时触发
|
||
|
|
* @event {Function} opened 打开弹出层且动画结束后触发
|
||
|
|
* @event {Function} close 关闭弹出层时触发
|
||
|
|
* @event {Function} closed 关闭弹出层且动画结束后触发
|
||
|
|
* @example <s-action-sheet v-model="showActionSheet" :actions="actions" />
|
||
|
|
*/
|
||
|
|
export default {
|
||
|
|
name: 'SActionSheet',
|
||
|
|
mixins: [componentMixin],
|
||
|
|
props: {
|
||
|
|
value: Boolean,
|
||
|
|
actions: {
|
||
|
|
type: Array,
|
||
|
|
default: () => [],
|
||
|
|
},
|
||
|
|
title: String,
|
||
|
|
description: String,
|
||
|
|
titleStyle: [String, Object],
|
||
|
|
descriptionStyle: [String, Object],
|
||
|
|
showCancel: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true,
|
||
|
|
},
|
||
|
|
cancelText: {
|
||
|
|
type: String,
|
||
|
|
default: '取消',
|
||
|
|
},
|
||
|
|
cancelColor: String,
|
||
|
|
actionClose: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true,
|
||
|
|
},
|
||
|
|
round: Boolean,
|
||
|
|
zIndex: [Number, String],
|
||
|
|
mask: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true,
|
||
|
|
},
|
||
|
|
maskOpacity: [Number, String],
|
||
|
|
maskClose: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true,
|
||
|
|
},
|
||
|
|
animate: {
|
||
|
|
type: [String, Boolean, Object],
|
||
|
|
default: 'auto',
|
||
|
|
},
|
||
|
|
animateDuration: {
|
||
|
|
type: [Number, String, Object],
|
||
|
|
default: 300,
|
||
|
|
},
|
||
|
|
safeAreaInsetBottom: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
list() {
|
||
|
|
return this.actions.map(item => this.$getType(item) === 'object' ? item : { name: item });
|
||
|
|
},
|
||
|
|
title_style() {
|
||
|
|
return this.$mergeStyle(this.titleStyle);
|
||
|
|
},
|
||
|
|
description_style() {
|
||
|
|
return this.$mergeStyle(this.descriptionStyle);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
onClose() {
|
||
|
|
this.$emit('close');
|
||
|
|
this.close();
|
||
|
|
},
|
||
|
|
close() {
|
||
|
|
this.$emit('input', false);
|
||
|
|
},
|
||
|
|
onSheetItemClick(index) {
|
||
|
|
this.actionClose && this.close();
|
||
|
|
this.$emit('select', index);
|
||
|
|
},
|
||
|
|
triggerCancel() {
|
||
|
|
this.$emit('cancel');
|
||
|
|
},
|
||
|
|
onCancel() {
|
||
|
|
this.close();
|
||
|
|
this.triggerCancel();
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" src="./index.scss"></style>
|