99 lines
1.7 KiB
Vue
99 lines
1.7 KiB
Vue
<template>
|
|
<view class="my-action-sheet">
|
|
<u-action-sheet :show="show" cancelText="取消" :title="title" round="10" @close="close">
|
|
<view class="list">
|
|
<view class="list_item" :class="value==item.value?'active':''" v-for="item in info" :key="item.value" @click="select(item.value)">
|
|
<view class="label">
|
|
{{item.label}}
|
|
</view>
|
|
<view class="icon">
|
|
<u-icon name="checkmark" color="#69BB73" v-if="value==item.value"></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</u-action-sheet>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props:{
|
|
value:{
|
|
type:[String,Number]
|
|
},
|
|
list:{
|
|
type:Array,
|
|
default:()=>[]
|
|
},
|
|
title:{
|
|
type:String,
|
|
default:null
|
|
},
|
|
show:{
|
|
type:Boolean,
|
|
default:false
|
|
},
|
|
keyName:{
|
|
type:String,
|
|
default:null
|
|
},
|
|
valueName:{
|
|
type:String,
|
|
default:null
|
|
}
|
|
},
|
|
name:"my-action-sheet",
|
|
data() {
|
|
return {
|
|
|
|
};
|
|
},
|
|
computed:{
|
|
info(){
|
|
let arr = this.list.map(item=>{
|
|
if(this.keyName&&this.valueName){
|
|
return {
|
|
label:item[keyName],
|
|
value:item[valueName]
|
|
}
|
|
}else{
|
|
return{
|
|
...item
|
|
}
|
|
}
|
|
})
|
|
return arr
|
|
}
|
|
},
|
|
methods:{
|
|
close(){
|
|
this.$emit("update:show",false)
|
|
},
|
|
select(val){
|
|
this.$emit("input",val)
|
|
this.$emit("update:show",false)
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.my-action-sheet{
|
|
.list{
|
|
height: 500rpx;
|
|
overflow: auto;
|
|
.list_item{
|
|
height: 80rpx;
|
|
line-height:80rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 40rpx;
|
|
&.active{
|
|
background: rgba(105, 187, 115, 0.1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |