117 lines
2.3 KiB
Vue
117 lines
2.3 KiB
Vue
<!--
|
||
单选 view 一般用作： form表单内使用
|
||
@author terrfly
|
||
@site https://www.jeepay.vip
|
||
@date 2022/12/01 16:18
|
||
-->
|
||
<template>
|
||
<view>
|
||
<view @tap="show">
|
||
<!-- 插槽自定义内容 -->
|
||
<slot name="view" :record="vdata.checkedData">
|
||
<view class="selected-radio">
|
||
<view v-if="hasVal()" style="color: black">{{vdata.checkedData?.label}}</view>
|
||
<view v-else>{{props.label}}</view>
|
||
<image style="width: 30rpx;height: 30rpx" src="/static/right.svg" mode="scaleToFill" />
|
||
</view>
|
||
</slot>
|
||
</view>
|
||
<!-- popup 和 tap不能放置在同一个 view下。 -->
|
||
<view>
|
||
<JSinglePopup ref="popupRef" :list="props.list" @confirm="confirmFunc" />
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive, nextTick, watch, onMounted, inject } from "vue"
|
||
|
||
const popupRef = ref()
|
||
|
||
// emit 父组件使用： v-model:value="val" 进行双向绑定。
|
||
const emits = defineEmits(['update:value', 'change'])
|
||
|
||
const props = defineProps({
|
||
|
||
//绑定的值， 双向绑定
|
||
value: { type: [String, Number] },
|
||
|
||
// 显示的名字
|
||
label: { type: [String, Number], default: "请选择" },
|
||
|
||
// 数组
|
||
list: { type: Array, default: () => [] },
|
||
|
||
// 是否多选框， 默认单选。
|
||
isCheckbox: { type: Boolean, default: false },
|
||
})
|
||
|
||
console.log(props.isCheckbox,'isCheckboxisCheckboxisCheckboxisCheckbox');
|
||
|
||
onMounted(()=>{
|
||
changePropsVal(props.value)
|
||
})
|
||
|
||
// 切换时
|
||
watch(() => props.value, (newVal, oldVal) => {
|
||
changePropsVal(newVal)
|
||
}
|
||
)
|
||
|
||
|
||
|
||
function changePropsVal(newVal){
|
||
let list = props.list.filter(r => r.value == newVal)
|
||
vdata.checkedData = list.length > 0 ? list[0] : { }
|
||
}
|
||
|
||
|
||
const vdata = reactive({
|
||
|
||
checkedData: { } // 当前选择的值
|
||
|
||
})
|
||
|
||
function show(){
|
||
popupRef.value.open(vdata.checkedData.value)
|
||
}
|
||
|
||
|
||
// 选择用户类型完毕
|
||
function confirmFunc(v){
|
||
vdata.checkedData = v
|
||
emits("update:value", v.value)
|
||
if(v.value!==1){
|
||
emits("change", v.value)
|
||
}
|
||
}
|
||
|
||
|
||
function hasVal(){
|
||
return vdata.checkedData && vdata.checkedData.label ? true : false
|
||
}
|
||
|
||
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
|
||
|
||
.selected-radio {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
font-size: 32rpx;
|
||
color: #b3b3b3;
|
||
image {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
}
|
||
}
|
||
|
||
|
||
</style>
|