init

uni_modules/nutui-uni/components/collapse/collapse.vue

@@ -0,0 +1,85 @@
+<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>