代码段汇总1

1.文字过长省略

1.1 单行文本的溢出显示省略号

/*单行文本的溢出显示省略号*/
    .pl{
        width: 200px;
        overflow:hidden;
        text-overflow:ellipsis; 
        background: goldenrod;
        white-space: nowrap;/*加宽度width属来兼容部分浏览*/
    }

1.2 多行文本溢出显示省略号

/*多行文本溢出显示省略号*/
        #p2{
            width: 220px;
            height: 58px;
            overflow:hidden;
            text-overflow:ellipsis; 
            background: greenyellow;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
            /*-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
            display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
            -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。*/
        }

2.CSS+HTML实现移动端div左右滑动展示

<!--外部嵌套层-->
<div class="div">
    <div class="box">
        <div class="box1"></div>
        <div class="box1"></div>
        <div class="box1"></div>
        <div class="box1"></div>
        <div class="box1"></div>
    </div>
</div>

.div{
    overflow: hidden;
    height: 118px;
}
.box{
    white-space: nowrap;/*文本不会换行，文本会在在同一行上继续*/
    overflow-y:auto;/*可滑动*/
}
.box1{
    width: 49%;
    margin-left: 3%;
    height: 100px;
    display: inline-block;/*行内块元素*/
}

3. 用flex实现头部和底部固定，内容部分滚动

<div class="main">
    <div class="main-header">
      header的内容
    </div>
    <div class="main-body">
      body的内容
    </div>
     <div class="main-footer">
      footer的内容
    </div>
</div>

.main {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;

  .main-header {
    height: 50px;  //头部给个高度
  }

  .main-body {
    flex: 1 auto;
    overflow: auto;
  }
   .main-footer{
        height: 50px; //底部给个高度
  }
}
//头部和底部高度固定，中间内容区域占据剩余空间，使用overflow: auto当该区域的内容超出其高度时，由滑动滚动条来浏览观看

4. 发送短信倒计时60s

 <span v-show="show" @click="getCode">获取验证码</span>
 <span v-show="!show" class="count">{{count}} s</span>

export default {
  data() {   
   return {    
        show:true,   
        count:'',    
        timer:null  
           }; 
        },  
   methods: {  
     getCode(){
       const TIME_COUNT = 60;
       if (!this.timer) { 
          this.count = TIME_COUNT;
          this.show = false; 
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) { 
                 this.count--;  
            } else {  
                 this.show = true;  
                 clearInterval(this.timer);  
                 this.timer = null;
            }
          }, 
          1000) }} 

5.vue-hash-calendar移动端周日历和月日历

6.Vant-Uploader 上传一张或多张图片组件

<template>
  <div class="contWrap">
    <van-uploader
      v-model="fileList"
      :multiple="true"
      :before-read="beforeRead"
      :after-read="afterRead"
      :before-delete="delUploadImg"
      upload-icon="plus"
      preview-size="100px"
    >
    <!-- 注：这里是自定义上传样式 -->
      <!-- <p>
        <van-icon
          name="plus"
          color="#07c160"
          size=".5rem"
        />
        上传照片
      </p> -->
    </van-uploader>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: []
    };
  },

  methods: {
    // 返回布尔值
    beforeRead(file) {
      if (file instanceof Array) {
        //判断是否是数组
        file.forEach((item) => {
          this.checkFile(item);
        });
      } else {
        this.checkFile(file);
      }
      return true;
    },
    //图片类型检查
    checkFile(file) {
      const format = ["jpg", "png", "jpeg", "raw", "bmp"];
      const index = file.name.lastIndexOf(".");
      const finalName = file.name.substr(index + 1);
      if (!format.includes(finalName.toLowerCase())) {
        this.$toast("请上传" + format.join(",") + "格式图片");
        return false;
      }
      if (file.size > 1024 * 1000 * 10) {
        this.$toast("文件不能超过10M");
        return false;
      }
    },
    afterRead(file) {
    // 将文件上传至服务器
      if (file instanceof Array) {
        file.map((item) => {
          v.status = "uploading";
          v.message = "上传中...";
          this.uploadImg(v);
        });
      } else {
        file.status = "uploading";
        file.message = "上传中...";
        this.uploadImg(file);
      }
    },
    //上传
     async uploadImg(file) {
      const formData = new FormData();
      formData.append("file", file.file);
      let [err, res] = await this.$http.uploadImg(formData);
      if (err) return;
      if (file instanceof Array) {
        //判断是否是数组
        file.map((v, i) => {
          v.status = "success";
          v.message = "";
          v.url = res.data[i];
        });
      } else {
        file.status = "success";
        file.message = "";
        file.url = res.data.path;
      }
    },
    //删除
    delUploadImg(item) {
      this.fileList = this.fileList.filter((v) => v.url != item.url);
    }
  },
};
</script> 

