init
This commit is contained in:
@@ -0,0 +1,49 @@
|
||||
import type { ExtractPropTypes, PropType } from 'vue'
|
||||
import { commonProps, makeNumericProp, makeRequiredProp, makeStringProp, truthProp } from '../_utils'
|
||||
|
||||
export const collapseitemProps = {
|
||||
...commonProps,
|
||||
/**
|
||||
* @description 折叠面板的引用对象
|
||||
*/
|
||||
collapseRef: Object,
|
||||
/**
|
||||
* @description 标题栏左侧内容，支持插槽传入（`props` 传入的优先级更高）
|
||||
*/
|
||||
title: makeStringProp(''),
|
||||
/**
|
||||
* @description 唯一标识符，必填
|
||||
*/
|
||||
name: {
|
||||
...makeRequiredProp([String, Number] as PropType<string | number>),
|
||||
default: -1,
|
||||
},
|
||||
/**
|
||||
* @description 标题栏右侧内容，支持插槽传入（`props` 传入的优先级更高）
|
||||
*/
|
||||
value: makeStringProp(''),
|
||||
/**
|
||||
* @description 标题栏描述信息
|
||||
*/
|
||||
label: makeStringProp(''),
|
||||
/**
|
||||
* @description 标题栏是否禁用
|
||||
*/
|
||||
disabled: Boolean,
|
||||
/**
|
||||
* @description 是否显示边框
|
||||
* @type boolean
|
||||
* @default true
|
||||
*/
|
||||
border: truthProp,
|
||||
/**
|
||||
* @description 标题栏左侧图标组件，等同于 `nutui-icon` 组件
|
||||
*/
|
||||
icon: makeStringProp('down-arrow'),
|
||||
/**
|
||||
* @description 点击折叠和展开的旋转角度，在自定义图标模式下生效
|
||||
*/
|
||||
rotate: makeNumericProp(180),
|
||||
}
|
||||
|
||||
export type CollapseItemProps = ExtractPropTypes<typeof collapseitemProps>
|
||||
180
uni_modules/nutui-uni/components/collapseitem/collapseitem.vue
Normal file
180
uni_modules/nutui-uni/components/collapseitem/collapseitem.vue
Normal file
@@ -0,0 +1,180 @@
|
||||
<script setup lang="ts">
|
||||
import type { ComponentInternalInstance } from 'vue'
|
||||
import { computed, defineComponent, getCurrentInstance, inject, onMounted, reactive, ref, useSlots, watch } from 'vue'
|
||||
import { PREFIX } from '../_constants'
|
||||
import { useSelectorQuery } from '../_hooks'
|
||||
import { getMainClass, getRandomId } from '../_utils'
|
||||
import NutIcon from '../icon/icon.vue'
|
||||
import { collapseitemProps } from './collapseitem'
|
||||
|
||||
const props = defineProps(collapseitemProps)
|
||||
const instance = getCurrentInstance() as ComponentInternalInstance
|
||||
const { getSelectorNodeInfo } = useSelectorQuery(instance)
|
||||
const refRandomId = getRandomId()
|
||||
const slots = useSlots()
|
||||
|
||||
const target = `#nut-collapse__item-${refRandomId}`
|
||||
|
||||
const currentHeight = ref<string>('auto')
|
||||
const inAnimation = ref(false)
|
||||
const timeoutId = ref<any>('')
|
||||
const collapse: any = inject('collapseParent')
|
||||
const parent: any = reactive(collapse)
|
||||
const classes = computed(() => {
|
||||
return getMainClass(props, componentName, {
|
||||
[`${componentName}__border`]: props.border,
|
||||
})
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
getRect(target).then((res: any) => {
|
||||
if (res?.height)
|
||||
currentHeight.value = `${res.height}px`
|
||||
})
|
||||
}, 100)
|
||||
})
|
||||
|
||||
// #ifdef H5
|
||||
watch(
|
||||
() => slots.default?.(),
|
||||
() => {
|
||||
setTimeout(() => {
|
||||
getRect(target).then((res: any) => {
|
||||
if (res?.height)
|
||||
currentHeight.value = `${res.height}px`
|
||||
})
|
||||
}, 200)
|
||||
},
|
||||
)
|
||||
// #endif
|
||||
|
||||
async function getRectHeight() {
|
||||
const rect = await getRect(target) as any
|
||||
return rect.height as string
|
||||
}
|
||||
|
||||
// #ifndef H5
|
||||
watch(
|
||||
() => getRectHeight(),
|
||||
(val) => {
|
||||
setTimeout(() => {
|
||||
currentHeight.value = `${val}px`
|
||||
}, 200)
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
},
|
||||
)
|
||||
// #endif
|
||||
|
||||
function getRect(selector: string) {
|
||||
return getSelectorNodeInfo(selector)
|
||||
}
|
||||
|
||||
const expanded = computed(() => {
|
||||
if (parent)
|
||||
return parent.isExpanded(props.name)
|
||||
|
||||
return false
|
||||
})
|
||||
|
||||
const wrapperHeight = ref(expanded.value ? 'auto' : '0px')
|
||||
|
||||
function handleClick() {
|
||||
if (!inAnimation.value)
|
||||
parent.updateVal(props.name)
|
||||
}
|
||||
|
||||
function toggle(open: boolean) {
|
||||
// 连续切换状态时，清除打开的后续操作
|
||||
if (timeoutId.value) {
|
||||
clearTimeout(timeoutId.value)
|
||||
timeoutId.value = ''
|
||||
}
|
||||
const start = open ? '0px' : currentHeight.value
|
||||
const end = open ? currentHeight.value : '0px'
|
||||
inAnimation.value = true
|
||||
wrapperHeight.value = start
|
||||
setTimeout(() => {
|
||||
wrapperHeight.value = end
|
||||
inAnimation.value = false
|
||||
if (open) {
|
||||
timeoutId.value = setTimeout(() => {
|
||||
wrapperHeight.value = 'auto'
|
||||
}, 300)
|
||||
}
|
||||
}, 100)
|
||||
}
|
||||
|
||||
watch(expanded, toggle)
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
const componentName = `${PREFIX}-collapse-item`
|
||||
|
||||
export default defineComponent({
|
||||
name: componentName,
|
||||
options: {
|
||||
virtualHost: true,
|
||||
addGlobalClass: true,
|
||||
styleIsolation: 'shared',
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view :class="classes" :style="customStyle">
|
||||
<view
|
||||
class="nut-collapse-item__title"
|
||||
:class="[{ 'nut-collapse-item__title--disabled': disabled }]"
|
||||
@click="handleClick"
|
||||
>
|
||||
<view class="nut-collapse-item__title-main">
|
||||
<view class="nut-collapse-item__title-main-value">
|
||||
<slot v-if="$slots.title" name="title" />
|
||||
<template v-else>
|
||||
<rich-text class="nut-collapse-item__title-mtitle" :nodes="title" />
|
||||
</template>
|
||||
<view v-if="label" class="nut-collapse-item__title-label">
|
||||
{{ label }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="$slots.value" class="nut-collapse-item__title-sub">
|
||||
<slot name="value" />
|
||||
</view>
|
||||
<rich-text v-else class="nut-collapse-item__title-sub" :nodes="value" />
|
||||
<view
|
||||
class="nut-collapse-item__title-icon"
|
||||
:class="[{ 'nut-collapse-item__title-icon--expanded': expanded }]"
|
||||
:style="{ transform: `rotate(${expanded ? rotate : 0}deg)` }"
|
||||
>
|
||||
<slot name="icon">
|
||||
<NutIcon :name="icon" />
|
||||
</slot>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="$slots.extra" class="nut-collapse__item-extraWrapper">
|
||||
<div class="nut-collapse__item-extraWrapper__extraRender">
|
||||
<slot name="extra" />
|
||||
</div>
|
||||
</view>
|
||||
<view
|
||||
class="nut-collapse__item-wrapper"
|
||||
:style="{
|
||||
willChange: 'height',
|
||||
height: wrapperHeight,
|
||||
}"
|
||||
>
|
||||
<view :id="`nut-collapse__item-${refRandomId}`" class="nut-collapse__item-wrapper__content">
|
||||
<slot />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import './index';
|
||||
</style>
|
||||
181
uni_modules/nutui-uni/components/collapseitem/index.scss
Normal file
181
uni_modules/nutui-uni/components/collapseitem/index.scss
Normal file
@@ -0,0 +1,181 @@
|
||||
.nut-theme-dark {
|
||||
.nut-collapse-item {
|
||||
.nut-collapse-item__title {
|
||||
color: $dark-color;
|
||||
background: $dark-background;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.nut-collapse-item__title--disabled {
|
||||
color: $dark-color-gray;
|
||||
|
||||
.collapse-icon {
|
||||
color: $dark-color-gray;
|
||||
}
|
||||
}
|
||||
|
||||
// stylelint-disable selector-class-pattern
|
||||
|
||||
.nut-collapse__item-wrapper {
|
||||
.collapse-content,
|
||||
.nut-collapse__item-wrapper__content,
|
||||
.nut-collapse__item-extraWrapper__extraRender {
|
||||
color: $dark-color;
|
||||
background: $dark-background2;
|
||||
}
|
||||
}
|
||||
|
||||
.nut-collapse__item-extraWrapper {
|
||||
.nut-collapse__item-extraWrapper__extraRender,
|
||||
.nut-collapse__item-wrapper__content {
|
||||
background: $dark-background2;
|
||||
}
|
||||
}
|
||||
|
||||
// stylelint-enable selector-class-pattern
|
||||
}
|
||||
}
|
||||
|
||||
.nut-collapse-item__border {
|
||||
.nut-collapse-item__title {
|
||||
&::after {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
bottom: 0;
|
||||
left: 16px;
|
||||
box-sizing: border-box;
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
border-bottom: 1px solid #ebedf0;
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nut-collapse-item {
|
||||
position: relative;
|
||||
|
||||
.nut-collapse-item__title {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: $collapse-item-padding;
|
||||
overflow: hidden;
|
||||
font-size: $collapse-item-font-size;
|
||||
line-height: $collapse-item-line-height;
|
||||
color: $collapse-item-color;
|
||||
background-color: #fff;
|
||||
|
||||
.nut-collapse-item__title-main {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.nut-collapse-item__title-main-value {
|
||||
display: block;
|
||||
|
||||
.nut-collapse-item__title-main-icon {
|
||||
top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.nut-collapse-item__title-icon {
|
||||
// display: block;
|
||||
// position: absolute;
|
||||
// top: 50%;
|
||||
// right: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $collapse-item-icon-color;
|
||||
transition: transform 0.3s;
|
||||
|
||||
&--expanded {
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.nut-collapse-item__title-sub {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 65px;
|
||||
margin-top: -12px;
|
||||
color: $collapse-item-sub-title-color;
|
||||
}
|
||||
|
||||
.nut-collapse-item__title-label {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: #969799;
|
||||
}
|
||||
}
|
||||
|
||||
// stylelint-disable selector-class-pattern
|
||||
|
||||
.nut-collapse__item-wrapper,
|
||||
.nut-collapse__item-extraWrapper {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
transition: height 0.3s ease-in-out;
|
||||
|
||||
.nut-collapse__item-wrapper__content,
|
||||
.nut-collapse__item-extraWrapper__extraRender {
|
||||
display: block;
|
||||
padding: $collapse-wrapper-content-padding;
|
||||
font-size: $collapse-wrapper-content-font-size;
|
||||
line-height: $collapse-wrapper-content-line-height;
|
||||
color: $collapse-wrapper-content-color;
|
||||
background-color: $collapse-wrapper-content-background-color;
|
||||
}
|
||||
|
||||
.nut-collapse__item-wrapper__content--empty {
|
||||
padding: $collapse-wrapper-empty-content-padding;
|
||||
}
|
||||
}
|
||||
|
||||
.nut-collapse__item-extraWrapper {
|
||||
height: auto;
|
||||
|
||||
.nut-collapse__item-extraWrapper__extraRender {
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
// stylelint-enable selector-class-pattern
|
||||
|
||||
.open-style {
|
||||
height: auto;
|
||||
will-change: height;
|
||||
}
|
||||
|
||||
.close-style {
|
||||
will-change: auto;
|
||||
}
|
||||
|
||||
.nut-collapse-item__title--disabled {
|
||||
color: $collapse-item-disabled-color;
|
||||
pointer-events: none;
|
||||
cursor: not-allowed;
|
||||
|
||||
.collapse-icon {
|
||||
color: $collapse-item-disabled-color;
|
||||
}
|
||||
}
|
||||
|
||||
.nut-collapse-item__title-mtitle {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.collapse-border-none {
|
||||
.nut-collapse-item__title {
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
1
uni_modules/nutui-uni/components/collapseitem/index.ts
Normal file
1
uni_modules/nutui-uni/components/collapseitem/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export type * from './collapseitem'
|
||||
Reference in New Issue
Block a user