Skip to content

插件在APP端与renderjs冲突,h5不会 #8

@seifenk

Description

@seifenk

这样用的,h5调用都OK

<script setup lang="ts">
const toast = ref();
const notify = ref();
globalThis.uv = {
	toast: {
		show(params) {
			toast.value.show(params);
		},
		close() {
			toast.value.close();
		}
	},
	notify: {
		show(params) {
			notify.value.show(params);
		},
		close() {
			notify.value.close();
		}
	}
};
</script>

<template>
	<!-- 顶级 KuRootView -->
	<KuRootView />
	<uv-toast ref="toast"></uv-toast>
	<uv-notify ref="notify"></uv-notify>

	<!-- 或内部 KuRootView,无论放置哪一个层级都被允许,但仅可有一个! -->
	<!--  <div>
    <KuRootView />
  </div> -->
</template>

有个页面用了renderjs

<script module="kLineView" lang="renderjs">
import { init, dispose, registerIndicator } from 'klinecharts';
function toDecimal(num, length) {
	if (num.toString().indexOf('e') > -1) {
		return num;
	} else {
		let base = '1';
		for (let i = 0; i < length; i++) {
			base += '0';
		}
		return Math.round(+num * +base) / +base;
	}
}

let chart;

let hoverTimestamp = 0
 function getDecimalLength(num) {
	// 将数字转换为字符串
	const numStr = String(num);

	// 查找小数点的位置
	const decimalIndex = numStr.indexOf('.');

	// 如果没有小数点,返回 0
	if (decimalIndex === -1) {
		return 0;
	}

	// 计算小数点后的长度
	return numStr.length - decimalIndex - 1;
}
export default {
	mounted() {

		chart = init('kLine');
		chart.setStyles({
			grid: {},
			indicator: {
				tooltip: {    text: { marginBottom: 0 } }
			},
			candle: {
				bar: {
					upBorderColor: '#54b698',
					downBorderColor: '#e64f5e',
					upColor: '#fff',
					downColor: '#fff'
				},
				tooltip: {

					text: {
						marginBottom: 0
					},

					custom: [
						// { title: 'time', value: '{time}' },
						{ title: 'open', value: '{open}' },
						{ title: 'high', value: '{high}' },
						{ title: 'low', value: '{low}' },
						{ title: 'close', value: '{close}' },
						{ title: 'volume', value: '{volume}' }
					]
				}
			}
		});

		chart.subscribeAction('onCrosshairChange', (e) => {

		if(e.kLineData?.timestamp === hoverTimestamp)	return
		else {
			hoverTimestamp = e.kLineData.timestamp
			this.$ownerInstance.callMethod('updateHoverK', e.kLineData);
		}

		});
		chart.createIndicator('BOLL', true, {
			id: 'candle_pane'
		});

		chart.overrideIndicator({ name: 'BOLL', shortName: '' });

		chart.createIndicator('MA', true, {
			id: 'candle_pane'
		});
		chart.createIndicator('Custom', true, {
			id: 'candle_pane'
		});
	


		chart.loadMore((timestamp) => {
			if (timestamp) this.$ownerInstance.callMethod('fetchKdata', timestamp);
		});
	},
	methods: {
		onClear() {
			chart?.clearData();
		},
		onLastKchange(newValue, oldValue, ownerInstance, instance) {
			// 监听 service 层数据变更
			chart?.updateData(newValue);
		},
		onHistoryKchange(newValue) {

			hoverTimestamp=0
			if(newValue.length) {
					chart?.setPriceVolumePrecision( getDecimalLength(newValue[0].close)<2?2:getDecimalLength(newValue[0].close) ,getDecimalLength(newValue[0].volume)<2?2:getDecimalLength(newValue[0].volume))
					chart?.applyNewData(newValue);
			}


		},
		onMoreKchange(newVale) {
			chart?.applyMoreData(newVale);
		},
		onUpdateKchange(newVal) {
			newVal.forEach((item) => {
				chart?.updateData(item);
			});
		}
	}
};
</script>

APP开启插件,进入这个页面renderjs就报错,h5不会

Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions