处理待办事项
This commit is contained in:
@@ -1,116 +0,0 @@
|
||||
"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_useProvide = require("../_hooks/useProvide.js");
|
||||
const uni_modules_nutuiUni_components__hooks_useRect = require("../_hooks/useRect.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 menu = require("../../../../menu.js");
|
||||
const Icon = () => "../icon/icon.js";
|
||||
const componentName = `${uni_modules_nutuiUni_components__constants_prefix.PREFIX}-menu`;
|
||||
const _sfc_main = common_vendor.defineComponent({
|
||||
name: componentName,
|
||||
components: { Icon },
|
||||
props: menu.menuProps,
|
||||
options: {
|
||||
virtualHost: true,
|
||||
addGlobalClass: true,
|
||||
styleIsolation: "shared"
|
||||
},
|
||||
setup(props) {
|
||||
const barId = `nut-menu__bar${uni_modules_nutuiUni_components__utils_common.getRandomId()}`;
|
||||
const offset = common_vendor.ref(0);
|
||||
const instance = common_vendor.getCurrentInstance();
|
||||
const { children } = uni_modules_nutuiUni_components__hooks_useProvide.useProvide(menu.MENU_KEY)({ props, offset });
|
||||
const opened = common_vendor.computed(() => children.some((item) => {
|
||||
var _a;
|
||||
return (_a = item == null ? void 0 : item.state) == null ? void 0 : _a.showWrapper;
|
||||
}));
|
||||
const isScrollFixed = common_vendor.computed(() => {
|
||||
const { scrollFixed, scrollTop } = props;
|
||||
if (!scrollFixed)
|
||||
return false;
|
||||
return scrollTop > (typeof scrollFixed === "boolean" ? 30 : Number(scrollFixed));
|
||||
});
|
||||
const classes = common_vendor.computed(() => {
|
||||
return uni_modules_nutuiUni_components__utils_style.getMainClass(props, componentName, {
|
||||
"scroll-fixed": isScrollFixed.value
|
||||
});
|
||||
});
|
||||
function updateOffset(children2) {
|
||||
setTimeout(() => {
|
||||
uni_modules_nutuiUni_components__hooks_useRect.useRect(barId, instance).then((rect) => {
|
||||
if (props.direction === "down")
|
||||
offset.value = rect.bottom + common_vendor.index.getSystemInfoSync().windowTop;
|
||||
else
|
||||
offset.value = common_vendor.index.getSystemInfoSync().windowHeight - rect.top;
|
||||
children2.toggle();
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
function toggleItem(active) {
|
||||
children.forEach((item, index) => {
|
||||
if (index === active)
|
||||
updateOffset(item);
|
||||
else if (item.state.showPopup)
|
||||
item.toggle(false, { immediate: true });
|
||||
});
|
||||
}
|
||||
function getClasses(showPopup) {
|
||||
let str = "";
|
||||
const { titleClass } = props;
|
||||
if (showPopup)
|
||||
str += "active";
|
||||
if (titleClass)
|
||||
str += ` ${titleClass}`;
|
||||
return str;
|
||||
}
|
||||
return {
|
||||
barId,
|
||||
toggleItem,
|
||||
children,
|
||||
opened,
|
||||
classes,
|
||||
getClasses
|
||||
};
|
||||
}
|
||||
});
|
||||
if (!Array) {
|
||||
const _component_Icon = common_vendor.resolveComponent("Icon");
|
||||
_component_Icon();
|
||||
}
|
||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
return {
|
||||
a: common_vendor.f(_ctx.children, (item, index, i0) => {
|
||||
return common_vendor.e({
|
||||
a: common_vendor.t(item.renderTitle())
|
||||
}, _ctx.direction === "up" ? {
|
||||
b: "0481e128-0-" + i0,
|
||||
c: common_vendor.p({
|
||||
name: _ctx.upIcon
|
||||
})
|
||||
} : {
|
||||
d: "0481e128-1-" + i0,
|
||||
e: common_vendor.p({
|
||||
name: _ctx.downIcon
|
||||
})
|
||||
}, {
|
||||
f: common_vendor.n(_ctx.getClasses(item.state.showPopup)),
|
||||
g: item.disabled ? 1 : "",
|
||||
h: item.state.showPopup ? 1 : "",
|
||||
i: item.state.showPopup ? _ctx.activeColor : "",
|
||||
j: common_vendor.o(($event) => !item.disabled && _ctx.toggleItem(index), index),
|
||||
k: index
|
||||
});
|
||||
}),
|
||||
b: _ctx.direction === "up",
|
||||
c: _ctx.barId,
|
||||
d: _ctx.opened ? 1 : "",
|
||||
e: common_vendor.n(_ctx.classes),
|
||||
f: common_vendor.s(_ctx.customStyle)
|
||||
};
|
||||
}
|
||||
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render]]);
|
||||
wx.createComponent(Component);
|
||||
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/nutui-uni/components/menu/menu.js.map
|
||||
@@ -1,6 +0,0 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"icon": "../icon/icon"
|
||||
}
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
<view class="{{e}}" style="{{f}}"><view id="{{c}}" class="{{['nut-menu__bar', d && 'opened']}}"><block wx:for="{{a}}" wx:for-item="item" wx:key="k"><view class="{{['nut-menu__item', item.g && 'disabled', item.h && 'active']}}" style="{{'color:' + item.i}}" bindtap="{{item.j}}"><view class="{{['nut-menu__title', item.f]}}"><view class="nut-menu__title-text">{{item.a}}</view><view class="nut-menu__title-icon"><icon wx:if="{{b}}" u-i="{{item.b}}" bind:__l="__l" u-p="{{item.c}}"/><icon wx:else u-i="{{item.d}}" bind:__l="__l" u-p="{{item.e||''}}"/></view></view></view></block></view><slot/></view>
|
||||
@@ -1,106 +0,0 @@
|
||||
/**
|
||||
* 这里是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-menu .nut-menu__bar {
|
||||
background-color: var(--nut-dark-background, #131313);
|
||||
}
|
||||
.nut-theme-dark .nut-menu .nut-menu__bar .nut-menu__item {
|
||||
color: var(--nut-dark-color, var(--nut-white, #fff));
|
||||
}
|
||||
.nut-menu.scroll-fixed {
|
||||
position: fixed;
|
||||
top: var(--nut-menu-scroll-fixed-top, 0);
|
||||
z-index: var(--nut-menu-scroll-fixed-z-index, 1000);
|
||||
width: 100%;
|
||||
}
|
||||
.nut-menu .nut-menu__bar {
|
||||
position: relative;
|
||||
display: flex;
|
||||
line-height: var(--nut-menu-bar-line-height, 48px);
|
||||
background-color: var(--nut-white, #fff);
|
||||
box-shadow: var(--nut-menu-bar-box-shadow, 0 2px 12px rgba(89, 89, 89, 0.12));
|
||||
}
|
||||
.nut-menu .nut-menu__bar.opened {
|
||||
z-index: var(--nut-menu-bar-opened-z-index, 2001);
|
||||
}
|
||||
.nut-menu .nut-menu__bar .nut-menu__item {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: var(--nut-menu-item-font-size, var(--nut-font-size-2, 14px));
|
||||
color: var(--nut-menu-item-text-color, var(--nut-title-color, #1a1a1a));
|
||||
text-align: center;
|
||||
}
|
||||
.nut-menu .nut-menu__bar .nut-menu__item.active {
|
||||
color: var(--nut-menu-item-active-text-color, var(--nut-primary-color, #fa2c19));
|
||||
}
|
||||
.nut-menu .nut-menu__bar .nut-menu__item.disabled {
|
||||
color: var(--nut-menu-item-disabled-color, #969799);
|
||||
}
|
||||
.nut-menu .nut-menu__bar .nut-menu__item .nut-menu__title-icon {
|
||||
display: flex;
|
||||
transition: all 0.2s linear;
|
||||
}
|
||||
.nut-menu .nut-menu__bar .nut-menu__item .nut-menu__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
max-width: 100%;
|
||||
}
|
||||
.nut-menu .nut-menu__bar .nut-menu__item .nut-menu__title .nut-menu__title-text {
|
||||
display: block;
|
||||
padding-right: var(--nut-menu-title-text-padding-right, 8px);
|
||||
padding-left: var(--nut-menu-title-text-padding-left, 8px);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.nut-menu .nut-menu__bar .nut-menu__item .nut-menu__title.active .nut-menu__title-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
@@ -1,220 +0,0 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../../../common/vendor.js");
|
||||
const uni_modules_nutuiUni_components__constants_event = require("../_constants/event.js");
|
||||
const uni_modules_nutuiUni_components__constants_prefix = require("../_constants/prefix.js");
|
||||
const uni_modules_nutuiUni_components__hooks_useInject = require("../_hooks/useInject.js");
|
||||
require("../_utils/env.js");
|
||||
const uni_modules_nutuiUni_components__utils_style = require("../_utils/style.js");
|
||||
const menu = require("../../../../menu.js");
|
||||
const uni_modules_nutuiUni_components__utils_props = require("../_utils/props.js");
|
||||
const menuitemProps = {
|
||||
...uni_modules_nutuiUni_components__utils_props.commonProps,
|
||||
/**
|
||||
* @@description 菜单项标题
|
||||
*/
|
||||
title: String,
|
||||
/**
|
||||
* @description 选项数组
|
||||
*/
|
||||
options: uni_modules_nutuiUni_components__utils_props.makeArrayProp([]),
|
||||
/**
|
||||
* @description 是否禁用菜单
|
||||
*/
|
||||
disabled: Boolean,
|
||||
modelValue: [String, Number],
|
||||
/**
|
||||
* @description 可以设置一行展示多少列 `options`
|
||||
*/
|
||||
cols: uni_modules_nutuiUni_components__utils_props.makeNumberProp(1),
|
||||
/**
|
||||
* @description 选项选中时自定义标题样式类
|
||||
*/
|
||||
activeTitleClass: String,
|
||||
/**
|
||||
* @description 选项非选中时自定义标题样式类
|
||||
*/
|
||||
inactiveTitleClass: String,
|
||||
/**
|
||||
* @description 选项选中时选中图标
|
||||
*/
|
||||
optionIcon: uni_modules_nutuiUni_components__utils_props.makeStringProp("Check")
|
||||
};
|
||||
const menuitemEmits = {
|
||||
[uni_modules_nutuiUni_components__constants_event.UPDATE_MODEL_EVENT]: (value) => true,
|
||||
[uni_modules_nutuiUni_components__constants_event.CHANGE_EVENT]: (value) => true,
|
||||
[uni_modules_nutuiUni_components__constants_event.OPEN_EVENT]: () => true,
|
||||
[uni_modules_nutuiUni_components__constants_event.CLOSE_EVENT]: () => true,
|
||||
itemClick: (item) => true
|
||||
};
|
||||
const Icon = () => "../icon/icon.js";
|
||||
const PopUp = () => "../popup/popup.js";
|
||||
const componentName = `${uni_modules_nutuiUni_components__constants_prefix.PREFIX}-menu-item`;
|
||||
const _sfc_main = common_vendor.defineComponent({
|
||||
name: componentName,
|
||||
options: {
|
||||
virtualHost: true,
|
||||
addGlobalClass: true,
|
||||
styleIsolation: "shared"
|
||||
},
|
||||
components: {
|
||||
PopUp,
|
||||
Icon
|
||||
},
|
||||
props: menuitemProps,
|
||||
emits: menuitemEmits,
|
||||
setup(props, { emit, expose }) {
|
||||
const state = common_vendor.reactive({
|
||||
showPopup: false,
|
||||
showWrapper: false
|
||||
});
|
||||
const { parent } = uni_modules_nutuiUni_components__hooks_useInject.useInject(menu.MENU_KEY);
|
||||
const classes = common_vendor.computed(() => {
|
||||
return uni_modules_nutuiUni_components__utils_style.getMainClass(props, componentName, {
|
||||
"nut-hidden": !state.showWrapper
|
||||
});
|
||||
});
|
||||
const styles = common_vendor.computed(() => {
|
||||
if ((parent == null ? void 0 : parent.props.offset) > 0) {
|
||||
const obj = (parent == null ? void 0 : parent.props.direction) === "down" ? { top: `${parent == null ? void 0 : parent.props.offset}px` } : { bottom: `${parent == null ? void 0 : parent.offset.value}px` };
|
||||
return uni_modules_nutuiUni_components__utils_style.getMainStyle(props, obj);
|
||||
} else {
|
||||
const obj = (parent == null ? void 0 : parent.props.direction) === "down" ? { top: `${parent == null ? void 0 : parent.offset.value}px` } : { bottom: `${parent == null ? void 0 : parent.offset.value}px` };
|
||||
return uni_modules_nutuiUni_components__utils_style.getMainStyle(props, obj);
|
||||
}
|
||||
});
|
||||
const placeholderElementStyle = common_vendor.computed(() => {
|
||||
const heightStyle = { height: `${parent == null ? void 0 : parent.offset.value}px` };
|
||||
if ((parent == null ? void 0 : parent.props.direction) === "down")
|
||||
return { ...heightStyle, top: 0 };
|
||||
return { ...heightStyle, top: "auto" };
|
||||
});
|
||||
const open = () => {
|
||||
state.showPopup = true;
|
||||
state.showWrapper = true;
|
||||
};
|
||||
const close = () => {
|
||||
state.showPopup = false;
|
||||
};
|
||||
const toggle = (show = !state.showPopup) => {
|
||||
if (show === state.showPopup)
|
||||
return;
|
||||
if (show)
|
||||
open();
|
||||
else
|
||||
close();
|
||||
};
|
||||
const change = (value) => {
|
||||
if (value === props.modelValue)
|
||||
return;
|
||||
emit("update:modelValue", value);
|
||||
emit("change", value);
|
||||
};
|
||||
const renderTitle = () => {
|
||||
var _a;
|
||||
if (props.title)
|
||||
return props.title;
|
||||
const match = (_a = props.options) == null ? void 0 : _a.find((option) => option.value === props.modelValue);
|
||||
return match ? match.text : "";
|
||||
};
|
||||
const onClick = (option) => {
|
||||
state.showPopup = false;
|
||||
emit("itemClick", option);
|
||||
change(option.value);
|
||||
};
|
||||
const handleClose = () => {
|
||||
state.showWrapper = false;
|
||||
};
|
||||
const handleClickOutside = () => {
|
||||
state.showPopup = false;
|
||||
};
|
||||
const handleVisible = (visible) => {
|
||||
if (visible)
|
||||
emit(uni_modules_nutuiUni_components__constants_event.OPEN_EVENT);
|
||||
else
|
||||
emit(uni_modules_nutuiUni_components__constants_event.CLOSE_EVENT);
|
||||
};
|
||||
expose({
|
||||
change,
|
||||
open,
|
||||
close,
|
||||
toggle
|
||||
});
|
||||
return {
|
||||
classes,
|
||||
styles,
|
||||
placeholderElementStyle,
|
||||
renderTitle,
|
||||
state,
|
||||
parent,
|
||||
toggle,
|
||||
onClick,
|
||||
handleClose,
|
||||
handleVisible,
|
||||
handleClickOutside
|
||||
};
|
||||
}
|
||||
});
|
||||
if (!Array) {
|
||||
const _component_Icon = common_vendor.resolveComponent("Icon");
|
||||
const _component_PopUp = common_vendor.resolveComponent("PopUp");
|
||||
(_component_Icon + _component_PopUp)();
|
||||
}
|
||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
var _a, _b, _c, _d, _e, _f;
|
||||
return {
|
||||
a: !_ctx.state.showPopup ? 1 : "",
|
||||
b: ((_a = _ctx.parent) == null ? void 0 : _a.props.direction) === "up" ? 1 : "",
|
||||
c: common_vendor.s(_ctx.placeholderElementStyle),
|
||||
d: common_vendor.o((...args) => _ctx.handleClickOutside && _ctx.handleClickOutside(...args)),
|
||||
e: common_vendor.f(_ctx.options, (option, index, i0) => {
|
||||
var _a2, _b2;
|
||||
return common_vendor.e({
|
||||
a: option.value === _ctx.modelValue
|
||||
}, option.value === _ctx.modelValue ? {
|
||||
b: "79751d88-1-" + i0 + ",79751d88-0",
|
||||
c: common_vendor.p({
|
||||
name: _ctx.optionIcon,
|
||||
["custom-color"]: (_a2 = _ctx.parent) == null ? void 0 : _a2.props.activeColor
|
||||
}),
|
||||
d: common_vendor.n(option.value === _ctx.modelValue ? _ctx.activeTitleClass : _ctx.inactiveTitleClass)
|
||||
} : {}, {
|
||||
e: common_vendor.t(option.text),
|
||||
f: common_vendor.n(option.value === _ctx.modelValue ? _ctx.activeTitleClass : _ctx.inactiveTitleClass),
|
||||
g: option.value === _ctx.modelValue ? (_b2 = _ctx.parent) == null ? void 0 : _b2.props.activeColor : "",
|
||||
h: index,
|
||||
i: common_vendor.n({
|
||||
active: option.value === _ctx.modelValue
|
||||
}),
|
||||
j: common_vendor.o(($event) => _ctx.onClick(option), index)
|
||||
});
|
||||
}),
|
||||
f: `${100 / _ctx.cols}%`,
|
||||
g: common_vendor.o(_ctx.handleClose),
|
||||
h: common_vendor.o(($event) => _ctx.handleVisible(true)),
|
||||
i: common_vendor.o(($event) => _ctx.handleVisible(false)),
|
||||
j: common_vendor.o(($event) => _ctx.state.showPopup = $event),
|
||||
k: common_vendor.p({
|
||||
..._ctx.$attrs,
|
||||
["custom-style"]: {
|
||||
position: "absolute"
|
||||
},
|
||||
["overlay-style"]: {
|
||||
position: "absolute"
|
||||
},
|
||||
position: ((_b = _ctx.parent) == null ? void 0 : _b.props.direction) === "down" ? "top" : "bottom",
|
||||
duration: (_c = _ctx.parent) == null ? void 0 : _c.props.duration,
|
||||
["pop-class"]: "nut-menu__pop",
|
||||
["destroy-on-close"]: false,
|
||||
["safe-area-inset-top"]: false,
|
||||
overlay: (_d = _ctx.parent) == null ? void 0 : _d.props.overlay,
|
||||
["lock-scroll"]: (_e = _ctx.parent) == null ? void 0 : _e.props.lockScroll,
|
||||
["close-on-click-overlay"]: (_f = _ctx.parent) == null ? void 0 : _f.props.closeOnClickOverlay,
|
||||
visible: _ctx.state.showPopup
|
||||
}),
|
||||
l: common_vendor.n(_ctx.classes),
|
||||
m: common_vendor.s(_ctx.styles)
|
||||
};
|
||||
}
|
||||
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render]]);
|
||||
wx.createComponent(Component);
|
||||
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/nutui-uni/components/menuitem/menuitem.js.map
|
||||
@@ -1,7 +0,0 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"icon": "../icon/icon",
|
||||
"pop-up": "../popup/popup"
|
||||
}
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
<view class="{{l}}" style="{{m}}"><view class="{{['nut-menu-item-placeholder-element', a && 'nut-hidden', b && 'placeholder-element-up']}}" style="{{c}}" bindtap="{{d}}"/><pop-up wx:if="{{k}}" u-s="{{['d']}}" bindclosed="{{g}}" bindopen="{{h}}" bindclose="{{i}}" u-i="79751d88-0" bind:__l="__l" bindupdateVisible="{{j}}" u-p="{{k}}"><scroll-view scroll-y="{{true}}"><view id="nut-menu-item__content" class="nut-menu-item__content"><view wx:for="{{e}}" wx:for-item="option" wx:key="h" class="{{['nut-menu-item__option', option.i]}}" style="{{'flex-basis:' + f}}" bindtap="{{option.j}}"><view wx:if="{{option.a}}" class="{{['nut-menu-item__span', option.d]}}"><icon wx:if="{{option.c}}" u-i="{{option.b}}" bind:__l="__l" u-p="{{option.c}}"/></view><view class="{{[option.f]}}" style="{{'color:' + option.g}}">{{option.e}}</view></view><slot/></view></scroll-view></pop-up></view>
|
||||
@@ -1,216 +0,0 @@
|
||||
/**
|
||||
* 这里是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-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--nut-overlay-bg-color, rgba(0, 0, 0, 0.7));
|
||||
}
|
||||
.nut-overflow-hidden {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
.nut-theme-dark .nut-popup {
|
||||
background: var(--nut-dark-background2, #1b1b1b);
|
||||
}
|
||||
.nut-theme-dark .nut-popup__close-icon {
|
||||
color: var(--nut-dark-color, var(--nut-white, #fff));
|
||||
}
|
||||
.nut-popup-slide-center-enter-active, .nut-popup-slide-center-leave-active {
|
||||
transition-timing-function: ease;
|
||||
transition-property: opacity;
|
||||
}
|
||||
.nut-popup-slide-center-enter-from, .nut-popup-slide-center-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
.nut-popup-slide-top-enter-from, .nut-popup-slide-top-leave-active {
|
||||
transform: translate(0, -100%);
|
||||
}
|
||||
.nut-popup-slide-right-enter-from, .nut-popup-slide-right-leave-active {
|
||||
transform: translate(100%, 0);
|
||||
}
|
||||
.nut-popup-slide-bottom-enter-from, .nut-popup-slide-bottom-leave-active {
|
||||
transform: translate(0, 100%);
|
||||
}
|
||||
.nut-popup-slide-left-enter-from, .nut-popup-slide-left-leave-active {
|
||||
transform: translate(-100%, 0);
|
||||
}
|
||||
.nut-popup--center {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.nut-popup--center.round {
|
||||
border-radius: var(--nut-popup-border-radius, 20px);
|
||||
}
|
||||
.nut-popup--bottom {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.nut-popup--bottom.round {
|
||||
border-radius: var(--nut-popup-border-radius, 20px) var(--nut-popup-border-radius, 20px) 0 0;
|
||||
}
|
||||
.nut-popup--bottom--safebottom {
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
.nut-popup--right {
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
.nut-popup--right.round {
|
||||
border-radius: var(--nut-popup-border-radius, 20px) 0 0 var(--nut-popup-border-radius, 20px);
|
||||
}
|
||||
.nut-popup--left {
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.nut-popup--left.round {
|
||||
border-radius: 0 var(--nut-popup-border-radius, 20px) var(--nut-popup-border-radius, 20px) 0;
|
||||
}
|
||||
.nut-popup--top {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.nut-popup--top.round {
|
||||
border-radius: 0 0 var(--nut-popup-border-radius, 20px) var(--nut-popup-border-radius, 20px);
|
||||
}
|
||||
.nut-popup--top--safetop {
|
||||
padding-top: var(--status-bar-height);
|
||||
padding-top: constant(safe-area-inset-top);
|
||||
padding-top: env(safe-area-inset-top);
|
||||
}
|
||||
.nut-popup {
|
||||
position: fixed;
|
||||
max-height: 100%;
|
||||
overflow-y: auto;
|
||||
background-color: var(--nut-white, #fff);
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.nut-popup__close-icon {
|
||||
position: absolute !important;
|
||||
z-index: 1;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
font-size: 18px;
|
||||
line-height: 30px;
|
||||
color: #969799;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.nut-popup__close-icon:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
.nut-popup__close-icon--top-left {
|
||||
top: var(--nut-popup-close-icon-margin, 16px);
|
||||
left: var(--nut-popup-close-icon-margin, 16px);
|
||||
}
|
||||
.nut-popup__close-icon--top-right {
|
||||
top: var(--nut-popup-close-icon-margin, 16px);
|
||||
right: var(--nut-popup-close-icon-margin, 16px);
|
||||
}
|
||||
.nut-popup__close-icon--bottom-left {
|
||||
bottom: var(--nut-popup-close-icon-margin, 16px);
|
||||
left: var(--nut-popup-close-icon-margin, 16px);
|
||||
}
|
||||
.nut-popup__close-icon--bottom-right {
|
||||
right: var(--nut-popup-close-icon-margin, 16px);
|
||||
bottom: var(--nut-popup-close-icon-margin, 16px);
|
||||
}
|
||||
.nut-theme-dark .nut-menu-item__content .nut-menu-item__option {
|
||||
color: var(--nut-dark-color, var(--nut-white, #fff));
|
||||
}
|
||||
.nut-menu-item {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: var(--nut-menu-bar-opened-z-index, 2001);
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
.nut-menu-item .active {
|
||||
font-weight: var(--nut-menu-active-item-font-weight, 500);
|
||||
color: var(--nut-menu-item-active-text-color, var(--nut-primary-color, #fa2c19)) !important;
|
||||
}
|
||||
.nut-menu-item__content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
max-height: var(--nut-menu-item-content-max-height, 214px);
|
||||
padding: var(--nut-menu-item-content-padding, 12px 24px);
|
||||
}
|
||||
.nut-menu-item__content.nut-menu-item__overflow {
|
||||
overflow-y: auto;
|
||||
}
|
||||
.nut-menu-item__content .nut-menu-item__option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: var(--nut-menu-item-option-padding-top, 12px);
|
||||
padding-bottom: var(--nut-menu-item-option-padding-bottom, 12px);
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
font-size: var(--nut-font-size-2, 14px);
|
||||
color: var(--nut-title-color, #1a1a1a);
|
||||
}
|
||||
.nut-menu-item__content .nut-menu-item__option .nut-menu-item__span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: var(--nut-menu-item-option-i-margin-right, 6px);
|
||||
}
|
||||
.nut-menu-item-placeholder-element {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: var(--nut-menu-bar-opened-z-index, 2001);
|
||||
background-color: transparent;
|
||||
}
|
||||
@@ -1,353 +0,0 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../../../common/vendor.js");
|
||||
const uni_modules_nutuiUni_components__constants_event = require("../_constants/event.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_is = require("../_utils/is.js");
|
||||
require("../_utils/env.js");
|
||||
const uni_modules_nutuiUni_components__utils_pxCheck = require("../_utils/pxCheck.js");
|
||||
const uni_modules_nutuiUni_components__utils_style = require("../_utils/style.js");
|
||||
const uni_modules_nutuiUni_components__utils_props = require("../_utils/props.js");
|
||||
const noticebarProps = {
|
||||
...uni_modules_nutuiUni_components__utils_props.commonProps,
|
||||
/**
|
||||
* @description 滚动的方向,可选 `across`、`vertical`
|
||||
*/
|
||||
direction: uni_modules_nutuiUni_components__utils_props.makeStringProp("across"),
|
||||
/**
|
||||
* @description 纵向滚动数据列表, `vertical`方向
|
||||
*/
|
||||
list: uni_modules_nutuiUni_components__utils_props.makeArrayProp([]),
|
||||
/**
|
||||
* @description 停留时间(毫秒),`vertical`方向
|
||||
*/
|
||||
standTime: uni_modules_nutuiUni_components__utils_props.makeNumberProp(1e3),
|
||||
/**
|
||||
* @description 稍复杂的动画,耗能会高,`vertical`方向
|
||||
*/
|
||||
complexAm: Boolean,
|
||||
/**
|
||||
* @description 每一个滚动列的高度(px),注意:在使用 slot 插槽定义滚动单元时,按照实际高度修改此值
|
||||
*/
|
||||
height: uni_modules_nutuiUni_components__utils_props.makeNumberProp(40),
|
||||
/**
|
||||
* @description 提示的信息
|
||||
*/
|
||||
text: uni_modules_nutuiUni_components__utils_props.makeStringProp(""),
|
||||
/**
|
||||
* @description 是否启用关闭模式
|
||||
*/
|
||||
closeMode: Boolean,
|
||||
/**
|
||||
* @description 是否展示左侧图标, 滚动方向为 `across` 生效
|
||||
*/
|
||||
leftIcon: uni_modules_nutuiUni_components__utils_props.truthProp,
|
||||
/**
|
||||
* @description 导航栏的文字颜色
|
||||
*/
|
||||
customColor: uni_modules_nutuiUni_components__utils_props.makeStringProp(""),
|
||||
/**
|
||||
* @description 导航栏的背景颜色
|
||||
*/
|
||||
background: uni_modules_nutuiUni_components__utils_props.makeStringProp(""),
|
||||
/**
|
||||
* @description 延时多少秒
|
||||
*/
|
||||
delay: uni_modules_nutuiUni_components__utils_props.makeNumericProp(1),
|
||||
/**
|
||||
* @description 是否可以滚动
|
||||
*/
|
||||
scrollable: uni_modules_nutuiUni_components__utils_props.truthProp,
|
||||
/**
|
||||
* @description 滚动速率 (px/s)
|
||||
*/
|
||||
speed: uni_modules_nutuiUni_components__utils_props.makeNumberProp(50),
|
||||
/**
|
||||
* @description 是否开启文本换行,`scrollable` 会设置为 `false`
|
||||
*/
|
||||
wrapable: Boolean,
|
||||
/**
|
||||
* @description `vertical`方向时`list`属性如果传入数组对象,显示文本的字段名
|
||||
*/
|
||||
fieldName: String
|
||||
};
|
||||
const noticebarEmits = {
|
||||
[uni_modules_nutuiUni_components__constants_event.CLICK_EVENT]: (value) => value instanceof Object || uni_modules_nutuiUni_components__utils_is.isString(value),
|
||||
[uni_modules_nutuiUni_components__constants_event.CLOSE_EVENT]: (evt) => evt instanceof Object || uni_modules_nutuiUni_components__utils_is.isString(evt),
|
||||
acrossEnd: (evt) => evt instanceof Object
|
||||
};
|
||||
if (!Math) {
|
||||
NutIcon();
|
||||
}
|
||||
const NutIcon = () => "../icon/icon.js";
|
||||
const componentName = `${uni_modules_nutuiUni_components__constants_prefix.PREFIX}-noticebar`;
|
||||
const __default__ = common_vendor.defineComponent({
|
||||
name: componentName,
|
||||
options: {
|
||||
virtualHost: true,
|
||||
addGlobalClass: true,
|
||||
styleIsolation: "shared"
|
||||
}
|
||||
});
|
||||
const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({
|
||||
...__default__,
|
||||
props: noticebarProps,
|
||||
emits: noticebarEmits,
|
||||
setup(__props, { emit: __emit }) {
|
||||
const props = __props;
|
||||
const emit = __emit;
|
||||
const instance = common_vendor.getCurrentInstance();
|
||||
const { getSelectorNodeInfo } = uni_modules_nutuiUni_components__hooks_useSelectorQuery.useSelectorQuery(instance);
|
||||
common_vendor.ref(null);
|
||||
common_vendor.ref(null);
|
||||
const state = common_vendor.reactive({
|
||||
wrapWidth: 0,
|
||||
firstRound: true,
|
||||
duration: 0,
|
||||
offsetWidth: 0,
|
||||
showNoticebar: true,
|
||||
animationClass: "",
|
||||
animate: false,
|
||||
scrollList: [],
|
||||
distance: 0,
|
||||
timer: null,
|
||||
keepAlive: false,
|
||||
isCanScroll: null,
|
||||
showNotica: true,
|
||||
id: Math.round(Math.random() * 1e5)
|
||||
});
|
||||
const classes = common_vendor.computed(() => {
|
||||
return uni_modules_nutuiUni_components__utils_style.getMainClass(props, componentName);
|
||||
});
|
||||
const isEllipsis = common_vendor.computed(() => {
|
||||
if (state.isCanScroll == null)
|
||||
return false;
|
||||
else
|
||||
return !state.isCanScroll && !props.wrapable;
|
||||
});
|
||||
const wrapContentClass = common_vendor.computed(() => {
|
||||
return {
|
||||
"nut-noticebar__page-wrap-content": true,
|
||||
"nut-ellipsis": isEllipsis.value,
|
||||
[`content${state.id}`]: true,
|
||||
[state.animationClass]: true
|
||||
};
|
||||
});
|
||||
const barStyle = common_vendor.computed(() => {
|
||||
const style = {};
|
||||
props.customColor && (style.color = props.customColor);
|
||||
props.background && (style.background = props.background);
|
||||
if (props.direction === "vertical")
|
||||
style.height = `${props.height}px`;
|
||||
return style;
|
||||
});
|
||||
const contentStyle = common_vendor.computed(() => {
|
||||
return {
|
||||
animationDelay: `${state.firstRound ? props.delay : 0}s`,
|
||||
animationDuration: `${state.duration}s`,
|
||||
transform: `translateX(${state.firstRound ? 0 : `${state.wrapWidth}px`})`
|
||||
};
|
||||
});
|
||||
const horseLampStyle = common_vendor.computed(() => {
|
||||
let styles = {};
|
||||
if (props.complexAm) {
|
||||
styles = {
|
||||
transform: `translateY(${state.distance}px)`
|
||||
};
|
||||
} else {
|
||||
if (state.animate) {
|
||||
styles = {
|
||||
"transition": `all ${~~(props.height / props.speed / 4)}s`,
|
||||
"margin-top": `-${props.height}px`
|
||||
};
|
||||
}
|
||||
}
|
||||
return styles;
|
||||
});
|
||||
common_vendor.watch(
|
||||
() => props.text,
|
||||
() => {
|
||||
initScrollWrap();
|
||||
}
|
||||
);
|
||||
common_vendor.watch(
|
||||
() => props.list,
|
||||
(value) => {
|
||||
state.scrollList = [].concat(value);
|
||||
}
|
||||
);
|
||||
function initScrollWrap() {
|
||||
if (state.showNoticebar === false)
|
||||
return;
|
||||
setTimeout(() => {
|
||||
if (state.showNoticebar === false)
|
||||
return;
|
||||
let wrapWidth = 0;
|
||||
let offsetWidth = 0;
|
||||
getSelectorNodeInfo(`.wrap${state.id}`).then((rect) => {
|
||||
if (rect.width > 0)
|
||||
wrapWidth = rect.width;
|
||||
getSelectorNodeInfo(`.content${state.id}`).then((rect2) => {
|
||||
if (rect2.width > 0)
|
||||
offsetWidth = rect2.width;
|
||||
state.isCanScroll = props.scrollable == null ? offsetWidth > wrapWidth : props.scrollable;
|
||||
if (state.isCanScroll) {
|
||||
state.wrapWidth = wrapWidth;
|
||||
state.offsetWidth = offsetWidth;
|
||||
state.duration = offsetWidth / props.speed;
|
||||
state.animationClass = "play";
|
||||
} else {
|
||||
state.animationClass = "";
|
||||
}
|
||||
});
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
function handleClick(event) {
|
||||
emit("click", event);
|
||||
}
|
||||
function onClickIcon(event) {
|
||||
if (props.closeMode)
|
||||
state.showNoticebar = !props.closeMode;
|
||||
emit("close", event);
|
||||
}
|
||||
function onAnimationEnd(event) {
|
||||
state.firstRound = false;
|
||||
emit("acrossEnd", event);
|
||||
setTimeout(() => {
|
||||
state.duration = (state.offsetWidth + state.wrapWidth) / props.speed;
|
||||
state.animationClass = "play-infinite";
|
||||
}, 0);
|
||||
}
|
||||
function startRollEasy() {
|
||||
showhorseLamp();
|
||||
state.timer = setInterval(showhorseLamp, ~~(props.height / props.speed / 4) * 1e3 + props.standTime);
|
||||
}
|
||||
function showhorseLamp() {
|
||||
state.animate = true;
|
||||
setTimeout(() => {
|
||||
state.scrollList.push(state.scrollList[0]);
|
||||
state.scrollList.shift();
|
||||
state.animate = false;
|
||||
}, ~~(props.height / props.speed / 4) * 1e3);
|
||||
}
|
||||
function startRoll() {
|
||||
state.timer = setInterval(() => {
|
||||
const chunk = 100;
|
||||
for (let i = 0; i < chunk; i++)
|
||||
scroll(i, !(i < chunk - 1));
|
||||
}, props.standTime + 100 * props.speed);
|
||||
}
|
||||
function scroll(n, last) {
|
||||
setTimeout(() => {
|
||||
state.distance -= props.height / 100;
|
||||
if (last) {
|
||||
state.scrollList.push(state.scrollList[0]);
|
||||
state.scrollList.shift();
|
||||
state.distance = 0;
|
||||
}
|
||||
}, n * props.speed);
|
||||
}
|
||||
function go(item) {
|
||||
emit(uni_modules_nutuiUni_components__constants_event.CLICK_EVENT, item);
|
||||
}
|
||||
function handleClickIcon() {
|
||||
if (props.closeMode)
|
||||
state.showNoticebar = !props.closeMode;
|
||||
emit(uni_modules_nutuiUni_components__constants_event.CLOSE_EVENT, state.scrollList[0]);
|
||||
}
|
||||
common_vendor.onMounted(() => {
|
||||
if (props.direction === "vertical") {
|
||||
state.scrollList = [].concat(props.list);
|
||||
setTimeout(() => {
|
||||
props.complexAm ? startRoll() : startRollEasy();
|
||||
}, props.standTime);
|
||||
} else {
|
||||
initScrollWrap();
|
||||
}
|
||||
});
|
||||
common_vendor.onActivated(() => {
|
||||
if (state.keepAlive)
|
||||
state.keepAlive = false;
|
||||
});
|
||||
common_vendor.onDeactivated(() => {
|
||||
state.keepAlive = true;
|
||||
clearInterval(state.timer);
|
||||
});
|
||||
common_vendor.onUnmounted(() => {
|
||||
clearInterval(state.timer);
|
||||
});
|
||||
return (_ctx, _cache) => {
|
||||
return common_vendor.e({
|
||||
a: _ctx.direction === "across"
|
||||
}, _ctx.direction === "across" ? common_vendor.e({
|
||||
b: _ctx.leftIcon
|
||||
}, _ctx.leftIcon ? {
|
||||
c: common_vendor.p({
|
||||
name: "notice",
|
||||
size: "16px"
|
||||
})
|
||||
} : {}, {
|
||||
d: common_vendor.t(_ctx.text),
|
||||
e: common_vendor.n(wrapContentClass.value),
|
||||
f: common_vendor.s(contentStyle.value),
|
||||
g: common_vendor.o(
|
||||
//@ts-ignore
|
||||
(...args) => onAnimationEnd && onAnimationEnd(...args)
|
||||
),
|
||||
h: common_vendor.o(
|
||||
//@ts-ignore
|
||||
(...args) => onAnimationEnd && onAnimationEnd(...args)
|
||||
),
|
||||
i: common_vendor.n(`nut-noticebar__page-wrap wrap${state.id}`),
|
||||
j: _ctx.closeMode || _ctx.$slots.rightIcon
|
||||
}, _ctx.closeMode || _ctx.$slots.rightIcon ? {
|
||||
k: common_vendor.p({
|
||||
name: "circle-close"
|
||||
}),
|
||||
l: common_vendor.o(
|
||||
//@ts-ignore
|
||||
(...args) => onClickIcon && onClickIcon(...args)
|
||||
)
|
||||
} : {}, {
|
||||
m: _ctx.closeMode ? 1 : "",
|
||||
n: _ctx.closeMode ? 1 : "",
|
||||
o: _ctx.wrapable ? 1 : "",
|
||||
p: !state.showNoticebar ? 1 : "",
|
||||
q: common_vendor.s(barStyle.value),
|
||||
r: common_vendor.o(
|
||||
//@ts-ignore
|
||||
(...args) => handleClick && handleClick(...args)
|
||||
)
|
||||
}) : {}, {
|
||||
s: state.scrollList.length > 0 && _ctx.direction === "vertical" && state.showNoticebar
|
||||
}, state.scrollList.length > 0 && _ctx.direction === "vertical" && state.showNoticebar ? common_vendor.e({
|
||||
t: common_vendor.f(state.scrollList, (item, index, i0) => {
|
||||
return {
|
||||
a: common_vendor.t(props.fieldName && common_vendor.unref(uni_modules_nutuiUni_components__utils_is.isObject)(item) ? item[props.fieldName] : item),
|
||||
b: index,
|
||||
c: common_vendor.o(($event) => go(item), index)
|
||||
};
|
||||
}),
|
||||
v: common_vendor.unref(uni_modules_nutuiUni_components__utils_pxCheck.pxCheck)(_ctx.height),
|
||||
w: common_vendor.unref(uni_modules_nutuiUni_components__utils_pxCheck.pxCheck)(_ctx.height),
|
||||
x: common_vendor.s(horseLampStyle.value),
|
||||
y: _ctx.closeMode
|
||||
}, _ctx.closeMode ? {
|
||||
z: common_vendor.p({
|
||||
name: "circle-close",
|
||||
["custom-color"]: _ctx.customColor,
|
||||
size: "11px"
|
||||
})
|
||||
} : {}, {
|
||||
A: common_vendor.o(($event) => handleClickIcon()),
|
||||
B: common_vendor.s(barStyle.value)
|
||||
}) : {}, {
|
||||
C: common_vendor.n(classes.value),
|
||||
D: common_vendor.s(_ctx.customStyle)
|
||||
});
|
||||
};
|
||||
}
|
||||
});
|
||||
wx.createComponent(_sfc_main);
|
||||
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/nutui-uni/components/noticebar/noticebar.js.map
|
||||
@@ -1,6 +0,0 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"nut-icon": "../icon/icon"
|
||||
}
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
<view class="{{C}}" style="{{D}}"><view wx:if="{{a}}" class="{{['nut-noticebar__page', m && 'nut-noticebar__page--withicon', n && 'nut-noticebar__page--close', o && 'nut-noticebar__page--wrapable', p && 'nut-hidden']}}" style="{{q}}" bindtap="{{r}}"><view wx:if="{{b}}" class="nut-noticebar__page-lefticon"><block wx:if="{{$slots.leftIcon}}"><slot name="leftIcon"></slot></block><block wx:else><nut-icon wx:if="{{c}}" u-i="21e61180-0" bind:__l="__l" u-p="{{c}}"/></block></view><view ref="wrap" class="{{i}}"><view ref="content" class="{{e}}" style="{{f}}" bindanimationend="{{g}}" bind:webkit-animation-end="{{h}}"><block wx:if="{{$slots.d}}"><slot></slot></block><block wx:else>{{d}}</block></view></view><view wx:if="{{j}}" class="nut-noticebar__page-righticon" catchtap="{{l}}"><block wx:if="{{$slots.rightIcon}}"><slot name="rightIcon"></slot></block><block wx:else><nut-icon wx:if="{{k}}" u-i="21e61180-1" bind:__l="__l" u-p="{{k}}"/></block></view></view><view wx:if="{{s}}" class="nut-noticebar__vertical" style="{{B}}"><view class="nut-noticebar__vertical-list" style="{{x}}"><view wx:for="{{t}}" wx:for-item="item" wx:key="b" class="nut-noticebar__vertical-item" style="{{'height:' + v + ';' + ('line-height:' + w)}}" bindtap="{{item.c}}">{{item.a}}</view></view><view class="go" bindtap="{{A}}"><block wx:if="{{$slots.rightIcon}}"><slot name="rightIcon"></slot></block><block wx:else><nut-icon wx:if="{{y}}" u-i="21e61180-2" bind:__l="__l" u-p="{{z}}"/></block></view></view></view>
|
||||
@@ -1,174 +0,0 @@
|
||||
/**
|
||||
* 这里是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 */
|
||||
/* 水平间距 */
|
||||
/* 垂直间距 */
|
||||
/* 透明度 */
|
||||
/* 文章场景相关 */
|
||||
/* stylelint-disable keyframes-name-pattern */
|
||||
.nut-theme-dark .nut-noticebar__page {
|
||||
color: var(--nut-dark-color, var(--nut-white, #fff));
|
||||
background: var(--nut-dark-background2, #1b1b1b);
|
||||
}
|
||||
.nut-theme-dark .nut-noticebar__vertical {
|
||||
color: var(--nut-dark-color, var(--nut-white, #fff));
|
||||
}
|
||||
.nut-noticebar__page {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: var(--nut-noticebar-across-height, 40px);
|
||||
padding: var(--nut-noticebar-box-padding, 0 16px);
|
||||
font-size: var(--nut-noticebar-font-size, 14px);
|
||||
color: var(--nut-noticebar-color, #d9500b);
|
||||
background: var(--nut-noticebar-background, #fbf8dc);
|
||||
}
|
||||
.nut-noticebar__page--wrapable {
|
||||
height: auto;
|
||||
padding: var(--nut-noticebar-wrapable-padding, 16px);
|
||||
}
|
||||
.nut-noticebar__page--wrapable .nut-noticebar__page-wrap {
|
||||
height: auto !important;
|
||||
}
|
||||
.nut-noticebar__page--wrapable .nut-noticebar__page-wrap .nut-noticebar__page-wrap-content {
|
||||
position: relative;
|
||||
word-wrap: break-word;
|
||||
white-space: normal;
|
||||
}
|
||||
.nut-noticebar__page .nut-noticebar__page--withicon {
|
||||
position: relative;
|
||||
padding-right: 40px;
|
||||
}
|
||||
.nut-noticebar__page .nut-noticebar__page-lefticon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: var(--nut-noticebar-lefticon-margin, 0 10px);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.nut-noticebar__page .nut-noticebar__page-righticon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: var(--nut-noticebar-righticon-margin, 0 10px);
|
||||
}
|
||||
.nut-noticebar__page .nut-noticebar__page-wrap {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
height: var(--nut-noticebar-across-line-height, 24px);
|
||||
overflow: hidden;
|
||||
line-height: var(--nut-noticebar-across-line-height, 24px);
|
||||
}
|
||||
.nut-noticebar__page .nut-noticebar__page-wrap-content {
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.nut-noticebar__page .nut-noticebar__page-wrap-content.nut-ellipsis {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.nut-noticebar__page .play {
|
||||
animation: nut-notice-bar-play linear both running;
|
||||
}
|
||||
.nut-noticebar__page .play-infinite {
|
||||
animation: nut-notice-bar-play-infinite linear infinite both running;
|
||||
}
|
||||
.nut-noticebar__page .play-vertical {
|
||||
animation: nut-notice-bar-play-vertical linear infinite both running;
|
||||
}
|
||||
@keyframes nut-notice-bar-play {
|
||||
to {
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
}
|
||||
@keyframes nut-notice-bar-play-infinite {
|
||||
to {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
@keyframes nut-notice-bar-play-vertical {
|
||||
to {
|
||||
transform: translateY(var(--nut-noticebar-across-height, 40px));
|
||||
}
|
||||
}
|
||||
.nut-noticebar__vertical {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: var(--nut-noticebar-across-height, 40px);
|
||||
padding: var(--nut-noticebar-box-padding, 0 16px);
|
||||
overflow: hidden;
|
||||
font-size: var(--nut-noticebar-font-size, 14px);
|
||||
color: var(--nut-noticebar-color, #d9500b);
|
||||
background: var(--nut-noticebar-background, #fbf8dc);
|
||||
}
|
||||
.nut-noticebar__vertical .nut-noticebar__vertical-list {
|
||||
display: block;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.nut-noticebar__vertical .nut-noticebar__vertical-list .nut-noticebar__vertical-item {
|
||||
width: 100%;
|
||||
height: var(--nut-noticebar-across-height, 40px);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.nut-noticebar__vertical .nut-noticebar-custom-item {
|
||||
position: absolute;
|
||||
top: 999999px;
|
||||
}
|
||||
.nut-noticebar__vertical .go {
|
||||
display: flex;
|
||||
align-self: center;
|
||||
margin: var(--nut-noticebar-righticon-margin, 0 10px);
|
||||
}
|
||||
@@ -1,148 +0,0 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../../../common/vendor.js");
|
||||
const uni_modules_nutuiUni_components__constants_event = require("../_constants/event.js");
|
||||
const uni_modules_nutuiUni_components__constants_prefix = require("../_constants/prefix.js");
|
||||
require("../_utils/env.js");
|
||||
const uni_modules_nutuiUni_components__utils_style = require("../_utils/style.js");
|
||||
const form = require("../../../../form.js");
|
||||
const uni_modules_nutuiUni_components__utils_is = require("../_utils/is.js");
|
||||
const uni_modules_nutuiUni_components__utils_props = require("../_utils/props.js");
|
||||
const switchProps = {
|
||||
...uni_modules_nutuiUni_components__utils_props.commonProps,
|
||||
/**
|
||||
* @description 开关状态
|
||||
*/
|
||||
modelValue: {
|
||||
type: [String, Number, Boolean],
|
||||
default: false
|
||||
},
|
||||
/**
|
||||
* @description 禁用状态
|
||||
* @deprecated 即将弃用,请使用`disabled`
|
||||
*/
|
||||
disable: Boolean,
|
||||
/**
|
||||
* @description 禁用状态
|
||||
*/
|
||||
disabled: Boolean,
|
||||
/**
|
||||
* @description 打开时的背景颜色
|
||||
*/
|
||||
activeColor: String,
|
||||
/**
|
||||
* @description 关闭时的背景颜色
|
||||
*/
|
||||
inactiveColor: String,
|
||||
/**
|
||||
* @description 打开时文字描述
|
||||
*/
|
||||
activeText: String,
|
||||
/**
|
||||
* @description 关闭时文字描述
|
||||
*/
|
||||
inactiveText: String,
|
||||
/**
|
||||
* @description 打开时组件的值
|
||||
*/
|
||||
activeValue: {
|
||||
type: [String, Number, Boolean],
|
||||
default: true
|
||||
},
|
||||
/**
|
||||
* @description 关闭组件的值
|
||||
*/
|
||||
inactiveValue: {
|
||||
type: [String, Number, Boolean],
|
||||
default: false
|
||||
},
|
||||
/**
|
||||
* @description 加载状态
|
||||
*/
|
||||
loading: Boolean
|
||||
};
|
||||
const switchEmits = {
|
||||
[uni_modules_nutuiUni_components__constants_event.UPDATE_MODEL_EVENT]: (val) => uni_modules_nutuiUni_components__utils_is.isBoolean(val) || uni_modules_nutuiUni_components__utils_is.isNumber(val) || uni_modules_nutuiUni_components__utils_is.isString(val),
|
||||
[uni_modules_nutuiUni_components__constants_event.CHANGE_EVENT]: (val, evt) => (uni_modules_nutuiUni_components__utils_is.isBoolean(val) || uni_modules_nutuiUni_components__utils_is.isNumber(val) || uni_modules_nutuiUni_components__utils_is.isString(val)) && evt instanceof Object
|
||||
};
|
||||
if (!Math) {
|
||||
NutIcon();
|
||||
}
|
||||
const NutIcon = () => "../icon/icon.js";
|
||||
const componentName = `${uni_modules_nutuiUni_components__constants_prefix.PREFIX}-switch`;
|
||||
const __default__ = common_vendor.defineComponent({
|
||||
name: componentName,
|
||||
options: {
|
||||
virtualHost: true,
|
||||
addGlobalClass: true,
|
||||
styleIsolation: "shared"
|
||||
}
|
||||
});
|
||||
const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({
|
||||
...__default__,
|
||||
props: switchProps,
|
||||
emits: switchEmits,
|
||||
setup(__props, { emit: __emit }) {
|
||||
const props = __props;
|
||||
const emit = __emit;
|
||||
const legacyDisabled = common_vendor.computed(() => props.disabled || props.disable);
|
||||
const disabled = form.useFormDisabled(legacyDisabled);
|
||||
const isActive = common_vendor.computed(() => props.modelValue === props.activeValue);
|
||||
const classes = common_vendor.computed(() => {
|
||||
return uni_modules_nutuiUni_components__utils_style.getMainClass(props, componentName, {
|
||||
[isActive.value ? "nut-switch-open" : "nut-switch-close"]: true,
|
||||
[`${componentName}-disabled`]: disabled.value,
|
||||
[`${componentName}-base`]: true
|
||||
});
|
||||
});
|
||||
const styles = common_vendor.computed(() => {
|
||||
const obj = {
|
||||
backgroundColor: isActive.value ? props.activeColor : props.inactiveColor
|
||||
};
|
||||
return uni_modules_nutuiUni_components__utils_style.getMainStyle(props, obj);
|
||||
});
|
||||
let updateType = "";
|
||||
function onClick(event) {
|
||||
if (disabled.value || props.loading)
|
||||
return;
|
||||
const value = isActive.value ? props.inactiveValue : props.activeValue;
|
||||
updateType = "click";
|
||||
emit(uni_modules_nutuiUni_components__constants_event.UPDATE_MODEL_EVENT, value);
|
||||
emit(uni_modules_nutuiUni_components__constants_event.CHANGE_EVENT, value, event);
|
||||
}
|
||||
common_vendor.watch(
|
||||
() => props.modelValue,
|
||||
(v) => {
|
||||
if (updateType === "click")
|
||||
updateType = "";
|
||||
else
|
||||
emit(uni_modules_nutuiUni_components__constants_event.CHANGE_EVENT, v);
|
||||
}
|
||||
);
|
||||
return (_ctx, _cache) => {
|
||||
return common_vendor.e({
|
||||
a: _ctx.loading
|
||||
}, _ctx.loading ? {
|
||||
b: common_vendor.p({
|
||||
name: "loading1",
|
||||
["custom-color"]: _ctx.activeColor
|
||||
})
|
||||
} : {}, {
|
||||
c: _ctx.activeText
|
||||
}, _ctx.activeText ? {
|
||||
d: common_vendor.t(_ctx.activeText),
|
||||
e: !isActive.value ? 1 : "",
|
||||
f: common_vendor.t(_ctx.inactiveText),
|
||||
g: isActive.value ? 1 : ""
|
||||
} : {}, {
|
||||
h: common_vendor.n(classes.value),
|
||||
i: common_vendor.s(styles.value),
|
||||
j: common_vendor.o(
|
||||
//@ts-ignore
|
||||
(...args) => onClick && onClick(...args)
|
||||
)
|
||||
});
|
||||
};
|
||||
}
|
||||
});
|
||||
wx.createComponent(_sfc_main);
|
||||
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/nutui-uni/components/switch/switch.js.map
|
||||
@@ -1,6 +0,0 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"nut-icon": "../icon/icon"
|
||||
}
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
<view class="{{h}}" style="{{i}}" bindtap="{{j}}"><view class="nut-switch-button"><block wx:if="{{a}}"><block wx:if="{{$slots.icon}}"><slot name="icon"></slot></block><block wx:else><nut-icon wx:if="{{b}}" u-i="cf15d9f0-0" bind:__l="__l" u-p="{{b}}"/></block></block><block wx:if="{{c}}"><view class="{{['nut-switch-label', 'open', e && 'nut-hidden']}}">{{d}}</view><view class="{{['nut-switch-label', 'close', g && 'nut-hidden']}}">{{f}}</view></block></view></view>
|
||||
@@ -1,107 +0,0 @@
|
||||
/**
|
||||
* 这里是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-switch.nut-switch-close {
|
||||
background-color: var(--nut-dark-background4, #323233);
|
||||
}
|
||||
.nut-switch {
|
||||
display: inline-flex;
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
background-color: var(--nut-primary-color, #fa2c19);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: 100% 100%;
|
||||
border-radius: var(--nut-switch-border-radius, 21px);
|
||||
}
|
||||
.nut-switch .nut-icon-loading1 {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.nut-switch.nut-switch-close {
|
||||
background-color: var(--nut-switch-close-bg-color, #ebebeb);
|
||||
}
|
||||
.nut-switch .nut-switch-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--nut-white, #fff);
|
||||
border-radius: 50%;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
.nut-switch .nut-switch-button .nut-switch-label {
|
||||
font-size: var(--nut-font-size-1, 12px);
|
||||
color: var(--nut-white, #fff);
|
||||
}
|
||||
.nut-switch .nut-switch-button .nut-switch-label.open {
|
||||
transform: translateX(-16px);
|
||||
}
|
||||
.nut-switch .nut-switch-button .nut-switch-label.close {
|
||||
transform: translateX(16px);
|
||||
}
|
||||
.nut-switch.nut-switch-disabled {
|
||||
opacity: 0.6;
|
||||
}
|
||||
.nut-switch.nut-switch-base {
|
||||
min-width: var(--nut-switch-width, 36px);
|
||||
height: var(--nut-switch-height, 21px);
|
||||
overflow: hidden;
|
||||
line-height: var(--nut-switch-line-height, 21px);
|
||||
}
|
||||
.nut-switch.nut-switch-base .nut-switch-button {
|
||||
width: var(--nut-switch-inside-width, 13px);
|
||||
height: var(--nut-switch-inside-height, 13px);
|
||||
transform: var(--nut-switch-inside-close-transform, translateX(30%));
|
||||
}
|
||||
.nut-switch.nut-switch-base.nut-switch-open .nut-switch-button {
|
||||
transform: var(--nut-switch-inside-open-transform, translateX(146%));
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
"use strict";
|
||||
const zTabsConfig = {};
|
||||
exports.zTabsConfig = zTabsConfig;
|
||||
//# sourceMappingURL=../../../../../../.sourcemap/mp-weixin/uni_modules/z-tabs/components/z-tabs/config/index.js.map
|
||||
@@ -1,583 +0,0 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../../../common/vendor.js");
|
||||
const uni_modules_zTabs_components_zTabs_config_index = require("./config/index.js");
|
||||
function _gc(key, defaultValue) {
|
||||
let config = null;
|
||||
if (uni_modules_zTabs_components_zTabs_config_index.zTabsConfig && Object.keys(uni_modules_zTabs_components_zTabs_config_index.zTabsConfig).length) {
|
||||
config = uni_modules_zTabs_components_zTabs_config_index.zTabsConfig;
|
||||
} else {
|
||||
return defaultValue;
|
||||
}
|
||||
const value = config[_toKebab(key)];
|
||||
return value === void 0 ? defaultValue : value;
|
||||
}
|
||||
function _toKebab(value) {
|
||||
return value.replace(/([A-Z])/g, "-$1").toLowerCase();
|
||||
}
|
||||
function rpx2px(rpx) {
|
||||
return common_vendor.index.upx2px(rpx);
|
||||
}
|
||||
const _sfc_main = {
|
||||
name: "z-tabs",
|
||||
data() {
|
||||
return {
|
||||
currentIndex: 0,
|
||||
currentSwiperIndex: 0,
|
||||
bottomDotX: -1,
|
||||
bottomDotXForIndex: 0,
|
||||
showBottomDot: false,
|
||||
shouldSetDx: true,
|
||||
barCalcedWidth: 0,
|
||||
pxBarWidth: 0,
|
||||
scrollLeft: 0,
|
||||
tabsSuperWidth: rpx2px(750),
|
||||
tabsWidth: rpx2px(750),
|
||||
tabsHeight: rpx2px(80),
|
||||
tabsLeft: 0,
|
||||
tabsContainerWidth: 0,
|
||||
itemNodeInfos: [],
|
||||
isFirstLoaded: false,
|
||||
currentScrollLeft: 0,
|
||||
changeTriggerFailed: false,
|
||||
currentChanged: false
|
||||
};
|
||||
},
|
||||
props: {
|
||||
//数据源数组,支持形如['tab1','tab2']的格式或[{name:'tab1',value:1}]的格式
|
||||
list: {
|
||||
type: Array,
|
||||
default: function() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
//当前选中的index
|
||||
current: {
|
||||
type: [Number, String],
|
||||
default: _gc("current", 0)
|
||||
},
|
||||
//list数组长度超过scrollCount时滚动显示(不自动铺满全屏)
|
||||
scrollCount: {
|
||||
type: [Number, String],
|
||||
default: _gc("scrollCount", 5)
|
||||
},
|
||||
//z-tabs样式
|
||||
tabsStyle: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return _gc("tabsStyle", {});
|
||||
}
|
||||
},
|
||||
//自定义每个tab的宽度,默认为0,即代表根据内容自动撑开,单位rpx,支持传100、"100px"或"100rpx"
|
||||
tabWidth: {
|
||||
type: [Number, String],
|
||||
default: _gc("tabWidth", 0)
|
||||
},
|
||||
//滑块宽度,单位rpx,支持传100、"100px"或"100rpx"
|
||||
barWidth: {
|
||||
type: [Number, String],
|
||||
default: _gc("barWidth", 45)
|
||||
},
|
||||
//滑块高度,单位rpx,支持传100、"100px"或"100rpx"
|
||||
barHeight: {
|
||||
type: [Number, String],
|
||||
default: _gc("barHeight", 8)
|
||||
},
|
||||
//swiper的宽度,单位rpx,支持传100、"100px"或"100rpx",默认为"750rpx"
|
||||
swiperWidth: {
|
||||
type: [Number, String],
|
||||
default: _gc("swiperWidth", 750)
|
||||
},
|
||||
//滑块样式,其中的width和height将被barWidth和barHeight覆盖
|
||||
barStyle: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return _gc("barStyle", {});
|
||||
}
|
||||
},
|
||||
//tabs与底部的间距,单位rpx,支持传100、"100px"或"100rpx"
|
||||
bottomSpace: {
|
||||
type: [Number, String],
|
||||
default: _gc("bottomSpace", 8)
|
||||
},
|
||||
//切换tab时滑块动画模式,与swiper联动时有效,点击切换tab时无效,必须调用setDx。默认为line,即切换tab时滑块宽度保持不变,线性运动。可选值为worm,即为类似毛毛虫蠕动效果
|
||||
barAnimateMode: {
|
||||
type: String,
|
||||
default: _gc("barAnimateMode", "line")
|
||||
},
|
||||
//list中item的name(标题)的key
|
||||
nameKey: {
|
||||
type: String,
|
||||
default: _gc("nameKey", "name")
|
||||
},
|
||||
//list中item的value的key
|
||||
valueKey: {
|
||||
type: String,
|
||||
default: _gc("valueKey", "value")
|
||||
},
|
||||
//激活状态tab的颜色
|
||||
activeColor: {
|
||||
type: String,
|
||||
default: _gc("activeColor", "#007AFF")
|
||||
},
|
||||
//未激活状态tab的颜色
|
||||
inactiveColor: {
|
||||
type: String,
|
||||
default: _gc("inactiveColor", "#666666")
|
||||
},
|
||||
//禁用状态tab的颜色
|
||||
disabledColor: {
|
||||
type: String,
|
||||
default: _gc("disabledColor", "#bbbbbb")
|
||||
},
|
||||
//激活状态tab的样式
|
||||
activeStyle: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return _gc("activeStyle", {});
|
||||
}
|
||||
},
|
||||
//未激活状态tab的样式
|
||||
inactiveStyle: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return _gc("inactiveStyle", {});
|
||||
}
|
||||
},
|
||||
//禁用状态tab的样式
|
||||
disabledStyle: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return _gc("disabledStyle", {});
|
||||
}
|
||||
},
|
||||
//z-tabs背景色
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: _gc("bgColor", "white")
|
||||
},
|
||||
//徽标数最大数字限制,超过这个数字将变成badgeMaxCount+
|
||||
badgeMaxCount: {
|
||||
type: [Number, String],
|
||||
default: _gc("badgeMaxCount", 99)
|
||||
},
|
||||
//徽标样式,例如可自定义背景色,字体等等
|
||||
badgeStyle: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return _gc("badgeStyle", {});
|
||||
}
|
||||
},
|
||||
//初始化时是否自动触发change事件
|
||||
initTriggerChange: {
|
||||
type: Boolean,
|
||||
default: _gc("initTriggerChange", false)
|
||||
},
|
||||
//z-tabs中布局的单位,默认为rpx
|
||||
unit: {
|
||||
type: String,
|
||||
default: _gc("unit", "rpx")
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.updateSubviewLayout();
|
||||
},
|
||||
watch: {
|
||||
current: {
|
||||
handler(newVal) {
|
||||
this.currentChanged && this._lockDx();
|
||||
this.currentIndex = newVal;
|
||||
this._preUpdateDotPosition(this.currentIndex);
|
||||
if (this.initTriggerChange) {
|
||||
if (newVal < this.list.length) {
|
||||
this.$emit("change", newVal, this.list[newVal][this.valueKey]);
|
||||
} else {
|
||||
this.changeTriggerFailed = true;
|
||||
}
|
||||
}
|
||||
this.currentChanged = true;
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
list: {
|
||||
handler(newVal) {
|
||||
this._handleListChange(newVal);
|
||||
},
|
||||
immediate: false
|
||||
},
|
||||
bottomDotX(newVal) {
|
||||
if (newVal >= 0) {
|
||||
this.showBottomDot = true;
|
||||
this.$nextTick(() => {
|
||||
});
|
||||
}
|
||||
},
|
||||
finalBarWidth: {
|
||||
handler(newVal) {
|
||||
this.barCalcedWidth = newVal;
|
||||
this.pxBarWidth = this.barCalcedWidth;
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
currentIndex: {
|
||||
handler(newVal) {
|
||||
this.currentSwiperIndex = newVal;
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
shouldScroll() {
|
||||
return this.list.length > this.scrollCount;
|
||||
},
|
||||
finalTabsHeight() {
|
||||
return this.tabsHeight;
|
||||
},
|
||||
tabStyle() {
|
||||
const stl = this.shouldScroll ? { "flex-shrink": 0 } : { "flex": 1 };
|
||||
if (this.finalTabWidth > 0) {
|
||||
stl["width"] = this.finalTabWidth + "px";
|
||||
} else {
|
||||
delete stl.width;
|
||||
}
|
||||
return stl;
|
||||
},
|
||||
tabsListStyle() {
|
||||
return this.shouldScroll ? {} : { "flex": 1 };
|
||||
},
|
||||
showAnimate() {
|
||||
return this.isFirstLoaded && !this.shouldSetDx;
|
||||
},
|
||||
dotTransition() {
|
||||
return this.showAnimate ? "transform .2s linear" : "none";
|
||||
},
|
||||
finalDotStyle() {
|
||||
return { ...this.barStyle, width: this.barCalcedWidth + "px", height: this.finalBarHeight + "px", opacity: this.showBottomDot ? 1 : 0 };
|
||||
},
|
||||
finalTabWidth() {
|
||||
return this._convertTextToPx(this.tabWidth);
|
||||
},
|
||||
finalBarWidth() {
|
||||
return this._convertTextToPx(this._addUnit(this.barWidth, this.unit));
|
||||
},
|
||||
finalBarHeight() {
|
||||
return this._convertTextToPx(this._addUnit(this.barHeight, this.unit));
|
||||
},
|
||||
finalSwiperWidth() {
|
||||
return this._convertTextToPx(this.swiperWidth);
|
||||
},
|
||||
finalBottomSpace() {
|
||||
return this._convertTextToPx(this._addUnit(this.bottomSpace, this.unit));
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//根据swiper的@transition实时更新底部dot位置
|
||||
setDx(dx) {
|
||||
if (!this.shouldSetDx)
|
||||
return;
|
||||
const isLineMode = this.barAnimateMode === "line";
|
||||
const isWormMode = this.barAnimateMode === "worm";
|
||||
let dxRate = dx / this.finalSwiperWidth;
|
||||
this.currentSwiperIndex = this.currentIndex + parseInt(dxRate);
|
||||
const isRight = dxRate > 0;
|
||||
const barWidth = this.pxBarWidth;
|
||||
if (this.currentSwiperIndex !== this.currentIndex) {
|
||||
dxRate = dxRate - (this.currentSwiperIndex - this.currentIndex);
|
||||
const currentNode = this.itemNodeInfos[this.currentSwiperIndex];
|
||||
if (!!currentNode) {
|
||||
this.bottomDotXForIndex = this._getBottomDotX(currentNode, barWidth);
|
||||
}
|
||||
}
|
||||
const currentIndex = this.currentSwiperIndex;
|
||||
let nextIndex = currentIndex + (isRight ? 1 : -1);
|
||||
nextIndex = Math.max(0, nextIndex);
|
||||
nextIndex = Math.min(nextIndex, this.itemNodeInfos.length - 1);
|
||||
const currentNodeInfo = this.itemNodeInfos[currentIndex];
|
||||
const nextNodeInfo = this.itemNodeInfos[nextIndex];
|
||||
const nextBottomX = this._getBottomDotX(nextNodeInfo, barWidth);
|
||||
if (isLineMode) {
|
||||
this.bottomDotX = this.bottomDotXForIndex + (nextBottomX - this.bottomDotXForIndex) * Math.abs(dxRate);
|
||||
} else if (isWormMode) {
|
||||
if (isRight && currentIndex >= this.itemNodeInfos.length - 1 || !isRight && currentIndex <= 0)
|
||||
return;
|
||||
const spaceOffset = isRight ? nextNodeInfo.right - currentNodeInfo.left : currentNodeInfo.right - nextNodeInfo.left;
|
||||
let barCalcedWidth = barWidth + spaceOffset * Math.abs(dxRate);
|
||||
if (isRight) {
|
||||
if (barCalcedWidth > nextBottomX - this.bottomDotX + barWidth) {
|
||||
const barMinusWidth = barWidth + spaceOffset * (1 - dxRate);
|
||||
this.bottomDotX = this.bottomDotXForIndex + (barCalcedWidth - barMinusWidth) / 2;
|
||||
barCalcedWidth = barMinusWidth;
|
||||
}
|
||||
} else if (!isRight) {
|
||||
if (barCalcedWidth > this.bottomDotXForIndex + barWidth - nextBottomX) {
|
||||
const barMinusWidth = barWidth + spaceOffset * (1 + dxRate);
|
||||
barCalcedWidth = barMinusWidth;
|
||||
this.bottomDotX = nextBottomX;
|
||||
} else {
|
||||
this.bottomDotX = this.bottomDotXForIndex - (barCalcedWidth - barWidth);
|
||||
}
|
||||
}
|
||||
barCalcedWidth = Math.max(barCalcedWidth, barWidth);
|
||||
this.barCalcedWidth = barCalcedWidth;
|
||||
}
|
||||
},
|
||||
//在swiper的@animationfinish中通知z-tabs结束多setDx的锁定,若在父组件中调用了setDx,则必须调用unlockDx
|
||||
unlockDx() {
|
||||
this.$nextTick(() => {
|
||||
this.shouldSetDx = true;
|
||||
});
|
||||
},
|
||||
//更新z-tabs内部布局
|
||||
updateSubviewLayout(tryCount = 0) {
|
||||
this.$nextTick(() => {
|
||||
let delayTime = 10;
|
||||
setTimeout(() => {
|
||||
this._getNodeClientRect(".z-tabs-scroll-view-conatiner").then((res) => {
|
||||
if (res) {
|
||||
if (!res[0].width && tryCount < 10) {
|
||||
setTimeout(() => {
|
||||
tryCount++;
|
||||
this.updateSubviewLayout(tryCount);
|
||||
}, 50);
|
||||
return;
|
||||
}
|
||||
this.tabsWidth = res[0].width;
|
||||
this.tabsHeight = res[0].height;
|
||||
this.tabsLeft = res[0].left;
|
||||
this._handleListChange(this.list);
|
||||
}
|
||||
});
|
||||
this._getNodeClientRect(".z-tabs-conatiner").then((res) => {
|
||||
if (res && res[0].width) {
|
||||
this.tabsSuperWidth = res[0].width;
|
||||
}
|
||||
});
|
||||
}, delayTime);
|
||||
});
|
||||
},
|
||||
//点击了tabs
|
||||
tabsClick(index, item) {
|
||||
if (item.disabled)
|
||||
return;
|
||||
if (this.currentIndex != index) {
|
||||
this.shouldSetDx = false;
|
||||
this.$emit("change", index, item[this.valueKey]);
|
||||
this.currentIndex = index;
|
||||
this._preUpdateDotPosition(index);
|
||||
} else {
|
||||
this.$emit("secondClick", index, item[this.valueKey]);
|
||||
}
|
||||
},
|
||||
//scroll-view滚动
|
||||
scroll(e) {
|
||||
this.currentScrollLeft = e.detail.scrollLeft;
|
||||
},
|
||||
//锁定dx,用于避免在swiper被动触发滚动时候执行setDx中的代码
|
||||
_lockDx() {
|
||||
this.shouldSetDx = false;
|
||||
},
|
||||
//更新底部dot位置之前的预处理
|
||||
_preUpdateDotPosition(index) {
|
||||
this.$nextTick(() => {
|
||||
common_vendor.index.createSelectorQuery().in(this).select(".z-tabs-scroll-view").fields({
|
||||
scrollOffset: true
|
||||
}, (data) => {
|
||||
if (data) {
|
||||
this.currentScrollLeft = data.scrollLeft;
|
||||
this._updateDotPosition(index);
|
||||
} else {
|
||||
this._updateDotPosition(index);
|
||||
}
|
||||
}).exec();
|
||||
});
|
||||
},
|
||||
//更新底部dot位置
|
||||
_updateDotPosition(index) {
|
||||
if (index >= this.itemNodeInfos.length)
|
||||
return;
|
||||
this.$nextTick(async () => {
|
||||
let node = this.itemNodeInfos[index];
|
||||
let offset = 0;
|
||||
let tabsContainerWidth = this.tabsContainerWidth;
|
||||
if (JSON.stringify(this.activeStyle) !== "{}") {
|
||||
const nodeRes = await this._getNodeClientRect(`#z-tabs-item-${index}`, true);
|
||||
if (nodeRes) {
|
||||
node = nodeRes[0];
|
||||
offset = this.currentScrollLeft;
|
||||
this.tabsHeight = Math.max(node.height + rpx2px(28), this.tabsHeight);
|
||||
tabsContainerWidth = 0;
|
||||
for (let i = 0; i < this.itemNodeInfos.length; i++) {
|
||||
let oldNode = this.itemNodeInfos[i];
|
||||
tabsContainerWidth += i === index ? node.width : oldNode.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (node) {
|
||||
this.bottomDotX = this._getBottomDotX(node, this.finalBarWidth, offset);
|
||||
}
|
||||
this.bottomDotXForIndex = this.bottomDotX;
|
||||
if (this.tabsWidth) {
|
||||
setTimeout(() => {
|
||||
let scrollLeft = this.bottomDotX - this.tabsWidth / 2 + this.finalBarWidth / 2;
|
||||
scrollLeft = Math.max(0, scrollLeft);
|
||||
if (tabsContainerWidth) {
|
||||
scrollLeft = Math.min(scrollLeft, tabsContainerWidth - this.tabsWidth + 10);
|
||||
}
|
||||
if (this.shouldScroll && tabsContainerWidth > this.tabsWidth) {
|
||||
this.scrollLeft = scrollLeft;
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.isFirstLoaded = true;
|
||||
});
|
||||
}, 200);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 处理list改变
|
||||
_handleListChange(newVal) {
|
||||
this.$nextTick(async () => {
|
||||
if (newVal.length) {
|
||||
let itemNodeInfos = [];
|
||||
let tabsContainerWidth = 0;
|
||||
let delayTime = 0;
|
||||
setTimeout(async () => {
|
||||
for (let i = 0; i < newVal.length; i++) {
|
||||
const nodeRes = await this._getNodeClientRect(`#z-tabs-item-${i}`, true);
|
||||
if (nodeRes) {
|
||||
const node = nodeRes[0];
|
||||
node.left += this.currentScrollLeft;
|
||||
itemNodeInfos.push(node);
|
||||
tabsContainerWidth += node.width;
|
||||
}
|
||||
if (i === this.currentIndex) {
|
||||
this.itemNodeInfos = itemNodeInfos;
|
||||
this.tabsContainerWidth = tabsContainerWidth;
|
||||
this._updateDotPosition(this.currentIndex);
|
||||
}
|
||||
}
|
||||
this.itemNodeInfos = itemNodeInfos;
|
||||
this.tabsContainerWidth = tabsContainerWidth;
|
||||
this._updateDotPosition(this.currentIndex);
|
||||
}, delayTime);
|
||||
}
|
||||
});
|
||||
if (this.initTriggerChange && this.changeTriggerFailed && newVal.length) {
|
||||
if (this.current < newVal.length) {
|
||||
this.$emit("change", this.current, newVal[this.current][this.valueKey]);
|
||||
}
|
||||
}
|
||||
},
|
||||
//根据node获取bottomX
|
||||
_getBottomDotX(node, barWidth = this.finalBarWidth, offset = 0) {
|
||||
return node.left + node.width / 2 - barWidth / 2 + offset - this.tabsLeft;
|
||||
},
|
||||
//获取节点信息
|
||||
_getNodeClientRect(select, withRefArr = false) {
|
||||
const res = common_vendor.index.createSelectorQuery().in(this);
|
||||
res.select(select).boundingClientRect();
|
||||
return new Promise((resolve, reject) => {
|
||||
res.exec((data) => {
|
||||
resolve(data && data != "" && data != void 0 && data.length ? data : false);
|
||||
});
|
||||
});
|
||||
},
|
||||
//格式化badge中的count
|
||||
_formatCount(count) {
|
||||
if (!count)
|
||||
return "";
|
||||
if (count > this.badgeMaxCount) {
|
||||
return this.badgeMaxCount + "+";
|
||||
}
|
||||
return count.toString();
|
||||
},
|
||||
//将文本的px或者rpx转为px的值
|
||||
_convertTextToPx(text) {
|
||||
const dataType = Object.prototype.toString.call(text);
|
||||
if (dataType === "[object Number]") {
|
||||
return rpx2px(text);
|
||||
}
|
||||
let isRpx = false;
|
||||
if (text.indexOf("rpx") !== -1 || text.indexOf("upx") !== -1) {
|
||||
text = text.replace("rpx", "").replace("upx", "");
|
||||
isRpx = true;
|
||||
} else if (text.indexOf("px") !== -1) {
|
||||
text = text.replace("px", "");
|
||||
} else {
|
||||
text = rpx2px(text);
|
||||
}
|
||||
if (!isNaN(text)) {
|
||||
if (isRpx)
|
||||
return Number(rpx2px(text));
|
||||
return Number(text);
|
||||
}
|
||||
return 0;
|
||||
},
|
||||
// 添加单位
|
||||
_addUnit(value, unit) {
|
||||
if (Object.prototype.toString.call(value) === "[object String]") {
|
||||
let tempValue = value;
|
||||
tempValue = tempValue.replace("rpx", "").replace("upx", "").replace("px", "");
|
||||
if (value.indexOf("rpx") === -1 && value.indexOf("upx") === -1 && value.indexOf("px") !== -1) {
|
||||
tempValue = parseFloat(tempValue) * 2;
|
||||
}
|
||||
value = tempValue;
|
||||
}
|
||||
return unit === "rpx" ? value + "rpx" : value / 2 + "px";
|
||||
}
|
||||
}
|
||||
};
|
||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
return {
|
||||
a: common_vendor.f($props.list, (item, index, i0) => {
|
||||
return common_vendor.e({
|
||||
a: common_vendor.t(item[$props.nameKey] || item),
|
||||
b: item.disabled ? 1 : "",
|
||||
c: common_vendor.s({
|
||||
color: item.disabled ? $props.disabledColor : $data.currentIndex === index ? $props.activeColor : $props.inactiveColor
|
||||
}),
|
||||
d: common_vendor.s(item.disabled ? $props.disabledStyle : $data.currentIndex === index ? $props.activeStyle : $props.inactiveStyle),
|
||||
e: item.badge && $options._formatCount(item.badge.count).length
|
||||
}, item.badge && $options._formatCount(item.badge.count).length ? {
|
||||
f: common_vendor.t($options._formatCount(item.badge.count)),
|
||||
g: $props.unit === "rpx" ? 1 : "",
|
||||
h: $props.unit === "px" ? 1 : "",
|
||||
i: common_vendor.s($props.badgeStyle)
|
||||
} : {}, {
|
||||
j: `z-tabs-item-${index}`,
|
||||
k: `z-tabs-item-${index}`,
|
||||
l: index,
|
||||
m: common_vendor.o(($event) => $options.tabsClick(index, item), index)
|
||||
});
|
||||
}),
|
||||
b: $props.unit === "rpx" ? 1 : "",
|
||||
c: $props.unit === "px" ? 1 : "",
|
||||
d: common_vendor.s($options.tabStyle),
|
||||
e: common_vendor.s($options.tabsListStyle),
|
||||
f: common_vendor.s({
|
||||
marginTop: -$options.finalBottomSpace + "px"
|
||||
}),
|
||||
g: common_vendor.s({
|
||||
transform: `translateX(${$data.bottomDotX}px)`,
|
||||
transition: $options.dotTransition,
|
||||
background: $props.activeColor
|
||||
}),
|
||||
h: common_vendor.s($options.finalDotStyle),
|
||||
i: common_vendor.s({
|
||||
width: $data.tabsContainerWidth + "px",
|
||||
bottom: $options.finalBottomSpace + "px"
|
||||
}),
|
||||
j: common_vendor.s($options.tabsListStyle),
|
||||
k: $data.scrollLeft,
|
||||
l: $data.isFirstLoaded,
|
||||
m: common_vendor.o((...args) => $options.scroll && $options.scroll(...args)),
|
||||
n: common_vendor.s({
|
||||
background: $props.bgColor
|
||||
}),
|
||||
o: common_vendor.s({
|
||||
height: $props.unit === "rpx" ? "80rpx" : "40px"
|
||||
}),
|
||||
p: common_vendor.s($props.tabsStyle)
|
||||
};
|
||||
}
|
||||
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-0ac4bf81"]]);
|
||||
wx.createComponent(Component);
|
||||
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/z-tabs/components/z-tabs/z-tabs.js.map
|
||||
@@ -1,4 +0,0 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
<view class="z-tabs-conatiner data-v-0ac4bf81" style="{{n + ';' + o + ';' + p}}"><view class="z-tabs-left data-v-0ac4bf81"><slot name="left"/></view><view ref="z-tabs-scroll-view-conatiner" class="z-tabs-scroll-view-conatiner data-v-0ac4bf81"><scroll-view ref="z-tabs-scroll-view" class="z-tabs-scroll-view data-v-0ac4bf81" scroll-x="{{true}}" scroll-left="{{k}}" show-scrollbar="{{false}}" scroll-with-animation="{{l}}" bindscroll="{{m}}"><view class="z-tabs-list-container data-v-0ac4bf81" style="{{j}}"><view class="z-tabs-list data-v-0ac4bf81" style="{{e + ';' + f}}"><view wx:for="{{a}}" wx:for-item="item" wx:key="l" ref="{{item.j}}" id="{{item.k}}" class="z-tabs-item data-v-0ac4bf81" style="{{d}}" bindtap="{{item.m}}"><view class="z-tabs-item-title-container data-v-0ac4bf81"><text class="{{['data-v-0ac4bf81', b && 'z-tabs-item-title-rpx', c && 'z-tabs-item-title-px', item.b && 'z-tabs-item-title-disabled']}}" style="{{item.c + ';' + item.d}}">{{item.a}}</text><text wx:if="{{item.e}}" class="{{['z-tabs-item-badge', 'data-v-0ac4bf81', item.g && 'z-tabs-item-badge-rpx', item.h && 'z-tabs-item-badge-px']}}" style="{{item.i}}">{{item.f}}</text></view></view></view><view class="z-tabs-bottom data-v-0ac4bf81" style="{{i}}"><view ref="z-tabs-bottom-dot" class="z-tabs-bottom-dot data-v-0ac4bf81" style="{{g + ';' + h}}"/></view></view></scroll-view></view><view class="z-tabs-right data-v-0ac4bf81"><slot name="right"/></view></view>
|
||||
@@ -1,110 +0,0 @@
|
||||
|
||||
.z-tabs-conatiner.data-v-0ac4bf81{
|
||||
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
|
||||
|
||||
|
||||
flex-direction: row;
|
||||
}
|
||||
.z-tabs-scroll-view-conatiner.data-v-0ac4bf81{
|
||||
flex: 1;
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
flex-direction: row;
|
||||
}
|
||||
.z-tabs-scroll-view.data-v-0ac4bf81 ::-webkit-scrollbar {
|
||||
display: none;
|
||||
-webkit-appearance: none;
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
background: transparent;
|
||||
}
|
||||
.z-tabs-scroll-view.data-v-0ac4bf81{
|
||||
flex-direction: row;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
flex: 1;
|
||||
}
|
||||
.z-tabs-list-container.data-v-0ac4bf81{
|
||||
position: relative;
|
||||
|
||||
height: 100%;
|
||||
}
|
||||
.z-tabs-list.data-v-0ac4bf81,.z-tabs-list-container.data-v-0ac4bf81{
|
||||
|
||||
display: flex;
|
||||
|
||||
flex-direction: row;
|
||||
}
|
||||
.z-tabs-item.data-v-0ac4bf81{
|
||||
|
||||
display: flex;
|
||||
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0px 20rpx;
|
||||
}
|
||||
.z-tabs-item-title-container.data-v-0ac4bf81{
|
||||
|
||||
display: flex;
|
||||
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.z-tabs-item-title-rpx.data-v-0ac4bf81{
|
||||
font-size: 30rpx;
|
||||
}
|
||||
.z-tabs-item-title-px.data-v-0ac4bf81{
|
||||
font-size: 15px;
|
||||
}
|
||||
.z-tabs-item-title-disabled.data-v-0ac4bf81{
|
||||
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.z-tabs-item-badge.data-v-0ac4bf81{
|
||||
background-color: #ec5b56;
|
||||
color: white;
|
||||
border-radius: 100px;
|
||||
}
|
||||
.z-tabs-item-badge-rpx.data-v-0ac4bf81{
|
||||
margin-left: 8rpx;
|
||||
font-size: 22rpx;
|
||||
padding: 0rpx 10rpx;
|
||||
}
|
||||
.z-tabs-item-badge-px.data-v-0ac4bf81{
|
||||
margin-left: 4px;
|
||||
font-size: 11px;
|
||||
padding: 0px 5px;
|
||||
}
|
||||
.z-tabs-bottom.data-v-0ac4bf81{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
.z-tabs-bottom-dot.data-v-0ac4bf81{
|
||||
border-radius: 100px;
|
||||
}
|
||||
.z-tabs-left.data-v-0ac4bf81,.z-tabs-right.data-v-0ac4bf81{
|
||||
|
||||
display: flex;
|
||||
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
Reference in New Issue
Block a user