init
This commit is contained in:
178
unpackage/dist/dev/mp-weixin/uni_modules/nutui-uni/components/collapseitem/collapseitem.js
vendored
Normal file
178
unpackage/dist/dev/mp-weixin/uni_modules/nutui-uni/components/collapseitem/collapseitem.js
vendored
Normal file
@@ -0,0 +1,178 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../../../common/vendor.js");
|
||||
const uni_modules_nutuiUni_components__constants_prefix = require("../_constants/prefix.js");
|
||||
const uni_modules_nutuiUni_components__hooks_useSelectorQuery = require("../_hooks/useSelectorQuery.js");
|
||||
const uni_modules_nutuiUni_components__utils_common = require("../_utils/common.js");
|
||||
require("../_utils/env.js");
|
||||
const uni_modules_nutuiUni_components__utils_style = require("../_utils/style.js");
|
||||
const uni_modules_nutuiUni_components__utils_props = require("../_utils/props.js");
|
||||
const collapseitemProps = {
|
||||
...uni_modules_nutuiUni_components__utils_props.commonProps,
|
||||
/**
|
||||
* @description 折叠面板的引用对象
|
||||
*/
|
||||
collapseRef: Object,
|
||||
/**
|
||||
* @description 标题栏左侧内容，支持插槽传入（`props` 传入的优先级更高）
|
||||
*/
|
||||
title: uni_modules_nutuiUni_components__utils_props.makeStringProp(""),
|
||||
/**
|
||||
* @description 唯一标识符，必填
|
||||
*/
|
||||
name: {
|
||||
...uni_modules_nutuiUni_components__utils_props.makeRequiredProp([String, Number]),
|
||||
default: -1
|
||||
},
|
||||
/**
|
||||
* @description 标题栏右侧内容，支持插槽传入（`props` 传入的优先级更高）
|
||||
*/
|
||||
value: uni_modules_nutuiUni_components__utils_props.makeStringProp(""),
|
||||
/**
|
||||
* @description 标题栏描述信息
|
||||
*/
|
||||
label: uni_modules_nutuiUni_components__utils_props.makeStringProp(""),
|
||||
/**
|
||||
* @description 标题栏是否禁用
|
||||
*/
|
||||
disabled: Boolean,
|
||||
/**
|
||||
* @description 是否显示边框
|
||||
* @type boolean
|
||||
* @default true
|
||||
*/
|
||||
border: uni_modules_nutuiUni_components__utils_props.truthProp,
|
||||
/**
|
||||
* @description 标题栏左侧图标组件，等同于 `nutui-icon` 组件
|
||||
*/
|
||||
icon: uni_modules_nutuiUni_components__utils_props.makeStringProp("down-arrow"),
|
||||
/**
|
||||
* @description 点击折叠和展开的旋转角度，在自定义图标模式下生效
|
||||
*/
|
||||
rotate: uni_modules_nutuiUni_components__utils_props.makeNumericProp(180)
|
||||
};
|
||||
if (!Math) {
|
||||
NutIcon();
|
||||
}
|
||||
const NutIcon = () => "../icon/icon.js";
|
||||
const componentName = `${uni_modules_nutuiUni_components__constants_prefix.PREFIX}-collapse-item`;
|
||||
const __default__ = common_vendor.defineComponent({
|
||||
name: componentName,
|
||||
options: {
|
||||
virtualHost: true,
|
||||
addGlobalClass: true,
|
||||
styleIsolation: "shared"
|
||||
}
|
||||
});
|
||||
const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({
|
||||
...__default__,
|
||||
props: collapseitemProps,
|
||||
setup(__props) {
|
||||
const props = __props;
|
||||
const instance = common_vendor.getCurrentInstance();
|
||||
const { getSelectorNodeInfo } = uni_modules_nutuiUni_components__hooks_useSelectorQuery.useSelectorQuery(instance);
|
||||
const refRandomId = uni_modules_nutuiUni_components__utils_common.getRandomId();
|
||||
common_vendor.useSlots();
|
||||
const target = `#nut-collapse__item-${refRandomId}`;
|
||||
const currentHeight = common_vendor.ref("auto");
|
||||
const inAnimation = common_vendor.ref(false);
|
||||
const timeoutId = common_vendor.ref("");
|
||||
const collapse = common_vendor.inject("collapseParent");
|
||||
const parent = common_vendor.reactive(collapse);
|
||||
const classes = common_vendor.computed(() => {
|
||||
return uni_modules_nutuiUni_components__utils_style.getMainClass(props, componentName, {
|
||||
[`${componentName}__border`]: props.border
|
||||
});
|
||||
});
|
||||
common_vendor.onMounted(() => {
|
||||
setTimeout(() => {
|
||||
getRect(target).then((res) => {
|
||||
if (res == null ? void 0 : res.height)
|
||||
currentHeight.value = `${res.height}px`;
|
||||
});
|
||||
}, 100);
|
||||
});
|
||||
async function getRectHeight() {
|
||||
const rect = await getRect(target);
|
||||
return rect.height;
|
||||
}
|
||||
common_vendor.watch(
|
||||
() => getRectHeight(),
|
||||
(val) => {
|
||||
setTimeout(() => {
|
||||
currentHeight.value = `${val}px`;
|
||||
}, 200);
|
||||
},
|
||||
{
|
||||
deep: true
|
||||
}
|
||||
);
|
||||
function getRect(selector) {
|
||||
return getSelectorNodeInfo(selector);
|
||||
}
|
||||
const expanded = common_vendor.computed(() => {
|
||||
if (parent)
|
||||
return parent.isExpanded(props.name);
|
||||
return false;
|
||||
});
|
||||
const wrapperHeight = common_vendor.ref(expanded.value ? "auto" : "0px");
|
||||
function handleClick() {
|
||||
if (!inAnimation.value)
|
||||
parent.updateVal(props.name);
|
||||
}
|
||||
function toggle(open) {
|
||||
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);
|
||||
}
|
||||
common_vendor.watch(expanded, toggle);
|
||||
return (_ctx, _cache) => {
|
||||
return common_vendor.e({
|
||||
a: _ctx.$slots.title
|
||||
}, _ctx.$slots.title ? {} : {
|
||||
b: _ctx.title
|
||||
}, {
|
||||
c: _ctx.label
|
||||
}, _ctx.label ? {
|
||||
d: common_vendor.t(_ctx.label)
|
||||
} : {}, {
|
||||
e: _ctx.$slots.value
|
||||
}, _ctx.$slots.value ? {} : {
|
||||
f: _ctx.value
|
||||
}, {
|
||||
g: common_vendor.p({
|
||||
name: _ctx.icon
|
||||
}),
|
||||
h: common_vendor.n({
|
||||
"nut-collapse-item__title-icon--expanded": expanded.value
|
||||
}),
|
||||
i: `rotate(${expanded.value ? _ctx.rotate : 0}deg)`,
|
||||
j: common_vendor.n({
|
||||
"nut-collapse-item__title--disabled": _ctx.disabled
|
||||
}),
|
||||
k: common_vendor.o(handleClick),
|
||||
l: _ctx.$slots.extra
|
||||
}, _ctx.$slots.extra ? {} : {}, {
|
||||
m: `nut-collapse__item-${common_vendor.unref(refRandomId)}`,
|
||||
n: wrapperHeight.value,
|
||||
o: common_vendor.n(classes.value),
|
||||
p: common_vendor.s(_ctx.customStyle)
|
||||
});
|
||||
};
|
||||
}
|
||||
});
|
||||
wx.createComponent(_sfc_main);
|
||||
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/nutui-uni/components/collapseitem/collapseitem.js.map
|
||||
6
unpackage/dist/dev/mp-weixin/uni_modules/nutui-uni/components/collapseitem/collapseitem.json
vendored
Normal file
6
unpackage/dist/dev/mp-weixin/uni_modules/nutui-uni/components/collapseitem/collapseitem.json
vendored
Normal file
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"nut-icon": "../icon/icon"
|
||||
}
|
||||
}
|
||||
1
unpackage/dist/dev/mp-weixin/uni_modules/nutui-uni/components/collapseitem/collapseitem.wxml
vendored
Normal file
1
unpackage/dist/dev/mp-weixin/uni_modules/nutui-uni/components/collapseitem/collapseitem.wxml
vendored
Normal file
@@ -0,0 +1 @@
|
||||
<view class="{{o}}" style="{{p}}"><view class="{{['nut-collapse-item__title', j]}}" bindtap="{{k}}"><view class="nut-collapse-item__title-main"><view class="nut-collapse-item__title-main-value"><slot wx:if="{{a}}" name="title"/><block wx:else><rich-text class="nut-collapse-item__title-mtitle" nodes="{{b}}"/></block><view wx:if="{{c}}" class="nut-collapse-item__title-label">{{d}}</view></view></view><view wx:if="{{e}}" class="nut-collapse-item__title-sub"><slot name="value"/></view><rich-text wx:else class="nut-collapse-item__title-sub" nodes="{{f}}"/><view class="{{['nut-collapse-item__title-icon', h]}}" style="{{'transform:' + i}}"><block wx:if="{{$slots.icon}}"><slot name="icon"></slot></block><block wx:else><nut-icon wx:if="{{g}}" u-i="64749f4c-0" bind:__l="__l" u-p="{{g}}"/></block></view></view><view wx:if="{{l}}" class="nut-collapse__item-extraWrapper"><view class="nut-collapse__item-extraWrapper__extraRender"><slot name="extra"/></view></view><view class="nut-collapse__item-wrapper" style="{{'will-change:' + 'height' + ';' + ('height:' + n)}}"><view id="{{m}}" class="nut-collapse__item-wrapper__content"><slot/></view></view></view>
|
||||
181
unpackage/dist/dev/mp-weixin/uni_modules/nutui-uni/components/collapseitem/collapseitem.wxss
vendored
Normal file
181
unpackage/dist/dev/mp-weixin/uni_modules/nutui-uni/components/collapseitem/collapseitem.wxss
vendored
Normal file
@@ -0,0 +1,181 @@
|
||||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
|
||||
*/
|
||||
/* 颜色变量 */
|
||||
/* 行为相关颜色 */
|
||||
/* 文字基本颜色 */
|
||||
/* 背景颜色 */
|
||||
/* 边框颜色 */
|
||||
/* 尺寸变量 */
|
||||
/* 文字尺寸 */
|
||||
/* 图片尺寸 */
|
||||
/* Border Radius */
|
||||
/* 水平间距 */
|
||||
/* 垂直间距 */
|
||||
/* 透明度 */
|
||||
/* 文章场景相关 */
|
||||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
|
||||
*/
|
||||
/* 颜色变量 */
|
||||
/* 行为相关颜色 */
|
||||
/* 文字基本颜色 */
|
||||
/* 背景颜色 */
|
||||
/* 边框颜色 */
|
||||
/* 尺寸变量 */
|
||||
/* 文字尺寸 */
|
||||
/* 图片尺寸 */
|
||||
/* Border Radius */
|
||||
/* 水平间距 */
|
||||
/* 垂直间距 */
|
||||
/* 透明度 */
|
||||
/* 文章场景相关 */
|
||||
.nut-theme-dark .nut-collapse-item .nut-collapse-item__title {
|
||||
color: var(--nut-dark-color, var(--nut-white, #fff));
|
||||
background: var(--nut-dark-background, #131313);
|
||||
box-shadow: none;
|
||||
}
|
||||
.nut-theme-dark .nut-collapse-item .nut-collapse-item__title--disabled {
|
||||
color: var(--nut-dark-color-gray, var(--nut-text-color, #808080));
|
||||
}
|
||||
.nut-theme-dark .nut-collapse-item .nut-collapse-item__title--disabled .collapse-icon {
|
||||
color: var(--nut-dark-color-gray, var(--nut-text-color, #808080));
|
||||
}
|
||||
.nut-theme-dark .nut-collapse-item .nut-collapse__item-wrapper .collapse-content,
|
||||
.nut-theme-dark .nut-collapse-item .nut-collapse__item-wrapper .nut-collapse__item-wrapper__content,
|
||||
.nut-theme-dark .nut-collapse-item .nut-collapse__item-wrapper .nut-collapse__item-extraWrapper__extraRender {
|
||||
color: var(--nut-dark-color, var(--nut-white, #fff));
|
||||
background: var(--nut-dark-background2, #1b1b1b);
|
||||
}
|
||||
.nut-theme-dark .nut-collapse-item .nut-collapse__item-extraWrapper .nut-collapse__item-extraWrapper__extraRender,
|
||||
.nut-theme-dark .nut-collapse-item .nut-collapse__item-extraWrapper .nut-collapse__item-wrapper__content {
|
||||
background: var(--nut-dark-background2, #1b1b1b);
|
||||
}
|
||||
.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 .nut-collapse-item__title {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: var(--nut-collapse-item-padding, 13px 36px 13px 26px);
|
||||
overflow: hidden;
|
||||
font-size: var(--nut-collapse-item-font-size, var(--nut-font-size-2, 14px));
|
||||
line-height: var(--nut-collapse-item-line-height, 24px);
|
||||
color: var(--nut-collapse-item-color, #666);
|
||||
background-color: #fff;
|
||||
}
|
||||
.nut-collapse-item .nut-collapse-item__title .nut-collapse-item__title-main {
|
||||
flex: 1;
|
||||
}
|
||||
.nut-collapse-item .nut-collapse-item__title .nut-collapse-item__title-main-value {
|
||||
display: block;
|
||||
}
|
||||
.nut-collapse-item .nut-collapse-item__title .nut-collapse-item__title-main-value .nut-collapse-item__title-main-icon {
|
||||
top: 2px;
|
||||
}
|
||||
.nut-collapse-item .nut-collapse-item__title .nut-collapse-item__title-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--nut-collapse-item-icon-color, #666);
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
.nut-collapse-item .nut-collapse-item__title .nut-collapse-item__title-icon--expanded {
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
.nut-collapse-item .nut-collapse-item__title .nut-collapse-item__title-sub {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 65px;
|
||||
margin-top: -12px;
|
||||
color: var(--nut-collapse-item-sub-title-color, #666);
|
||||
}
|
||||
.nut-collapse-item .nut-collapse-item__title .nut-collapse-item__title-label {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: #969799;
|
||||
}
|
||||
.nut-collapse-item .nut-collapse__item-wrapper,
|
||||
.nut-collapse-item .nut-collapse__item-extraWrapper {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
transition: height 0.3s ease-in-out;
|
||||
}
|
||||
.nut-collapse-item .nut-collapse__item-wrapper .nut-collapse__item-wrapper__content,
|
||||
.nut-collapse-item .nut-collapse__item-wrapper .nut-collapse__item-extraWrapper__extraRender,
|
||||
.nut-collapse-item .nut-collapse__item-extraWrapper .nut-collapse__item-wrapper__content,
|
||||
.nut-collapse-item .nut-collapse__item-extraWrapper .nut-collapse__item-extraWrapper__extraRender {
|
||||
display: block;
|
||||
padding: var(--nut-collapse-wrapper-content-padding, 12px 26px);
|
||||
font-size: var(--nut-collapse-wrapper-content-font-size, var(--nut-font-size-2, 14px));
|
||||
line-height: var(--nut-collapse-wrapper-content-line-height, 1.5);
|
||||
color: var(--nut-collapse-wrapper-content-color, #666);
|
||||
background-color: var(--nut-collapse-wrapper-content-background-color, var(--nut-white, #fff));
|
||||
}
|
||||
.nut-collapse-item .nut-collapse__item-wrapper .nut-collapse__item-wrapper__content--empty,
|
||||
.nut-collapse-item .nut-collapse__item-extraWrapper .nut-collapse__item-wrapper__content--empty {
|
||||
padding: var(--nut-collapse-wrapper-empty-content-padding, 0 26px);
|
||||
}
|
||||
.nut-collapse-item .nut-collapse__item-extraWrapper {
|
||||
height: auto;
|
||||
}
|
||||
.nut-collapse-item .nut-collapse__item-extraWrapper .nut-collapse__item-extraWrapper__extraRender {
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.nut-collapse-item .open-style {
|
||||
height: auto;
|
||||
will-change: height;
|
||||
}
|
||||
.nut-collapse-item .close-style {
|
||||
will-change: auto;
|
||||
}
|
||||
.nut-collapse-item .nut-collapse-item__title--disabled {
|
||||
color: var(--nut-collapse-item-disabled-color, #c8c9cc);
|
||||
pointer-events: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.nut-collapse-item .nut-collapse-item__title--disabled .collapse-icon {
|
||||
color: var(--nut-collapse-item-disabled-color, #c8c9cc);
|
||||
}
|
||||
.nut-collapse-item .nut-collapse-item__title-mtitle {
|
||||
display: inline-block;
|
||||
}
|
||||
.collapse-border-none .nut-collapse-item__title::after {
|
||||
display: none;
|
||||
}
|
||||
Reference in New Issue
Block a user