前端小技巧

84 阅读 0 评论 56 点赞

我是靠谱客的博主忐忑鱼，最近开发中收集的这篇文章主要介绍前端小技巧，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1.符号处理

1.将回车键全部替换成,
this.pojo.options=  this.pojo.options.replace(/n/g,",");  //回车替换为逗号

2.将,全部替换成回车键
this.pojo.options=  this.pojo.options.replace(/,/g,"n");  //逗号替换为回车
符

2.多条语句

<el-button type="primary"  class="butT" @click="formVisible=true;pojo={parentId:parentIds[parentIds.length-1]}">新增</el-button>

3.数组操作
https://blog.csdn.net/qq_31772441/article/details/80449914

3.1向数组中添加元素
this.parentId.push(this.searchMap.parentId);

3.2取数组中的最后一个元素
this.searchMap.parentId=this.parentIds[this.parentIds.length-1]

3.3删除数组中的最后一个元素
this.parentId.splice(this.parentIds.length-1,1)

4.给按钮按条件判断是否显示
<el‐button v‐if="parentIds.length<2"
@click="queryByParentId(scope.row.id)" type="text" size="small">查询下级
</el‐button>

4.循环判断展示
<el-table-column  label="模板ID" width="180">
      <template slot-scope="scope">
            <el-button v-for="item in templateList" v-if="item.id==scope.row.templateId" type="text" disabled>{{item.name}}</el-button>
      </template>
</el-table-column>

5.集合操作
https://www.cnblogs.com/xiaohuochai/p/8176248.html

1.给集合赋值
this.searchMap={"parentId":0};

6.给表头添加颜色

<el-table
     :data="orders"
     height="95"
     border
     :header-cell-style="{background:'#eef1f6',color:'#606266'}"
     style="width: 100%">

7.ajax设置向后端传输字符集

axios.post(`/order/batchSend.do`,this.orderList, contentType="application/x-www-form-urlencoded; charset=utf-8").then(response => {
    this.orderList = [];
    this.dialogTableVisible = false;

})

8.将数据序列为json

var user = { Name: "xpy0928", Age: 12, Gender: "男" };
var userToken = "xpy09284356fd765fdf";
$("#btn").click(function () {
    $.ajax({
        type: "post",
        url: "http://localhost:7114/api/product/PostUser/1",
        dataType: "json",
        data: JSON.stringify({ User: user, UserToken: userToken }),
        contentType: "application/json",
        cache: false,
        error: function (x, c, e) {
            if (c == "error") {
                $(this).val(c);
            }
        },
        success: function (r) {
            alert(r);
        }
    });

9.数字处理

取余,除法
{{(scope.row.num/totalNum*100).toFixed(0)}}%
实例
<el-table-column
     label="数量比例"
     width="180">
     <template slot-scope="scope">
         {{(scope.row.num/totalNum*100).toFixed(0)}}%
     </template>
</el-table-column>

10.展示pdf

<iframe src="test_pdf.pdf" width="800" height="600"></iframe>

11.使用背景图片铺满div

<style scoped>

.img{
  background: url('../../assets/chaye/chaye.jpeg') no-repeat;
  background-size: 100% 100%;
  min-height: 100vh;
  width: 100%;
}


</style>

前端获取cookie中的参数方法
//输入cookie中的key可获取value
      getCookie(name){
        var strcookie = document.cookie;
        var arrcookie = strcookie.split("; ");
        for(var i=0; i<arrcookie.length;i++){
          var arr = arrcookie[i].split("=");
          if (arr[0] == name){
            return arr[1];
          }
        }
        return "";
      }

12.替换表格中的数据为字典表

        <el-table-column prop="jobStatus" label="状态" align="center" :formatter="formatState"></el-table-column>
        
   //格式化市场
        formatMarketname: function (row, column, cellValue, index) {
            for (let i in this.marketOptions) {
                if (this.marketOptions[i].id == row.methodParams) {
                    return this.marketOptions[i].name
                }
            }
        },

13.获取url中的参数

//获取url参数
function getQueryString(name) {
    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
    var r = window.location.search.substr(1).match(reg);
    if (r != null) {
        return unescape(r[2]);
    }
    return null;
}

14.html之间引用
在user.html文件中引入enterprise.html文件内容
enterprise.html文件内容

<enterprise>
    <div id="enterprise" class="panel_r">
        <div class='eis-title'>
            <span>企业信息</span>
        </div>
    </div>
</enterprise>

user.html中文件内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>个人中心</title>
    <script src="../../js/rem.js"></script>
    <link rel="stylesheet" href="../../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../../icon/iconfont.css">
</head>

<body>    
    <div>
          <enterprise id="enterpriseContent" ></enterprise>
          <recordApply id="recordApplyContent" class="layui-hide"></recordApply>
          <modifyPsd id="modifyPsdContent" class="layui-hide"></modifyPsd>
     </div>
</body>
<script src="../../lib/jquery-3.1.1.min.js"></script>
<script src="../../lib/layui/layui.js"></script>
<script src="../../js/ourlayui.js"></script>
<script src="../../js/ly_global.js"></script>

<script type="text/javascript">
    $(document).ready(function(){
        $("#enterpriseContent").load("enterprise.html");
        $("#recordApplyContent").load("recordApply.html");
        $("#modifyPsdContent").load("modifyPsd.html");
    });
</script>


</html>