~婷宝~-CSDN博客

原创 echarts 3D圆柱图

这圆柱图看起来是不是很像3d的呢。但它不是真正的3d，其实是用《象形图》拼积木一样拼凑出来的。哈哈哈，vue2、vue3两种写法有兴趣就往下看，废话不多说，上代码。

2022-08-19 09:39:54 1741 1

网上百度的方法都试了遍，有的说新建的 canvas的、有的说截图的图片不要用背景要用<img/>标签的。各种龙飞凤舞的都有。但问题并没得到解决。在一筹莫展之时灵光一闪：会不会是html2canvas的版本问题呢？一试果然如此。把html2canvas降到 v1.0.0版本生成的图片无比清晰。终于想到了解决方法。太开心了。下载地址：https://github.com/niklasvh/html2canvas/releases/tag/v1.0.0 //生成海报

2021-08-10 21:59:45 3904 7

原创 vue-emoji表情组件

前段时间公司需求用到emoji表情包，在网上找了一下emoji表情插件比如：Emoji-vue：这个插件，看起来都是有点问题，比如每次插入表情的时候，光标永远都定位在文本框开始的位置...也找了一些jquery表情包插件，感觉和需求都不符，所以，我决定自己轮子（组件）。效果地址：...

2020-07-13 16:23:35 5302 4

原创解决html2canvas截图不全问题

最近公司要求做一个生成海报，html2canvas是个不错的选择，随之而来的问题，当页面的滚动条不在顶部的时候出现，截图不全，顶部出现白屏问题，我当时是各种百度各种搜索问题还是没有得到解决。我知道的原因是：滚动了滚动条而造成的，html2canvas是根据屏幕截图进行截图，如果内容高度高于屏幕时，就会出现这样的问题我的解决方法：当用户点击分享海报按钮时：1、获取滚动条的位置，body...

2020-04-19 17:45:21 12541 9

原创 vue3.0全局变量app.config.globalProperties的使用

app.config.globalProperties是一个用于注册能够被应用内所有组件实例访问到的全局属性的对象。是Vue2中Vue.prototype使用的一种替代

2022-10-12 10:53:20 5957 1

原创生成随机数

//字母+数字组合function RandomAlphanumericNumber(number) {// number 是想生成几位的随机数 let valueNum = ''; let chars = [ '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', '...

2022-02-09 11:21:07 453

原创获取url参数

function getQueryVariable(name) { let search = window.location.search.substr(1) || window.location.hash.split("?")[1]; let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); let r = search ? search.match(reg) : null; if (r != .

2022-02-09 10:53:34 331

原创将base64转换为文件

//将base64转换为文件function dataURLtoFile(base64) { var arr = base64.split(','), bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n) } return new File([u8.

2022-02-09 10:44:33 1997

原创 pc端页面等比缩放到移动端

PC端的管理系统要求等比缩放到手机端。PC端页面显示：手机端显示：项目是用vue-cli3.0构建的，直接在public 文件夹 index.html 的head 加入：<meta name="viewport" content="user-scalable=yes">完成~...

2021-03-01 16:57:39 2557

原创 vue scrollTop 平缓滚动回到顶部

当页面很长很长的时候，返回到顶部增强用户体验是必不可少的功能。一般监听都只是监听body。这个组件我还加入了指定元素只要传：domName参数：类名：".texts" 或者 ID："#texts"。如果不传默认是：body。详情请看代码TOTop组件：<template> <div class="back-to-top" ref="btn" @click="totop"></div></template><script

2021-01-07 17:19:35 1369

原创 flex布局图片九宫格

需求：一张图片时宽度满屏，两张图片时各占一半，三张图片时一行展示3张图片，四张图片时一行展示2张图片五张~九张时一行展示3张我第一反应是想到：浮动，或者用行内元素。浮动跟行内元素：功能是可以实现的，我个人觉得会比较麻烦的，要自己各种算内边距图片的占比等等，还算的边距不统一。后面灵光一闪，怎么就没有想到用flex 布局呢！！！!（被自己蠢哭了）推荐可以看下阮一峰 Flex 布局教程简单明了，通俗易懂，有兴趣的童鞋可以去看一下。话不多说了，上看代码：需求1clas..

2020-12-12 13:52:40 1247

原创 vue 实现拖动元素

HTML：<div class="box" id="box"> <div v-drag class="drag"></div></div>//注册局部组件指令directives: { drag: function(el) { let dragBox = el; //获取当前元素 let imgMakeBox;//父盒子 let moveW = 0;//移动元素的width let moveH = 0; .

2020-10-26 15:25:38 2429 1