处理待办事项
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%));
|
||||
}
|
||||
Reference in New Issue
Block a user