css笔记记录！！！
1.oninput事件
// 当用户向 <input> 中尝试输入时执行 JavaScript：// 是输入框仅限于汉字输入(无延迟)例如:oninput="value=value.replace(/[^\u4E00-\u9FA5]/g,' ')"
2.单行出现省略号
// 复制overflow: hidden; text-overflow: ellipsis;white-space: nowrap;// 多行本本省略号.display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3; // msk傻瓜式数字overflow: hidden;// 还有一种jq的省略号// 超过两行末尾添加省略号$(function() {// 父元素类名$(".ct-left-list-row-desc").each(function(i) {var divH = $(this).height();// 子元素类名var $p = $(".wz-content", $(this)).eq(0);while ($p.outerHeight() > divH) {$p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));};});});
3.点击复制input里面的文本
// 选中input框的内容document.getElementById('inputElement').select();// 执行浏览器复制命令document.execCommand("Copy");
4.span标签和img对齐,
vertical-align:text-top || middle || text-bottom;// 顶部,中部,底部// display-flex;align-items:flex-start || center || flex-end;
5.image标签，保持原图宽高比不变
// mode="widthFix"
6.的transition属性，过渡属性
// 相同速度干完所有事情 ，nice(3s)transition：all 3s linear;
7.动画属性 @keyframes
// 定义动画@keyframes name {from：{属性名：属性值 }to：{属性名：属性值 }// 或者 0% ~ 100%：{属性名：属性值 }}// 然后 3s由慢到快，由快到慢，animation：name 3s infinite ease alternate；
8.css 中的书写顺序
1、布局定位属性：display / position / float / clear / visibility / overflow2、自身属性：margin / padding / border / width / height / background3、文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word4、其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
9.css实现滑动
<ul><li></li></ul>// css ul {white-space: nowrap;/*文本不会换行，文本会在在同一行上继续*/overflow-y: auto;/*可滑动*/&::-webkit-scrollbar {display: none;}li {display: inline-block;}}// 2<view class="scroll"><p>内容区域</p></view>.scroll {margin-left: 10rpx;overflow: scroll;p {word-break: keep-all;/* 不换行 */white-space: nowrap;/* 不换行 */}}
10.小程序中添加动态的背景图片
<view class="cen_box_img" :style="{'backgroundImage':'url('+ img +')' }"></view>
11.删除富文本的标签
contentTh(placard) {let content = placard.replace(/<[^>]+>/g, "");return content;},
12.下拉刷新,背景颜色，字体颜色,
"enablePullDownRefresh": true,"navigationBarBackgroundColor": "#F0707F","navigationBarTextStyle": "white","navigationStyle": "custom"
13.小程序右上角分享
onShareAppMessage(){return {title: '', // 分享标题path: '', // 页面路径imageUrl:'', // 分享图标content:'', // 分享内容}}
14.uniapp的弹框组件
<uni-popup ref="popup2" type="bottom"><view></view></uni-popup>// type 弹出方式，可选值：top（顶部），center（居中），bottom（底部）closeBtn2() {this.$refs.popup2.close(); // 关闭弹框},opentwo() {this.$refs.popup2.open() // 打开弹窗},
14.vuex中刷新数据的解决办法
created () {//在页面加载时读取sessionStorage里的状态信息if (sessionStorage.getItem('store')) {this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))));}//在页面刷新时将vuex里的信息保存到sessionStorage里window.addEventListener('beforeunload', () => {sessionStorage.setItem('store', JSON.stringify(this.$store.state));});}
15.设置滚动条的样式
.el-tabs__content{max-height: 400px;overflow: auto;&::-webkit-scrollbar {margin-right: 10px;width: 4px;height: 90px;}&::-webkit-scrollbar-track {-webkit-border-radius: 2em;-moz-border-radius: 2em;border-radius: 2em;}&::-webkit-scrollbar-thumb {background: #cccccc;-webkit-border-radius: 2em;-moz-border-radius: 2em;border-radius: 2em;}}
16.设置文字的渐变色
background-image: -webkit-linear-gradient(right, black, red, blue);-webkit-background-clip: text;-webkit-text-fill-color: transparent;
17。时间戳转化时间格式
// 时间戳转换
myDate(value, type = 0) {if (value == null) {return ''}var time = new Date(value)var year = time.getFullYear()var month = time.getMonth() + 1var date = time.getDate()var hour = time.getHours()var minute = time.getMinutes()var second = time.getSeconds()month = month < 10 ? '0' + month : monthdate = date < 10 ? '0' + date : datehour = hour < 10 ? '0' + hour : hourminute = minute < 10 ? '0' + minute : minutesecond = second < 10 ? '0' + second : secondvar arr = [year + '-' + month + '-' + date,year + '-' + month + '-' + date + ' ' + hour + ':' + minute + ':' + second,year + '年' + month + '月' + date,year + '年' + month + '月' + date + ' ' + hour + ':' + minute + ':' + second,hour + ':' + minute + ':' + second,]return arr[type]},
18.谷歌浏览器输入历史后样式变化
/* 选择历史记录的文字颜色和背景颜色 */input:-webkit-autofill {-webkit-animation: autofill-fix 1s infinite!important;/* 选择历史记录的文字颜色*/-webkit-text-fill-color: #666;-webkit-transition: background-color 50000s ease-in-out 0s!important;transition: background-color 50000s ease-in-out 0s!important;background-color: transparent!important;background-image: none !important;/* 选择历史记录的背景颜色 */-webkit-box-shadow: 0 0 0 1000px transparent inset!important;}[role=button], a, area, button, input:not([type=range]), label, select, summary, textarea {-ms-touch-action: manipulation;touch-action: manipulation;}input[type=number], input[type=password], input[type=text], textarea {-webkit-appearance: none;}
19.替换element框架，的图标的背景图标
.el-icon-refresh {background-image: url('../../assets/images/button/chongzhi.png');background-repeat: no-repeat;font-size: 12px;background-size: 12px 12px;&:before {content: '替';font-size: 12px;opacity: 0;}}
20.前端el-table导出为表格
/** 导出按钮操作 */handleExport(queryParams) {const headerStrList = ['车牌号', '定位时间', '车辆类型', '司机', '手机号']const dataArr = []queryParams.forEach((item) => {const arr = [item.vehicleNo, item.time, item.vehType, item.driverName, item.driverPhone]dataArr.push(arr)})const excelList = []excelList.push(headerStrList.join('\t,') + '\n')dataArr.forEach((item) => {excelList.push(item.join('\t,') + '\n')})const exportStr = excelList.join('')const uri = 'data:text/xlsx;charset=utf-8,\ufeff' + encodeURIComponent(exportStr)const link = document.createElement('a')link.href = urilink.download = '矩形内车辆.xlsx'link.click()},
21.按照版本安装依赖
npm install || npm install --legacy-peer-deps --force
