本文介绍: 前段日子封装一个组件,大概功能为:给定一些数据用户手动配置一些参数如图),点击提交后,实现图表渲染,除此之外还有其他一些功能。(还没和后端对接数据自己mock今天组件移植公司里面程序时,发现坐标一直无法显示刻度,如下图所示排插了三小时,最终问题定位在了y轴配置上。${官网写法:而自己则写了两者取其中,不明白自己封装组件为什么正常,但是移植后,放进dialog里时便出现了问题。好歹搞了自己三小时,记录一下吧。以后要按规范来。

正文

前段日子封装一个组件,大概功能为:给定一些数据用户手动配置一些参数如图),点击提交后,实现图表渲染,除此之外还有其他一些功能。(还没和后端对接,数据为自己mock
细节就不说了,第一个页面大概如此

最终渲染出来的表格
今天组件移植公司里面程序时,发现纵坐标一直无法显示刻度,如下图所示可以看到左边两个y轴都是没有刻度的
排插了三小时,最终问题定位在了y轴配置上。

// 组件代码
const yAxis = {
            type: 'value',
            name: `单位:${item.unit}`,
            position: item.axisLocation === '0' ? 'left' : 'right', // y轴的位置
            offset: item.axisLocation === '0' ? 70 * (++leftIndex - 1) : 70 * (++rightIndex - 1),
            alignTicks: true, // 开启配置自动对齐刻度
            axisLine: {
              show: true,
              onZero: false,
              // lineStyle: { color }
              lineStyle: { color: 'black' }
              // lineStyle: 'black' // 这里倒是可以用,后面在移植组件的时候就出现了问题
            },

官网写法在这里插入图片描述
在这里插入图片描述
由上可知,要实现对颜色的配置,有以下两种方法

  1. option内,用对象形式,lineStyle: { color: ‘black’ }
  2. option外,可以直接修改属性值,yAxis.axisLine.lineStyle. color = ‘black

而自己则写了两者取其中,不明白自己封装的组件内为什么正常,但是移植后,放进dialog里时便出现了问题。好歹搞了自己三小时,记录一下吧。以后要按规范来。

杂记

Q1在父组件内修改子组件的参数

F1:使用ref修改

在父组件里,给子组件加上ref标签,便可以获子组件里面数据,并对其进行修改
在这里插入图片描述
在这里插入图片描述

F2:使用props实现父传子

通过props可以实现值在父组件内修改(不过子组件内就得接收父组件里面传来的值了)

原文地址:https://blog.csdn.net/dashenfeng1/article/details/130510027

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。

如若转载,请注明出处:http://www.7code.cn/show_12857.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注