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.
shop-app/components/UiRadioPicker.vue

92 lines
1.8 KiB

<!--
* @Author: ch
* @Date: 2022-04-12 10:37:24
* @LastEditors: ch
* @LastEditTime: 2022-04-19 14:38:12
* @Description: file content
-->
<template>
<u-popup :show="show" @close="close" round="16rpx" closeable>
<view class="ui-select--title" v-if="title">{{title}}</view>
<radio-group class="ui-select--cell" @change="change">
<UiCell :title="item.label" v-for="item in options" :key="item.value">
<radio slot="right-icon" class="ui-select--radio" color="#FF875B"
:value="item.value" :checked="item.value === selected.value"/>
</UiCell>
</radio-group>
<view class="ui-select--footer">
<UiButton type="gradual" size="max" :disable="!selected.value" @click="confirm"></UiButton>
</view>
</u-popup>
</template>
<script>
import UiCell from '@/components/UiCell.vue';
import UiButton from '@/components/UiButton.vue';
export default {
components: { UiButton, UiCell },
props : {
options : {
type : Array,
default : []
},
title : {
type : String,
default : ''
},
value : {
type : [Object, String, Number],
default (){
return {}
}
},
show : {
type : Boolean,
default : false
}
},
data(){
return {
selected : {}
}
},
mounted(){
},
methods:{
change(val){
this.selected = this.options.find(item => val.detail.value === item.value);
},
confirm(){
if(!this.selected.value){
return false;
}
this.$emit('input', this.selected);
this.$emit('confirm', this.selected);
this.close();
},
close(){
this.$emit('close');
this.$emit('update:show', false);
}
}
}
</script>
<style lang="scss" scoped>
.ui-select{
&--title{
text-align: center;
font-size: 34rpx;
margin: 40rpx 0 30rpx;
}
&--cell{
padding: 0 40rpx;
}
&--radio{
transform: scale(60%);
}
&--footer{
padding: 68rpx 40rpx;
display: flex;
justify-content: space-between;
}
}
</style>