前端开发

快速转台

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
}

时间

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 定义右下角拖动块的样式

博客内跳转

快捷工具.

posted @ 2020-11-01 16:37  小泽沐优声  阅读(254)  评论(0)  编辑  收藏  举报