html2canvas进行转化的时候ant-desgin-vue中的a-switch选中状态显示异常

于 2024-02-04 14:45:40 发布
阅读量434 收藏 8
点赞数 9
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_54968142/article/details/136025865
版权
文章讲述了html2canvas在处理CSS3中transform属性时遇到的问题，通过将a-switch的yes状态下的transform转换为margin-left解决，并提到46%是一个通用的测试数值，确保动画效果不受影响。
摘要由CSDN通过智能技术生成

本质上是由于html2canvas对于css3中的transform属性转换有问题，不能很好的转换，而a-switch的yes状态是改变transform实现的

知道了问题的原因，问题就好解决了，只需要将transform的转换改成一般形式，比如margin-left就好了，由于a-switch的伪元素继承父元素的动画效果，所以动画也不会消失

这样就ok了，46%是一个测试出来效果差不多的数值，如果用具体数值的话switch尺寸不一样，就不能做到通用。

达拉~
关注
html2canvas图片的文字偏移,html2canvas在Vue项目踩坑-生成图片偏移不完整
weixin_42299873的博客
06-04 3505
背景最近做一个Vue项目需求是用户长按保存图片，页面的数据是根据不同id动态生成的，页面渲染完生成内容图片让用户长按保存的时候，把整个页面都保存起来。在项目遇到的坑是图片能生成，可是生成的图片总是往左偏移一部份内容，让显示的图片不完整页面渲染的内容，而生成的图片效果要跟页面渲染的内容一致，下面是渲染的效果而实际生成的图片是不完整的测试：多次生成图片发现图片发生偏移的位置都不相同，而同一个特性是往左...
【vue 后台管理模板 ranAdmin 支持ant-design/ant-design/electron-plus/electron-plus-electron】
ranshakalove的博客
01-12 1773
vue 后台管理模板 支持ant-design/ant-design/electron-plus/electron-plus-electron
ant design vue a-table表格中插入操作按钮（以switch开关 [a-switch]为例）
LL__Sunny的博客
07-24 5355
ant design vue a-table表格中插入操作按钮（以switch开关 [a-switch]为例）
vue el-switch 列表开关状态显示有误 全部关闭的问题
fury的博客
03-10 1819
el-table-column label="状态 string传值" align="center" width="100" prop="status"><el-table-column label="状态 int传值" align="center" width="100" prop="status"><el-table-column label="状态" align="center" width="100" prop="status">inactive-text="关"active-text="开"
vue2的switch用法
最新发布
chabaimgg的博客
01-24 982
/根据mode的值的不同，进行匹配，default是在所有都匹配不上后才是它。
html2canvas踩坑系列，背景图渲染模糊，transform兼容问题，br标签文字异常，音乐重叠
weixin_42957894的博客
01-20 3355
背景图渲染模糊 开发场景：使用html2canvas截图的时候，需要截图的dom不要用background属性，会模糊 解决方案：直接把背景图用作img标签塞进去 transform兼容问题 开发场景：使用html2canvas截图的时候，需要截图的dom内css不要用transform实现居中，会丢失 解决方案：用margin实现 br标签文字渲染异常 开发场景：使用html2canvas截图的时候，使用换行会导致文字缩到一团 解决方案：直接用单行的标签替换掉整段的标签 ios音乐重叠 开发场景：进入
html2canvas生成的图片偏移不完整的解决方法
夏已微凉、
03-18 2455
【代码】html2canvas生成的图片偏移不完整的解决方法。
html2canvas.js--自定义高度
01-12
修改html2canvas.js源码,可以解决截图不全问题.使用方式参考 http://blog.csdn.net/q2365921/article/details/54377479
在vue中使用pdfjs-dist把pdf文件转为canvas
vip.khan的博客
07-12 2127
因为pdf存在分页的情况所以加了个目录，以下就是pdf转为canvas的最终成果 上代码 1、html <template> <div class="pdfEditor"> <div class="editor-pages" v-loading="loading"> <div id="container_catalog"> <div ..
Vue 插件 html2canvas 将页面内容生成图片
grootbaby
03-11 3329
官网：http://html2canvas.hertzen.com/ 1、安装： npm install --save html2canvas 2、引入： import html2canvas from "html2canvas" 3、将特定内容转成图片 　　特定内容包裹的 div 添加 ref 属性标记 <div class="container" ref="imageDom"></div> /** * 将页面指定节点内容转为图片 */ generat..
重写ant-design-vue中a-swtich组件（仿element-ui中el-swtich），重写后可传入数字或字符串类型
thj13896076523的博客
08-12 1516
这样做会更加的灵活，且不用去…ant-design-vue中的a-swtich只能传入true,false,不能像el-swtich传入inactive-value，active-value。// 传入修改后的props,和继承原生的scopedSlots。// 传入修改后的props,和继承原生的scopedSlots。// 继承原生switch的props。.........
html2canvas使用指南
Mr_LiangDaGe的博客
05-05 4470
html2canvas的简单使用
antd vue3 （a-switch开关）
weixin_54682264的博客
07-01 3681
antd vue的a-switch
element中el-switch用法汇总（拓展：el-switch开关点击弹出确认框时，状态先改变，点击确认/取消失效，怎么解决?）
甜心的专栏
11-08 6650
element中el-switch用法汇总（拓展：el-switch开关点击弹出确认框时，状态先改变，点击确认/取消失效，怎么解决?）
前端问题集（1）：Ant Design Vue 中 switch 实现前端修改用户状态不需要重新请求后台数据
Yooao的博客
06-26 5305
今天在自建系统编码时，发现在前端页面通过 switch 按钮实现用户状态切换时，涉及到实时刷新和如何减少后台请求次数的问题，这里记录一下我自己的解决方法。
关于html2canvas的bug总结
Gemini_7S的博客
07-06 4046
1、使用html2canvas无法渲染图片的情况 2、生成html2canvas，顶部大量空白，页面显示不全
vue + html2canvas + ArcGIS 3.x 地图一键截图功能踩坑之路(三)
xlostx的博客
04-01 945
4、地图移动之后再截图，截图的点线位置和视图的不一样，图片有偏移 这个问题表现在，地图底图正常，绘制的点线层和截图前不一样。点线层偏的老远。 最终解决方案： html2canvas用onclone(),把svg的位移从transform换成用viewbox控制。 先看渲染出来的代码，地图底图是一个div，然后地图上自己画的线、打的点什么的全都在一个svg里面。 后面测出来好像和电脑的分辨率有点关系，又发现是在html2canvas转换的时候svg的transform有点失灵，查资料说..
Ant Design of Vue —— setFieldsValue方法 动态操作Switch组件
热门推荐
银滴子的博客
04-09 1万+
在开发中经常使用Form组件管理表单，这次想通过form提供的setFieldsValue()方法动态改变Switch组件状态，却没有生效。 加入valuePropName属性之后，就可以使用动态操作Switch组件了。 <a-switch v-decorator="['haveChildren', { valuePropName: 'checked',rules...
html2canvas - 将网页元素转换为图片的Vue.js实现
资源摘要信息:"html2canvas是一个开源的JavaScript库，它允许用户将HTML页面或页面的部分区域直接转换成canvas元素，进而进行截图。这个过程并不依赖于服务器端的处理，因此可以实现在客户端快速生成页面截图。它...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值