LCD与lvgl

LCD与lvgl

目录

LCD与lvgl

回顾

LCD 的驱动层讲解

1、LCD 的常见接口

2、我们的 LCD 的参数

3、LCD 的设备树说明

4、LCD 的设备树说明

5、如何移植 LCD 的驱动(重点)

LCD 的应用层开发

1:LCD 应用开发->界面开发的方法

2:LVGL 模拟器安装

3:LVGL 工程创建和基本组件讲解

4、应用(灯控系统)

5、LVGL 的工程文件说明

6、设置LVGL 的自启动(将刚刚生成的界面开机自启,开机后就显示这个界面)


回顾

-- 输入子系统:

-- 1:输入子系统的意义何在?

统一输入设备的开发框架
大家都不用再去生成设备文件
也不用考虑 要返回怎样的值
输入子系统统一做了!
返回值:世界标准的按键值
他相当于你开了一个键盘的一个按键
你的按键比较多 完全可以开发游戏机!
装几个开源模拟器

-- 2:输入子系统的开发框架是怎样的?

不在去生成设备文件
也不再返回数据了
只做两件:
1:把设备注册成功输入子系统
2:上报输入设备事件

-- 3:输入子系统如何注册一个输入设备的 ?

  • input_register_device();

-- 4:输入子系统的按键如何定义?

按键人家有一套标准:是世界级别的标准

-- 5:怎么上报输入子系统的数据的?

  • input_event();

-- inout_event是有很多衍生函数的。很多函数中真正执行的也就是input_event,所以只用记这个函数即可.

alt text

-- 6:输入子系统重复事件指的是什么意思?

按键按下/触摸屏按下 却没有松开
触发重复事件,连续相当于按键按下!

-- 7:ABS 事件有代表什么意思?

有一天你会在触摸屏接触到!
ABS 指的绝对事件->坐标事件

-- 8、补充:利用输入子系统的按键

  • 可以将按键开发成键盘,也就是将按键设计成,按下就相当于1,相当于键盘。

alt text

  • 还有就是游戏中的按键也是利用的输入子系统。

-- 摇杆键盘:其实就是利用adc+输入子系统。adc来控制电压不同,控制摇杆向前是一个电压,向左是一个电压,向右是一个电压,向后是一个电压。

LCD 的驱动层讲解

1、LCD 的常见接口

-- 普及一些知识:

-- 常见的 LCD 接口分为以下几种:

  • IIC/SPI 接口:OLED 单色/双色屏幕
  • SPI 的小型 LCD:一般不会超过 3.5 寸
  • 8080(也就是MCU的接口)接口的屏幕:单片机最常用大屏幕(7 寸)

alt text

-- 补充:什么是MCU接口?

目前最常用的连接模式,主要用于单片机领域里,因此得名MCU接口,现在很多中低端的手机,或手表有在使用,价格较为便宜。MCU接口其本质是由英特尔(Intel)提出的8080总线标准。8080是一种并行接口,所以MCU接口也被称为8080接口,也有人称其为DBI(Data Bus Interface)数据总线接口。数据位传输有8位、9位、16位、18位。连线信号详细见下表:

alt text

8080接口,其实并不是专用于LCD的接口,而是由早期的处理器发展而来的,用于CPU与外部的数据的快速传输(CPU外扩RAM、ROM),后来也被用于LCD和打印机数据传输领域。
8080 是通过 “读使能(RE)” 和 “写使能(WE)” 两条控制线进行读写操作。
ILI9341的8080通讯接口时序可以由STM32使用普通I/O接口进行模拟,但这样效率太低,为此STM32提供了一种特别的控制方法——使用FSMC接口实现8080时序。(如果芯片硬件少于100脚,是无法使用FSMC来控制液晶屏,只能使用SPI的方式来控制)
  FSMC 是 Flexible Static Memory Controller 的缩写,译为灵活的静态存储控制器。它可以用于驱动包括 SRAM、 NOR FLASH 以及 NAND FLSAH 类型的存储器。

-- MCU接口和RGB接口主要的区别是:

MCU接口方式:显示数据写入DDRAM,常用于静止图片显示。RGB接口方式:显示数据不写入DDRAM,直接写屏,速度快,常用于显示视频或动画用。

  • RGB 接口屏幕:MCU 接口裸屏, 最正常的接口之一。

