前端开发
快速转台
PDF在线预览
http://view.xdocin.com/xdoc?_xdoc=你的文档地址 (必须是公开的文件外网能访问)
pre标签自动换行样式
margin: 0;
white-space: pre-wrap;
word-wrap: break-word;
文字边框
font-size: 24rpx;
color: transparent;
-webkit-text-fill-color: #FFFDF7;/*文字的填充色*/
-webkit-text-stroke: 1rpx #990714;
文字超出省略号
display: -webkit-box;
overflow: hidden;
white-space: normal !important;
text-overflow: ellipsis;
word-wrap: break-word;
-webkit-line-clamp: 3; //行数
-webkit-box-orient: vertical
//通用
white-space:nowrap;
word-break:break-all;
text-overflow:ellipsis;
不允许复制和选中
div,p,span {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
not supported by any browser */
}
css背景图四角斜角
width: 100px;
height: 100px;
/* border-radius: 15px; */
/* corner-shape: bevel; */
/* background-clip: padding-box; */
background: url('https://pic.cnblogs.com/avatar/2042148/20210712133320.png') center/cover no-repeat;
clip-path: polygon( 20px 0, calc(100% - 20px) 0, 100% 20px,
100% calc(100% - 20px), calc(100% - 20px) 100%,
20px 100%, 0 calc(100% - 20px), 0 20px
slice数组删除某个点击的值
[...arr.slice(0, index), ...arr.slice(index + 1, this.detailImage.length)]
css3放大模糊
- 设置3d元素距视图的距离的
transform: perspective(1px) scale(1.05);
VUECLI3 自适应
- 安装
postcss-px-to-viewport
插件
npm install postcss-px-to-viewport -D
- 文件
vue.config.js
写入
module.exports={
css: {
extract: false,//false表示开发环境,true表示生成环境
sourceMap: false,
loaderOptions: {
postcss: {
plugins: [
require("postcss-px-to-viewport")({
unitToConvert: "px", // 需要转换的单位,默认为"px"
viewportWidth: 1920, // 视窗的宽度,对应pc设计稿的宽度,一般是1920
viewportHeight: 1080,// 视窗的高度,对应的是我们设计稿的高度,我做的是大屏监控,高度就是1080
unitPrecision: 3, // 单位转换后保留的精度
propList: [ // 能转化为vw的属性列表
"*"
],
viewportUnit: "vw", // 希望使用的视口单位
fontViewportUnit: "vw", // 字体使用的视口单位
selectorBlackList: [], // 需要忽略的CSS选择器,不会转为视口单位,使用原有的px等单位。
minPixelValue: 1, // 设置最小的转换数值,如果为1的话,只有大于1的值会被转换
mediaQuery: false, // 媒体查询里的单位是否需要转换单位
replace: true, // 是否直接更换属性值,而不添加备用属性
exclude: /(\/|\\)(node_modules)(\/|\\)/, // 忽略某些文件夹下的文件或特定文件,例如 'node_modules' 下的文件
})
]
}
}
}
}
// npm run serve 启动就行了 会自动吧 px 转换成 vw , 生成后vw和你设置的px是一致的
层级数组处理
// 适用于Element Ui table组件
let arr = []
function fn(_options){
let options = {..._options}
if(options.hasOwnProperty('children')){
options.children = options.children.filter((item,index)=>{
item.id = Number(`${options.id}${index+1}`)
return fn(item)
})
}
return options
}
res.data.forEach((item,index)=>{
item.id = Number(`${index+1}`)
arr.push(fn(item))
})
hash路由模式 解析url中"?"开头#结束的参数
function GetRequest() {
var url = location.search; //获取url中"?"符后的字串
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
var strs = str.split("&");
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
}
}
return theRequest
}
时间
- 时间JS:http://momentjs.cn/
let nowtime = new Date().toLocaleString();
this.time=nowtime.replace(/\//g, "\-"); //生成-----2020-11-12 下午5:11:00
定时器加载到指定时间触发
let newTime = new Date('2020-11-25 10:50:10');
let oldTime = new Date('2020-11-25 10:50:15'); //5秒后
// oldTime.setMinutes(oldTime.getMinutes()+30)
let timer = setInterval(()=>{
newTime.setSeconds(newTime.getSeconds()+1);
console.log(`%c${newTime.getSeconds()}`,'color:red');
if(newTime.getTime()==oldTime.getTime()){
console.log('%c game-over','color:red');
clearInterval(timer);
}
},1000)
- 计算时间
export function getFormatArrDate(timeArr) {
console.log(timeArr)
let startTime = Date.parse(timeArr[0]);
let endTime = Date.parse(timeArr[1]);
console.log(startTime,endTime)
let res = [];
//计算时间差
for (let i = startTime; i <= endTime; i = i + 24 * 60 * 60 * 1000) {
let date = new Date(i);
res.push(`${date.getFullYear()}-${(date.getMonth()+1)<10?'0'+(date.getMonth()+1):date.getMonth()+1}-${date.getDate()<10?'0'+date.getDate():date.getDate()}`);
}
return res;
}
取消事件
pointer-events: none;
微信小程序隐藏滚动条
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
a标签下载文件
const a = document.createElement('a');//创建a标签
a.setAttribute('download', '');// 名字
a.setAttribute('href', '');// href链接
a.click(); // 自执行点击事件
document.body.appendChild(a);//插入body里
document.body.removeChild(a);//从body删除
blob文件 转url
// 请求增加 responseType:"blob"
let blob=new Blob([res.data],{type:res.data.type});
let url=window.URL.createObjectURL(blob);
base64转成Blob文件
function dataURLtoBlob(dataurl) {
var arr = dataurl.split(","),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {
type: mime
});
}
滚动条自定义样式
- 滚动条的设置
::-webkit-scrollbar 滚动条整体部分,可以设置宽度等
::-webkit-scrollbar-button 滚动条两端的按钮
::-webkit-scrollbar-track 外层轨道
::-webkit-scrollbar-track-piece 内层滚动槽
::-webkit-scrollbar-thumb 滚动的滑块
::-webkit-scrollbar-corner 边角
::-webkit-resizer 定义右下角拖动块的样式
博客内跳转
快捷工具.
- TOOLS内网穿:https://u.tools/
- 极简插件:( 谷歌扩展 ):https://chrome.zzzmh.cn/
- HX打包成IOS: https://www.cnblogs.com/liangsufen/p/14674916.html
- 图片编辑: https://www.photopea.com/
- WEB技术网址: https://developer.mozilla.org/zh-CN/docs/Web
- 网页音乐在线:https://music.qier222.com/#/explore
- 打开谷歌扩展:chrome://extensions/manage/index
- 极简壁纸:https://bz.zzzmh.cn
- 富文本:https://www.wangeditor.com/
- 在线PS:https://ps.gaoding.com/#/
- WTM框架:https://wtm-front.github.io/wtm-cli/#/quickstart
- 前端图表:http://www.ppchart.com/#/
- 前端上传UI代码一键生成平台:https://code.fun/
- 内网穿透Natapp:https://natapp.cn/login
- 内网穿透I1996:https://www.i996.me/
- HTML5.PLUS官网:https://www.html5plus.org/#home
- 版本管理volta: https://www.jianshu.com/p/d8dea88df0c3
- 学习CSS: https://cssreference.io/
- element表单速成: https://mrhj.gitee.io/form-generator
- svg图转字体: https://icomoon.io/app/#/
- 低代码开发: http://aicode.shagua.wiki/uni/index.html#/
有问题联系QQ1291481728或在下方评论,会在第一时刻处理。