常用的但是容易忘记的css样式..........持续更新，主要自用

本文链接：https://blog.csdn.net/yjl23332/article/details/114579597

字符太长超出部分用…隐藏

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

多行文字然后超出省略号隐藏

overflow: hidden;
display: -webkit-box;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

数组删除的方法

在这里插入图片描述

文本换行

 display: inline-block;
white-space: pre-wrap;
word-wrap: break-word;
width: 100%;
height: auto;

div区域滚动

overflow:auto

网站适应手机屏幕

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-sca" /><%--适应手机屏幕--%>

高度缓慢减少

transition: height 0.5s linear 0s;

文字超出换行

设置宽度

{
	width:100px;
	overflow:hidden;
	white-space:normal;
	word-break:break-all;
}

nvue

lines: 1;
text-overflow: ellipsis;

文字之间的间距

单词text-indent抬头距离
letter-spacing字与字间距

flex布局方式的居中显示

display:flex;
justify-content: center || space-between;
align-items: center;

文字阴影

box-shadow:0px 0px 10px rgba(0,0,0,0.2);
 box-shadow: darkgrey 0px 0px 30px 5px;//边框外阴影
 box-shadow: darkgrey 0px 0px 30px 5px inset;//边框内阴影
box-shadow:-5px 15px 15px -15px rgba(0,0,0,0.3); //偏移阴影
下边框阴影
 box-shadow: 0px 15px 10px -15px red;//边框外阴影
//淡淡的
 box-shadow: 0rpx 4rpx 55rpx 7rpx rgba(0, 35, 167, 0.08);

图片居中
background-position:center center;

讲解比较详细链接
https://www.webhek.com/post/css-box-shadow-property.html