早期接口定义,他的接口分辨率 一般不会超过 1024*768 (32bit/60FPS)
在工业领域还是比较常用

alt text

  • MIPI_DSI (嵌入式开发板) ,EDP(笔记本都是这种接口), LVDS(1080P 以下)

这三类接口是目前嵌入式也是社会上主流产品最常用的三大屏幕接口

-- 嵌入式而言来说:我们最常用就是 MIPI_DSI(现在用的开发版就是这个接口)

我们要了解这些接口
不代表要去学习这些接口的时序、协议、电气协议……
因为我们做开发而言,只考虑如何在不同的板子把这个不同屏幕点亮!

-- 我们所需要只有一个:如何移植驱动!


2、我们的 LCD 的参数

  • 分辨率 1024*600
  • 刷新率 60HZ -> 实际检测的是59.2hz
  • 色深: 标准 RGB888->UI 自转 ARGB8888
  • 接口: MIPI_DSI 接口 30pin 接口 寸

3、LCD 的设备树说明

实际上 LCD 在内核层已经有大量的内核驱动
而且驱动都是通用的。作为驱动开发者
我们只需要给这个驱动提供
设备信息(在设备树编写设备的信息)
真实的 LCD 驱动我们是不建议大家观摩查看的

LCD驱动的位置在此处:

/home/xyd/mycode/RK3588S/kernel/drivers/gpu/drm/panel/panel-simple.c

alt text

4、LCD 的设备树说明

-- 查找LCD的设备树,移植LCD的驱动就在此处做文章。

alt text

  • rk3588s-lcd-yyt.dtsi是LCD的设备树,是dsi0的源

alt text

alt text

5、如何移植 LCD 的驱动(重点)

-- 我拿到 LCD 之后我是怎么去移植:

  • 1:我清楚知道底层驱动我完全不需要修改
  • 2:我清楚知道我需要提供设备信息

-- 设备信息在哪里提供?

  • 2.1:参考官方、其他的芯片提供 LCD 的信息
  • 2.2:需要修改两个引脚:

alt text

-- tip:这里修改引脚的原因是:因为刚开始厂商给的原理图是错的,厂商怕被抄袭,所以后来拿到正确的引脚后,要将设备信息中的LCD的引脚改为正确的。

  • 2.3 修改时序(根据你买的屏幕厂商提供的手册为标准)

厂商提供的技术手册,(可以看到这些时序图),就照这个改,修改设备树中的相关内容

alt text

  • 修改初始化序列
    厂商会提供初始化序列
    按照厂商序列修改设备树

alt text

15 00 01 发一个字节
15 00 02 发两个个字节

如果要发送三个字节以上
就以23 00 开头

例如:要发送的数据是0xE0,0x02,要怎么写?

  • 就是15 00 02 E0 02

  • exit:

alt text

LCD 的应用层开发

1:LCD 应用开发->界面开发的方法

2:LVGL 模拟器安装

3:LVGL 工程创建和基本组件讲解

  • 细讲:页面切换、滑动块、动图 BUG

4、应用(灯控系统)

-- 做三个页面

-- 1、创建工程

alt text

-- 2、选择一个背景图片

alt text

alt text

  • 更改参数

alt text

-- 3、添加一个滑动块,将透明度调成0

alt text

alt text

-- 4、在我们添加的第一个页面主要做的是控制灯(控制灯的开关)

  • 也可以放点其他的,例如时钟和日历

alt text

alt text

  • 可以调节样式

alt text

  • 放置一个开关,再放置一个LED灯的图片(可以从阿里巴巴的矢量图标库中寻找),可以将图片调成黑色表示关灯。(将这两个图片下载为png格式,并更改名字)

alt text

alt text

alt text

  • 将色彩调暗表示关灯状态

alt text

  • 添加一个图片按钮(按下与释放显示不同画面)

alt text

alt text

alt text

alt text

  • 将组件放入滑动块的第一个页面

alt text

  • 编译测试(默认打开之后是灯亮,然后点击之后灯灭(也可以设置成相反的),并且滑动块也可滑动)

alt text

alt text


-- 至此第一个页面就做好了

-- 5、开始做第二个滑动块页面,做界面的转换(可以通过点击一个图片进入另一个页面)

  • 首先放入一个图片,后面可以通过这个图片进入另外一个页面。

