随笔分类 - 独立小功能(demo)
一些常用的功能
摘要：页面打印效果图: 之前使用 vue2 用的是 vue-print-nb 现在项目是 vue3 组件用的是 vue3-print-nb 使用方法 安装 npm i vue3-print-nb --save 或者 yarn add vue3-print-nb 在 main.js 中引入 import {
阅读全文
摘要：效果图: git 有人分享了一个滑块的组件代码,可以 npm 安装,也可以直接复制组件,在项目里引用.推荐在项目里引用,方便改代码 git 地址: https://gitcode.net/mirrors/monoplasty/vue-monoplasty-slide-verify.git 这个组件是
阅读全文
摘要：效果图: githup源码: https://github.com/shengbid/vue3-vite-demo/tree/main/src/views/demo/dragTime 一天的时间范围选择,在网上找的插件,不过大多都是新增,没有修改时的数据回显 在原来的组件上加了数据回显的处理,记录一
阅读全文
摘要：之前写了一个关于图片旋转拉伸的实现,最近正好用到这个小功能,看了一下,发现之前写的方法有一些复杂,自己在之前的基础上简化了一下,记录下方法 实现方法一:https://www.cnblogs.com/steamed-twisted-roll/p/13408245.html 效果图 平移部分的代码没啥
阅读全文
摘要：效果如图,图片可以跟随鼠标移动,旋转,拉伸,代码在谷歌浏览器和IE11验证了,其他浏览器没试过 本博客源码: https://github.com/shengbid/vue-demo 把这个功能放在vue项目里了, 这个项目里会把平时博客写的一些功能的代码都放在里面,有需要可以下载看看,有帮助的话点
阅读全文
摘要：之前项目登录时填写的是验证码,后来说要与时俱进,改成滑动图片的方式 这里的背景图和滑块是由后台返回的,前端传回移动距离给后端验证,这里我只写前端处理的部分的(毕竟后端的也不懂) 项目源代码,githup地址https://github.com/shengbid/vue-demo/tree/maste
阅读全文
摘要：最近项目中需要在图片预览时,可以旋转图片预览,在网上找了下,发现有一款功能强大的图片组件:viewerjs. git-hup: https://github.com/fengyuanchen/viewerjs 在git上看了下,有很多功能,不过我的项目只需要做个图片旋转功能,引入这个组件感觉大材小用
阅读全文
摘要：最近项目需要实现一个需求,用户上传图片时,图片大小超过4M,长宽超过2000,需要压缩到400k,2000宽高.在git上找到一个不错的方法,把实现方法总结一下: 安装image-conversion包 npm i image-conversion --save template <template
阅读全文
摘要：需求: 点击复制按钮,复制一个链接 在GitHub上找到一个clipboard组件,功能比较齐全 使用方法: 需求: 点击复制按钮,复制一个链接 在GitHub上找到一个clipboard组件,功能比较齐全 使用方法: 安装 npm i clipboard --save HTML <template
阅读全文
摘要：效果图: 我写的是vue的组件形式,方便复用,图片的宽高,缩放的比例可以自己定义 magnifier.vue <template> <div class="magnify"> <!-- 左边产品图片区域 --> <div class="left_contaner"> <div class="midd
阅读全文
摘要：进度条效果: 话不多说,上代码 使用css动画实现,看到一篇博客的启发,稍微修改了下, css实现的原理是用两个半圆一开始隐藏,再分别旋转180度,最后成为一个整圆 半圆效果,一开始右边的半圆在盒子左边 加上动画,实现右边进度条效果 代码: <div class="container"> <!--
阅读全文
摘要：最近写项目遇到一个需求,根据后台给的地址生成二维码,在网上找了下,qrcodejs2使用还是比较多,试了下也能实现需求,就整理下使用方法,方便以后使用 1. 安装包 cnpm i qrcodejs2 -S 2. 项目中使用 HTML: !-- 二维码弹框 --> <!-- 我的二维码是在弹框里,使用
阅读全文
摘要：vue提供了<transition></transition>和<transition-group></transition-group>实现元素状态的过渡.加入过渡效果可以使元素的展示和隐藏更自然. 如果在vue中使用了<transition></transition>标签,vue会检测是否有应用
阅读全文
摘要：vue项目中,HTML页面打印功能.在项目中,有时需要打印页面的表格, 在网上找了一个打印组件vue-print-nb 本博客源码: https://github.com/shengbid/vue-print,这里面只放了打印组件的代码,只需要这个功能的下载这个 https://github.com
阅读全文
摘要：使用方法 项目中引入 npm install html2canvas html代码 //html代码 <!-- 把需要生成截图的元素放在一个元素容器里,设置一个ref --> <div class="image_tofile" ref="imageTofile"> <!-- 这里放需要截图的元素,自
阅读全文