<template>
|
<view>
|
<view class="tui-actionsheet-class tui-actionsheet" :class="[show?'tui-actionsheet-show':'']">
|
<!-- <view class="tui-tips" :style="{fontSize:size+'rpx',color:color}" v-if="tips">
|
{{tips}}
|
</view> -->
|
<view class="close-and-confirm">
|
<view class="close-btn" @tap="handleClickMask">取消</view>
|
<view class="title">选择设备</view>
|
<view class="close-btn" @tap="handleConfirm">确认</view>
|
</view>
|
<view :class="[isCancel?'tui-operate-box':'']">
|
<block v-for="(item,index) in itemList" :key="index">
|
<view class="tui-actionsheet-btn tui-actionsheet-divider"
|
:class="curIndex == index?'item-active':''" hover-class="tui-actionsheet-hover"
|
:hover-stay-time="150" :data-index="index" style="color:#333" @tap="handleClickItem">{{item}}
|
</view>
|
</block>
|
<!-- :class="[(!isCancel && index==itemList.length-1)?'tui-btn-last':'']" -->
|
</view>
|
<!-- <view class="tui-actionsheet-btn tui-actionsheet-cancel" hover-class="tui-actionsheet-hover"
|
:hover-stay-time="150" v-if="isCancel" @tap="handleClickCancel">取消</view> -->
|
</view>
|
<view class="tui-actionsheet-mask" :class="[show?'tui-mask-show':'']" @tap="handleClickMask"></view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
name: "tuiActionsheet",
|
data() {
|
return {
|
curIndex: -1
|
}
|
},
|
props: {
|
//点击遮罩 是否可关闭
|
maskClosable: {
|
type: Boolean,
|
default: true
|
},
|
//显示操作菜单
|
show: {
|
type: Boolean,
|
default: false
|
},
|
itemList: {
|
type: Array,
|
default:[]
|
},
|
//提示文字
|
tips: {
|
type: String,
|
default: ""
|
},
|
//提示文字颜色
|
color: {
|
type: String,
|
default: "#9a9a9a"
|
},
|
//提示文字大小 rpx
|
size: {
|
type: Number,
|
default: 26
|
},
|
//是否需要取消按钮
|
isCancel: {
|
type: Boolean,
|
default: true
|
}
|
},
|
methods: {
|
handleClickMask() {
|
if (!this.maskClosable) return;
|
this.handleClickCancel();
|
},
|
handleClickItem(e) {
|
if (!this.show) return;
|
const dataset = e.currentTarget.dataset;
|
console.log(dataset)
|
this.curIndex = dataset.index
|
},
|
handleClickCancel() {
|
this.$emit('chooseCancel');
|
},
|
handleConfirm() {
|
this.handleClickCancel();
|
this.$emit('slectDevice', {
|
index: this.curIndex
|
});
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.close-and-confirm {
|
display: flex;
|
justify-content: space-between;
|
height: 80rpx;
|
line-height: 80rpx;
|
background-color: lightgrey;
|
.close-btn{
|
// background-color: #4CD964;
|
width: 100rpx;
|
text-align: center;
|
font-size: 32rpx;
|
}
|
.title {
|
font-size: 34rpx;
|
}
|
}
|
|
.tui-actionsheet {
|
width: 100%;
|
position: fixed;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
z-index: 9999;
|
visibility: hidden;
|
transform: translate3d(0, 100%, 0);
|
transform-origin: center;
|
transition: all 0.3s ease-in-out;
|
background: #eaeaec;
|
min-height: 100rpx;
|
}
|
|
.tui-actionsheet-show {
|
transform: translate3d(0, 0, 0);
|
visibility: visible;
|
}
|
|
.item-active {
|
|
color: #007AFF !important;
|
}
|
|
.tui-tips {
|
width: 100%;
|
padding: 30rpx 60rpx;
|
box-sizing: border-box;
|
text-align: center;
|
background: #fff;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.tui-operate-box {
|
padding-bottom: 12rpx;
|
}
|
|
.tui-actionsheet-btn {
|
width: 100%;
|
height: 100rpx;
|
background: #fff;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
text-align: center;
|
font-size: 32rpx;
|
position: relative;
|
}
|
|
.tui-btn-last {
|
padding-bottom: env(safe-area-inset-bottom);
|
}
|
|
.tui-actionsheet-divider::before {
|
/* content: '';
|
width: 100%;
|
border-top: 1rpx solid #d9d9d9;
|
position: absolute;
|
top: 0;
|
left: 0;
|
-webkit-transform: scaleY(0.5);
|
transform: scaleY(0.5); */
|
}
|
|
.tui-actionsheet-cancel {
|
color: #1a1a1a;
|
padding-bottom: env(safe-area-inset-bottom);
|
}
|
|
.tui-actionsheet-hover {
|
/* */
|
background: #f7f7f9;
|
}
|
|
.tui-actionsheet-mask {
|
position: fixed;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
background: rgba(0, 0, 0, 0.6);
|
z-index: 9996;
|
transition: all 0.3s ease-in-out;
|
opacity: 0;
|
visibility: hidden;
|
}
|
|
.tui-mask-show {
|
opacity: 1;
|
visibility: visible;
|
}
|
</style>
|