alt text

  • 在这个图片的下面选择一个标签,写上名字

alt text

alt text

  • 将这两个组件放入滑动块的第二个页面(分别是标签和太阳图片)

alt text

  • 编译执行,查看效果

alt text

-- 之后再创建一个新页面

alt text

  • 给这个新页面改个名字

alt text

  • 给这个页面添加一个背景图片,并设置大小

alt text

  • 之后找到刚刚添加的太阳组件,右键点击事件添加

alt text

  • 选择要添加的事件

alt text

  • 选择点击之后会发生什么

alt text

  • 选择要载入的页面

alt text

alt text

  • 编译测试,发现点击组件过后,就会切换界面到新界面

alt text

  • 但是发现界面之后回不到原先的界面

  • 所以我们需要再添加一个类似的操作用来返回之前的页面

  • 下载一个返回图片

alt text

alt text

  • 重复之前的操作(点击返回图片后切换回之前的界面)

alt text

  • 编译测试,发现点击返回图片后,会切换回之前的界面

-- 6、最后一个滑动块页面做一个动图(.gif)和放一个二维码

  • 动图记得需要点击自动播放和延时60

alt text

alt text

-- 之后编译测试

-- 7、添加回调事件(给图片),达到按下图片执行自己定义的代码

alt text

alt text

alt text

  • 同时添加事件给开关,点击开关执行代码

alt text

  • 编译测试,发现没有地方打印信息

  • 于是去对应的工程中编译

./build/bin/simulator

-- 可以发现点击灯图片和开关都会打印语句

alt text


-- 8、后面我们想达成的功能:

  • 1、开关和灯图片的联动(达到关灯,开关也关。开关关,灯也关)

  • 2、让开关和灯图片都能控制开发板上的LED灯

-- (1)找到图片的回调函数(事件)所在位置(也就是按下图片会执行的函数)

alt text

-- (2)编写联动代码

alt text

-- 之后就实现了控制开关,图片按钮也会发生改变

-- 继续更改图片控制开关的代码

alt text

  • 完整代码
