1.26 个股详情业务结构,发展历程模块完善
This commit is contained in:
364
unpackage/dist/dev/mp-weixin/uni_modules/lime-echart/components/l-echart/canvas.js
vendored
Normal file
364
unpackage/dist/dev/mp-weixin/uni_modules/lime-echart/components/l-echart/canvas.js
vendored
Normal file
@@ -0,0 +1,364 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../../../common/vendor.js");
|
||||
const uni_modules_limeEchart_components_lEchart_utils = require("./utils.js");
|
||||
const cacheChart = {};
|
||||
class EventEmit {
|
||||
constructor() {
|
||||
this.__events = {};
|
||||
}
|
||||
on(type, listener) {
|
||||
if (!type || !listener) {
|
||||
return;
|
||||
}
|
||||
const events = this.__events[type] || [];
|
||||
events.push(listener);
|
||||
this.__events[type] = events;
|
||||
}
|
||||
emit(type, e) {
|
||||
if (type.constructor === Object) {
|
||||
e = type;
|
||||
type = e && e.type;
|
||||
}
|
||||
if (!type) {
|
||||
return;
|
||||
}
|
||||
const events = this.__events[type];
|
||||
if (!events || !events.length) {
|
||||
return;
|
||||
}
|
||||
events.forEach((listener) => {
|
||||
listener.call(this, e);
|
||||
});
|
||||
}
|
||||
off(type, listener) {
|
||||
const __events = this.__events;
|
||||
const events = __events[type];
|
||||
if (!events || !events.length) {
|
||||
return;
|
||||
}
|
||||
if (!listener) {
|
||||
delete __events[type];
|
||||
return;
|
||||
}
|
||||
for (let i = 0, len = events.length; i < len; i++) {
|
||||
if (events[i] === listener) {
|
||||
events.splice(i, 1);
|
||||
i--;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
class Image {
|
||||
constructor() {
|
||||
this.currentSrc = null;
|
||||
this.naturalHeight = 0;
|
||||
this.naturalWidth = 0;
|
||||
this.width = 0;
|
||||
this.height = 0;
|
||||
this.tagName = "IMG";
|
||||
}
|
||||
set src(src) {
|
||||
this.currentSrc = src;
|
||||
common_vendor.index.getImageInfo({
|
||||
src,
|
||||
success: (res) => {
|
||||
this.naturalWidth = this.width = res.width;
|
||||
this.naturalHeight = this.height = res.height;
|
||||
this.onload();
|
||||
},
|
||||
fail: () => {
|
||||
this.onerror();
|
||||
}
|
||||
});
|
||||
}
|
||||
get src() {
|
||||
return this.currentSrc;
|
||||
}
|
||||
}
|
||||
class OffscreenCanvas {
|
||||
constructor(ctx, com, canvasId) {
|
||||
this.tagName = "canvas";
|
||||
this.com = com;
|
||||
this.canvasId = canvasId;
|
||||
this.ctx = ctx;
|
||||
}
|
||||
set width(w) {
|
||||
this.com.offscreenWidth = w;
|
||||
}
|
||||
set height(h) {
|
||||
this.com.offscreenHeight = h;
|
||||
}
|
||||
get width() {
|
||||
return this.com.offscreenWidth || 0;
|
||||
}
|
||||
get height() {
|
||||
return this.com.offscreenHeight || 0;
|
||||
}
|
||||
getContext(type) {
|
||||
return this.ctx;
|
||||
}
|
||||
getImageData() {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.com.$nextTick(() => {
|
||||
common_vendor.index.canvasGetImageData({
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: this.com.offscreenWidth,
|
||||
height: this.com.offscreenHeight,
|
||||
canvasId: this.canvasId,
|
||||
success: (res) => {
|
||||
resolve(res);
|
||||
},
|
||||
fail: (err) => {
|
||||
reject(err);
|
||||
}
|
||||
}, this.com);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
class Canvas {
|
||||
constructor(ctx, com, isNew, canvasNode = {}) {
|
||||
cacheChart[com.canvasId] = { ctx };
|
||||
this.canvasId = com.canvasId;
|
||||
this.chart = null;
|
||||
this.isNew = isNew;
|
||||
this.tagName = "canvas";
|
||||
this.canvasNode = canvasNode;
|
||||
this.com = com;
|
||||
if (!isNew) {
|
||||
this._initStyle(ctx);
|
||||
}
|
||||
this._initEvent();
|
||||
this._ee = new EventEmit();
|
||||
}
|
||||
getContext(type) {
|
||||
if (type === "2d") {
|
||||
return this.ctx;
|
||||
}
|
||||
}
|
||||
setAttribute(key, value) {
|
||||
if (key === "aria-label") {
|
||||
this.com["ariaLabel"] = value;
|
||||
}
|
||||
}
|
||||
setChart(chart) {
|
||||
this.chart = chart;
|
||||
}
|
||||
createOffscreenCanvas(param) {
|
||||
if (!this.children) {
|
||||
this.com.isOffscreenCanvas = true;
|
||||
this.com.offscreenWidth = param.width || 300;
|
||||
this.com.offscreenHeight = param.height || 300;
|
||||
const com = this.com;
|
||||
const canvasId = this.com.offscreenCanvasId;
|
||||
const context = common_vendor.index.createCanvasContext(canvasId, this.com);
|
||||
this._initStyle(context);
|
||||
this.children = new OffscreenCanvas(context, com, canvasId);
|
||||
}
|
||||
return this.children;
|
||||
}
|
||||
appendChild(child) {
|
||||
common_vendor.index.__f__("log", "at uni_modules/lime-echart/components/l-echart/canvas.js:162", "child", child);
|
||||
}
|
||||
dispatchEvent(type, e) {
|
||||
if (typeof type == "object") {
|
||||
this._ee.emit(type.type, type);
|
||||
} else {
|
||||
this._ee.emit(type, e);
|
||||
}
|
||||
return true;
|
||||
}
|
||||
attachEvent() {
|
||||
}
|
||||
detachEvent() {
|
||||
}
|
||||
addEventListener(type, listener) {
|
||||
this._ee.on(type, listener);
|
||||
}
|
||||
removeEventListener(type, listener) {
|
||||
this._ee.off(type, listener);
|
||||
}
|
||||
_initCanvas(zrender, ctx) {
|
||||
}
|
||||
_initStyle(ctx, child) {
|
||||
const styles = [
|
||||
"fillStyle",
|
||||
"strokeStyle",
|
||||
"fontSize",
|
||||
"globalAlpha",
|
||||
"opacity",
|
||||
"textAlign",
|
||||
"textBaseline",
|
||||
"shadow",
|
||||
"lineWidth",
|
||||
"lineCap",
|
||||
"lineJoin",
|
||||
"lineDash",
|
||||
"miterLimit"
|
||||
];
|
||||
styles.forEach((style) => {
|
||||
Object.defineProperty(ctx, style, {
|
||||
set: (value) => {
|
||||
if (style === "opacity") {
|
||||
ctx.setGlobalAlpha(value);
|
||||
return;
|
||||
}
|
||||
if (style !== "fillStyle" && style !== "strokeStyle" || value !== "none" && value !== null) {
|
||||
ctx["set" + style.charAt(0).toUpperCase() + style.slice(1)](value);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
if (!this.isNew && !child) {
|
||||
ctx.uniDrawImage = ctx.drawImage;
|
||||
ctx.drawImage = (...a) => {
|
||||
a[0] = a[0].src;
|
||||
ctx.uniDrawImage(...a);
|
||||
};
|
||||
}
|
||||
if (!ctx.createRadialGradient) {
|
||||
ctx.createRadialGradient = function() {
|
||||
return ctx.createCircularGradient(...[...arguments].slice(-3));
|
||||
};
|
||||
}
|
||||
if (!ctx.strokeText) {
|
||||
ctx.strokeText = (...a) => {
|
||||
ctx.fillText(...a);
|
||||
};
|
||||
}
|
||||
if (!ctx.measureText || uni_modules_limeEchart_components_lEchart_utils.getDeviceInfo().osName == "harmonyos") {
|
||||
ctx._measureText = ctx.measureText;
|
||||
const strLen = (str) => {
|
||||
let len = 0;
|
||||
for (let i = 0; i < str.length; i++) {
|
||||
if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 128) {
|
||||
len++;
|
||||
} else {
|
||||
len += 2;
|
||||
}
|
||||
}
|
||||
return len;
|
||||
};
|
||||
ctx.measureText = (text, font) => {
|
||||
var _a;
|
||||
let fontSize = ((_a = ctx == null ? void 0 : ctx.state) == null ? void 0 : _a.fontSize) || 12;
|
||||
if (font) {
|
||||
fontSize = parseInt(font.match(/([\d\.]+)px/)[1]);
|
||||
}
|
||||
fontSize /= 2;
|
||||
let isBold = fontSize >= 16;
|
||||
const widthFactor = isBold ? 1.3 : 1;
|
||||
return {
|
||||
width: strLen(text) * fontSize * widthFactor
|
||||
};
|
||||
};
|
||||
}
|
||||
}
|
||||
_initEvent(e) {
|
||||
this.event = {};
|
||||
const eventNames = [{
|
||||
wxName: "touchStart",
|
||||
ecName: "mousedown"
|
||||
}, {
|
||||
wxName: "touchMove",
|
||||
ecName: "mousemove"
|
||||
}, {
|
||||
wxName: "touchEnd",
|
||||
ecName: "mouseup"
|
||||
}, {
|
||||
wxName: "touchEnd",
|
||||
ecName: "click"
|
||||
}];
|
||||
eventNames.forEach((name) => {
|
||||
this.event[name.wxName] = (e2) => {
|
||||
const touch = e2.touches[0];
|
||||
this.chart.getZr().handler.dispatch(name.ecName, {
|
||||
zrX: name.wxName === "tap" ? touch.clientX : touch.x,
|
||||
zrY: name.wxName === "tap" ? touch.clientY : touch.y
|
||||
});
|
||||
};
|
||||
});
|
||||
}
|
||||
set width(w) {
|
||||
this.canvasNode.width = w;
|
||||
}
|
||||
set height(h) {
|
||||
this.canvasNode.height = h;
|
||||
}
|
||||
get width() {
|
||||
return this.canvasNode.width || 0;
|
||||
}
|
||||
get height() {
|
||||
return this.canvasNode.height || 0;
|
||||
}
|
||||
get ctx() {
|
||||
return cacheChart[this.canvasId]["ctx"] || null;
|
||||
}
|
||||
set chart(chart) {
|
||||
cacheChart[this.canvasId]["chart"] = chart;
|
||||
}
|
||||
get chart() {
|
||||
return cacheChart[this.canvasId]["chart"] || null;
|
||||
}
|
||||
}
|
||||
function dispatch(name, { x, y, wheelDelta }) {
|
||||
this.dispatch(name, {
|
||||
zrX: x,
|
||||
zrY: y,
|
||||
zrDelta: wheelDelta,
|
||||
preventDefault: () => {
|
||||
},
|
||||
stopPropagation: () => {
|
||||
}
|
||||
});
|
||||
}
|
||||
function setCanvasCreator(echarts, { canvas, node }) {
|
||||
if (echarts && !echarts.registerPreprocessor) {
|
||||
return common_vendor.index.__f__("warn", "at uni_modules/lime-echart/components/l-echart/canvas.js:356", "echarts 版本不对或未传入echarts,vue3请使用esm格式");
|
||||
}
|
||||
echarts.registerPreprocessor((option) => {
|
||||
if (option && option.series) {
|
||||
if (option.series.length > 0) {
|
||||
option.series.forEach((series) => {
|
||||
series.progressive = 0;
|
||||
});
|
||||
} else if (typeof option.series === "object") {
|
||||
option.series.progressive = 0;
|
||||
}
|
||||
}
|
||||
});
|
||||
function loadImage(src, onload, onerror) {
|
||||
let img = null;
|
||||
if (node && node.createImage) {
|
||||
img = node.createImage();
|
||||
img.onload = onload.bind(img);
|
||||
img.onerror = onerror.bind(img);
|
||||
img.src = src;
|
||||
return img;
|
||||
} else {
|
||||
img = new Image();
|
||||
img.onload = onload.bind(img);
|
||||
img.onerror = onerror.bind(img);
|
||||
img.src = src;
|
||||
return img;
|
||||
}
|
||||
}
|
||||
if (echarts.setPlatformAPI) {
|
||||
echarts.setPlatformAPI({
|
||||
loadImage: canvas.setChart ? loadImage : null,
|
||||
createCanvas() {
|
||||
const key = "createOffscreenCanvas";
|
||||
return common_vendor.index.canIUse(key) && common_vendor.index[key] ? common_vendor.index[key]({ type: "2d" }) : canvas;
|
||||
}
|
||||
});
|
||||
} else if (echarts.setCanvasCreator) {
|
||||
echarts.setCanvasCreator(() => {
|
||||
return canvas;
|
||||
});
|
||||
}
|
||||
}
|
||||
exports.Canvas = Canvas;
|
||||
exports.dispatch = dispatch;
|
||||
exports.setCanvasCreator = setCanvasCreator;
|
||||
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/lime-echart/components/l-echart/canvas.js.map
|
||||
328
unpackage/dist/dev/mp-weixin/uni_modules/lime-echart/components/l-echart/l-echart.js
vendored
Normal file
328
unpackage/dist/dev/mp-weixin/uni_modules/lime-echart/components/l-echart/l-echart.js
vendored
Normal file
@@ -0,0 +1,328 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../../../common/vendor.js");
|
||||
const uni_modules_limeEchart_components_lEchart_canvas = require("./canvas.js");
|
||||
const uni_modules_limeEchart_components_lEchart_utils = require("./utils.js");
|
||||
const _sfc_main = {
|
||||
name: "lime-echart",
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: "2d"
|
||||
},
|
||||
customStyle: String,
|
||||
isDisableScroll: Boolean,
|
||||
isClickable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
enableHover: Boolean,
|
||||
beforeDelay: {
|
||||
type: Number,
|
||||
default: 30
|
||||
},
|
||||
landscape: Boolean
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
use2dCanvas: true,
|
||||
ariaLabel: "图表",
|
||||
width: null,
|
||||
height: null,
|
||||
nodeWidth: null,
|
||||
nodeHeight: null,
|
||||
// canvasNode: null,
|
||||
config: {},
|
||||
inited: false,
|
||||
finished: false,
|
||||
file: "",
|
||||
platform: "",
|
||||
isPC: false,
|
||||
isDown: false,
|
||||
isOffscreenCanvas: false,
|
||||
offscreenWidth: 0,
|
||||
offscreenHeight: 0
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
rootStyle() {
|
||||
if (this.landscape) {
|
||||
return `transform: translate(-50%,-50%) rotate(90deg); top:50%; left:50%;`;
|
||||
}
|
||||
},
|
||||
canvasId() {
|
||||
return `lime-echart${this._ && this._.uid || this._uid}`;
|
||||
},
|
||||
offscreenCanvasId() {
|
||||
return `${this.canvasId}_offscreen`;
|
||||
},
|
||||
offscreenStyle() {
|
||||
return `width:${this.offscreenWidth}px;height: ${this.offscreenHeight}px; position: fixed; left: 99999px; background: red`;
|
||||
},
|
||||
canvasStyle() {
|
||||
return this.rootStyle + (this.width && this.height ? "width:" + this.width + "px;height:" + this.height + "px" : "");
|
||||
}
|
||||
},
|
||||
beforeUnmount() {
|
||||
this.clear();
|
||||
this.dispose();
|
||||
},
|
||||
created() {
|
||||
const { platform } = uni_modules_limeEchart_components_lEchart_utils.getDeviceInfo();
|
||||
this.isPC = /windows/i.test(platform);
|
||||
this.use2dCanvas = this.type === "2d" && uni_modules_limeEchart_components_lEchart_utils.canIUseCanvas2d();
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.$emit("finished");
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
setChart(callback) {
|
||||
if (!this.chart) {
|
||||
common_vendor.index.__f__("warn", "at uni_modules/lime-echart/components/l-echart/l-echart.vue:214", `组件还未初始化,请先使用 init`);
|
||||
return;
|
||||
}
|
||||
if (typeof callback === "function" && this.chart) {
|
||||
callback(this.chart);
|
||||
}
|
||||
},
|
||||
setOption() {
|
||||
if (!this.chart || !this.chart.setOption) {
|
||||
common_vendor.index.__f__("warn", "at uni_modules/lime-echart/components/l-echart/l-echart.vue:228", `组件还未初始化,请先使用 init`);
|
||||
return;
|
||||
}
|
||||
this.chart.setOption(...arguments);
|
||||
},
|
||||
showLoading() {
|
||||
if (this.chart) {
|
||||
this.chart.showLoading(...arguments);
|
||||
}
|
||||
},
|
||||
hideLoading() {
|
||||
if (this.chart) {
|
||||
this.chart.hideLoading();
|
||||
}
|
||||
},
|
||||
clear() {
|
||||
if (this.chart && !this.chart.isDisposed()) {
|
||||
this.chart.clear();
|
||||
}
|
||||
},
|
||||
dispose() {
|
||||
if (this.chart && !this.chart.isDisposed()) {
|
||||
this.chart.dispose();
|
||||
}
|
||||
},
|
||||
resize(size) {
|
||||
if (size && size.width && size.height) {
|
||||
this.height = size.height;
|
||||
this.width = size.width;
|
||||
if (this.chart) {
|
||||
this.chart.resize(size);
|
||||
}
|
||||
} else {
|
||||
this.$nextTick(() => {
|
||||
uni_modules_limeEchart_components_lEchart_utils.getRect(".lime-echart", this).then((res) => {
|
||||
if (res) {
|
||||
let { width, height } = res;
|
||||
this.width = width = width || 300;
|
||||
this.height = height = height || 300;
|
||||
this.chart.resize({ width, height });
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
canvasToTempFilePath(args = {}) {
|
||||
const { use2dCanvas, canvasId } = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
const copyArgs = Object.assign({
|
||||
canvasId,
|
||||
success: resolve,
|
||||
fail: reject
|
||||
}, args);
|
||||
if (use2dCanvas) {
|
||||
delete copyArgs.canvasId;
|
||||
copyArgs.canvas = this.canvasNode;
|
||||
}
|
||||
common_vendor.index.canvasToTempFilePath(copyArgs, this);
|
||||
});
|
||||
},
|
||||
async init(echarts, ...args) {
|
||||
if (args && args.length == 0 && !echarts) {
|
||||
common_vendor.index.__f__("error", "at uni_modules/lime-echart/components/l-echart/l-echart.vue:306", "缺少参数:init(echarts, theme?:string, opts?: object, callback?: function)");
|
||||
return;
|
||||
}
|
||||
let theme = null, opts = {}, callback;
|
||||
args.forEach((item) => {
|
||||
if (typeof item === "function") {
|
||||
callback = item;
|
||||
}
|
||||
if (["string"].includes(typeof item)) {
|
||||
theme = item;
|
||||
}
|
||||
if (typeof item === "object") {
|
||||
opts = item;
|
||||
}
|
||||
});
|
||||
if (this.beforeDelay) {
|
||||
await uni_modules_limeEchart_components_lEchart_utils.sleep(this.beforeDelay);
|
||||
}
|
||||
let config = await this.getContext();
|
||||
uni_modules_limeEchart_components_lEchart_canvas.setCanvasCreator(echarts, config);
|
||||
try {
|
||||
this.chart = echarts.init(config.canvas, theme, Object.assign({}, config, opts || {}));
|
||||
callback == null ? void 0 : callback(this.chart);
|
||||
return this.chart;
|
||||
} catch (e) {
|
||||
common_vendor.index.__f__("error", "at uni_modules/lime-echart/components/l-echart/l-echart.vue:335", "【lime-echarts】:", e);
|
||||
return null;
|
||||
}
|
||||
},
|
||||
getContext() {
|
||||
return uni_modules_limeEchart_components_lEchart_utils.getRect(`#${this.canvasId}`, this, this.use2dCanvas).then((res) => {
|
||||
if (res) {
|
||||
let dpr = uni_modules_limeEchart_components_lEchart_utils.devicePixelRatio;
|
||||
let { width, height, node } = res;
|
||||
let canvas;
|
||||
this.width = width = width || 300;
|
||||
this.height = height = height || 300;
|
||||
if (node) {
|
||||
const ctx = node.getContext("2d");
|
||||
canvas = new uni_modules_limeEchart_components_lEchart_canvas.Canvas(ctx, this, true, node);
|
||||
this.canvasNode = node;
|
||||
} else {
|
||||
dpr = this.isPC ? uni_modules_limeEchart_components_lEchart_utils.devicePixelRatio : 1;
|
||||
this.rect = res;
|
||||
this.nodeWidth = width * dpr;
|
||||
this.nodeHeight = height * dpr;
|
||||
const ctx = common_vendor.index.createCanvasContext(this.canvasId, this);
|
||||
canvas = new uni_modules_limeEchart_components_lEchart_canvas.Canvas(ctx, this, false);
|
||||
}
|
||||
return { canvas, width, height, devicePixelRatio: dpr, node };
|
||||
} else {
|
||||
return {};
|
||||
}
|
||||
});
|
||||
},
|
||||
getRelative(e, touches) {
|
||||
let { clientX, clientY } = e;
|
||||
if (!(clientX && clientY) && touches && touches[0]) {
|
||||
clientX = touches[0].clientX;
|
||||
clientY = touches[0].clientY;
|
||||
}
|
||||
return { x: clientX - this.rect.left, y: clientY - this.rect.top, wheelDelta: e.wheelDelta || 0 };
|
||||
},
|
||||
getTouch(e, touches) {
|
||||
const { x } = touches && touches[0] || {};
|
||||
const touch = x ? touches[0] : this.getRelative(e, touches);
|
||||
if (this.landscape) {
|
||||
[touch.x, touch.y] = [touch.y, this.height - touch.x];
|
||||
}
|
||||
return touch;
|
||||
},
|
||||
touchStart(e) {
|
||||
this.isDown = true;
|
||||
const next = () => {
|
||||
const touches = uni_modules_limeEchart_components_lEchart_utils.convertTouchesToArray(e.touches);
|
||||
if (this.chart) {
|
||||
const touch = this.getTouch(e, touches);
|
||||
this.startX = touch.x;
|
||||
this.startY = touch.y;
|
||||
this.startT = /* @__PURE__ */ new Date();
|
||||
const handler = this.chart.getZr().handler;
|
||||
uni_modules_limeEchart_components_lEchart_canvas.dispatch.call(handler, "mousedown", touch);
|
||||
uni_modules_limeEchart_components_lEchart_canvas.dispatch.call(handler, "mousemove", touch);
|
||||
handler.processGesture(uni_modules_limeEchart_components_lEchart_utils.wrapTouch(e), "start");
|
||||
clearTimeout(this.endTimer);
|
||||
}
|
||||
};
|
||||
if (this.isPC) {
|
||||
uni_modules_limeEchart_components_lEchart_utils.getRect(`#${this.canvasId}`, { context: this }).then((res) => {
|
||||
this.rect = res;
|
||||
next();
|
||||
});
|
||||
return;
|
||||
}
|
||||
next();
|
||||
},
|
||||
touchMove(e) {
|
||||
if (this.isPC && this.enableHover && !this.isDown) {
|
||||
this.isDown = true;
|
||||
}
|
||||
const touches = uni_modules_limeEchart_components_lEchart_utils.convertTouchesToArray(e.touches);
|
||||
if (this.chart && this.isDown) {
|
||||
const handler = this.chart.getZr().handler;
|
||||
uni_modules_limeEchart_components_lEchart_canvas.dispatch.call(handler, "mousemove", this.getTouch(e, touches));
|
||||
handler.processGesture(uni_modules_limeEchart_components_lEchart_utils.wrapTouch(e), "change");
|
||||
}
|
||||
},
|
||||
touchEnd(e) {
|
||||
this.isDown = false;
|
||||
if (this.chart) {
|
||||
const touches = uni_modules_limeEchart_components_lEchart_utils.convertTouchesToArray(e.changedTouches);
|
||||
const { x } = touches && touches[0] || {};
|
||||
const touch = (x ? touches[0] : this.getRelative(e, touches)) || {};
|
||||
if (this.landscape) {
|
||||
[touch.x, touch.y] = [touch.y, this.height - touch.x];
|
||||
}
|
||||
const handler = this.chart.getZr().handler;
|
||||
const isClick = Math.abs(touch.x - this.startX) < 10 && /* @__PURE__ */ new Date() - this.startT < 200;
|
||||
uni_modules_limeEchart_components_lEchart_canvas.dispatch.call(handler, "mouseup", touch);
|
||||
handler.processGesture(uni_modules_limeEchart_components_lEchart_utils.wrapTouch(e), "end");
|
||||
if (isClick) {
|
||||
uni_modules_limeEchart_components_lEchart_canvas.dispatch.call(handler, "click", touch);
|
||||
} else {
|
||||
this.endTimer = setTimeout(() => {
|
||||
uni_modules_limeEchart_components_lEchart_canvas.dispatch.call(handler, "mousemove", { x: 999999999, y: 999999999 });
|
||||
uni_modules_limeEchart_components_lEchart_canvas.dispatch.call(handler, "mouseup", { x: 999999999, y: 999999999 });
|
||||
}, 50);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
return common_vendor.e({
|
||||
a: $options.canvasId
|
||||
}, $options.canvasId ? common_vendor.e({
|
||||
b: $data.use2dCanvas
|
||||
}, $data.use2dCanvas ? {
|
||||
c: $options.canvasId,
|
||||
d: common_vendor.s($options.canvasStyle),
|
||||
e: $props.isDisableScroll,
|
||||
f: common_vendor.o((...args) => $options.touchStart && $options.touchStart(...args)),
|
||||
g: common_vendor.o((...args) => $options.touchMove && $options.touchMove(...args)),
|
||||
h: common_vendor.o((...args) => $options.touchEnd && $options.touchEnd(...args))
|
||||
} : {
|
||||
i: $data.nodeWidth,
|
||||
j: $data.nodeHeight,
|
||||
k: common_vendor.s($options.canvasStyle),
|
||||
l: $options.canvasId,
|
||||
m: $options.canvasId,
|
||||
n: $props.isDisableScroll,
|
||||
o: common_vendor.o((...args) => $options.touchStart && $options.touchStart(...args)),
|
||||
p: common_vendor.o((...args) => $options.touchMove && $options.touchMove(...args)),
|
||||
q: common_vendor.o((...args) => $options.touchEnd && $options.touchEnd(...args))
|
||||
}, {
|
||||
r: $data.isPC
|
||||
}, $data.isPC ? {
|
||||
s: common_vendor.o((...args) => $options.touchStart && $options.touchStart(...args)),
|
||||
t: common_vendor.o((...args) => $options.touchMove && $options.touchMove(...args)),
|
||||
v: common_vendor.o((...args) => $options.touchEnd && $options.touchEnd(...args)),
|
||||
w: common_vendor.o((...args) => $options.touchStart && $options.touchStart(...args)),
|
||||
x: common_vendor.o((...args) => $options.touchMove && $options.touchMove(...args)),
|
||||
y: common_vendor.o((...args) => $options.touchEnd && $options.touchEnd(...args))
|
||||
} : {}, {
|
||||
z: $data.isOffscreenCanvas
|
||||
}, $data.isOffscreenCanvas ? {
|
||||
A: common_vendor.s($options.offscreenStyle),
|
||||
B: $options.offscreenCanvasId
|
||||
} : {}, {
|
||||
C: common_vendor.s($props.customStyle),
|
||||
D: $data.ariaLabel
|
||||
}) : {});
|
||||
}
|
||||
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render]]);
|
||||
wx.createComponent(Component);
|
||||
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/lime-echart/components/l-echart/l-echart.js.map
|
||||
4
unpackage/dist/dev/mp-weixin/uni_modules/lime-echart/components/l-echart/l-echart.json
vendored
Normal file
4
unpackage/dist/dev/mp-weixin/uni_modules/lime-echart/components/l-echart/l-echart.json
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
1
unpackage/dist/dev/mp-weixin/uni_modules/lime-echart/components/l-echart/l-echart.wxml
vendored
Normal file
1
unpackage/dist/dev/mp-weixin/uni_modules/lime-echart/components/l-echart/l-echart.wxml
vendored
Normal file
@@ -0,0 +1 @@
|
||||
<view wx:if="{{a}}" class="lime-echart" style="{{C}}" ref="limeEchart" aria-label="{{D}}"><canvas wx:if="{{b}}" class="lime-echart__canvas" type="2d" id="{{c}}" style="{{d}}" disable-scroll="{{e}}" bindtouchstart="{{f}}" bindtouchmove="{{g}}" bindtouchend="{{h}}"/><block wx:else><canvas wx:if="{{r0}}" class="lime-echart__canvas" width="{{i}}" height="{{j}}" style="{{k}}" canvas-id="{{l}}" id="{{m}}" disable-scroll="{{n}}" bindtouchstart="{{o}}" bindtouchmove="{{p}}" bindtouchend="{{q}}"/></block><view wx:if="{{r}}" class="lime-echart__mask" bindmousedown="{{s}}" bindmousemove="{{t}}" bindmouseup="{{v}}" bindtouchstart="{{w}}" bindtouchmove="{{x}}" bindtouchend="{{y}}"></view><canvas wx:if="{{z}}" style="{{A}}" canvas-id="{{B}}"></canvas></view>
|
||||
21
unpackage/dist/dev/mp-weixin/uni_modules/lime-echart/components/l-echart/l-echart.wxss
vendored
Normal file
21
unpackage/dist/dev/mp-weixin/uni_modules/lime-echart/components/l-echart/l-echart.wxss
vendored
Normal file
@@ -0,0 +1,21 @@
|
||||
|
||||
.lime-echart {
|
||||
position: relative;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.lime-echart__canvas {
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.lime-echart__mask {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
107
unpackage/dist/dev/mp-weixin/uni_modules/lime-echart/components/l-echart/utils.js
vendored
Normal file
107
unpackage/dist/dev/mp-weixin/uni_modules/lime-echart/components/l-echart/utils.js
vendored
Normal file
@@ -0,0 +1,107 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../../../common/vendor.js");
|
||||
function getDeviceInfo() {
|
||||
if (common_vendor.index.getDeviceInfo || common_vendor.index.canIUse("getDeviceInfo")) {
|
||||
return common_vendor.index.getDeviceInfo();
|
||||
} else {
|
||||
return common_vendor.index.getSystemInfoSync();
|
||||
}
|
||||
}
|
||||
function getWindowInfo() {
|
||||
if (common_vendor.index.getWindowInfo || common_vendor.index.canIUse("getWindowInfo")) {
|
||||
return common_vendor.index.getWindowInfo();
|
||||
} else {
|
||||
return common_vendor.index.getSystemInfoSync();
|
||||
}
|
||||
}
|
||||
function getAppBaseInfo() {
|
||||
if (common_vendor.index.getAppBaseInfo || common_vendor.index.canIUse("getAppBaseInfo")) {
|
||||
return common_vendor.index.getAppBaseInfo();
|
||||
} else {
|
||||
return common_vendor.index.getSystemInfoSync();
|
||||
}
|
||||
}
|
||||
function compareVersion(v1, v2) {
|
||||
v1 = v1.split(".");
|
||||
v2 = v2.split(".");
|
||||
const len = Math.max(v1.length, v2.length);
|
||||
while (v1.length < len) {
|
||||
v1.push("0");
|
||||
}
|
||||
while (v2.length < len) {
|
||||
v2.push("0");
|
||||
}
|
||||
for (let i = 0; i < len; i++) {
|
||||
const num1 = parseInt(v1[i], 10);
|
||||
const num2 = parseInt(v2[i], 10);
|
||||
if (num1 > num2) {
|
||||
return 1;
|
||||
} else if (num1 < num2) {
|
||||
return -1;
|
||||
}
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
function gte(version) {
|
||||
const { platform } = getDeviceInfo();
|
||||
let { SDKVersion } = getAppBaseInfo();
|
||||
return platform !== "mac" && compareVersion(SDKVersion, version) >= 0;
|
||||
}
|
||||
function canIUseCanvas2d() {
|
||||
return gte("2.9.0");
|
||||
}
|
||||
function convertTouchesToArray(touches) {
|
||||
if (Array.isArray(touches)) {
|
||||
return touches;
|
||||
}
|
||||
if (typeof touches === "object" && touches !== null) {
|
||||
return Object.values(touches);
|
||||
}
|
||||
return touches;
|
||||
}
|
||||
function wrapTouch(event) {
|
||||
event.touches = convertTouchesToArray(event.touches);
|
||||
for (let i = 0; i < event.touches.length; ++i) {
|
||||
const touch = event.touches[i];
|
||||
touch.offsetX = touch.x;
|
||||
touch.offsetY = touch.y;
|
||||
}
|
||||
return event;
|
||||
}
|
||||
const devicePixelRatio = getWindowInfo().pixelRatio;
|
||||
function sleep(time) {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve(true);
|
||||
}, time);
|
||||
});
|
||||
}
|
||||
function getRect(selector, context, node) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const dom = common_vendor.index.createSelectorQuery().in(context).select(selector);
|
||||
const result = (rect) => {
|
||||
if (rect) {
|
||||
resolve(rect);
|
||||
} else {
|
||||
reject();
|
||||
}
|
||||
};
|
||||
if (!node) {
|
||||
dom.boundingClientRect(result).exec();
|
||||
} else {
|
||||
dom.fields({
|
||||
node: true,
|
||||
size: true,
|
||||
rect: true
|
||||
}, result).exec();
|
||||
}
|
||||
});
|
||||
}
|
||||
exports.canIUseCanvas2d = canIUseCanvas2d;
|
||||
exports.convertTouchesToArray = convertTouchesToArray;
|
||||
exports.devicePixelRatio = devicePixelRatio;
|
||||
exports.getDeviceInfo = getDeviceInfo;
|
||||
exports.getRect = getRect;
|
||||
exports.sleep = sleep;
|
||||
exports.wrapTouch = wrapTouch;
|
||||
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/lime-echart/components/l-echart/utils.js.map
|
||||
1
unpackage/dist/dev/mp-weixin/uni_modules/lime-echart/static/ecStat.min.js
vendored
Normal file
1
unpackage/dist/dev/mp-weixin/uni_modules/lime-echart/static/ecStat.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
unpackage/dist/dev/mp-weixin/uni_modules/lime-echart/static/echarts.min.js
vendored
Normal file
1
unpackage/dist/dev/mp-weixin/uni_modules/lime-echart/static/echarts.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
129
unpackage/dist/dev/mp-weixin/uni_modules/lime-echart/static/index.html
vendored
Normal file
129
unpackage/dist/dev/mp-weixin/uni_modules/lime-echart/static/index.html
vendored
Normal file
@@ -0,0 +1,129 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title></title>
|
||||
<style type="text/css">
|
||||
html,
|
||||
body,
|
||||
.canvas {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow-y: hidden;
|
||||
background-color: transparent;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="canvas" id="limeChart"></div>
|
||||
<script type="text/javascript" src="./uni.webview.1.5.3.js"></script>
|
||||
<script type="text/javascript" src="./echarts.min.js"></script>
|
||||
<script type="text/javascript" src="./ecStat.min.js"></script>
|
||||
<!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-liquidfill@latest/dist/echarts-liquidfill.min.js"></script> -->
|
||||
<script>
|
||||
let chart = null;
|
||||
let cache = [];
|
||||
console.log = function(...agrs) {
|
||||
postMessage(agrs)
|
||||
}
|
||||
function emit(event, data) {
|
||||
let dataStr = JSON.stringify(data, stringify)
|
||||
postMessage({
|
||||
event,
|
||||
data: dataStr
|
||||
})
|
||||
cache = []
|
||||
}
|
||||
function postMessage(data) {
|
||||
uni.postMessage({
|
||||
data
|
||||
});
|
||||
}
|
||||
function stringify(key, value) {
|
||||
if (typeof value === 'object' && value !== null) {
|
||||
if (cache.indexOf(value) !== -1) {
|
||||
return;
|
||||
}
|
||||
cache.push(value);
|
||||
}
|
||||
return value;
|
||||
}
|
||||
function parse(name, callback, options) {
|
||||
const optionNameReg = /[\w]+\.setOption\(([\w]+\.)?([\w]+)\)/
|
||||
if (optionNameReg.test(callback)) {
|
||||
const optionNames = callback.match(optionNameReg)
|
||||
if(optionNames[1]) {
|
||||
const _this = optionNames[1].split('.')[0]
|
||||
window[_this] = {}
|
||||
window[_this][optionNames[2]] = options
|
||||
return optionNames[2]
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
function init(callback, options, opts = {}, theme = null) {
|
||||
if(!chart) {
|
||||
chart = echarts.init(document.getElementById('limeChart'), theme, opts)
|
||||
if(options) {
|
||||
chart.setOption(options)
|
||||
}
|
||||
// const name = parse('a', callback, options)
|
||||
// console.log('options::', callback)
|
||||
// if(name) this[name] = options
|
||||
// eval(`a = ${callback};`)
|
||||
// if(a) {a(chart)}
|
||||
}
|
||||
}
|
||||
|
||||
function setChart(callback, options) {
|
||||
if(!callback) return
|
||||
if(chart && callback && options) {
|
||||
var r = null
|
||||
const name = parse('r', callback, options)
|
||||
if(name) this[name] = options
|
||||
eval(`r = ${callback};`)
|
||||
if(r) {r(chart)}
|
||||
}
|
||||
}
|
||||
function setOption(data) {
|
||||
if (chart) chart.setOption(data[0], data[1])
|
||||
}
|
||||
function showLoading(data) {
|
||||
if (chart) chart.showLoading(data[0], data[1])
|
||||
}
|
||||
|
||||
function hideLoading() {
|
||||
if (chart) chart.hideLoading()
|
||||
}
|
||||
|
||||
function clear() {
|
||||
if (chart) chart.clear()
|
||||
|
||||
}
|
||||
|
||||
function dispose() {
|
||||
if (chart) chart.dispose()
|
||||
}
|
||||
function resize(size) {
|
||||
if (chart) chart.resize(size)
|
||||
}
|
||||
|
||||
function canvasToTempFilePath(opt = {}) {
|
||||
if (chart) {
|
||||
const src = chart.getDataURL(opt)
|
||||
postMessage({
|
||||
file: true,
|
||||
data: src
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
177
unpackage/dist/dev/mp-weixin/uni_modules/lime-echart/static/nvue.html
vendored
Normal file
177
unpackage/dist/dev/mp-weixin/uni_modules/lime-echart/static/nvue.html
vendored
Normal file
@@ -0,0 +1,177 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title></title>
|
||||
<style type="text/css">
|
||||
html,
|
||||
body,
|
||||
.canvas {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow-y: hidden;
|
||||
background-color: transparent;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="canvas" id="limeChart"></div>
|
||||
<script type="text/javascript" src="./uni.webview.1.5.3.js"></script>
|
||||
<script type="text/javascript" src="./echarts.min.js"></script>
|
||||
<script type="text/javascript" src="./ecStat.min.js"></script>
|
||||
<!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-liquidfill@latest/dist/echarts-liquidfill.min.js"></script> -->
|
||||
<script>
|
||||
let chart = null;
|
||||
let cache = [];
|
||||
console.log = function(...agrs) {
|
||||
postMessage(agrs)
|
||||
}
|
||||
|
||||
function emit(event, data) {
|
||||
let dataStr = JSON.stringify(data, stringify)
|
||||
postMessage({
|
||||
event,
|
||||
data: dataStr
|
||||
})
|
||||
cache = []
|
||||
}
|
||||
|
||||
function postMessage(data) {
|
||||
uni.postMessage({
|
||||
data
|
||||
});
|
||||
}
|
||||
|
||||
function stringify(key, value) {
|
||||
if (typeof value === 'object' && value !== null) {
|
||||
if (cache.indexOf(value) !== -1) {
|
||||
return;
|
||||
}
|
||||
cache.push(value);
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
function parse(name, callback, options) {
|
||||
const optionNameReg = /[\w]+\.setOption\(([\w]+\.)?([\w]+)\)/
|
||||
if (optionNameReg.test(callback)) {
|
||||
const optionNames = callback.match(optionNameReg)
|
||||
if (optionNames[1]) {
|
||||
const _this = optionNames[1].split('.')[0]
|
||||
window[_this] = {}
|
||||
window[_this][optionNames[2]] = options
|
||||
return optionNames[2]
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
function init(callback, options, opts = {}, theme = null) {
|
||||
if (!chart) {
|
||||
chart = echarts.init(document.getElementById('limeChart'), theme, opts)
|
||||
if (options) {
|
||||
chart.setOption(options)
|
||||
}
|
||||
// const name = parse('a', callback, options)
|
||||
// console.log('options::', callback)
|
||||
// if(name) this[name] = options
|
||||
// eval(`a = ${callback};`)
|
||||
// if(a) {a(chart)}
|
||||
}
|
||||
}
|
||||
|
||||
function setChart(callback, options) {
|
||||
if (!callback) return
|
||||
if (chart && callback && options) {
|
||||
var r = null
|
||||
const name = parse('r', callback, options)
|
||||
if (name) this[name] = options
|
||||
eval(`r = ${callback};`)
|
||||
if (r) {
|
||||
r(chart)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function setOption(data) {
|
||||
if (chart) chart.setOption(data[0], data[1])
|
||||
}
|
||||
|
||||
function showLoading(data) {
|
||||
if (chart) chart.showLoading(data[0], data[1])
|
||||
}
|
||||
|
||||
function hideLoading() {
|
||||
if (chart) chart.hideLoading()
|
||||
}
|
||||
|
||||
function clear() {
|
||||
if (chart) chart.clear()
|
||||
|
||||
}
|
||||
|
||||
function dispose() {
|
||||
if (chart) chart.dispose()
|
||||
}
|
||||
|
||||
function resize(size) {
|
||||
if (chart) chart.resize(size)
|
||||
}
|
||||
|
||||
function canvasToTempFilePath(opt = {}) {
|
||||
if (chart) {
|
||||
const src = chart.getDataURL(opt)
|
||||
postMessage({
|
||||
file: true,
|
||||
data: src
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function on(data) {
|
||||
if (chart && data.length > 0) {
|
||||
const [type, query] = data
|
||||
const useQuery = query && typeof query != 'function'
|
||||
const key = `${type}${useQuery ? JSON.stringify(query): '' }`
|
||||
if (query) {
|
||||
chart.on(type, query, (options) => {
|
||||
const obj = {}
|
||||
Object.keys(options).forEach(key => {
|
||||
if (key != 'event') {
|
||||
obj[key] = options[key]
|
||||
}
|
||||
})
|
||||
emit(`@${key}`, {
|
||||
event: key,
|
||||
options: obj
|
||||
})
|
||||
})
|
||||
} else {
|
||||
chart.on(type, (options) => {
|
||||
|
||||
const obj = {}
|
||||
Object.keys(options).forEach(key => {
|
||||
if (key != 'event') {
|
||||
obj[key] = options[key]
|
||||
}
|
||||
|
||||
})
|
||||
emit(`@${key}`, {
|
||||
event: key,
|
||||
options: obj
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
1
unpackage/dist/dev/mp-weixin/uni_modules/lime-echart/static/uni.webview.1.5.3.js
vendored
Normal file
1
unpackage/dist/dev/mp-weixin/uni_modules/lime-echart/static/uni.webview.1.5.3.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
unpackage/dist/dev/mp-weixin/uni_modules/lime-echart/static/uni.webview.1.5.5.js
vendored
Normal file
1
unpackage/dist/dev/mp-weixin/uni_modules/lime-echart/static/uni.webview.1.5.5.js
vendored
Normal file
File diff suppressed because one or more lines are too long
184
unpackage/dist/dev/mp-weixin/uni_modules/lime-echart/static/uvue.html
vendored
Normal file
184
unpackage/dist/dev/mp-weixin/uni_modules/lime-echart/static/uvue.html
vendored
Normal file
@@ -0,0 +1,184 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title></title>
|
||||
<style type="text/css">
|
||||
html,
|
||||
body {
|
||||
overflow: hidden;
|
||||
/* 隐藏滚动条 */
|
||||
overscroll-behavior: none;
|
||||
/* 禁止橡皮筋效果 */
|
||||
}
|
||||
html,
|
||||
body,
|
||||
.canvas {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow-y: hidden;
|
||||
background-color: transparent;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="canvas" id="limeChart"></div>
|
||||
<script type="text/javascript" src="./uni.webview.1.5.5.js"></script>
|
||||
<script type="text/javascript" src="./echarts.min.js"></script>
|
||||
<script type="text/javascript" src="./ecStat.min.js"></script>
|
||||
<!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-liquidfill@latest/dist/echarts-liquidfill.min.js"></script> -->
|
||||
<script>
|
||||
let chart = null;
|
||||
let cache = [];
|
||||
console.log = function() {
|
||||
emit('log', {
|
||||
log: arguments,
|
||||
})
|
||||
}
|
||||
|
||||
function emit(event, data) {
|
||||
postMessage({
|
||||
event,
|
||||
data
|
||||
})
|
||||
cache = []
|
||||
}
|
||||
|
||||
function postMessage(data) {
|
||||
uni.webView.postMessage({
|
||||
data
|
||||
})
|
||||
// window.__uniapp_x_.postMessage(JSON.stringify(data))
|
||||
};
|
||||
|
||||
function stringify(key, value) {
|
||||
if (typeof value === 'object' && value !== null) {
|
||||
if (cache.indexOf(value) !== -1) {
|
||||
return;
|
||||
}
|
||||
cache.push(value);
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
function parse(name, callback, options) {
|
||||
const optionNameReg = /[\w]+\.setOption\(([\w]+\.)?([\w]+)\)/
|
||||
if (optionNameReg.test(callback)) {
|
||||
const optionNames = callback.match(optionNameReg)
|
||||
if (optionNames[1]) {
|
||||
const _this = optionNames[1].split('.')[0]
|
||||
window[_this] = {}
|
||||
window[_this][optionNames[2]] = options
|
||||
return optionNames[2]
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
function init(callback, options, opts, theme) {
|
||||
if (!chart) {
|
||||
chart = echarts.init(document.getElementById('limeChart'), theme, opts)
|
||||
|
||||
if (options) {
|
||||
chart.setOption(options)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function on(data) {
|
||||
if (chart && data.length > 0) {
|
||||
const [type, query] = data
|
||||
const key = `${type}${JSON.stringify(query||'')}`
|
||||
if (query) {
|
||||
chart.on(type, query, function(options) {
|
||||
var obj = {};
|
||||
Object.keys(options).forEach(function(key) {
|
||||
if (key != 'event') {
|
||||
obj[key] = options[key];
|
||||
}
|
||||
});
|
||||
emit(key, {
|
||||
event: key,
|
||||
options: obj,
|
||||
});
|
||||
});
|
||||
} else {
|
||||
chart.on(type, function(options) {
|
||||
var obj = {};
|
||||
Object.keys(options).forEach(function(key) {
|
||||
if (key != 'event') {
|
||||
obj[key] = options[key];
|
||||
}
|
||||
});
|
||||
emit(key, {
|
||||
event: key,
|
||||
options: obj,
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function setChart(callback, options) {
|
||||
if (!callback) return
|
||||
if (chart && callback && options) {
|
||||
var r = null
|
||||
const name = parse('r', callback, options)
|
||||
if (name) this[name] = options
|
||||
eval(`r = ${callback};`)
|
||||
if (r) {
|
||||
r(chart)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function setOption(data) {
|
||||
if (chart) chart.setOption(data[0], data[1])
|
||||
}
|
||||
|
||||
function showLoading(data) {
|
||||
if (chart) chart.showLoading(data[0], data[1])
|
||||
}
|
||||
|
||||
function hideLoading() {
|
||||
if (chart) chart.hideLoading()
|
||||
}
|
||||
|
||||
function clear() {
|
||||
if (chart) chart.clear()
|
||||
|
||||
}
|
||||
|
||||
function dispose() {
|
||||
if (chart) chart.dispose()
|
||||
}
|
||||
|
||||
function resize(size) {
|
||||
if (chart) chart.resize(size)
|
||||
}
|
||||
|
||||
function canvasToTempFilePath(opt) {
|
||||
if (chart) {
|
||||
delete opt.success
|
||||
const src = chart.getDataURL(opt)
|
||||
postMessage({
|
||||
// event: 'file',
|
||||
file: src
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('touchmove', () => {
|
||||
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
397
unpackage/dist/dev/mp-weixin/uni_modules/uni-popup/components/uni-popup/uni-popup.js
vendored
Normal file
397
unpackage/dist/dev/mp-weixin/uni_modules/uni-popup/components/uni-popup/uni-popup.js
vendored
Normal file
@@ -0,0 +1,397 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../../../common/vendor.js");
|
||||
const _sfc_main = {
|
||||
name: "uniPopup",
|
||||
components: {},
|
||||
emits: ["change", "maskClick"],
|
||||
props: {
|
||||
// 开启动画
|
||||
animation: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 弹出层类型,可选值,top: 顶部弹出层;bottom:底部弹出层;center:全屏弹出层
|
||||
// message: 消息提示 ; dialog : 对话框
|
||||
type: {
|
||||
type: String,
|
||||
default: "center"
|
||||
},
|
||||
// maskClick
|
||||
isMaskClick: {
|
||||
type: Boolean,
|
||||
default: null
|
||||
},
|
||||
// TODO 2 个版本后废弃属性 ,使用 isMaskClick
|
||||
maskClick: {
|
||||
type: Boolean,
|
||||
default: null
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: "none"
|
||||
},
|
||||
safeArea: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
maskBackgroundColor: {
|
||||
type: String,
|
||||
default: "rgba(0, 0, 0, 0.4)"
|
||||
},
|
||||
borderRadius: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
/**
|
||||
* 监听type类型
|
||||
*/
|
||||
type: {
|
||||
handler: function(type) {
|
||||
if (!this.config[type])
|
||||
return;
|
||||
this[this.config[type]](true);
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
isDesktop: {
|
||||
handler: function(newVal) {
|
||||
if (!this.config[newVal])
|
||||
return;
|
||||
this[this.config[this.type]](true);
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
/**
|
||||
* 监听遮罩是否可点击
|
||||
* @param {Object} val
|
||||
*/
|
||||
maskClick: {
|
||||
handler: function(val) {
|
||||
this.mkclick = val;
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
isMaskClick: {
|
||||
handler: function(val) {
|
||||
this.mkclick = val;
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
// H5 下禁止底部滚动
|
||||
showPopup(show) {
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
duration: 300,
|
||||
ani: [],
|
||||
showPopup: false,
|
||||
showTrans: false,
|
||||
popupWidth: 0,
|
||||
popupHeight: 0,
|
||||
config: {
|
||||
top: "top",
|
||||
bottom: "bottom",
|
||||
center: "center",
|
||||
left: "left",
|
||||
right: "right",
|
||||
message: "top",
|
||||
dialog: "center",
|
||||
share: "bottom"
|
||||
},
|
||||
maskClass: {
|
||||
position: "fixed",
|
||||
bottom: 0,
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
backgroundColor: "rgba(0, 0, 0, 0.4)"
|
||||
},
|
||||
transClass: {
|
||||
backgroundColor: "transparent",
|
||||
borderRadius: this.borderRadius || "0",
|
||||
position: "fixed",
|
||||
left: 0,
|
||||
right: 0
|
||||
},
|
||||
maskShow: true,
|
||||
mkclick: true,
|
||||
popupstyle: "top"
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
getStyles() {
|
||||
let res = { backgroundColor: this.bg };
|
||||
if (this.borderRadius || "0") {
|
||||
res = Object.assign(res, { borderRadius: this.borderRadius });
|
||||
}
|
||||
return res;
|
||||
},
|
||||
isDesktop() {
|
||||
return this.popupWidth >= 500 && this.popupHeight >= 500;
|
||||
},
|
||||
bg() {
|
||||
if (this.backgroundColor === "" || this.backgroundColor === "none") {
|
||||
return "transparent";
|
||||
}
|
||||
return this.backgroundColor;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const fixSize = () => {
|
||||
const {
|
||||
windowWidth,
|
||||
windowHeight,
|
||||
windowTop,
|
||||
safeArea,
|
||||
screenHeight,
|
||||
safeAreaInsets
|
||||
} = common_vendor.index.getWindowInfo();
|
||||
this.popupWidth = windowWidth;
|
||||
this.popupHeight = windowHeight + (windowTop || 0);
|
||||
if (safeArea && this.safeArea) {
|
||||
this.safeAreaInsets = screenHeight - safeArea.bottom;
|
||||
} else {
|
||||
this.safeAreaInsets = 0;
|
||||
}
|
||||
};
|
||||
fixSize();
|
||||
},
|
||||
// TODO vue3
|
||||
unmounted() {
|
||||
this.setH5Visible();
|
||||
},
|
||||
activated() {
|
||||
this.setH5Visible(!this.showPopup);
|
||||
},
|
||||
deactivated() {
|
||||
this.setH5Visible(true);
|
||||
},
|
||||
created() {
|
||||
if (this.isMaskClick === null && this.maskClick === null) {
|
||||
this.mkclick = true;
|
||||
} else {
|
||||
this.mkclick = this.isMaskClick !== null ? this.isMaskClick : this.maskClick;
|
||||
}
|
||||
if (this.animation) {
|
||||
this.duration = 300;
|
||||
} else {
|
||||
this.duration = 0;
|
||||
}
|
||||
this.messageChild = null;
|
||||
this.clearPropagation = false;
|
||||
this.maskClass.backgroundColor = this.maskBackgroundColor;
|
||||
},
|
||||
methods: {
|
||||
setH5Visible(visible = true) {
|
||||
},
|
||||
/**
|
||||
* 公用方法,不显示遮罩层
|
||||
*/
|
||||
closeMask() {
|
||||
this.maskShow = false;
|
||||
},
|
||||
/**
|
||||
* 公用方法,遮罩层禁止点击
|
||||
*/
|
||||
disableMask() {
|
||||
this.mkclick = false;
|
||||
},
|
||||
// TODO nvue 取消冒泡
|
||||
clear(e) {
|
||||
e.stopPropagation();
|
||||
this.clearPropagation = true;
|
||||
},
|
||||
open(direction) {
|
||||
if (this.showPopup) {
|
||||
return;
|
||||
}
|
||||
let innerType = ["top", "center", "bottom", "left", "right", "message", "dialog", "share"];
|
||||
if (!(direction && innerType.indexOf(direction) !== -1)) {
|
||||
direction = this.type;
|
||||
}
|
||||
if (!this.config[direction]) {
|
||||
common_vendor.index.__f__("error", "at uni_modules/uni-popup/components/uni-popup/uni-popup.vue:310", "缺少类型:", direction);
|
||||
return;
|
||||
}
|
||||
this[this.config[direction]]();
|
||||
this.$emit("change", {
|
||||
show: true,
|
||||
type: direction
|
||||
});
|
||||
},
|
||||
close(type) {
|
||||
this.showTrans = false;
|
||||
this.$emit("change", {
|
||||
show: false,
|
||||
type: this.type
|
||||
});
|
||||
clearTimeout(this.timer);
|
||||
this.timer = setTimeout(() => {
|
||||
this.showPopup = false;
|
||||
}, 300);
|
||||
},
|
||||
// TODO 处理冒泡事件,头条的冒泡事件有问题 ,先这样兼容
|
||||
touchstart() {
|
||||
this.clearPropagation = false;
|
||||
},
|
||||
onTap() {
|
||||
if (this.clearPropagation) {
|
||||
this.clearPropagation = false;
|
||||
return;
|
||||
}
|
||||
this.$emit("maskClick");
|
||||
if (!this.mkclick)
|
||||
return;
|
||||
this.close();
|
||||
},
|
||||
/**
|
||||
* 顶部弹出样式处理
|
||||
*/
|
||||
top(type) {
|
||||
this.popupstyle = this.isDesktop ? "fixforpc-top" : "top";
|
||||
this.ani = ["slide-top"];
|
||||
this.transClass = {
|
||||
position: "fixed",
|
||||
left: 0,
|
||||
right: 0,
|
||||
backgroundColor: this.bg,
|
||||
borderRadius: this.borderRadius || "0"
|
||||
};
|
||||
if (type)
|
||||
return;
|
||||
this.showPopup = true;
|
||||
this.showTrans = true;
|
||||
this.$nextTick(() => {
|
||||
this.showPoptrans();
|
||||
if (this.messageChild && this.type === "message") {
|
||||
this.messageChild.timerClose();
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 底部弹出样式处理
|
||||
*/
|
||||
bottom(type) {
|
||||
this.popupstyle = "bottom";
|
||||
this.ani = ["slide-bottom"];
|
||||
this.transClass = {
|
||||
position: "fixed",
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
paddingBottom: this.safeAreaInsets + "px",
|
||||
backgroundColor: this.bg,
|
||||
borderRadius: this.borderRadius || "0"
|
||||
};
|
||||
if (type)
|
||||
return;
|
||||
this.showPoptrans();
|
||||
},
|
||||
/**
|
||||
* 中间弹出样式处理
|
||||
*/
|
||||
center(type) {
|
||||
this.popupstyle = "center";
|
||||
this.ani = ["fade"];
|
||||
this.transClass = {
|
||||
position: "fixed",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
borderRadius: this.borderRadius || "0"
|
||||
};
|
||||
if (type)
|
||||
return;
|
||||
this.showPoptrans();
|
||||
},
|
||||
left(type) {
|
||||
this.popupstyle = "left";
|
||||
this.ani = ["slide-left"];
|
||||
this.transClass = {
|
||||
position: "fixed",
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
top: 0,
|
||||
backgroundColor: this.bg,
|
||||
borderRadius: this.borderRadius || "0",
|
||||
display: "flex",
|
||||
flexDirection: "column"
|
||||
};
|
||||
if (type)
|
||||
return;
|
||||
this.showPoptrans();
|
||||
},
|
||||
right(type) {
|
||||
this.popupstyle = "right";
|
||||
this.ani = ["slide-right"];
|
||||
this.transClass = {
|
||||
position: "fixed",
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
backgroundColor: this.bg,
|
||||
borderRadius: this.borderRadius || "0",
|
||||
display: "flex",
|
||||
flexDirection: "column"
|
||||
};
|
||||
if (type)
|
||||
return;
|
||||
this.showPoptrans();
|
||||
},
|
||||
showPoptrans() {
|
||||
this.$nextTick(() => {
|
||||
this.showPopup = true;
|
||||
this.showTrans = true;
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
if (!Array) {
|
||||
const _easycom_uni_transition2 = common_vendor.resolveComponent("uni-transition");
|
||||
_easycom_uni_transition2();
|
||||
}
|
||||
const _easycom_uni_transition = () => "../../../uni-transition/components/uni-transition/uni-transition.js";
|
||||
if (!Math) {
|
||||
_easycom_uni_transition();
|
||||
}
|
||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
return common_vendor.e({
|
||||
a: $data.showPopup
|
||||
}, $data.showPopup ? common_vendor.e({
|
||||
b: $data.maskShow
|
||||
}, $data.maskShow ? {
|
||||
c: common_vendor.o($options.onTap),
|
||||
d: common_vendor.p({
|
||||
name: "mask",
|
||||
["mode-class"]: "fade",
|
||||
styles: $data.maskClass,
|
||||
duration: $data.duration,
|
||||
show: $data.showTrans
|
||||
})
|
||||
} : {}, {
|
||||
e: common_vendor.s($options.getStyles),
|
||||
f: common_vendor.n($data.popupstyle),
|
||||
g: common_vendor.o((...args) => $options.clear && $options.clear(...args)),
|
||||
h: common_vendor.o($options.onTap),
|
||||
i: common_vendor.p({
|
||||
["mode-class"]: $data.ani,
|
||||
name: "content",
|
||||
styles: $data.transClass,
|
||||
duration: $data.duration,
|
||||
show: $data.showTrans
|
||||
}),
|
||||
j: common_vendor.o((...args) => $options.touchstart && $options.touchstart(...args)),
|
||||
k: common_vendor.n($data.popupstyle),
|
||||
l: common_vendor.n($options.isDesktop ? "fixforpc-z-index" : "")
|
||||
}) : {});
|
||||
}
|
||||
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render]]);
|
||||
wx.createComponent(Component);
|
||||
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/uni-popup/components/uni-popup/uni-popup.js.map
|
||||
6
unpackage/dist/dev/mp-weixin/uni_modules/uni-popup/components/uni-popup/uni-popup.json
vendored
Normal file
6
unpackage/dist/dev/mp-weixin/uni_modules/uni-popup/components/uni-popup/uni-popup.json
vendored
Normal file
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"uni-transition": "../../../uni-transition/components/uni-transition/uni-transition"
|
||||
}
|
||||
}
|
||||
1
unpackage/dist/dev/mp-weixin/uni_modules/uni-popup/components/uni-popup/uni-popup.wxml
vendored
Normal file
1
unpackage/dist/dev/mp-weixin/uni_modules/uni-popup/components/uni-popup/uni-popup.wxml
vendored
Normal file
@@ -0,0 +1 @@
|
||||
<view wx:if="{{a}}" class="{{['uni-popup', k, l]}}"><view bindtouchstart="{{j}}"><uni-transition wx:if="{{b}}" key="1" bindclick="{{c}}" u-i="10ea031a-0" bind:__l="__l" u-p="{{d}}"/><uni-transition wx:if="{{i}}" u-s="{{['d']}}" key="2" bindclick="{{h}}" u-i="10ea031a-1" bind:__l="__l" u-p="{{i}}"><view style="{{e}}" class="{{['uni-popup__wrapper', f]}}" bindtap="{{g}}"><slot/></view></uni-transition></view></view>
|
||||
47
unpackage/dist/dev/mp-weixin/uni_modules/uni-popup/components/uni-popup/uni-popup.wxss
vendored
Normal file
47
unpackage/dist/dev/mp-weixin/uni_modules/uni-popup/components/uni-popup/uni-popup.wxss
vendored
Normal file
@@ -0,0 +1,47 @@
|
||||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
|
||||
*/
|
||||
/* 颜色变量 */
|
||||
/* 行为相关颜色 */
|
||||
/* 文字基本颜色 */
|
||||
/* 背景颜色 */
|
||||
/* 边框颜色 */
|
||||
/* 尺寸变量 */
|
||||
/* 文字尺寸 */
|
||||
/* 图片尺寸 */
|
||||
/* Border Radius */
|
||||
/* 水平间距 */
|
||||
/* 垂直间距 */
|
||||
/* 透明度 */
|
||||
/* 文章场景相关 */
|
||||
.uni-popup {
|
||||
position: fixed;
|
||||
z-index: 99999;
|
||||
}
|
||||
.uni-popup.top, .uni-popup.left, .uni-popup.right {
|
||||
top: 0;
|
||||
}
|
||||
.uni-popup .uni-popup__wrapper {
|
||||
display: block;
|
||||
position: relative;
|
||||
/* iphonex 等安全区设置,底部安全区适配 */
|
||||
}
|
||||
.uni-popup .uni-popup__wrapper.left, .uni-popup .uni-popup__wrapper.right {
|
||||
padding-top: 0;
|
||||
flex: 1;
|
||||
}
|
||||
.fixforpc-z-index {
|
||||
z-index: 999;
|
||||
}
|
||||
.fixforpc-top {
|
||||
top: 0;
|
||||
}
|
||||
116
unpackage/dist/dev/mp-weixin/uni_modules/uni-transition/components/uni-transition/createAnimation.js
vendored
Normal file
116
unpackage/dist/dev/mp-weixin/uni_modules/uni-transition/components/uni-transition/createAnimation.js
vendored
Normal file
@@ -0,0 +1,116 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../../../common/vendor.js");
|
||||
class MPAnimation {
|
||||
constructor(options, _this) {
|
||||
this.options = options;
|
||||
this.animation = common_vendor.index.createAnimation({
|
||||
...options
|
||||
});
|
||||
this.currentStepAnimates = {};
|
||||
this.next = 0;
|
||||
this.$ = _this;
|
||||
}
|
||||
_nvuePushAnimates(type, args) {
|
||||
let aniObj = this.currentStepAnimates[this.next];
|
||||
let styles = {};
|
||||
if (!aniObj) {
|
||||
styles = {
|
||||
styles: {},
|
||||
config: {}
|
||||
};
|
||||
} else {
|
||||
styles = aniObj;
|
||||
}
|
||||
if (animateTypes1.includes(type)) {
|
||||
if (!styles.styles.transform) {
|
||||
styles.styles.transform = "";
|
||||
}
|
||||
let unit = "";
|
||||
if (type === "rotate") {
|
||||
unit = "deg";
|
||||
}
|
||||
styles.styles.transform += `${type}(${args + unit}) `;
|
||||
} else {
|
||||
styles.styles[type] = `${args}`;
|
||||
}
|
||||
this.currentStepAnimates[this.next] = styles;
|
||||
}
|
||||
_animateRun(styles = {}, config = {}) {
|
||||
let ref = this.$.$refs["ani"].ref;
|
||||
if (!ref)
|
||||
return;
|
||||
return new Promise((resolve, reject) => {
|
||||
nvueAnimation.transition(ref, {
|
||||
styles,
|
||||
...config
|
||||
}, (res) => {
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
}
|
||||
_nvueNextAnimate(animates, step = 0, fn) {
|
||||
let obj = animates[step];
|
||||
if (obj) {
|
||||
let {
|
||||
styles,
|
||||
config
|
||||
} = obj;
|
||||
this._animateRun(styles, config).then(() => {
|
||||
step += 1;
|
||||
this._nvueNextAnimate(animates, step, fn);
|
||||
});
|
||||
} else {
|
||||
this.currentStepAnimates = {};
|
||||
typeof fn === "function" && fn();
|
||||
this.isEnd = true;
|
||||
}
|
||||
}
|
||||
step(config = {}) {
|
||||
this.animation.step(config);
|
||||
return this;
|
||||
}
|
||||
run(fn) {
|
||||
this.$.animationData = this.animation.export();
|
||||
this.$.timer = setTimeout(() => {
|
||||
typeof fn === "function" && fn();
|
||||
}, this.$.durationTime);
|
||||
}
|
||||
}
|
||||
const animateTypes1 = [
|
||||
"matrix",
|
||||
"matrix3d",
|
||||
"rotate",
|
||||
"rotate3d",
|
||||
"rotateX",
|
||||
"rotateY",
|
||||
"rotateZ",
|
||||
"scale",
|
||||
"scale3d",
|
||||
"scaleX",
|
||||
"scaleY",
|
||||
"scaleZ",
|
||||
"skew",
|
||||
"skewX",
|
||||
"skewY",
|
||||
"translate",
|
||||
"translate3d",
|
||||
"translateX",
|
||||
"translateY",
|
||||
"translateZ"
|
||||
];
|
||||
const animateTypes2 = ["opacity", "backgroundColor"];
|
||||
const animateTypes3 = ["width", "height", "left", "right", "top", "bottom"];
|
||||
animateTypes1.concat(animateTypes2, animateTypes3).forEach((type) => {
|
||||
MPAnimation.prototype[type] = function(...args) {
|
||||
this.animation[type](...args);
|
||||
return this;
|
||||
};
|
||||
});
|
||||
function createAnimation(option, _this) {
|
||||
if (!_this)
|
||||
return;
|
||||
clearTimeout(_this.timer);
|
||||
return new MPAnimation(option, _this);
|
||||
}
|
||||
exports.createAnimation = createAnimation;
|
||||
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/uni-transition/components/uni-transition/createAnimation.js.map
|
||||
257
unpackage/dist/dev/mp-weixin/uni_modules/uni-transition/components/uni-transition/uni-transition.js
vendored
Normal file
257
unpackage/dist/dev/mp-weixin/uni_modules/uni-transition/components/uni-transition/uni-transition.js
vendored
Normal file
@@ -0,0 +1,257 @@
|
||||
"use strict";
|
||||
const uni_modules_uniTransition_components_uniTransition_createAnimation = require("./createAnimation.js");
|
||||
const common_vendor = require("../../../../common/vendor.js");
|
||||
const _sfc_main = {
|
||||
name: "uniTransition",
|
||||
emits: ["click", "change"],
|
||||
props: {
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
modeClass: {
|
||||
type: [Array, String],
|
||||
default() {
|
||||
return "fade";
|
||||
}
|
||||
},
|
||||
duration: {
|
||||
type: Number,
|
||||
default: 300
|
||||
},
|
||||
styles: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
customClass: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
onceRender: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isShow: false,
|
||||
transform: "",
|
||||
opacity: 0,
|
||||
animationData: {},
|
||||
durationTime: 300,
|
||||
config: {}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
show: {
|
||||
handler(newVal) {
|
||||
if (newVal) {
|
||||
this.open();
|
||||
} else {
|
||||
if (this.isShow) {
|
||||
this.close();
|
||||
}
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 生成样式数据
|
||||
stylesObject() {
|
||||
let styles = {
|
||||
...this.styles,
|
||||
"transition-duration": this.duration / 1e3 + "s"
|
||||
};
|
||||
let transform = "";
|
||||
for (let i in styles) {
|
||||
let line = this.toLine(i);
|
||||
transform += line + ":" + styles[i] + ";";
|
||||
}
|
||||
return transform;
|
||||
},
|
||||
// 初始化动画条件
|
||||
transformStyles() {
|
||||
return "transform:" + this.transform + ";opacity:" + this.opacity + ";" + this.stylesObject;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.config = {
|
||||
duration: this.duration,
|
||||
timingFunction: "ease",
|
||||
transformOrigin: "50% 50%",
|
||||
delay: 0
|
||||
};
|
||||
this.durationTime = this.duration;
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* ref 触发 初始化动画
|
||||
*/
|
||||
init(obj = {}) {
|
||||
if (obj.duration) {
|
||||
this.durationTime = obj.duration;
|
||||
}
|
||||
this.animation = uni_modules_uniTransition_components_uniTransition_createAnimation.createAnimation(Object.assign(this.config, obj), this);
|
||||
},
|
||||
/**
|
||||
* 点击组件触发回调
|
||||
*/
|
||||
onClick() {
|
||||
this.$emit("click", {
|
||||
detail: this.isShow
|
||||
});
|
||||
},
|
||||
/**
|
||||
* ref 触发 动画分组
|
||||
* @param {Object} obj
|
||||
*/
|
||||
step(obj, config = {}) {
|
||||
if (!this.animation)
|
||||
return this;
|
||||
Object.keys(obj).forEach((key) => {
|
||||
const value = obj[key];
|
||||
if (typeof this.animation[key] === "function") {
|
||||
Array.isArray(value) ? this.animation[key](...value) : this.animation[key](value);
|
||||
}
|
||||
});
|
||||
this.animation.step(config);
|
||||
return this;
|
||||
},
|
||||
/**
|
||||
* ref 触发 执行动画
|
||||
*/
|
||||
run(fn) {
|
||||
if (!this.animation)
|
||||
return;
|
||||
this.animation.run(fn);
|
||||
},
|
||||
// 开始过度动画
|
||||
open() {
|
||||
clearTimeout(this.timer);
|
||||
this.isShow = true;
|
||||
this.transform = this.styleInit(false).transform || "";
|
||||
this.opacity = this.styleInit(false).opacity || 0;
|
||||
this.$nextTick(() => {
|
||||
this.timer = setTimeout(() => {
|
||||
this.animation = uni_modules_uniTransition_components_uniTransition_createAnimation.createAnimation(this.config, this);
|
||||
this.tranfromInit(false).step();
|
||||
this.animation.run(() => {
|
||||
this.transform = "";
|
||||
this.opacity = this.styleInit(false).opacity || 1;
|
||||
this.$emit("change", {
|
||||
detail: this.isShow
|
||||
});
|
||||
});
|
||||
}, 80);
|
||||
});
|
||||
},
|
||||
// 关闭过度动画
|
||||
close(type) {
|
||||
if (!this.animation)
|
||||
return;
|
||||
this.tranfromInit(true).step().run(() => {
|
||||
this.isShow = false;
|
||||
this.animationData = null;
|
||||
this.animation = null;
|
||||
let { opacity, transform } = this.styleInit(false);
|
||||
this.opacity = opacity || 1;
|
||||
this.transform = transform;
|
||||
this.$emit("change", {
|
||||
detail: this.isShow
|
||||
});
|
||||
});
|
||||
},
|
||||
// 处理动画开始前的默认样式
|
||||
styleInit(type) {
|
||||
let styles = { transform: "", opacity: 1 };
|
||||
const buildStyle = (type2, mode) => {
|
||||
const value = this.animationType(type2)[mode];
|
||||
if (mode.startsWith("fade")) {
|
||||
styles.opacity = value;
|
||||
} else {
|
||||
styles.transform += value + " ";
|
||||
}
|
||||
};
|
||||
if (typeof this.modeClass === "string") {
|
||||
buildStyle(type, this.modeClass);
|
||||
} else {
|
||||
this.modeClass.forEach((mode) => buildStyle(type, mode));
|
||||
}
|
||||
return styles;
|
||||
},
|
||||
// 处理内置组合动画
|
||||
tranfromInit(type) {
|
||||
let buildTranfrom = (type2, mode) => {
|
||||
let aniNum = null;
|
||||
if (mode === "fade") {
|
||||
aniNum = type2 ? 0 : 1;
|
||||
} else {
|
||||
aniNum = type2 ? "-100%" : "0";
|
||||
if (mode === "zoom-in") {
|
||||
aniNum = type2 ? 0.8 : 1;
|
||||
}
|
||||
if (mode === "zoom-out") {
|
||||
aniNum = type2 ? 1.2 : 1;
|
||||
}
|
||||
if (mode === "slide-right") {
|
||||
aniNum = type2 ? "100%" : "0";
|
||||
}
|
||||
if (mode === "slide-bottom") {
|
||||
aniNum = type2 ? "100%" : "0";
|
||||
}
|
||||
}
|
||||
this.animation[this.animationMode()[mode]](aniNum);
|
||||
};
|
||||
if (typeof this.modeClass === "string") {
|
||||
buildTranfrom(type, this.modeClass);
|
||||
} else {
|
||||
this.modeClass.forEach((mode) => {
|
||||
buildTranfrom(type, mode);
|
||||
});
|
||||
}
|
||||
return this.animation;
|
||||
},
|
||||
animationType(type) {
|
||||
return {
|
||||
fade: type ? 1 : 0,
|
||||
"slide-top": `translateY(${type ? "0" : "-100%"})`,
|
||||
"slide-right": `translateX(${type ? "0" : "100%"})`,
|
||||
"slide-bottom": `translateY(${type ? "0" : "100%"})`,
|
||||
"slide-left": `translateX(${type ? "0" : "-100%"})`,
|
||||
"zoom-in": `scaleX(${type ? 1 : 0.8}) scaleY(${type ? 1 : 0.8})`,
|
||||
"zoom-out": `scaleX(${type ? 1 : 1.2}) scaleY(${type ? 1 : 1.2})`
|
||||
};
|
||||
},
|
||||
// 内置动画类型与实际动画对应字典
|
||||
animationMode() {
|
||||
return {
|
||||
fade: "opacity",
|
||||
"slide-top": "translateY",
|
||||
"slide-right": "translateX",
|
||||
"slide-bottom": "translateY",
|
||||
"slide-left": "translateX",
|
||||
"zoom-in": "scale",
|
||||
"zoom-out": "scale"
|
||||
};
|
||||
},
|
||||
// 驼峰转中横线
|
||||
toLine(name) {
|
||||
return name.replace(/([A-Z])/g, "-$1").toLowerCase();
|
||||
}
|
||||
}
|
||||
};
|
||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
return {
|
||||
a: $data.isShow,
|
||||
b: $data.animationData,
|
||||
c: common_vendor.n($props.customClass),
|
||||
d: common_vendor.s($options.transformStyles),
|
||||
e: common_vendor.o((...args) => $options.onClick && $options.onClick(...args))
|
||||
};
|
||||
}
|
||||
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render]]);
|
||||
wx.createComponent(Component);
|
||||
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/uni-transition/components/uni-transition/uni-transition.js.map
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<view hidden="{{!a}}" ref="ani" animation="{{b}}" class="{{c}}" style="{{d}}" bindtap="{{e}}"><slot></slot></view>
|
||||
@@ -0,0 +1,316 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../../../common/vendor.js");
|
||||
const DIR_CCW = "counterclockwise";
|
||||
const DIR_CW = "clockwise";
|
||||
const generateId = () => {
|
||||
const base = 999999 * Math.random();
|
||||
return Math.round(base) + 1e5;
|
||||
};
|
||||
const _sfc_main = {
|
||||
name: "zui-progress-circle",
|
||||
components: {},
|
||||
props: {
|
||||
size: {
|
||||
type: Number,
|
||||
default: 180
|
||||
},
|
||||
/**
|
||||
* 当前位置
|
||||
*
|
||||
* [0, 1]
|
||||
*/
|
||||
position: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
/**
|
||||
* 环形起止位置
|
||||
*/
|
||||
range: {
|
||||
type: [Array],
|
||||
default: () => [0, 360]
|
||||
},
|
||||
/**
|
||||
* 方向
|
||||
*/
|
||||
direction: {
|
||||
type: String,
|
||||
default: DIR_CW,
|
||||
validator(val) {
|
||||
return [DIR_CCW, DIR_CW].includes(val);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 环形宽度
|
||||
*/
|
||||
ringWidth: {
|
||||
type: Number,
|
||||
default: 8
|
||||
},
|
||||
/**
|
||||
* 端点效果
|
||||
*
|
||||
* round | butt | square
|
||||
*/
|
||||
linecap: {
|
||||
type: String,
|
||||
default: "round"
|
||||
},
|
||||
/**
|
||||
* 纹理贴图,组件支持配置前景和背景2个贴图
|
||||
*
|
||||
* 贴图可以是一个颜色,一个渐变填充,一个 base64 编码的图片。3种贴图可以搭配使用
|
||||
*
|
||||
*/
|
||||
texture: {
|
||||
type: [String, Array],
|
||||
default: () => ["#1BB507", "#E2D8D8"]
|
||||
},
|
||||
pointer: String,
|
||||
pointerOffset: Number,
|
||||
/**
|
||||
* 修复遮盖问题
|
||||
*/
|
||||
fixOverlay: Boolean,
|
||||
debug: Boolean
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
preset() {
|
||||
const preset = {};
|
||||
preset.start = this.range[0];
|
||||
preset.end = this.range[0] > this.range[1] ? this.range[1] + 360 : this.range[1];
|
||||
preset.ringRadius = (this.size - this.ringWidth) / 2;
|
||||
preset.ringCenter = this.size / 2;
|
||||
preset.ringPerimeter = 2 * Math.PI * preset.ringRadius;
|
||||
preset.ringLength = (preset.end - preset.start) * Math.PI * preset.ringRadius / 180;
|
||||
preset.ringStart = preset.start * Math.PI * preset.ringRadius / 180;
|
||||
preset.ringEnd = preset.end * Math.PI * preset.ringRadius / 180;
|
||||
if (/^(ccw|counterclockwise)$/i.test(this.direction))
|
||||
preset.direction = DIR_CCW;
|
||||
else
|
||||
preset.direction = DIR_CW;
|
||||
return preset;
|
||||
},
|
||||
textureFG() {
|
||||
const textureSize = this.size;
|
||||
if (typeof this.texture === "string") {
|
||||
return this.parseTexture(this.texture, textureSize);
|
||||
} else if (Object.prototype.toString.call(this.texture) === "[object Array]") {
|
||||
if (typeof this.texture[0] === "number") {
|
||||
return this.parseTexture(this.texture, textureSize);
|
||||
} else {
|
||||
return this.parseTexture(this.texture[0], textureSize);
|
||||
}
|
||||
} else {
|
||||
return this.parseTexture("#1BB507", textureSize);
|
||||
}
|
||||
},
|
||||
textureBG() {
|
||||
const textureSize = this.size;
|
||||
if (typeof this.texture === "string") {
|
||||
return this.parseTexture(void 0, textureSize);
|
||||
} else if (Object.prototype.toString.call(this.texture) === "[object Array]") {
|
||||
if (typeof this.texture[0] === "number") {
|
||||
return this.parseTexture(void 0, textureSize);
|
||||
} else {
|
||||
return this.parseTexture(this.texture[1], textureSize);
|
||||
}
|
||||
} else {
|
||||
return this.parseTexture("#E2D8D8", textureSize);
|
||||
}
|
||||
},
|
||||
hasBackground() {
|
||||
return !!this.textureBG;
|
||||
},
|
||||
svgDataUrl() {
|
||||
let svg = this.createSVG();
|
||||
svg = `data:image/svg+xml,${encodeURIComponent(svg.replace(/ +/g, " "))}`;
|
||||
return svg;
|
||||
},
|
||||
style() {
|
||||
const style = {
|
||||
width: `${this.size}px`,
|
||||
height: `${this.size}px`,
|
||||
"--zui-progress-circle-ring-size": `${this.size}px`,
|
||||
"--zui-progress-circle-ring-width": `${this.ringWidth}px`
|
||||
};
|
||||
return Object.keys(style).map((key) => `${key}:${style[key]}`).join(";");
|
||||
},
|
||||
pointerStyle() {
|
||||
const style = {};
|
||||
const { start, end, ringRadius } = this.preset;
|
||||
let rotate = (end - start) * this.position + start;
|
||||
if (this.linecap === "round" || this.linecap === "butt") {
|
||||
rotate += this.ringWidth / 3 * 180 / (Math.PI * ringRadius);
|
||||
}
|
||||
const offset = this.pointerOffset || 0;
|
||||
style["--zui-progress-circle-pointer-rotate"] = `translate(-${offset}px, -50%) rotate(${rotate}deg)`;
|
||||
style["--zui-progress-circle-pointer-center"] = `${offset}px 50%`;
|
||||
return Object.keys(style).map((key) => `${key}:${style[key]}`).join(";");
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
parseTexture(texture, textureSize) {
|
||||
if (!texture)
|
||||
return void 0;
|
||||
if (/^#[0-9a-f]+/i.test(texture)) {
|
||||
return {
|
||||
type: "color",
|
||||
value: texture
|
||||
};
|
||||
}
|
||||
const defId = generateId();
|
||||
if (/Gradient>/i.test(texture)) {
|
||||
if (/id="[^"]+"/.test(texture)) {
|
||||
texture = texture.replace(/id="[^"]+"/, `id="def_${defId}"`);
|
||||
} else {
|
||||
texture = texture.replace(
|
||||
/<(\w+Gradient) /,
|
||||
`<$1 id="def_${defId}" `
|
||||
);
|
||||
}
|
||||
return {
|
||||
type: "gradient",
|
||||
value: `url(#def_${defId})`,
|
||||
def: texture
|
||||
};
|
||||
}
|
||||
if (Object.prototype.toString.call(texture) === "[object Array]") {
|
||||
texture = this.createGradient(defId, texture.slice(1), texture[0]);
|
||||
return {
|
||||
type: "gradient",
|
||||
value: `url(#def_${defId})`,
|
||||
def: texture
|
||||
};
|
||||
}
|
||||
if (/<pattern /.test(texture)) {
|
||||
if (/id="[^"]+"/.test(texture)) {
|
||||
texture = texture.replace(/id="[^"]+"/, `id="def_${defId}"`);
|
||||
} else {
|
||||
texture = texture.replace(/<pattern /, `<$1 id="def_${defId}" `);
|
||||
}
|
||||
} else {
|
||||
texture = this.createPattern(`def_${defId}`, texture, textureSize);
|
||||
}
|
||||
return {
|
||||
type: "pattern",
|
||||
value: `url(#def_${defId})`,
|
||||
def: texture
|
||||
};
|
||||
},
|
||||
/**
|
||||
* 创建渐变填充
|
||||
*
|
||||
* @param {color[]} stops 渐变颜色
|
||||
* @param {number} angle 渐变填充角度
|
||||
*/
|
||||
createGradient(id, stops, angle) {
|
||||
const step = 100 / (stops.length - 1);
|
||||
const stopNodes = new Array(stops.length).fill(null).map((_, idx) => {
|
||||
return `<stop offset="${step * idx * 100}%" stop-color="${stops[idx]}" />`;
|
||||
});
|
||||
return `<linearGradient id="def_${id}" x1="0%" y1="0%" x2="100%" y2="64.9%" gradientTransform="rotate(${angle})">
|
||||
${stopNodes.join("")}
|
||||
</linearGradient>`;
|
||||
},
|
||||
/**
|
||||
* 创建文理填充
|
||||
*
|
||||
* @param {string} img base64 image. URI not surpported.
|
||||
*/
|
||||
createPattern(id, img, size) {
|
||||
return `<pattern id="${id}" patternUnits="userSpaceOnUse" width="100%" height="100%">
|
||||
<image xlink:href="${img}" x="0" y="0" width="100%" height="100%"/>
|
||||
</pattern>`;
|
||||
},
|
||||
/**
|
||||
* 创建圆环
|
||||
*
|
||||
* @param {string} fill 纹理ID
|
||||
* @param {number[]} dasharray 弧形数据
|
||||
*/
|
||||
createCircle(fill, dasharray, type) {
|
||||
const { ringCenter, ringRadius, fixOverlay } = this.preset;
|
||||
const circle = {
|
||||
cx: ringCenter,
|
||||
cy: ringCenter,
|
||||
r: ringRadius,
|
||||
// 前景环稍大点, 用于遮盖底部环纹理
|
||||
"stroke-width": this.ringWidth,
|
||||
stroke: fill && fill.value,
|
||||
"stroke-linecap": this.linecap,
|
||||
"stroke-dasharray": dasharray.join(",")
|
||||
};
|
||||
if (fixOverlay) {
|
||||
const fw = type === "fg" ? this.ringWidth : this.ringWidth - 1;
|
||||
circle["stroke-width"] = fw > 8 ? fw : 8;
|
||||
}
|
||||
const props = Object.keys(circle).map((key) => circle[key] ? `${key}="${circle[key]}"` : "").join(" ");
|
||||
return `<circle fill="none" stroke-dashoffset="1" ${props}></circle>`;
|
||||
},
|
||||
generateDashArray(pos) {
|
||||
const {
|
||||
direction,
|
||||
ringStart,
|
||||
ringPerimeter,
|
||||
ringLength
|
||||
} = this.preset;
|
||||
let ringStartPos = direction === DIR_CCW ? ringStart + (1 - pos) * ringLength : ringStart;
|
||||
let dash1 = 0;
|
||||
let dash2 = 0;
|
||||
let dash3 = 0;
|
||||
dash2 = 1 + ringStartPos;
|
||||
dash3 = pos * ringLength;
|
||||
const npos = ringStartPos + pos * ringLength;
|
||||
if (npos > ringPerimeter) {
|
||||
dash1 = npos - ringPerimeter;
|
||||
dash2 = ringStartPos - dash1;
|
||||
} else {
|
||||
dash1 = 0;
|
||||
}
|
||||
return [dash1, dash2, dash3, ringPerimeter];
|
||||
},
|
||||
/**
|
||||
* 创建 SVG 图形
|
||||
*/
|
||||
createSVG() {
|
||||
const cirleBG = this.hasBackground ? this.createCircle(this.textureBG, this.generateDashArray(1)) : "";
|
||||
const cirleFG = this.createCircle(
|
||||
this.textureFG,
|
||||
this.generateDashArray(this.position),
|
||||
"fg"
|
||||
);
|
||||
const defs = [this.textureFG.def || "", this.textureBG && this.textureBG.def || ""];
|
||||
const svg = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${this.size}" height="${this.size}">
|
||||
<defs>
|
||||
${defs.join("\n")}
|
||||
</defs>
|
||||
<g>
|
||||
${cirleBG}
|
||||
${cirleFG}
|
||||
</g>
|
||||
</svg>`;
|
||||
return svg;
|
||||
}
|
||||
}
|
||||
};
|
||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
return common_vendor.e({
|
||||
a: $props.pointer
|
||||
}, $props.pointer ? {
|
||||
b: $props.pointer,
|
||||
c: common_vendor.s($options.pointerStyle)
|
||||
} : {}, {
|
||||
d: $options.svgDataUrl,
|
||||
e: $props.debug
|
||||
}, $props.debug ? {} : {}, {
|
||||
f: common_vendor.n($props.debug ? "debug" : ""),
|
||||
g: common_vendor.s($options.style)
|
||||
});
|
||||
}
|
||||
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-dbeba832"]]);
|
||||
wx.createComponent(Component);
|
||||
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/zui-progress-circle/components/zui-progress-circle/zui-progress-circle.js.map
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<view ref="eleMeter" class="{{['data-v-dbeba832', 'zui-progress-circle', f]}}" style="{{g}}"><view class="zui-progress-circle-wrapper data-v-dbeba832"><image wx:if="{{a}}" class="zui-progress-circle-pointer data-v-dbeba832" mode="aspectFit" src="{{b}}" style="{{c}}"/><image class="zui-progress-circle-ring data-v-dbeba832" mode="aspectFit" src="{{d}}"/></view><view class="zui-progress-circle-slot data-v-dbeba832"><slot/></view><view wx:if="{{e}}" class="debug-frame data-v-dbeba832"><view class="cross-v data-v-dbeba832"></view><view class="cross-h data-v-dbeba832"></view><view class="half-size data-v-dbeba832"></view></view></view>
|
||||
@@ -0,0 +1,96 @@
|
||||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
|
||||
*/
|
||||
/* 颜色变量 */
|
||||
/* 行为相关颜色 */
|
||||
/* 文字基本颜色 */
|
||||
/* 背景颜色 */
|
||||
/* 边框颜色 */
|
||||
/* 尺寸变量 */
|
||||
/* 文字尺寸 */
|
||||
/* 图片尺寸 */
|
||||
/* Border Radius */
|
||||
/* 水平间距 */
|
||||
/* 垂直间距 */
|
||||
/* 透明度 */
|
||||
/* 文章场景相关 */
|
||||
.zui-progress-circle.data-v-dbeba832 {
|
||||
--zui-progress-circle-debug-color: #f00;
|
||||
position: relative;
|
||||
}
|
||||
.zui-progress-circle-wrapper.data-v-dbeba832 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.zui-progress-circle-ring.data-v-dbeba832 {
|
||||
width: var(--zui-progress-circle-ring-size);
|
||||
height: var(--zui-progress-circle-ring-size);
|
||||
}
|
||||
.zui-progress-circle-slot.data-v-dbeba832 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: var(--zui-progress-circle-ring-width);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.zui-progress-circle-pointer.data-v-dbeba832 {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: var(--zui-progress-circle-pointer-rotate);
|
||||
transform-origin: var(--zui-progress-circle-pointer-center);
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
transition: transform 0.1s linear;
|
||||
}
|
||||
.debug-frame.data-v-dbeba832,
|
||||
.cross-v.data-v-dbeba832,
|
||||
.cross-h.data-v-dbeba832,
|
||||
.half-size.data-v-dbeba832 {
|
||||
position: absolute;
|
||||
}
|
||||
.debug-frame.data-v-dbeba832 {
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid var(--zui-progress-circle-debug-color);
|
||||
border-radius: 50%;
|
||||
}
|
||||
.cross-h.data-v-dbeba832, .cross-v.data-v-dbeba832,
|
||||
.half-size.data-v-dbeba832 {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: var(--zui-progress-circle-debug-color);
|
||||
mix-blend-mode: difference;
|
||||
}
|
||||
.cross-v.data-v-dbeba832 {
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
}
|
||||
.cross-h.data-v-dbeba832 {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
}
|
||||
.half-size.data-v-dbeba832 {
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
border: 1px solid var(--zui-progress-circle-debug-color);
|
||||
background-color: transparent;
|
||||
border-radius: 50%;
|
||||
}
|
||||
Reference in New Issue
Block a user