介绍 & lt; template>
,,,& lt; canvas ref=皉efChart",:身高=皊etHeight"祝辞& lt;/canvas>
& lt;/template>
& lt; script>
import {defineComponent的不同之处是,onMounted,裁判,,注入,,watch },得到“vue";
import Chart 得到“chart.js";
{import deepCopy },得到“@/帮助/index";
export default defineComponent ({
,,,的名字:,“QtChart",
,,,道具:,{
,,,,,,,类型:,{
,,,,,,,,,,,类型:,字符串,
,,,,,,,,,,,要求:,真的,
,,,,,,,,,,,默认值:,“line",
,,,,,,,},
,,,,,,,数据:,{
,,,,,,,,,,,类型:,对象,
,,,,,,,,,,,要求:,真的,
,,,,,,,,,,,默认值:,(),=祝辞,({}),
,,,,,,,},
,,,,,,,选择:,{
,,,,,,,,,,,类型:,对象,
,,,,,,,,,,,默认值:,(),=祝辞,({}),
,,,,,,,},
,,,,,,,身高:,{
,,,,,,,,,,,类型:,,
,,,,,,,,,,,默认值:,0,
,,,,,,,},
,,,,,,,refKey:, {
,,,,,,,,,,,类型:,字符串,
,,,,,,,,,,,默认值:,空,
,,,,,,,},
,,,},
,,,的设置(道具),{
,,,,,,,const refChart =,裁判();
,,,,,,,//,初始化方法
,,,,,,,const init =,(),=祝辞,{
,,,,,,,,,,,const canvasChart =, refChart.value ? .getContext (“2 d");
,,,,,,,,,,,const chartHelper =, new 图表(canvasChart, {
,,,,,,,,,,,,,,,类型:,props.type,
,,,,,,,,,,,,,,,数据:,deepCopy (props.data),
,,,,,,,,,,,,,,,选择:,props.options,
,,,,,,,,,,,});
,,,,,,,,,,,看(道具、,(),=祝辞,{
,,,,,,,,,,,,,,,chartHelper.data =, deepCopy (props.data);
,,,,,,,,,,,,,,,chartHelper.options =, props.options;
,,,,,,,,,,,,,,,chartHelper.update ();
,,,,,,,,,,,});
,,,,,,,,,,,//,附加一个实例给refChart
,,,,,,,,,,,refChart.value.instance =, chartHelper;
,,,,,,,};
,,,,,,,//,设置高度
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
这篇文章将为大家详细讲解有关vue2美元的裁判在vue3组合式API中的替代方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
如果你有过vue2的项目开发经验,那么对美元参就很熟悉了。由于vue3的断崖式的升级,在vue3中如何使美元用参考文献呢?想必有遇到过类似的问题,我也有一样的疑惑。通过搜索引擎和github,基本掌握如何使用美元。参考文献在vue3中使用组合式API的函数裁判来代替静态或者动态html元素的应用。
最近业余在学习vue3项目《蜡笔(蜡笔)管理模板:vue3 + Vuex4 + Ant Design2》开发,这两天迭代推进了一点,实现了图表图表组件,写文章的时候发现提交代码的承诺有错别字。
在vue3中使用组合式API的设置()方法的时候,无法正常使用。参美元,但可以使用新的函数ref ()。
下面代码摘自:https://github.com/QuintionTang/crayon/blob/feat-dashboard/src/qtui/components/Chart.vue
