当前位置:首页 > 编程教程 > vue技术文章 > Vue press 支持图片放大功能的实例代码

Vue press 支持图片放大功能的代码分享

  • 发布时间:
  • 作者:码农之家
  • 点击:158

这篇文章主要知识点是关于vue、press、图片放大、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

Vue.js快速入门
  • 类型:Vue.js入门大小:26581 MB M格式:PDF作者:申思维
立即下载

Vue press 支持图片放大功能的实例代码

介绍

VuePress 由两部分组成:一个以 Vue 驱动的主题系统的简约静态网站生成工具,和一个为编写技术文档而优化的默认主题。它是为了支持 Vue 子项目的文档需求而创建的。

由 VuePress 生成的每个页面,都具有相应的预渲染静态 HTML,它们能提供出色的加载性能,并且对 SEO 友好。然而,页面加载之后,Vue 就会将这些静态内容,接管为完整的单页面应用程序(SPA)。当用户在浏览站点时,可以按需加载其他页面。

前两天接触到了 Vuepress ,颜值很高,界面简洁,容易上手。于是打算把博客从 hexo 迁移过去。

但是发现图片是不能点击的。 Markdown 在渲染的时候连 a 标签都没有添加,不仅不能直接点,也不能放大。然而我的博客中是有很多大图的,所以这个功能是刚需。

我试了下最新版本 1.x alpha 还是没有这个功能。所以直接自己动手了。

由于我并不熟悉 vue ,所以从源代码上改比较困难。

最后我使用了 fancybox 库,并开发了一个辅助 VSCode 插件。

引入 fancybox

.vuepress/config.js 文件的 head 标签中可以直接添加 fancybox 的 cdn,由于它依赖 jquery,所以还要引入 jquery。

module.exports = {
 head: [
  // add jquert and fancybox
  ['script', { src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js' }],
  ['script', { src: 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.2/jquery.fancybox.min.js' }],
  ['link', { rel: 'stylesheet', type: 'text/css', href: 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.2/jquery.fancybox.min.css' }]
 ],
 themeConfig: {
  // your config
 }
}

然后修改图片的 markdown

![xx](sss)

将上面的这种格式修改为下面这种,手动添加 a 标签、 data-fancybox 和 href 属性即可。

<a data-fancybox title="xx" href="sss" rel="external nofollow" >![xx](sss)</a>

但是这样手动添加太麻烦了,并且想取消掉也不方便。

所以我写了一个 VSCode 插件,来批量格式化。

VScode 商店搜索 vuepress-img-format 安装即可。

Vue press 支持图片放大功能的实例代码

调用命令 img format 可以格式化当前文档的所有图片,img reset format 可以重置格式化,效果如下:

Vue press 支持图片放大功能的实例代码

当然也可以使用内置的快捷键:

 

快捷键 格式化 重置格式化
Windows/Linux Ctrl + Shift +8 Ctrl + Shift + 8
Mac Cmd + Shift + 8 Cmd + Shift + 9

 

格式完了之后就可以点击放大图片了。

Vue press 支持图片放大功能的实例代码

总结

以上所述是小编给大家介绍的Vue press 支持图片放大功能的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持!

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

您可能感兴趣的文章:

  • 详解基于VuePress 轻量级静态网站生成器如何实现
  • 实例详解webpack4+express+mongodb+vue实现增删改查
  • vue 相关电子书
    学习笔记
    网友NO.704153

    vue实现裁切图片同时实现放大、缩小、旋转功能

    本篇文章主要介绍了vue实现裁切图片同时实现放大、缩小、旋转功能,分享给大家,具体如下: 实现效果: 裁切指定区域内的图片 旋转图片 放大图片 输出bolb 格式数据 提供给 formData 对象 效果图 大概原理: 利用h5 FileReader 对象, 获取 input type="file"/ “上传到浏览器的文件” ,文件形式 为base64形式, 把 base64 赋给canvas的上下文。 然后给canvas 元素上加入对(mousedown)监听事件。 当用户鼠标左键在canvas按下时: 挂载对 window 对象mousemove事件 --- 获取 鼠标移动x,y距离.从而操作 canvas里的图像的位置移动。 挂载对 window 对象mouseup 事件, 清除 mousemove事件的绑定。(同时该事件触发后会被删除) 剩下的 放大、缩小 、 旋转 是对 canvas 对象的操作/坐标体系的操作。具体api详见mdn canvas 文档 代码 dom.js export const on = ({el, type, fn}) = { if (typeof window) { if (window.add……

    网友NO.427526

    基于vue2.x的电商图片放大镜插件的使用

    最近在撸一个电商网站,有一个需求是要像淘宝商品详情页那样,鼠标放在主图上,显示图片放大镜效果,找了一下貌似没有什么合适的vue插件,于是自己撸了一个,分享一下。小白第一次分享,各位大神莫见笑。 vue-piczoom picture magnifier component for Vue.js 2.x 基于vue2.x的电商图片放大镜插件 GIF 动画截图 Build Setup 使用步骤 # 安装 installnpm install vue-piczoom --save 使用 use --script import PicZoom from 'vue-piczoom'export default { name: 'App', components: { PicZoom }} --html pic-zoom url="static/imac2.jpg" :scale="3"/pic-zoom Config 配置 props describe default url 图片地址 string required big-url 大图地址 string null scale 图片放大倍数 number 2.5 scroll 放大时页面是否可滚动 boolean fasle Suggest 注意事项 组件默认是100%的高宽,所以建议将组件包含在一个有固定高宽的容器内。如: div class="pic-box" !--pic-box:width:500px;heig……

    <
    1
    >

    Copyright 2018-2020 www.xz577.com 码农之家

    版权投诉 / 书籍推广 / 赞助:520161757@qq.com