64 lines
1.3 KiB
Vue
64 lines
1.3 KiB
Vue
<template>
|
|
<up-picker :show="show" keyName="name" @confirm="confirm" :columns="category.list" @close="close" @cancel="close" :closeOnClickOverlay="true"></up-picker>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, watch, onMounted,reactive } from 'vue';
|
|
import { categoryPage } from '@/http/api/cateGory.js'
|
|
const emite=defineEmits(['change','update:isShow','confirm'])
|
|
const props = defineProps({
|
|
isShow:{
|
|
type:Boolean,
|
|
default:false
|
|
}
|
|
})
|
|
|
|
let show = ref(props.isShow)
|
|
|
|
const category=reactive({
|
|
list:[],
|
|
})
|
|
onMounted(()=>{
|
|
categoryPage({
|
|
page:1,size:200
|
|
}).then(res=>{
|
|
res.records.unshift({
|
|
name:'全部',
|
|
id:'',
|
|
})
|
|
category.list = [res.records]
|
|
})
|
|
})
|
|
watch(()=>show.value,(newval)=>{
|
|
emite('change',newval)
|
|
emite('update:isShow',newval)
|
|
})
|
|
watch(()=>props.isShow,(newval)=>{
|
|
show.value=newval
|
|
})
|
|
|
|
function confirm(e){
|
|
show.value = false
|
|
emite('confirm',e.value[0])
|
|
}
|
|
function close() {
|
|
show.value = false
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.category {
|
|
background: #FFFFFF;
|
|
box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
|
|
border-radius: 14rpx 14rpx 14rpx 14rpx;
|
|
position: fixed;
|
|
font-size: 24rpx;
|
|
color: #333;
|
|
.list{
|
|
box-sizing: border-box;
|
|
.item{
|
|
padding: 24rpx 24rpx 24rpx 48rpx;
|
|
}
|
|
}
|
|
}
|
|
</style> |