#include "events_init.h"
#include <stdio.h>
#include "lvgl.h"#include <sys/types.h>
#include <sys/stat.h>
#include <fcntl.h>
#include <unistd.h>#if LV_USE_GUIDER_SIMULATOR && LV_USE_FREEMASTER
#include "freemaster_client.h"
#endif#include <stdio.h>
//设置一个全局变量,代表LED灯的状态
int Led_status =0;//默认开机后灭extern lv_ui guider_ui;//main.c中的全局变量int ledfd = 0;//图片按钮的回调
static void screen_imgbtn_1_event_handler (lv_event_t *e)
{lv_event_code_t code = lv_event_get_code(e);switch (code) {case LV_EVENT_CLICKED:{Led_status = !Led_status;printf("LED image is pressed!\r\n");if(Led_status == 0){//将开关设置成关闭的状态guider_ui.screen_sw_1->state = LV_STATE_DEFAULT;lv_obj_invalidate((lv_obj_t *)guider_ui.screen_sw_1);close(ledfd);	}else if(Led_status == 1){//将开关设置成打开的状态guider_ui.screen_sw_1->state = LV_STATE_CHECKED;lv_obj_invalidate((lv_obj_t *)guider_ui.screen_sw_1);ledfd = open("/dev/xydbeep", O_RDWR);}break;}default:break;}
}//二值开关的回调
static void screen_sw_1_event_handler (lv_event_t *e)
{lv_event_code_t code = lv_event_get_code(e);switch (code) {case LV_EVENT_CLICKED:{lv_obj_t * status_obj = lv_event_get_target(e);int status = lv_obj_has_state(status_obj, LV_STATE_CHECKED) ? 1 : 0;printf("hello LED button!\r\n");Led_status = !Led_status;if(Led_status == 0){//将图片按钮设置成关灯的状态(灰色)lv_imgbtn_set_state(guider_ui.screen_imgbtn_1,LV_IMGBTN_STATE_RELEASED);close(ledfd);}else if(Led_status == 1){//将图片按钮设置成开灯的状态(彩色)lv_imgbtn_set_state(guider_ui.screen_imgbtn_1,LV_IMGBTN_STATE_CHECKED_RELEASED);ledfd = open("/dev/xydbeep", O_RDWR);}break;}default:break;}
}

-- (3)如果想更改灯的初始状态(可以在custom.c中更改),利用我们刚刚更改状态的函数

alt text

-- (4)让他们两个都控制LED灯,

  • 首先添加头文件
man 2 open

alt text

  • 然后写相关代码

这里写成蜂鸣器,效果更加明显

-- 之后编译

-- 然后我们准备在开发版上测验的话,需要更改Makefile

alt text

#CC := gcc
#CC := /home/xyd/mycode/RK3588S/buildroot/output/rockchip_xyd_rk3588s/host/bin/aarch64-linux-gcc
CC = aarch64-linux-gcc  #我要用交叉编译 这个LVGL
PRJ_DIR := $(makefile_path)/..
LVGL_DIR := $(PRJ_DIR)
SIMULATOR_DIR := $(makefile_path)
LVGL_DIR_NAME ?= lvgl
CFLAGS := -O3 -g0 -I$(LVGL_DIR)/ -I$(makefile_path)/ -I$(makefile_path)/rlottie -c -fmessage-length=0
CFLAGS += -I$(LVGL_DIR)/$(LVGL_DIR_NAME)/ -I$(LVGL_DIR)/$(LVGL_DIR_NAME)/srcLDFLAGS := -lSDL2 -L$(libfile_path) -lpthread -lstdc++ -lm -ldl
  • 先执行make clean

  • 之后再make

-- 随后连接开发版,将生成的文件推到adb终端中

alt text

-- 注意:同时还需要将蜂鸣器的驱动文件推进adb终端

alt text

-- 之后再终端加载驱动,并执行

alt text

-- 就可以将代码显示在开发板中了

5、LVGL 的工程文件说明

alt text

-- generated:

alt text

  • events_init.c events.init.h:

你所有在 Gui_Guerder 软件创建所有的事件的回调函数和关系都在这 二次开发就需要修改这个文件.

  • setup_scr_xxxxx.c

你在 Gui_Guerder 创建页面源码,你的页面实现源码均在此处

--

6、设置LVGL 的自启动(将刚刚生成的界面开机自启,开机后就显示这个界面)

  • /etc/init.d/rcS ->buildroot 的第一个启动脚本

alt text

这个脚本会自动搜索当前文件夹下所有的 S??*文件
逐一启动
最多建议一些驱动可以在此处加载
不建议应用程序也在此次加载
建议应用层程序放到 /etc/profile

-- ?和*的区别

?(问号):
匹配单个字符。
可以用来替代文件名中的任意一个字符,但只能匹配一个字符。
例如,file?.txt 会匹配 file1.txt、fileA.txt,但不会匹配 file12.txt 或 file.txt,因为问号只能匹配一个字符。

(星号):
匹配零个或多个字符。
可以用来匹配任意长度的字符,包括没有字符的情况。
例如,file
.txt 会匹配 file.txt、file123.txt、fileABC.txt,甚至 file1.txt 等等。

-- 我们也可以创建一个启动文件(注意名字要按照规则S??*),并且赋予权限

alt text

-- 由于在adb终端中只能用vim编译器,于是我们在ubuntu中编写好之后,再推到adb终端中

alt text

alt text

  • 再次查看adb终端中的这个文件,就是我们刚刚写的启动文件

alt text

-- 再次赋予权限

alt text

-- 连接上串口线,查看打印信息,发现程序开机之后就会打印这些信息

alt text

-- 于是我们设计代码开机加载驱动,生成设备文件

  • 重新编写启动文件,编写成开机自动加载驱动

alt text

  • 设置完成后增加权限

alt text

alt text

  • 之后重新开机,就可以看到设备文件已经生成

alt text

-- 最多建议一些驱动可以在此处加载,不建议应用程序也在此次加载 ,建议应用层程序放到 /etc/profile,这个文件也是自启动文件,这个文件是环境完全ok,最稳定的时候,已经完全开机的时候,才会最后加载脚本文件,这个时候你放入你的应用程序,才是最稳定的。

  • 在adb终端打开etc/profile文件,我们发现很难改

alt text

  • 于是我们先把这个文件从终端中拉出来,在ubuntu中修改,修改完之后再推到终端中

alt text

  • 更改/etc/profile文件,注意必须在最后一行添加

alt text

  • &的作用是将这个程序放到后台运行,如果不加,终端出不来

alt text

  • 但是加个&之后终端就可以显示出来了,是将程序放在后台运行了

alt text

-- 之后将更改过后的profile文件推进adb终端

alt text

  • 在终端中查看

alt text

alt text

-- 添加权限

alt text

-- 之后重新启动过后,就会自动进去我们刚刚写的界面


-- tip:如果联网的标识没有了,就执行这个指令,标识就会重新出现

sudo service network-manager restart

alt text

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/482969.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux -初识 与基础指令2

博客主页&#xff1a;【夜泉_ly】 本文专栏&#xff1a;【Linux】 欢迎点赞&#x1f44d;收藏⭐关注❤️ 文章目录 &#x1f4da; 前言&#x1f511; 概念一&#x1f511; 概念二 &#x1f4d6; man&#x1f4ac; echo&#x1f4c1; cp&#x1f4c2; mv&#x1f511; 概念三&am…

HCIE IGP双栈综合实验

实验拓扑 实验需求及解法 本实验模拟ISP网络结构&#xff0c;R1/2组成国家骨干网&#xff0c;R3/4组成省级网络&#xff0c;R5/6/7组成数据中 心网络。 配置所有ipv4地址&#xff0c;请自行测试直连。 R1 sysname R1 interface GigabitEthernet0/0/0ip address 12.1.1.1 255.…

大模型微调论文阅读 LoRA:LOW-RANK ADAPTION OF LARGE LANGUAGE MODELS 大型语言模型的低秩自适应

论文link&#xff1a;https://arxiv.org/pdf/2106.09685 code&#xff1a;https://github.com/microsoft/LoRA LoRA&#xff1a;Low-Rank Adaptation of Large Language Models Abstract 自然语言处理的一个重要范例是对通用领域数据进行大规模预训练&#xff0c;并适应特定任…

Ubuntu24.04配置DINO-Tracker

一、引言 记录 Ubuntu 配置的第一个代码过程 二、更改conda虚拟环境的默认安装路径 鉴于不久前由于磁盘空间不足引发的重装系统的惨痛经历&#xff0c;在新系统装好后当然要先更改虚拟环境的默认安装路径。 输入指令&#xff1a; conda info可能因为我原本就没有把 Anacod…

Python 深度学习框架之Keras库详解

文章目录 Python 深度学习框架之Keras库详解一、引言二、Keras的特点和优势1、用户友好2、多网络支持3、跨平台运行 三、Keras的安装和环境配置1、软硬件环境2、Python虚拟环境 四、使用示例1、MNIST手写数字识别 五、总结 Python 深度学习框架之Keras库详解 一、引言 Keras是…

电机参数辨识算法(3)——基于三角波电流注入的SPMSM全参数辨识策略

1.引言 电机参数辨识对提高电机控制性能具有重要意义。在之前的参数辨识专题中&#xff0c;介绍了基于无差拍预测电流控制的高频正弦电流注入参数辨识。高频正弦电流注入的话需要你控制器的带宽比较高&#xff0c;因此这种方法不适用于传统PI控制的电流环&#xff0c;还是得用…

Vulnhub靶场 Matrix-Breakout: 2 Morpheus 练习

目录 0x00 准备0x01 主机信息收集0x02 站点信息收集0x03 漏洞查找与利用1. 文件上传2. 提权 0x04 总结 0x00 准备 下载连接&#xff1a;https://download.vulnhub.com/matrix-breakout/matrix-breakout-2-morpheus.ova 介绍&#xff1a; This is the second in the Matrix-Br…

HTML5动漫主题网站——天空之城 10页 html+css+设计报告成品项目模版

&#x1f4c2;文章目录 一、&#x1f4d4;网站题目 二、✍️网站描述 三、&#x1f4da;网站介绍 四、&#x1f310;网站演示 五、⚙️网站代码 &#x1f9f1;HTML结构代码 &#x1f492;CSS样式代码 六、&#x1f527;完整源码下载 七、&#x1f4e3;更多 一、&#…

SpringMVC:入门案例

从此开始&#xff0c;我们步入SpringMVC的学习。 SpringMVC是一种基于Java实现MVC模型的轻量级Web框架 先来看一下web程序是如何工作的&#xff1a; 因为是异步调用&#xff0c;所以后端不需要返回view视图&#xff0c;将其去除前端如果通过异步调用的方式进行交互&#xff0…

【Windows 11专业版】使用问题集合

博文将不断学习补充 I、设置WIN R打开应用默认使用管理员启动 1、WIN R输入 secpol.msc 进入“本地安全策略”。 2、按照如下路径&#xff0c;找到条目&#xff1a; “安全设置”—“本地策略”—“安全选项”—“用户账户控制&#xff1a;以管理员批准模式运行所有管理员” …

Python学习38天

class Person:def __init__(self, name, age, job):self.name nameself.age ageself.job job# 重写函数返回属性def __str__(self):return f"{self.name}--{self.age}--{self.job}"# 冒泡排序法 def bubble_sort(my_list: list[Person]):"""冒泡排…

安装SQL Server 2022提示需要Microsoft .NET Framework 4.7.2 或更高版本

安装SQL Server 2022提示需要Microsoft .NET Framework 4.7.2 或更高版本。 原因是&#xff1a;当前操作系统版本为Windows Server 2016 Standard版本&#xff0c;其自带的Microsoft .NET Framework 版本为4.6太低&#xff0c;不满足要求。 根据报错的提示&#xff0c;点击链接…

鸿蒙开发:自定义一个任意位置弹出的Dialog

前言 鸿蒙开发中&#xff0c;一直有个问题困扰着自己&#xff0c;想必也困扰着大多数开发者&#xff0c;那就是&#xff0c;系统提供的dialog自定义弹窗&#xff0c;无法实现在任意位置进行弹出&#xff0c;仅限于CustomDialog和Component struct的成员变量&#xff0c;这就导致…

DTC控制,直接转矩控制详解

关于磁链矢量所在扇区及最优开关表的选择的思路分析和matlab/simulink实现 仿真参考袁雷老师的《现代永磁同步电机控制原理及MATLAB仿真》&#xff0c;但是由于书中所附代码和书中第四章中讲的实现不同&#xff0c;因此根据自己看的资料和理解重新整理并实现了一下。 这里采用…

css选择当前元素前面的一个元素

选择text-danger前面的ant-divider: .ant-divider:has( .text-danger) {display: none; }

Qt,如何从零开始入门!

Qt 是一个功能全面的跨平台开发框架&#xff0c;不仅可以用于开发桌面应用&#xff0c;还在嵌入式系统中扮演重要角色。即使没有图形化 IDE&#xff08;如 Qt Creator&#xff09;&#xff0c;你依然可以使用命令行工具和文本编辑器来快速构建功能强大的应用程序。本文将从手动…

oracle数据库的启动与关闭

一.oracle数据库的启动过程 启动实例&#xff08;Start the Instance&#xff09; 启动实例&#xff1a;一个Oracle数据库实例由内存结构和后台进程组成&#xff0c;启动实例时会加载这些内存结构和启动进程。实例是数据库的一个运行时环境&#xff0c;它包含了数据库的控制文…

最新版Chrome浏览器调用ActiveX控件之allWebOffice控件

allWebOffice控件概述 allWebOffice控件能够实现在浏览器窗口中在线操作微软Office及WPS办公文档的应用&#xff08;阅读、编辑、保存等&#xff09;&#xff0c;支持编辑文档时保留修改痕迹&#xff0c;支持书签位置内容动态填充&#xff0c;支持公文套红&#xff0c;支持文档…

AD软件如何快速切换三维视图,由2D切换至3D,以及如何恢复

在Altium Designer软件中&#xff0c;切换三维视图以及恢复二维视图的操作相对简单。以下是具体的步骤&#xff1a; 切换三维视图 在PCB设计界面中&#xff0c;2D切换3D&#xff0c;快捷键按住数字键盘中的“3”即可切换&#xff1b; 快捷键ctrlf&#xff08;或者vb快捷键也…

el-table 最简单的方法配置图片预览功能

el-table 最简单的方法配置图片预览功能 效果预览 1、安装插件 npm install v-viewernext viewerjs2、全局引入&#xff0c;配置main.js // main.js import VueViewer from v-viewer; import viewerjs/dist/viewer.css; app.use(VueViewer, {url: data-src, // 指定 data-* …