提交
This commit is contained in:
1
甲情_甲意/miniprogram/node_modules/antd-mini/es/NoticeBar/index.acss
generated
vendored
Normal file
1
甲情_甲意/miniprogram/node_modules/antd-mini/es/NoticeBar/index.acss
generated
vendored
Normal file
@ -0,0 +1 @@
|
||||
.ant-notice-bar{position:relative;display:flex;height:37.5px;align-items:center;overflow:hidden;padding:8px 12px;font-size:15px;color:#ff6010;background-color:#fff9ed;box-sizing:border-box}.ant-notice-bar-error{color:#fff;background-color:#ff3141}.ant-notice-bar-error-scroll-left,.ant-notice-bar-error-scroll-right{background:#ff3141}.ant-notice-bar-primary{color:#1677ff;background-color:#d0e4ff}.ant-notice-bar-primary-scroll-left,.ant-notice-bar-primary-scroll-right{background:#d0e4ff}.ant-notice-bar-info{color:#fff;background:#666}.ant-notice-bar-info-scroll-left,.ant-notice-bar-info-scroll-right{background:#666}.ant-notice-bar-icon{margin-right:8px;font-size:18px}.ant-notice-bar-icon-image-image{width:18px;height:18px}.ant-notice-bar-content{position:relative;z-index:2;flex:1 100%;overflow:hidden;vertical-align:middle;line-height:1.4}.ant-notice-bar-marquee{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}.ant-notice-bar-operation{display:flex;align-items:center}.ant-notice-bar-operation-icon{margin-left:12px}.ant-icon-size-x-small{font-size:18px}
|
47
甲情_甲意/miniprogram/node_modules/antd-mini/es/NoticeBar/index.axml
generated
vendored
Normal file
47
甲情_甲意/miniprogram/node_modules/antd-mini/es/NoticeBar/index.axml
generated
vendored
Normal file
@ -0,0 +1,47 @@
|
||||
<view
|
||||
a:if="{{show}}"
|
||||
class="ant-notice-bar {{className || ''}} {{type ? 'ant-notice-bar-' + type : ''}}"
|
||||
style="{{style}}"
|
||||
>
|
||||
<slot name="icon">
|
||||
<view class="ant-notice-bar-icon">
|
||||
<image-icon
|
||||
a:if="{{icon}}"
|
||||
image="{{icon}}"
|
||||
className="ant-notice-bar-icon-image"
|
||||
></image-icon>
|
||||
<icon
|
||||
a:elif="{{type === 'error'}}"
|
||||
type="InformationCircleOutline"
|
||||
></icon>
|
||||
<icon
|
||||
a:else
|
||||
type="SoundOutline"
|
||||
></icon>
|
||||
</view>
|
||||
</slot>
|
||||
<view class="ant-notice-bar-content ant-notice-bar-content{{$id ? '-' + $id : ''}}">
|
||||
<view
|
||||
class="ant-notice-bar-marquee ant-notice-bar-marquee{{$id ? '-' + $id : ''}}"
|
||||
style="{{marqueeStyle}} display: {{enableMarquee ? 'inline-block' : 'block'}}"
|
||||
onTransitionEnd="onTransitionEnd"
|
||||
>
|
||||
<slot></slot>
|
||||
</view>
|
||||
</view>
|
||||
<view class="ant-notice-bar-operation">
|
||||
<slot name="extra"></slot>
|
||||
<icon
|
||||
a:if="{{mode === 'link'}}"
|
||||
className="ant-notice-bar-operation-icon"
|
||||
type="RightOutline"
|
||||
onTap="onTap"
|
||||
></icon>
|
||||
<icon
|
||||
a:if="{{mode === 'closeable'}}"
|
||||
className="ant-notice-bar-operation-icon"
|
||||
type="CloseOutline"
|
||||
onTap="onTap"
|
||||
></icon>
|
||||
</view>
|
||||
</view>
|
1
甲情_甲意/miniprogram/node_modules/antd-mini/es/NoticeBar/index.d.ts
generated
vendored
Normal file
1
甲情_甲意/miniprogram/node_modules/antd-mini/es/NoticeBar/index.d.ts
generated
vendored
Normal file
@ -0,0 +1 @@
|
||||
export {};
|
152
甲情_甲意/miniprogram/node_modules/antd-mini/es/NoticeBar/index.js
generated
vendored
Normal file
152
甲情_甲意/miniprogram/node_modules/antd-mini/es/NoticeBar/index.js
generated
vendored
Normal file
@ -0,0 +1,152 @@
|
||||
import { __awaiter, __generator } from "tslib";
|
||||
import { Component, triggerEventOnly, getValueFromProps, } from '../_util/simply';
|
||||
import { getInstanceBoundingClientRect } from '../_util/jsapi/get-instance-bounding-client-rect';
|
||||
import { NoticeBarDefaultProps } from './props';
|
||||
Component(NoticeBarDefaultProps, {
|
||||
getInstance: function () {
|
||||
if (this.$id) {
|
||||
return my;
|
||||
}
|
||||
return this;
|
||||
},
|
||||
getBoundingClientRectWithId: function (prefix) {
|
||||
return __awaiter(this, void 0, void 0, function () {
|
||||
return __generator(this, function (_a) {
|
||||
switch (_a.label) {
|
||||
case 0: return [4 /*yield*/, getInstanceBoundingClientRect(this.getInstance(), "".concat(prefix).concat(this.$id ? "-".concat(this.$id) : ''))];
|
||||
case 1: return [2 /*return*/, _a.sent()];
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
onTap: function () {
|
||||
var mode = getValueFromProps(this, 'mode');
|
||||
if (mode === 'link') {
|
||||
triggerEventOnly(this, 'tap');
|
||||
}
|
||||
if (mode === 'closeable') {
|
||||
if (typeof this.props.onTap !== 'function') {
|
||||
return;
|
||||
}
|
||||
this.setData({
|
||||
show: false,
|
||||
});
|
||||
triggerEventOnly(this, 'tap');
|
||||
}
|
||||
},
|
||||
startMarquee: function (state) {
|
||||
var loop = getValueFromProps(this, 'loop');
|
||||
var leading = 500;
|
||||
var duration = state.duration, overflowWidth = state.overflowWidth, viewWidth = state.viewWidth;
|
||||
var marqueeScrollWidth = overflowWidth;
|
||||
if (loop) {
|
||||
marqueeScrollWidth = overflowWidth + viewWidth;
|
||||
}
|
||||
var newMarqueeStyle = "transform: translate3d(".concat(-marqueeScrollWidth, "px, 0, 0); transition: ").concat(duration, "s all linear ").concat(typeof leading === 'number' ? "".concat(leading / 1000, "s") : '0s', ";");
|
||||
this.setData({
|
||||
marqueeStyle: newMarqueeStyle,
|
||||
});
|
||||
return newMarqueeStyle;
|
||||
},
|
||||
measureText: function (callback) {
|
||||
var _this = this;
|
||||
var fps = 40;
|
||||
var loop = getValueFromProps(this, 'loop');
|
||||
// 计算文本所占据的宽度,计算需要滚动的宽度
|
||||
setTimeout(function () { return __awaiter(_this, void 0, void 0, function () {
|
||||
var marqueeSize, contentSize, overflowWidth, viewWidth, marqueeScrollWidth;
|
||||
return __generator(this, function (_a) {
|
||||
switch (_a.label) {
|
||||
case 0: return [4 /*yield*/, this.getBoundingClientRectWithId('.ant-notice-bar-marquee')];
|
||||
case 1:
|
||||
marqueeSize = _a.sent();
|
||||
return [4 /*yield*/, this.getBoundingClientRectWithId('.ant-notice-bar-content')];
|
||||
case 2:
|
||||
contentSize = _a.sent();
|
||||
overflowWidth = (marqueeSize &&
|
||||
contentSize &&
|
||||
marqueeSize.width - contentSize.width) ||
|
||||
0;
|
||||
viewWidth = (contentSize === null || contentSize === void 0 ? void 0 : contentSize.width) || 0;
|
||||
marqueeScrollWidth = overflowWidth;
|
||||
if (loop) {
|
||||
marqueeScrollWidth = overflowWidth + viewWidth;
|
||||
}
|
||||
if (overflowWidth > 0) {
|
||||
callback({
|
||||
overflowWidth: overflowWidth,
|
||||
viewWidth: viewWidth,
|
||||
duration: marqueeScrollWidth / fps,
|
||||
});
|
||||
}
|
||||
return [2 /*return*/];
|
||||
}
|
||||
});
|
||||
}); }, 0);
|
||||
},
|
||||
// 文本滚动的计算
|
||||
resetMarquee: function (state) {
|
||||
var loop = getValueFromProps(this, 'loop');
|
||||
var viewWidth = state.viewWidth;
|
||||
var showMarqueeWidth = '0px';
|
||||
if (loop) {
|
||||
showMarqueeWidth = "".concat(viewWidth, "px");
|
||||
}
|
||||
var marqueeStyle = "transform: translate3d(".concat(showMarqueeWidth, ", 0, 0); transition: 0s all linear;");
|
||||
this.setData({
|
||||
marqueeStyle: marqueeStyle,
|
||||
});
|
||||
},
|
||||
onTransitionEnd: function () {
|
||||
var _this = this;
|
||||
var loop = getValueFromProps(this, 'loop');
|
||||
var trailing = 200;
|
||||
if (loop) {
|
||||
var timer_1 = setTimeout(function () {
|
||||
_this.measureText(function (state) {
|
||||
_this.resetMarquee.call(_this, state);
|
||||
});
|
||||
clearTimeout(timer_1);
|
||||
}, trailing);
|
||||
}
|
||||
},
|
||||
}, {
|
||||
show: true,
|
||||
marqueeStyle: '',
|
||||
}, undefined, {
|
||||
didMount: function () {
|
||||
var _this = this;
|
||||
var enableMarquee = this.props.enableMarquee;
|
||||
if (enableMarquee) {
|
||||
this.measureText(function (state) {
|
||||
_this.startMarquee.call(_this, state);
|
||||
});
|
||||
}
|
||||
},
|
||||
didUpdate: function () {
|
||||
var _this = this;
|
||||
var enableMarquee = this.props.enableMarquee;
|
||||
// 这里更新处理的原因是防止notice内容在动画过程中发生改变。
|
||||
if (enableMarquee) {
|
||||
this.measureText(function (state) {
|
||||
_this.startMarquee.call(_this, state);
|
||||
});
|
||||
}
|
||||
},
|
||||
pageEvents: {
|
||||
onShow: function () {
|
||||
var _this = this;
|
||||
if (this.props.enableMarquee) {
|
||||
this.setData({ marqueeStyle: '' });
|
||||
this.resetMarquee({
|
||||
overflowWidth: 0,
|
||||
duration: 0,
|
||||
viewWidth: 0,
|
||||
});
|
||||
this.measureText(function (state) {
|
||||
_this.startMarquee.call(_this, state);
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
7
甲情_甲意/miniprogram/node_modules/antd-mini/es/NoticeBar/index.json
generated
vendored
Normal file
7
甲情_甲意/miniprogram/node_modules/antd-mini/es/NoticeBar/index.json
generated
vendored
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"icon": "../Icon/index",
|
||||
"image-icon": "../ImageIcon/index"
|
||||
}
|
||||
}
|
47
甲情_甲意/miniprogram/node_modules/antd-mini/es/NoticeBar/props.d.ts
generated
vendored
Normal file
47
甲情_甲意/miniprogram/node_modules/antd-mini/es/NoticeBar/props.d.ts
generated
vendored
Normal file
@ -0,0 +1,47 @@
|
||||
import { IBaseProps } from '../_util/base';
|
||||
/**
|
||||
* @description 通告栏,
|
||||
* 当应用有重要公告或者由于用户的刷新操作产生提示反馈时可以使用通告栏系统。
|
||||
* 通告栏不会对用户浏览当前页面内容产生影响,但又能明显的引起用户的注意。公告内容不超过一行。
|
||||
*/
|
||||
export interface INoticeBarProps extends IBaseProps {
|
||||
/**
|
||||
* @description 消息的展示
|
||||
*/
|
||||
icon?: string;
|
||||
/**
|
||||
* @description 提示类型
|
||||
* default 橙色,error 红色,primary 蓝色,info 灰色
|
||||
* @default "default"
|
||||
*/
|
||||
type?: 'default' | 'error' | 'primary' | 'info';
|
||||
/**
|
||||
* @description 通告类型,link 表示连接,整行可点;closeable 表示点击 x 可以关闭;不填时表示你右侧没有图标
|
||||
*/
|
||||
mode?: 'link' | 'closeable';
|
||||
/**
|
||||
* @description 是否开启滚动动画
|
||||
* @default false
|
||||
*/
|
||||
enableMarquee: boolean;
|
||||
/**
|
||||
* @description 是否循环滚动,enableMarquee 为 true 时有效
|
||||
* @default false
|
||||
*/
|
||||
loop: boolean;
|
||||
/**
|
||||
* @description 微信版本需要通过此字段启用 icon 位置的插槽
|
||||
* @default false
|
||||
*/
|
||||
slotIcon?: boolean;
|
||||
/**
|
||||
* @description 点击图标(箭头或者叉,由mode属性决定)的事件回调
|
||||
*/
|
||||
onTap: () => void;
|
||||
/**
|
||||
* @description 行动点点击回调
|
||||
* @param 当前点击的行动点序号
|
||||
*/
|
||||
onActionTap: (index: number) => void;
|
||||
}
|
||||
export declare const NoticeBarDefaultProps: Partial<INoticeBarProps>;
|
8
甲情_甲意/miniprogram/node_modules/antd-mini/es/NoticeBar/props.js
generated
vendored
Normal file
8
甲情_甲意/miniprogram/node_modules/antd-mini/es/NoticeBar/props.js
generated
vendored
Normal file
@ -0,0 +1,8 @@
|
||||
export var NoticeBarDefaultProps = {
|
||||
icon: '',
|
||||
type: 'default',
|
||||
mode: null,
|
||||
enableMarquee: false,
|
||||
loop: false,
|
||||
slotIcon: false,
|
||||
};
|
Reference in New Issue
Block a user