7. 半圆环进度条

 <div class="echarts">
      <svg viewBox="0 0 100 100">
        <path
          d="
        M 50 50
        m 0 47
        a 47 47 0 1 1 0 -94
        a 47 47 0 1 1 0 94
        "
          stroke="#EAEAEB"
          fill="none"
          stroke-linecap="round"
          stroke-width="4.8"
          style="stroke-dasharray: 180px, 295px; stroke-dashoffset: -57.5px; "
        ></path>
        <path
          v-if="number != 0"
          d="
        M 50 50
        m 0 47
        a 47 47 0 1 1 0 -94
        a 47 47 0 1 1 0 94
        "
          stroke="#f56c6c"
          stroke-width="4.8"
          stroke-linecap="round"
          fill="none"
          :style="
            `stroke-dasharray: ${number *
              1.8}px, 295px; stroke-dashoffset: -57.5px;transition: stroke-dasharray 0.6s ease 0s, stroke 0.6s ease 0s;`
          "
        ></path>
      </svg>
    </div>

props: {
    number: Number   //父组件传递进来的占比数
  },

8.修改数组对象的key

//原数组对象
const olddata = [
      { detype_name: "aaa", type_no: "3" },
      { detype_name: "bbb", type_no: "13" },
      { detype_name: "ccc", type_no: "23" }
];

//更改为
const total = [
      { name: "aaa", value: "3" },
      { name: "bbb", value: "13" },
      { name: "ccc", value: "23" }
];

  total = olddata.map(o=>{return{name:o.detype_name, value:o.type_no}});

9.常用正则表达式

1. 验证邮箱

/^\w+@([0-9a-zA-Z]+[.])+[a-z]{2,4}$/

2. 验证手机号

/^1[3|5|8|7]\d{9}$/

// 检查手机号码
function checkPhone(phone) {
    if (!(/^1[34578]\d{9}$/.test(phone))) {
        return false;
    } else {
        return true;
    }
}

3. 验证url

/^http:\/\/.+\./

4. 验证身份证号码

/(^\d{15}$)|(^\d{17}([0-9]|X|x)$)/

5. 匹配字母、数字、中文字符

/^([A-Za-z0-9]|[\u4e00-\u9fa5])*$/

6. 匹配中文字符

/[\u4e00-\u9fa5]/

10 vue判断页面是首次加载还是刷新

 if (window.performance.navigation.type == 1) {
        console.log("页面被刷新")
      }else{
        console.log("首次被加载")
      }

window.name是整个项目全局的，不是某个页面的name，一旦给window.name赋值之后，每个页面的name都会改变

if(window.name == ""){
      console.log("首次被加载");
      window.name = "isFirstVisit";
      }else if(window.name == "isFirstVisit"){
      console.log("页面被刷新");
      }

11 关键字高亮

 brightenKeyword(val, keyword) {
      const Reg = new RegExp(keyword, 'i');
      if (val) {
        const res = val.replace(
          Reg,
          `<span style="color: #04A478;">${keyword}</span>`
        );
        return res;
      }
    }, 
    
//使用时:
 <div class="outid  v-html="brightenKeyword(item.outid,searchKey) ></div>

12 身份证号，手机号等隐藏中间部分

export function plusXing(str, frontLen, endLen) {
  var len = str.length - frontLen - endLen;
  var xing = '';
  for (var i = 0; i < len; i++) {
    xing += '*';
  }
  return str.substring(0, frontLen) + xing + str.substring(str.length - endLen);
}


//plusXing(text, 3, 4)--->190****0001