<template>
|
<div class="f-sheet">
|
<!--表单选项-->
|
<div class="f-cell"
|
@click="handleSelectMenu">
|
<span class="f-cell-bd">{{ title }}</span>
|
<span class="f-cell-ft f-cell-none" v-if="!value">{{ placeholder }}</span>
|
<span class="f-cell-ft" v-if="value">{{ value }}</span>
|
</div>
|
<!--点击弹出的sheet-->
|
<transition name="vux-actionsheet-mask">
|
<div class="weui-mask weui-mask_transparent"
|
@click="onClickingMask"
|
v-show="show"></div>
|
</transition>
|
<div class="f-actionsheet"
|
:class="{'f-actionsheet-toggle': show}">
|
<div class="f-actionsheet-menu">
|
<div class="f-actionsheet-cell vux-1px-b"
|
v-for="(menuItem, index) in menus"
|
:key="index"
|
@click="onMenuClick(menuItem, index)">
|
<p>{{ menuItem.name }}</p>
|
<p v-if="menuItem.tip">{{ menuItem.tip }}</p>
|
</div>
|
</div>
|
<div class="f-actionsheet-action"
|
@click="onMenuClick('cancel')">
|
<div class="f-actionsheet-cell">取消</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
/**
|
* Created by c.y on 2018/3/16.
|
* 组件的命名 项目名（F---filean) + 组件的描述（区别与框架的组件）
|
* 全局表单选择，弹窗sheet的组件
|
* menus: [
|
{
|
name: '等本等息',
|
tip: '月供，本金，利息每月相同' // 可选
|
}
|
],
|
*/
|
export default {
|
name: 'f-sheet',
|
data () {
|
return {
|
show: false
|
}
|
},
|
methods: {
|
// 点击表单选择
|
handleSelectMenu () {
|
this.show = true;
|
},
|
// 点击遮罩
|
onClickingMask () {
|
this.show = false;
|
},
|
// 点击item
|
onMenuClick (menuItem) {
|
this.show = false;
|
// 点击取消的话
|
if (menuItem === 'cancel') {
|
return false;
|
}
|
// 这里双向数据绑定，监听这个事件，被传递的这个值，赋值给value
|
this.$emit('on-menu-click', menuItem.name);
|
this.$emit('on-menu-change', menuItem);
|
}
|
},
|
model: {
|
prop: 'value',
|
event: 'on-menu-click'
|
// 这个是双向数据绑定，需要监听的事件，
|
},
|
props: {
|
// 选择的值
|
value: String,
|
// 提示语
|
placeholder: String,
|
// 左边的标题
|
title: {
|
type: String,
|
required: true
|
},
|
// 下拉菜单
|
menus: {
|
type: Array,
|
required: true
|
}
|
}
|
|
}
|
</script>
|
|
<style lang="less">
|
.f-sheet {
|
padding-left: 15PX;
|
.f-actionsheet {
|
position: fixed;
|
left: 0;
|
bottom: 0;
|
transform: translate(0, 100%);
|
-webkit-backface-visibility: hidden;
|
backface-visibility: hidden;
|
z-index: 10000;
|
width: 100%;
|
background: @color-divider-regular;
|
transition: transform .3s;
|
}
|
.f-actionsheet-toggle {
|
transform: translate(0, 0);
|
}
|
.f-actionsheet-menu {
|
background: @color-white;
|
}
|
.f-actionsheet-cell {
|
position: relative;
|
padding: 10px 0;
|
text-align: center;
|
font-size: @font-size-base;
|
background: @color-white;
|
}
|
.f-actionsheet-action {
|
margin-top: 6px;
|
background-color: @color-white;
|
}
|
.f-cell {
|
position: relative;
|
padding: 10px 15px;
|
display: flex;
|
align-items: center;
|
background: @color-white;
|
&:after {
|
content: " ";
|
position: absolute;
|
left: 10px;
|
bottom: 0;
|
right: 0;
|
height: 1px;
|
border-bottom: 1px solid @color-divider-regular;
|
color: #e5e5e5;
|
-webkit-transform-origin: 0 100%;
|
transform-origin: 0 100%;
|
-webkit-transform: scaleY(0.5);
|
transform: scaleY(0.5);
|
z-index: 2;
|
}
|
.f-cell-bd {
|
flex: 1;
|
}
|
.f-cell-ft {
|
position: relative;
|
padding-right: 15px;
|
text-align: right;
|
color: @color-text-primary;
|
&:after {
|
content: " ";
|
position: absolute;
|
top: 50%;
|
right: 2px;
|
margin-top: -4px;
|
display: inline-block;
|
height: 6px;
|
width: 6px;
|
border-width: 2px 2px 0 0;
|
border-color: @color-divider-regular;
|
border-style: solid;
|
-webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
|
transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
|
}
|
}
|
.f-cell-none {
|
color: @color-text-third;
|
}
|
}
|
}
|
</style>
|
