86 lines
2.0 KiB
Vue
86 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import { computed, defineComponent, provide, ref, watch } from 'vue'
|
|
import { CHANGE_EVENT, PREFIX, UPDATE_MODEL_EVENT } from '../_constants'
|
|
import { getMainClass } from '../_utils'
|
|
import { collapseEmits, collapseProps } from './collapse'
|
|
|
|
const props = defineProps(collapseProps)
|
|
const emit = defineEmits(collapseEmits)
|
|
|
|
const innerValue = ref(props.modelValue || (props.accordion ? '' : []))
|
|
const classes = computed(() => {
|
|
return getMainClass(props, componentName)
|
|
})
|
|
|
|
watch(() => props.modelValue, (val) => {
|
|
innerValue.value = val!
|
|
})
|
|
|
|
function changeVal(val: string | number | Array<string | number>, name: string | number, status = true) {
|
|
innerValue.value = val
|
|
emit(UPDATE_MODEL_EVENT, val)
|
|
emit(CHANGE_EVENT, val, name, status)
|
|
}
|
|
|
|
function updateVal(name: string | number) {
|
|
if (props.accordion) {
|
|
if (innerValue.value === name)
|
|
changeVal('', name, false)
|
|
else
|
|
changeVal(name, name, true)
|
|
}
|
|
else {
|
|
if (Array.isArray(innerValue.value)) {
|
|
if (innerValue.value.includes(name)) {
|
|
const newValue = innerValue.value.filter((v: string | number) => v !== name)
|
|
changeVal(newValue, name, false)
|
|
}
|
|
else {
|
|
const newValue = innerValue.value.concat([name])
|
|
changeVal(newValue, name, true)
|
|
}
|
|
}
|
|
else {
|
|
console.warn('[NutUI] <Collapse> 未开启手风琴模式时 v-model 应为数组')
|
|
}
|
|
}
|
|
}
|
|
|
|
function isExpanded(name: string | number) {
|
|
if (props.accordion)
|
|
return innerValue.value === name
|
|
else if (Array.isArray(innerValue.value))
|
|
return innerValue.value.includes(name)
|
|
|
|
return false
|
|
}
|
|
|
|
provide('collapseParent', {
|
|
updateVal,
|
|
isExpanded,
|
|
})
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
const componentName = `${PREFIX}-collapse`
|
|
|
|
export default defineComponent({
|
|
name: componentName,
|
|
options: {
|
|
virtualHost: true,
|
|
addGlobalClass: true,
|
|
styleIsolation: 'shared',
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<view :class="classes" :style="customStyle">
|
|
<slot />
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
@import './index';
|
|
</style>
|