文字背景渐变

 background-image: linear-gradient(45deg, #d41a1a, #d9e60c);

讲解链接:
https://www.php.cn/css-tutorial-409954.html

占满整个屏幕

width:100%;
height:100vh;

不新增，改变原来的值

/deep/ .u-list-image-wrap{
 border-radius: 0 !important;
}

el-tree 默认选中

 this.$nextTick(() => {
                this.$refs.tree.setCheckedKeys([id]);
            });

图片背景

background-image: url(/static/image/bg_.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;

nvue页面两张图片层叠的解决方法

<view class="video-item">
	<image class="video-bg" :src="img" mode="aspectFill"></image>
	<image class="video-bg2" src="../../static/logo.png" mode=""</image>
</view>

.video-item{
		width: 235rpx;
		height: 350rpx;
		margin: 5rpx 7rpx 5rpx 7rpx;
		align-items: center;
		justify-content: center;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		position: relative;
		.video-bg{
			width: 235rpx;
			height: 350rpx;
			border-radius: 10rpx;
			position: absolute;
		}
		.video-bg2{
			width: 80rpx;
			height: 80rpx;
			border-radius: 10rpx;
			position: absolute;
		}
	}

输入框选中的时候边框问题

.from_input:focus {
	outline:none;
    border: 1px solid #e4e0e1;
    border-left: 4px solid #c32139;
}

传统img 图片会随父容器放大缩小，解决方法

.serviceItem{
	width: 15rem;
	height: 10rem;
	background-color: #c32139;
	background-repeat: no-repeat;
	background-size: cover;
}
<div class="serviceItem" style="display: block; background-image:url(img/a1.jpg);"></div>

浏览器缩放，是否按照手机的宽度去展示

<meta  name="viewport" content="width=device-width, initial-scale=1">

HTML中使标签鼠标放上去时显示手形状

css里面加入下面的代码

cursor:pointer;
//显示箭头
cursor:default

CSS或者JS实现鼠标悬停显示另一元素
想达到鼠标悬停到元素a上，显示另一个元素b，可以通过css实现也可以通过js实现。
js:

写两个函数：mouseenter，mouseleave，例如：其中
$("#a").mouseenter(function() {
$("#b").show("normal");
});
$("#a").mouseleave(function() {
$("#b").hide("normal");
});

css：a元素和b元素需要满足一定的关系，即b是a的直接子元素：如下html元素，div header_login_name_change 是a元素，ul header_login_menu是b元素。
在a元素上写hover，后面是b元素

<div id="a" class="a">
    <a class="content"><span id="txt">苹果</span></a>
    <a class="role_down"></a>
    <ul class="b">
        <li class="role">栗子</li>
    </ul>
</div>
css，display： block；
.a:hover .b {
display:block;
background: #2B7193;
cursor: pointer;
}

uniapp 的单选框圆圈太大了，缩小一些

transform:scale(0.7)

隐藏 scroll-view滚动条

scroll-view ::-webkit-scrollbar {
 	width: 0;
 	height: 0;
 	background-color: transparent;
 }

图片旋转

@-webkit-keyframes rotation{
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}
.xuanzhuan{
	webkit-transform: rotate(360deg);
	/*animation: rotation 10s linear infinite;//正常用这个*/ 
	animation: run 10s linear infinite;
}

//图片旋转根据来启动动画效果暂停和继续播放

<view class="xuanzhuan" :class="playing?'none':'keepgo'"></view>
...data(){
	return{
		playing:false
	}
}

.keepgo{
	animation-play-state: paused;
}

图片文字背景倾斜

.wrap {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	top: 0;
}

.silk-ribbon {
	display: inline-block;
	text-align: center;
	width: 115px;
	height: 60rpx;
	line-height: 60rpx;
	position: absolute;
	top: 15px;
	right: -17px;
	z-index: 2;
	overflow: hidden;
	transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	background: #FD9C07;
	color: #FFFFFF;
	font-size: 28rpx;
}

效果

绝对定位，根据手机或者会h5浏览器

disaply:fixed;
bottom: calc(var(--window-bottom) + 10rpx);

uniapp部分

v-if和v-for的一些优雅方法，比较实用

https://mp.weixin.qq.com/s/Khft5gIDxWMW5XeMMJNVLw

返回上一页并传递参数

let pages = getCurrentPages();             //获取所有页面栈实例列表
let nowPage = pages[ pages.length - 1];    //当前页页面实例
let prevPage = pages[ pages.length - 2 ];  //上一页页面实例
prevPage.$vm.couponNumber = value;         //修改上一页面的 couponNumber 参数值为 value
prevPage.$vm.couid = vid;                  //修改上一页面的 couid 参数值为 vid
uni.navigateBack({                         //uni.navigateTo跳转的返回，默认1为返回上一级
    delta: 1
});

uni-app 退出应用

https://www.jianshu.com/p/9fa79c180a85

uview头像裁剪小程序端问题

小程序uview头像裁剪，存在一个问题，如果跳转时不传参将不会初始化成功cut对象 x/y/width/height的值分别为undefined 和 NAN
应该把应该在判断option.rectWidth时先判断有没有值没有就使用初始值所以加一句下面的代码即可初始化成功：
option.rectWidth = option.rectWidth || this.rectWidth

onLoad(option) {
		let rectInfo = uni.getSystemInfoSync();
		this.width = rectInfo.windowWidth;
		this.height = rectInfo.windowHeight - this.bottomNavHeight;
		this.cropperOpt.width = this.width;
		this.cropperOpt.height = this.height;
		this.cropperOpt.pixelRatio = rectInfo.pixelRatio;

		if (option.destWidth) this.destWidth = option.destWidth;
		if (option.rectWidth) {
			option.rectWidth = option.rectWidth || this.rectWidth;
			let rectWidth = Number(option.rectWidth);
			this.cropperOpt.cut = {
				x: (this.width - rectWidth) / 2,
				y: (this.height - rectWidth) / 2,
				width: rectWidth,
				height: rectWidth
			};
		}

uniapp的vconsole

控制台
npm install vconsole

单页面引入，或者main.js
import VConsole from ‘vconsole/dist/vconsole.min.js’ //import vconsole
let vConsole = new VConsole() // 初始化

unapp视频获取第一帧

<video :src="item.sp_url" :poster="" controls :show-center-play-btn="false" auto-pause-if-navigate></video>
//图片也可以用
<image class="zu_logo" :src="item.sp_url+ '?x-oss-process=video/snapshot,t_0,f_jpg'" mode=""></image>

//只需要在地址后面加这一段代码就可以了
'?x-oss-process=video/snapshot,t_0,f_jpg'  //划重点

页面切换回地图页面组件

思路：由于地图自主的Icon和客户的样式，只能通过label文字偏移到icon上面，然后点击完了之后，icon会覆盖到label文字上。解决：点击完把所有的marker隐藏，再次显示又循环添加上，缺点，点击回来后地图不是之前滑动的位置了，需要重新滑动。
解决思路：
缓存一个地图信息的key，通过时间判断，如果不超过1小时，就使用缓存的信息（接口需要的参数）获取marker信息，直接调用接口，不执行获取定位然后才拿到经纬度的方法。

onShow() {
	this.getMap();
}
//获取定位
getMap(){
	//计算时间相差
	var date = new Date();
	var year = date.getFullYear();
	var month = date.getMonth() + 1;
	var day = date.getDate();
	var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
	var minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
	var minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
	var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();      //秒 ,返回 Date 对象的秒数 (0 ~ 59)   
	this.time = year+'-'+month+'-'+day+' '+hour+':'+ minute+':'+seconds;
	console.log("time",this.time)
	
	if(uni.getStorageSync('map')){
		let map = uni.getStorageSync('map');
		var stime =date.getTime();
		var etime = new Date(map.createTime).getTime();
		var usedTime = stime - etime;  //两个时间戳相差的毫秒数
		//计算出小时数
		var leave1=usedTime%(24*3600*1000);    //计算天数后剩余的毫秒数
		var hours=Math.floor(leave1/(3600*1000));
		if(hours >=1){//如果大于等于1个小时
			this.userMap();
		}else{
			// this.myMap();
			this.district = map.district;
			this.latitude =   map.lat;
			this.longitude = map.lng;
			this.myLat =  map.lat;
			this.myLong = map.lng;
			console.log(this.lng,this.lat,this.district)
			this.setList();
		}
		
		console.log('hours',hours) ;
	}else{
		this.userMap();
	}
},
userMap(){
	let _t = this;
	uni.getLocation({
	    type: 'gcj02',
		geocode:true,
	    success: (res) => {
			debugger 
			console.log("res",res)
	        console.log('当前位置的经度 ：' + res.longitude);
	        console.log('当前位置的纬度：' + res.latitude);
			this.district = res.address.district;
			this.latitude =  res.latitude;
			this.longitude = res.longitude;
			this.myLat = res.latitude; 
			this.myLong = res.longitude;
			let data = {
				lng:res.longitude,
				lat:res.latitude,
				province:res.address.province,
				city:res.address.city,
				district:res.address.district,
				createTime:this.time
			}
			uni.setStorageSync('map',data);
			this.setList();
	    },
		fail(res) {
			console.log(res)
		}
	}); 
},
...

自定义组件使用this.$refs.del.open()没有起效

解决方法：

this.$refs.del[0].open();

拆分详细地址（省市区，包括自治区和北京市类似的省级）

var reg = /.+?(省|市|自治区|自治州|县|区)/g // 省市区的正则
console.log(详细地址.match(reg)) // ['广东省','广州市','白云区']

APP和H5页面跳转外部访问页面的方法

// #ifdef H5
window.open(href);
// #endif
// #ifdef APP-PLUS
//第一种方法：跳转外部打开
plus.runtime.openURL( href );
//第二种方法：APP内直接下载
 uni.downloadFile({
 	url: href,
 	success: res => {
 		if (res.statusCode === 200) {
			uni.openDocument({
 				filePath: res.tempFilePath,
 				// 如果文件名包含中文，建议使用escape(res.tempFilePath)转码，防止ios和安卓客户端导致的差异
 				success: function(res) {
 					console.log('打开文档成功');
 				},
 				fail(err) {
 					console.log(err);
 				}
 			});
 		}
 	}
 });
	// #endif

uniapp app静止手机翻转

1.app.vue

onLaunch: function() {
    // 禁止横屏
        // #ifdef APP-PLUS||APP
	    plus.screen.lockOrientation("portrait-primary")
	    // #endif
},

2.第二步在manifest.json中配置

"app-plus" : {
      "distribute" : {
           "distribute" : {
               "orientation" : [ "portrait-primary"]//重力感应、横竖屏配置
           }
       },
  },

uniapp 使用web-view 但又不占满全屏方法，url可动态更新

需求：不需要标题栏，但是如果去掉标题，页面会把手机状态栏也占满
通过nvue页面，来控制页面大小
1、创建一个webview.nvue页面

<template>
	<view>
		<web-view :src="urls"></web-view>
	</view>
</template>

<script>
	export default {
		props:{
			urls:{default:'',}
		},
		data() {
			return {
			}
		},
		mounted() {
			// #ifdef APP-PLUS
			var currentWebview = this.$parent.$scope.$getAppWebview();
			setTimeout(function() {
				let wv = currentWebview.children()[0]
				wv.setStyle({
					top: uni.getSystemInfoSync().statusBarHeight
				})
			}, 1000); //如果是页面初始化调用时，需要延时一下
			// #endif 
		},
		 beforeDestroy() {
			wv.close()
		},
	}
</script>

2、父页面引入

<webviews v-if="urls != ''" :urls="urls"></webviews>
import webviews from "./webview.nvue"

vuex部分

vuex页面和组件获取值的区别，其实算一种，只是两种引用方式

页面：
import store from '@/store/index.js';//需要引入store
store.state.username 

组件：
this.$store.state.username

vue部分

vue 写入缓存取出缓存销毁缓存

sessionStorage.setItem('huancun','写入值');//存入缓存
sessionStorage.getItem("huancun");//读取缓存
sessionStorage.removeItem("huancun");//清除缓存

elementUI 弹窗自适应

<style>
.el-dialog {
    margin-top: 9vh !important;
    margin-bottom: 8vh !important;
    overflow: auto;
}
</style>

嵌套table 子table获取父table的列数据

props.row.status

绑定：class和：style的写法

   <!-- 1、普通的类名绑定 -->
   <div :class="className">class绑定</div>
   <!-- 2、对象绑定 -->
   <div :class="{classNameA：true, classNameB：false}">class对象绑定</div>
   <div :class="{classNameA：isActive}">class对象绑定</div>
   <!-- 从prop或是computed中获取 -->
   <div :class="classObj">class对象绑定</div>
   <!-- 从methods中获取方法 -->
   <div :class="getClassObj()">class对象绑定</div>
   <!-- 1、直接绑定数组 -->
   <div :class="[classNameA, classNameB]">class数组绑定</div>
   <!-- 2、数组绑定,也可使用三元运算符-->
   <div :class="[classNameA, isActive ? classNameB : '']">class数组绑定</div>
   <!-- 3、数组绑定,也可使用对象语法-->
   <div :class="[classNameA, {classNameB：isActiv}]">class数组绑定</div>
   <!-- style对象绑定 -->
   <div :style="styleObj">style对象绑定</div>
   <div :style="{color: 'red', fontSize: size + 'px'}">style对象绑定</div>
   <!-- style数组绑定 -->
   <div :style="[styleObjA, styleObjB]">style数组绑定</div>

2数组去重

  let arr = [];
             //企业以前存在的岗位置顶列表
             let saveTopList = JSON.parse(JSON.stringify(this.saveTopList));
             console.log("企业以前存在的岗位置顶列表---", this.saveTopList);
             this.postCacheList.forEach((item) => {
                 arr.push({
                     positionId: item.companyPositionId,
                    positionName: item.title, //岗位
                     equipmentId: this.eId, //设备
                     equipmentName: this.eName,
                     sortNum: Number(item.sortNum),
                     remake: item.remake,
                 });
             });
             console.log("新增的----", arr);

             saveTopList = [...saveTopList, ...arr];
             const seen = {}; // 辅助对象，用于追踪已经出现过的companyId和eId组合
             let array = saveTopList.reduce((acc, item) => {
                 const key = `${item.positionId}-${item.equipmentId}`; // 创建一个唯一的key来标识每个组合
                 if (!seen.hasOwnProperty(key)) {
                     seen[key] = true; // 标记这个组合已经被看到过
                    acc.push(item); // 将当前项添加到累加器数组
                 }
                 return acc;
             }, []);

javaScript部分

设置缓存

Web 存储 API 提供了 sessionStorage （会话存储）和 localStorage（本地存储）两个存储对象来对网页的数据进行添加、删除、修改、查询操作
localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

window.localStorage.setItem("存储名","存储值");
window.sessionStorage.setItem("存储名","存储值");

由于缓存的存储值为字符串，需要将对象数组值转换为字符串：JSON.stringify(存储值)

window.localStorage.setItem("shopcatCookits",JSON.stringify(“存储值”));
window.sessionStorage.setItem("shopcatCookits",JSON.stringify(“存储值”));

获取缓存

window.localStorage.getItem('缓存值')
window.sessionStorage.getItem('缓存值')

扩展运算符…的用法

https://www.cnblogs.com/chorkiu/p/10444006.html

保留两位小数

小数.toFixed(2)

String 数组转 Int 数组

['1','2','3'].map(Number)

动态获取ID

$(eval("col_"+index)).addClass("activity");

漂亮的弧线

<div class="box">
<div class="home_top"> 这里是内容 </div>
</div>
.box { width: 250px; margin: auto; overflow: hidden; }
.home_top { position: relative; width: 100%; height: 100px; text-align: center; line-height: 50px; }
.home_top:after { width: 140%; height: 100px; position: absolute; left: -20%; top: 0; z-index: -1; content: ''; border-radius: 0 0 50% 50%; background: linear-gradient(#2CBAF9, #04A9F4); }

vue的request GET传参数

使用类似的request方法，属性为GET的时候，传参
在这里插入图片描述

params:data得注意，GET传参得特别注明赋值的位置参数，params
//新 发电总，日排行榜
export function newsPlantNumLists(data) {
  console.log("api.data.数据--------",data)
  return request_user_api({url: 'ranking/queryPlantnUM',method: 'GET',params:data})
}

POST
//发电月排行榜
export function PlantNumListsMon(data) {
  return request({url: 'ranking/selectByYearAndMon',method: 'POST',data})
}

vue的过滤获取单条匹配数据

 let title = res.data.filter(item => {
 return item.id == this.$route.params.sid;
   });
   if(this.$route.params.sid){
     this.type_title = title[0].cate_name;
   }

vue数组切换某些属性名

 this.options = res.data.map(item=>{
 	item.value = item.id;
    item.label = item.cate_name;
 });

vue 里面js文件跳转路由的方法

import router from '@/router/index.js'

router.push('/')
router.back()

应该是已经会统一配置了。
那么

直接在main.js导出根组件
api.js中引入import _this from '../main.js';
然后请求里配置_this.$router.push('/login')
注意不要在api.js中导入后直接console.log(_this)，这个时候组件还没创建肯定是undefined。

vue 路由跳转到同一个页面，参数不同，页面刷新问题

watch :{
    '$route': function (to, from) {
       this.loadData();
     }
   },

vue 复制动态的变量到剪切板上

copyText(str){
				// 创建一个临时的 textarea 元素。
				const el = document.createElement('textarea');
				// 将需要复制的文本内容赋值给 textarea 元素。
				el.value = str;
				//将 textarea 元素添加到页面中。
				document.body.appendChild(el);
				//选中 textarea 元素中的文本。
				el.select();
				// 执行复制命令，将选中的文本复制到剪贴板
				document.execCommand('copy');
				//从页面中移除 textarea 元素。
				document.body.removeChild(el);
				//弹出提示框，告知用户文本已复制成功。
				alert('文本已复制');
			},

vue在页面初次渲染时出现一闪而过的{{}}模板变量问题

问题：使用VUE时，页面加载瞬间，会闪现模板语法，例如{undefined{user }}等

解决办法：

1、可以通过在绑定模板变量的父元素添加VUE内置的指令v-cloak解决这个问题（推荐）
具体实现：

<div class="active_txt" v-cloak v-if="user!=''">
      {{user}}
</div>

CSS中添加：

[v-cloak] {
	display: none;
}

2、可以在需要编译的元素前后加上

关于详解
http://www.zhangxinxu.com/wordpress/2014/07/hello-html5-template-tag/

3、通过切换需要编译元素的display属性，最开始设为none，请求完数据后设为block
4、VUE前置加载
5、使用组件，模板都写在组件中，html 文件中仅插入组件标签
6、用个“loading”的遮罩层，请求数据成功后再显示

但是有的时候会不起作用，可能的原因有二：

一，v-cloak的display属性被层级更高的给覆盖掉了，所以要提高层级

[v-cloak] {
    display: none !important;
}

这里使用了简单粗暴的方法加了个!important，有更好的方法欢迎留言。

二，样式放在了@import引入的css文件中（传统的开发方式）
v-cloak的这个样式放在@import 引入的css文件中不起作用，可以放在link引入的css文件里或者内联样式中

基本的方法：
split(‘’):拆分
join(‘’);组合

const arr=[1,2,3,4,5,6,7,8]
//截取数组前三个元素
const sliceA=arr.slice(0,3)

//截取数组后三个元素 slice方法
const sliceArr=arr.slice(-3)
//截取数组后三个元素 splice方法
const spliceArr=arr.splice(-3,3)

var stmp = “rcinn.cn”;

使用一个参数
alert(stmp.slice(3));//从第4个字符开始,截取到最后个字符;返回"nn.cn"

alert(stmp.substring(3));//从第4个字符开始,截取到最后个字符;返回"nn.cn"

使用两个参数
alert(stmp.slice(1,5))//从第2个字符开始，到第5个字符；返回"cinn"

alert(stmp.substring(1,5));//从第2个字符开始，到第5个字符；返回"cinn"

如果只用一个参数并且为0的话，那么返回整个参数
alert(stmp.slice(0));//返回整个字符串

alert(stmp.substring(0));//返回整个字符串

返回第一个字符
// 1.位位截取

alert(stmp.slice(0,1));//返回"r"

alert(stmp.substring(0,1));//返回"r"

常用方法

1、差分路径和路径参数

//根据路径，拆分url
	  getQuery(url){
		let index = url.indexOf('?')
		let obj = {}
		if (index === -1) return obj
		let queryStr = url.slice(index + 1)
		let arr = queryStr.split('&')
		for (let item of arr) {
			let keyValue = item.split('=')
			obj[keyValue[0]] = keyValue[1]
		}
		console.log("cans--------------",obj)
		return obj
	  },

2、some():检测数组中是否有元素大于0:

this.BooleanScore = this.tableDatas.some(item => {
	return item.headerstars <= 0
})

git分支合并

1、主分支需要子分支的改动内容
：子分支提交推送代码后，切换到主分支，主分支合并代码，主分支推送代码到仓库

2、主分支为公共功能代码，子分支为地域量身定代码，子分支获取主分支公共代码
:主分支提交推送代码，切换到子分支，子分支合并代码，（如果合并不下来，可以选择，下图，但是估计会有冲突）在这里插入图片描述
如果有冲突，主动解决冲突后，在文件右击-》解决冲突-》标记为已解决
上述完成后，子分支推送代码到仓库