海创软件组--20200816--js处理浮点数保留两位小数--Vue使用less报错的解决方法--Vue使用Element-UI部分组件适配移动端

本文链接：https://blog.csdn.net/m0_46627730/article/details/108016213

js处理浮点数保留两位小数

前言

最近在做酒店管理系统的时候，有个订单总金额需要我根据每天房价计算，但因为房价是有两位小数的浮点数，有时候会有所偏差，例如20.02 * 3 * 3 = 180.1800000001等等，这就需要我们对数据自行处理了。

处理方法

1：转换字符串截取法

function deal()
{
 var price = 180.1800000001 + "";
 var price1 = price .substring(0,price .indexOf(".") + 3);
 price = price1 * 1;
}

2：正则表达式处理

function deal()
{
 var price = 180.1800000001 + "";
 var rule = /([0-9]+.[0-9]{2})[0-9]*/;   //定义正则表达式
 var price1 = price .replace(rule ,"$1");
 price = price1 * 1;
}

3：Math.round()方法，四舍五入处理

function deal()
{
 var price = 180.1800000001;
 price1 = Math.round(price *100)/100);
}

最后补充Math的其他方法

1.向上取整,有小数就整数部分加1

Math.ceil()

2.向下取整

Math.floor()

Vue使用less报错的解决方法

前言

接触vue将近一年了，之前都是用Less 作为css的预处理语言，所以封装好了一个基本的项目模板供之后快速开发。最近想从头自己敲一遍来巩固复习之前学的知识时，发现我的vue竟然无法使用less了…怎么搞都是报错，快崩溃-_-

解决

找不到原因只好来看看之前的模板，突然发现两者的less，less-loader版本不同，我就分别尝试了一下将其中之一修改成原来的低版本。发现竟然是less-loader版本太高了…具体原因我也没细究，只当不兼容less的版本吧。有关vue使用less的相关操作可以细看vue如何使用less

指定较低版本的less-loader来下载

npm install less less-loader@5 --save       //指定较低版本的less-loader下载就可以解决问题了

以下是解决时的截图

我新建的项目下载的less，less-loader版本

在这里插入图片描述

我新建的项目使用less报错

在这里插入图片描述

查看之前模板的less，less-loader版本

在这里插入图片描述

将最新的less-loader版本修改之前的5.0.0版本的less-loader

在这里插入图片描述

运行成功

在这里插入图片描述

Vue使用Element-UI部分组件适配移动端

前言

使用组件库现成的组件是一件非常爽的事，基本不用自己敲代码，不用自己思考来思考去样式，就能得到一个比较满意的效果。但与此同时也会带来一些不便，那就是部分组件在移动端显得不太友好，还有就是有些样式达不到自己的预期，这时修改起来就比较麻烦了。

vue使用Element-UI部分组件适配移动端

组件适配1—Message 消息提示

//消息提示
this.$message({
   message:'雨伞下架成功',
   duration:1500,
   type:'success'
 })

Message 消息提示在PC端显示是非常好的：
在这里插入图片描述

但移动端效果就有点勉强了，宽度太长了：
在这里插入图片描述

适配样式代码

@media screen and (max-width: 500px) {
    .el-message {
      min-width: 300px !important;
    }
}

适配后移动端的效果是比之前好很多的：
在这里插入图片描述

组件适配2—MessageBox 弹框

/*退出登录*/
loginOut(){
   this.$confirm('确定退出登录吗?', '提示', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
     type: 'warning'
   }).then(() => {
     this.$router.replace({name:'login'})
   })
 }

MessageBox 弹框在PC端显示是非常好的：
在这里插入图片描述
但移动端效果就有点勉强了，还是宽度太长了：

适配样式代码

@media screen and (max-width: 500px) {
    .el-message-box{
      width: 300px !important;
    }
  }

适配后移动端的效果是比之前好很多的：
在这里插入图片描述

组件适配3—Dialog 对话框

Dialog 对话框可通过自己设置top,width等控制样式，算是比较方便更改样式的一个组件了。但为了同时适配手机和pc，还需要我们进行一些操作，尽管我将width设置为比较小的400以及对表单内的组件样式进行了一定的修改，但还是无法比较好的适配手机。

<el-dialog title="雨伞上架" :visible.sync="isToInsert" top="30vh" width="400px">
  <el-form :inline="true" class="deleteForm">
     <el-form-item label="登记者">
       <el-input v-model="beginWorker" autocomplete="off" placeholder="请输入登记者的名字"></el-input>
     </el-form-item>
     <el-form-item label="放伞地点" style="margin-top: 15px;">
       <el-select v-model="stationId1" placeholder="请选择放伞地点">
         <el-option label="B区正门" value="B区正门"></el-option>
         <el-option label="二楼" value="二楼"></el-option>
         <el-option label="B5栋门口" value="B5栋门口"></el-option>
         <el-option label="图书馆二楼" value="图书馆二楼"></el-option>
       </el-select>
       <p class="errorTip" v-show="beginWorkerError">{{beginWorkerError}}</p>
     </el-form-item>
   </el-form>
   <div slot="footer" class="dialog-footer">
     <el-button size="small" @click="isToInsert = false">取 消</el-button>
     <el-button size="small" type="primary" @click="ToInsert">确 定</el-button>
   </div>
 </el-dialog>

为了更好的兼容pc端而设置了部分样式：
.el-dialog__wrapper{
	.el-dialog__body{
	  padding: 20px 20px 10px;
	  .deleteForm{
	    .errorTip{
	      color: red;
	      font-size: 14px;
	      line-height: 20px;
	      margin: 5px auto;
	    }
	    .el-form-item{
	      margin: 0;
	      .el-form-item__label{
	        width: 90px;
	      }
	      .el-select,.el-input{
	        width: 250px;
	      }
	    }
	  }
	}
	.el-dialog__footer{
	  padding-bottom: 15px;
	  padding-top: 5px;
	}
}

在PC端显示的效果我感觉还是挺好的：
在这里插入图片描述

但移动端效果就还是有点勉强了：
在这里插入图片描述

适配样式代码

@media screen and (max-width: 500px) {
   .el-dialog__wrapper .el-dialog {
      width: 300px !important;
      .el-dialog__body{
        padding: 10px 20px!important;
        .el-form-item__label{
          width: 68px!important;
        }
        .el-select,.el-input{
          width: 180px!important;
        }
      }
    }
}

适配后移动端的效果是比之前好很多的：
在这里插入图片描述