css省略号，css书写顺序，实现滑动，设置滚动条的样式，设置文字的渐变色

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 / overflow
2、自身属性：margin / padding / border / width / height / background
3、文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
4、其他属性（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() + 1
     var date = time.getDate()
     var hour = time.getHours()
     var minute = time.getMinutes()
     var second = time.getSeconds()
     month = month < 10 ? '0' + month : month
     date = date < 10 ? '0' + date : date
     hour = hour < 10 ? '0' + hour : hour
     minute = minute < 10 ? '0' + minute : minute
     second = second < 10 ? '0' + second : second
     var 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 = uri
  link.download = '矩形内车辆.xlsx'
  link.click()
},

21.按照版本安装依赖

	npm install || npm install --legacy-peer-deps --force

22.core.js 版本问题

	presets: [['@vue/app', { useBuiltIns: 'entry' }]],