随笔分类 - vue.js
前端框架
摘要：一，安装pinia liuhongdi@lhdpc:/data/vue/responsive$ npm -S install pinia 安装完成后查看已安装的版本: liuhongdi@lhdpc:/data/vue/responsive$ npm list pinia responsive@0.
阅读全文
摘要：一，官方文档地址: https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html 二， 代码: 1,router配置 { path: '/:pathMatch(.*)*', name: 'NotFound',meta:{titl
阅读全文
摘要：一，vue: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51
阅读全文
摘要：一，代码： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51
阅读全文
摘要：一，代码: 官方文档地址： https://element-plus.gitee.io/zh-CN/component/breadcrumb.html 代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 2
阅读全文
摘要：一，官方文档地址: https://element-plus.gitee.io/zh-CN/component/checkbox.html#%E4%B8%AD%E9%97%B4%E7%8A%B6%E6%80%81 二，代码： 1,html代码 1 2 3 4 5 6 7 8 9 10 11 12 1
阅读全文
摘要：一，代码： 说明：在main.js中增加代码,在路由跳转后滑动到顶部,如下 //页面加载后滑至顶部 1 2 3 router.afterEach(() => { window.scrollTo(0,0); }); main.js的例子如下: 1 2 3 4 5 6 7 8 9 10 11 12 13
阅读全文
摘要：一，前端代码： 说明：前端使用vue.js3+axios,主要通过canvas.toBlob这个api实现canvas转文件上传 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 3
阅读全文
摘要：一，js代码: <template> <div> <div style="width:800px;margin: auto;display: flex;flex-direction: column;"> <div>请选择上传图片: <input type="file" id="back" ref="
阅读全文
摘要：一，js代码： <template> <div> <div style="width:800px;margin: auto;display: flex;flex-direction: column;"> <div>请选择上传图片: <input type="file" id="back" ref="
阅读全文
摘要：一，安装axios库 1，相关地址 官网: https://axios-http.com/ 代码地址: https://github.com/axios/axios 2,安装 liuhongdi@lhdpc:/data/vue/axios$ npm install --save axios adde
阅读全文
摘要：一，js代码: <template> <div> <img id="img" src="/static/image/dog.jpg" style="width:300px;" /><br/> <button @click="downImgByUrl">down by url</button> <bu
阅读全文
摘要：一，js代码 <template> <div style="position:relative;"> <div style="width: 700px;margin: auto;"> <h1>亮度/对比度/饱和度</h1> <div><input type="file" accept="image/
阅读全文
摘要：一，js代码: <template> <div style="position:relative;"> <div style="width: 700px;margin: auto;"> <h1>反色/灰度/褐色</h1> <div><input type="file" accept="image/*
阅读全文
摘要：
一，js代码: <template> <div style="position:relative;"> <div style="width: 700px;margin: auto;"> <h1>色调/色相 调整</h1> <div><input type="file" accept="image/*
阅读全文
一，js代码: <template> <div style="position:relative;"> <div style="width: 700px;margin: auto;"> <h1>色调/色相 调整</h1> <div><input type="file" accept="image/*
阅读全文
摘要：一,js代码: <template> <div style="background: #ffffff;" id="root" > <div style="width: 700px;margin: auto;"> <div><input type="file" accept="image/*" @ch
阅读全文
摘要：一，js代码: <template> <div style="background: #ffffff;" id="root" > <div><button @click="restore">还原</button><button @click="flipx">水平镜像</button> <button
阅读全文
摘要：
一，js代码: <template> <div> <div style="width: 800px;margin: auto;"> <div id="wrapper" style="display:none;position: relative;overflow: hidden;" > <img i
阅读全文
一，js代码: <template> <div> <div style="width: 800px;margin: auto;"> <div id="wrapper" style="display:none;position: relative;overflow: hidden;" > <img i
阅读全文
摘要：一，安装用到的第三方库 1，安装: liuhongdi@lhdpc:/data/vue/pdf/image2pdf$ npm i -S vuedraggable@next added 2 packages in 11s 2,查看已安装的版本: liuhongdi@lhdpc:/data/vue/pd
阅读全文
摘要：一，js代码: <template> <div style="width:100%;height:100vh;" @mousemove="onRotate" @mouseup="onUp"> <div ref="target" style="width:300px;height:100px;posi
阅读全文