公告,活动,投诉接口对接完成
This commit is contained in:
@@ -50,7 +50,7 @@ const props = withDefaults(defineProps<Props>(), {
|
||||
|
||||
const values = computed(() => {
|
||||
if (props.value === '' || props.value === null || typeof props.value === 'undefined') return [];
|
||||
if (typeof props.value === 'number' || typeof props.value === 'boolean') return [props.value]
|
||||
if (typeof props.value === 'number' || typeof props.value === 'boolean') return [props.value];
|
||||
return Array.isArray(props.value) ? props.value.map((item) => '' + item) : String(props.value).split(props.separator);
|
||||
});
|
||||
|
||||
@@ -88,8 +88,8 @@ const handleArray = (array: Array<string | number>) => {
|
||||
};
|
||||
|
||||
const isValueMatch = (itemValue: any) => {
|
||||
return values.value.some(val => val == itemValue)
|
||||
}
|
||||
return values.value.some((val) => val == itemValue);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
118
src/components/Echarts/index.vue
Normal file
118
src/components/Echarts/index.vue
Normal file
@@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<div ref="chartRef" class="echarts-container" :style="{ width, height }"></div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onBeforeUnmount, watch, nextTick } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import type { EChartsOption, ECharts } from 'echarts';
|
||||
|
||||
// ==============================================
|
||||
// ✅ 【核心修复】正确的 Vue3 + TS Props 写法
|
||||
// ==============================================
|
||||
interface Props {
|
||||
width?: string;
|
||||
height?: string;
|
||||
options: EChartsOption;
|
||||
theme?: string;
|
||||
autoResize?: boolean;
|
||||
immediate?: boolean;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
options: () => ({}) as EChartsOption,
|
||||
theme: '',
|
||||
autoResize: true,
|
||||
immediate: true
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
ready: [chart: ECharts];
|
||||
click: [params: any];
|
||||
rendered: [];
|
||||
}>();
|
||||
|
||||
const chartRef = ref<HTMLDivElement>();
|
||||
let chartInstance: ECharts | null = null;
|
||||
|
||||
const initChart = () => {
|
||||
if (!chartRef.value) return;
|
||||
|
||||
if (chartInstance) {
|
||||
chartInstance.dispose();
|
||||
chartInstance = null;
|
||||
}
|
||||
|
||||
chartInstance = echarts.init(chartRef.value, props.theme);
|
||||
chartInstance.setOption(props.options);
|
||||
|
||||
emit('ready', chartInstance);
|
||||
emit('rendered');
|
||||
|
||||
chartInstance.on('click', (params: any) => {
|
||||
emit('click', params);
|
||||
});
|
||||
};
|
||||
|
||||
const updateChart = () => {
|
||||
if (chartInstance) {
|
||||
chartInstance.setOption(props.options, {
|
||||
notMerge: false,
|
||||
lazyUpdate: false
|
||||
});
|
||||
emit('rendered');
|
||||
}
|
||||
};
|
||||
|
||||
const resizeChart = () => {
|
||||
chartInstance?.resize();
|
||||
};
|
||||
|
||||
const getInstance = () => chartInstance;
|
||||
|
||||
const exportAsImage = (type: 'png' | 'svg' | 'jpeg' = 'png') => {
|
||||
return (
|
||||
chartInstance?.getDataURL({
|
||||
type,
|
||||
pixelRatio: 2,
|
||||
backgroundColor: '#fff'
|
||||
}) || ''
|
||||
);
|
||||
};
|
||||
|
||||
watch(() => props.options, updateChart, { deep: true });
|
||||
|
||||
onMounted(() => {
|
||||
nextTick(() => initChart());
|
||||
|
||||
if (props.autoResize && chartRef.value) {
|
||||
const resizeObserver = new ResizeObserver(resizeChart);
|
||||
resizeObserver.observe(chartRef.value);
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
resizeObserver.disconnect();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', resizeChart);
|
||||
chartInstance?.dispose();
|
||||
chartInstance = null;
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
resizeChart,
|
||||
updateChart,
|
||||
getInstance,
|
||||
exportAsImage
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.echarts-container {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
@@ -80,6 +80,14 @@ const options = ref<any>({
|
||||
} else {
|
||||
Quill.format('image', true);
|
||||
}
|
||||
},
|
||||
link: function (value) {
|
||||
if (value) {
|
||||
const href = prompt('输入文件链接地址');
|
||||
Quill.format('link', href);
|
||||
} else {
|
||||
Quill.format('link', false);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
<script setup name="Pageheader" lang="ts">
|
||||
import Breadcrumb from '@/components/Breadcrumb/index.vue';
|
||||
const slots = useSlots();
|
||||
const showSlot = computed(() => {
|
||||
|
||||
Reference in New Issue
Block a user