182 lines
3.9 KiB
Vue
182 lines
3.9 KiB
Vue
<template>
|
|
<div class="md-action-sheet">
|
|
<md-popup
|
|
class="inner-popup large-radius"
|
|
v-model="isActionSheetShow"
|
|
position="bottom"
|
|
prevent-scroll
|
|
@show="$_onShow"
|
|
@hide="$_onHide"
|
|
>
|
|
<div class="md-action-sheet-content">
|
|
<header class="md-action-sheet-header" v-if="title">{{ title }}</header>
|
|
<ul class="md-action-sheet-list">
|
|
<template v-for="(item, index) in options">
|
|
<li
|
|
:key="index"
|
|
:class="{
|
|
'active': index === clickIndex,
|
|
'disabled': index=== invalidIndex,
|
|
'md-action-sheet-item': true
|
|
}"
|
|
@click="$_onSelect(item, index)"
|
|
>
|
|
<div class="md-action-sheet-item-wrapper">
|
|
<div class="md-action-sheet-item-section" v-html="item.text || item.label"></div>
|
|
</div>
|
|
</li>
|
|
</template>
|
|
<li class="md-action-sheet-cancel" @click="$_onCancel">{{ cancelText }}</li>
|
|
</ul>
|
|
</div>
|
|
</md-popup>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Popup from '../popup'
|
|
import {inArray} from '../_util'
|
|
import {t} from '../_locale'
|
|
|
|
export default {
|
|
name: 'md-action-sheet',
|
|
|
|
components: {
|
|
[Popup.name]: Popup,
|
|
},
|
|
|
|
props: {
|
|
value: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
options: {
|
|
type: Array,
|
|
default() {
|
|
return []
|
|
},
|
|
},
|
|
defaultIndex: {
|
|
type: Number,
|
|
default: -1,
|
|
},
|
|
invalidIndex: {
|
|
type: Number,
|
|
default: -1,
|
|
},
|
|
cancelText: {
|
|
type: String,
|
|
default: t('md.action_sheet.cancel'),
|
|
},
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
isActionSheetShow: this.value,
|
|
clickIndex: -1,
|
|
scroller: '',
|
|
}
|
|
},
|
|
|
|
watch: {
|
|
value(newVal) {
|
|
this.isActionSheetShow = newVal
|
|
},
|
|
},
|
|
|
|
created() {
|
|
this.clickIndex = this.defaultIndex
|
|
},
|
|
|
|
methods: {
|
|
// MARK: events handler, 如 $_onButtonClick
|
|
$_onShow() {
|
|
this.$emit('show')
|
|
},
|
|
$_onHide() {
|
|
this.$emit('hide')
|
|
this.$_hideSheet()
|
|
},
|
|
$_onSelect(item, index) {
|
|
if (index === this.invalidIndex || inArray(this.invalidIndex, index)) {
|
|
return
|
|
}
|
|
this.clickIndex = index
|
|
this.$emit('selected', item)
|
|
this.$_hideSheet()
|
|
},
|
|
$_onCancel() {
|
|
this.$emit('cancel')
|
|
this.$_hideSheet()
|
|
},
|
|
$_hideSheet() {
|
|
this.isActionSheetShow = false
|
|
this.$emit('input', false)
|
|
},
|
|
},
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="stylus">
|
|
.md-action-sheet
|
|
color action-sheet-color
|
|
-webkit-font-smoothing antialiased
|
|
.md-popup
|
|
z-index action-sheet-zindex
|
|
.md-popup-box
|
|
background-color color-bg-base
|
|
|
|
.md-action-sheet-content
|
|
position relative
|
|
width 100%
|
|
font-size action-sheet-font-size
|
|
background action-sheet-bg
|
|
text-align center
|
|
overflow auto
|
|
|
|
.md-action-sheet-header
|
|
position relative
|
|
vertical-height(action-sheet-height)
|
|
hairline(bottom, color-border-base)
|
|
word-ellipsis()
|
|
overflow visible
|
|
|
|
.md-action-sheet-item
|
|
position relative
|
|
vertical-height(action-sheet-height)
|
|
padding 0 action-sheet-padding-h
|
|
box-sizing border-box
|
|
font-size action-sheet-font-size
|
|
transition background-color .3s
|
|
-webkit-user-select none
|
|
&.active
|
|
color action-sheet-color-highlight
|
|
&.disabled .md-action-sheet-item-section
|
|
opacity action-sheet-disabled-opacity
|
|
&:first-of-type
|
|
.md-action-sheet-item-wrapper:after
|
|
display none
|
|
&:active
|
|
background-color color-bg-tap
|
|
&.disabled
|
|
background-color transparent
|
|
|
|
.md-action-sheet-item-wrapper
|
|
position relative
|
|
hairline(top, color-border-base)
|
|
|
|
.md-action-sheet-cancel
|
|
height 132px
|
|
line-height 120px
|
|
color action-sheet-color-cancel
|
|
font-weight font-weight-medium
|
|
&::before
|
|
display block
|
|
content ''
|
|
height 12px
|
|
background action-sheet-cancel-gap-bg
|
|
</style>
|