搜索到
110
篇与
的结果
-
angular监听表单变化及双向数据绑定 监听表单变化FormGroup及FormControl都带有EventEmitter（事件发射器）用于监控表单控件的变化。要监听控件的变化，我们通过以下步骤：通过调用control.valueChanges访问这个EventEmitter然后调用.subscribe方法添加一个监听器。html代码如下<nz-card style="width:300px;"> <form [formGroup]="myForm" nz-form (ngSubmit)="onSubmit(myForm.value)"> <nz-form-item> <nz-form-label [nzSpan]="6" nzFor="sku">sku</nz-form-label> <nz-form-control [nzSpan]="14"> <input nz-input name="sku" type="text" id="sku" [formControl]="myForm.controls['sku']"> <nz-tag *ngIf="myForm.controls['sku'].hasError('required') && myForm.controls['sku'].touched" [nzColor]="'magenta'">请输入SKU</nz-tag> <nz-tag nzColor="error" *ngIf="myForm.controls['sku'].hasError('invalidSku')"> <i nz-icon nzType="close-circle"></i> <span>error</span> </nz-tag> </nz-form-control> </nz-form-item> <nz-form-item> <button type="submit" nz-button class="primary">Submit</button> </nz-form-item> </form> </nz-card>ts代码如下import { Component, OnInit } from '@angular/core'; import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms'; @Component({ selector: 'app-demo-form-sku-form-builder', templateUrl: './demo-form-sku-form-builder.component.html', styleUrls: ['./demo-form-sku-form-builder.component.css'] }) export class DemoFormSkuFormBuilderComponent implements OnInit { myForm: FormGroup constructor(formBuilder: FormBuilder) { this.myForm = formBuilder.group({}) let formControl: FormControl = new FormControl("", Validators.compose( [Validators.required, this.skuValidator] )) this.myForm.addControl("sku", formControl) formControl.valueChanges.subscribe((value: string) => { console.warn('值改变' + value) }) this.myForm.valueChanges.subscribe((form: any) => { console.warn('表单改变：' + JSON.stringify(form)) }) } ngOnInit(): void { } onSubmit(form: any): void { debugger this.myForm.controls['sku'] console.log(form) } skuValidator(formControl: FormControl): { [s: string]: boolean } { if (!formControl.value.match(/^123/)) { return { invalidSku: true } } return { invalidSku: false } } } 双向数据绑定ngModel是一个特殊的指令，它将模型绑定到表单中。ngModel的特殊之处在于它实现了双向绑定。相对于单向绑定来说，双向绑定更加复杂和难以推断。Angular通常的数据流向是单向的：自顶向下。但对于表单来说，双向绑定有时会更加容易。我们在ts文件添加一个sku属性，修改后如下import { Component, OnInit } from '@angular/core'; import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms'; @Component({ selector: 'app-demo-form-sku-form-builder', templateUrl: './demo-form-sku-form-builder.component.html', styleUrls: ['./demo-form-sku-form-builder.component.css'] }) export class DemoFormSkuFormBuilderComponent implements OnInit { myForm: FormGroup sku: string constructor(formBuilder: FormBuilder) { this.sku = '' this.myForm = formBuilder.group({}) let formControl: FormControl = new FormControl("", Validators.compose( [Validators.required, this.skuValidator] )) this.myForm.addControl("sku", formControl) formControl.valueChanges.subscribe((value: string) => { console.warn('值改变' + value) }) this.myForm.valueChanges.subscribe((form: any) => { console.warn('表单改变：' + JSON.stringify(form)) }) } ngOnInit(): void { } onSubmit(form: any): void { debugger this.myForm.controls['sku'] console.log(form) } skuValidator(formControl: FormControl): { [s: string]: boolean } { if (!formControl.value.match(/^123/)) { return { invalidSku: true } } return { invalidSku: false } } } html模板中通过[(ngModel)]绑定我们添加的属性<nz-card style="width:300px;"> <form [formGroup]="myForm" nz-form (ngSubmit)="onSubmit(myForm.value)"> <nz-form-item> <nz-form-label [nzSpan]="6" nzFor="sku">sku</nz-form-label> <nz-form-control [nzSpan]="14"> <input nz-input name="sku" type="text" id="sku" [formControl]="myForm.controls['sku']" [(ngModel)]="sku"> <nz-tag *ngIf="myForm.controls['sku'].hasError('required') && myForm.controls['sku'].touched" [nzColor]="'magenta'">请输入SKU</nz-tag> <nz-tag nzColor="error" *ngIf="myForm.controls['sku'].hasError('invalidSku')" > <i nz-icon nzType="close-circle"></i> <span>error</span> </nz-tag> </nz-form-control> </nz-form-item> <nz-form-item> <button type="submit" nz-button class="primary">Submit</button> </nz-form-item> </form> <div> sku:{{sku}} </div> </nz-card> -
angular内置指令 ngIf用来决定显示或隐藏元素，指令条件可以是表达式。app.component.html代码<nz-card style="width:300px;" nzTitle="Card title" [nzExtra]="extraTemplate"> <p *ngIf=false>1</p> <p *ngIf="doNotDisplay">2</p> <p *ngIf="display()">3</p> </nz-card> <ng-template #extraTemplate> <a>More</a> </ng-template>app.component.ts代码import { Component } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { doNotDisplay: boolean = false display(): boolean { return true } } 隐藏的元素不会创建。ngSwitchngSwitch指令可以通过ngSwitchCase、ngSwitchDefault走不通的分支。app.component.html代码<nz-card style="width:300px;" nzTitle="Card title" [nzExtra]="extraTemplate" [ngSwitch]="choice"> <p *ngSwitchCase="1">1</p> <p *ngSwitchCase="2">2</p> <p *ngSwitchCase="3">3</p> <p *ngSwitchDefault>default</p> </nz-card> <ng-template #extraTemplate> <a>More</a> </ng-template>app.component.ts代码import { Component } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { choice: string = "4" }ngStyle给DOM元素设置CSS属性。最简单的用法[style.property]=valueapp.component.html代码<nz-card style="width:300px;" nzTitle="Card title" [nzExtra]="extraTemplate"> <p *ngIf=false>1</p> <p *ngIf="doNotDisplay">2</p> <p *ngIf="display()" [style.background-color]="backgroundColor">3</p> </nz-card> <ng-template #extraTemplate> <a>More</a> </ng-template>app.component.ts代码import { Component } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { doNotDisplay: boolean = false backgroundColor: string = 'red' display(): boolean { return true } }另外一种方式是使用键值对<nz-card style="width:300px;" nzTitle="Card title" [nzExtra]="extraTemplate"> <p *ngIf=false>1</p> <p *ngIf="doNotDisplay">2</p> <p *ngIf="display()" [ngStyle]="{'background-color':backgroundColor}">3</p> </nz-card> <ng-template #extraTemplate> <a>More</a> </ng-template>ngClassapp.component.css中定义一个类.bordered{ border: 1px dashed royalblue; }app.component.html代码<div [ngClass]="'bordered'" style="height: 400px;"></div>也可以通过如下代码<div [ngClass]="{bordered:false}" style="height: 400px;"></div>ngFor用于循环app.component.html代码<ul> <li *ngFor="let color of colors" [ngStyle]="{color:color}">{{color}}</li> </ul>app.component.ts代码import { Component } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { colors:Array<String> constructor(){ this.colors=[ 'red','blue','green' ] } }循环时，我们也可以获取索引<ul> <li *ngFor="let color of colors;let index=index" [ngStyle]="{color:color}">{{index}}--{{color}}</li> </ul>ngNonBindable指定不编译或者绑定页面中的某个特殊部分。app.component.html代码<p ngNonBindable> {{content}} </p> <p> {{content}} </p>app.component.ts代码import { Component } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { content:string="<div>content</div>" }innerHTML、innerText通过{{}}输出内容，会强制转换成文本。我们可以通过[innerHTML]输出html。[innerText]可以将html代码强制输出文本。app.component.html代码<div [innerHTML]="content"> </div> <div [innerText]="content"> </div>app.component.ts代码import { Component } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { content:string="<div>测试</div>" }
-
angular组件的输入与输出 所谓组件的输入与输出，其实就是给组件传值或者组件往外传值。类似于父组件向子组件传值或者子组件回调父组件的方法（也可以回调传值）。angular在模板上，通过[]实现组件的输入，()实现组件的输出。组件的输入比如有一个test的组件，其中有一个name属性，我们需要通过app组件将name传递给test组件。方式一：通过@Input()注解@Input()注解适合数据比较少的情况。首先，我们需要在TestComponent类中增加一个name属性，然后导入Input，然后在name属性前增加@Input()注解。import { Component, EventEmitter, OnInit,Input } from '@angular/core'; @Component({ selector: 'app-test', templateUrl: './test.component.html', styleUrls: ['./test.component.css'] }) export class TestComponent implements OnInit { @Input('newName') name: string; constructor() { this.name = "" } ngOnInit(): void { } } @Input('newName')中的newName代表我们起的一个别名，也就是说在传值的时候，我们是通过[newName]将值传递到组件的name属性。然后我们在模板文件test.component.html增加输出，以便测试值是否传递。<p>{{name}}</p>我们在app.component.html中调用app-test组件，并通过[]传值。<app-test [newName]='"test"'></app-test>测试方式二：通过Inputs[]配置项首先，我们需要在TestComponent类中增加一个name属性，然后在@Component注解中，增加Inputs[]配置项。import { Component, EventEmitter, OnInit } from '@angular/core'; @Component({ selector: 'app-test', templateUrl: './test.component.html', styleUrls: ['./test.component.css'], inputs: ['name:newName'] }) export class TestComponent implements OnInit { name: string; constructor() { this.name = "" } ngOnInit(): void { } } inputs: ['name:newName']中，name代表当前类的属性，冒号后面的newName代表别名，也就是说在传值的时候，我们是通过[newName]将值传递到组件的name属性。然后我们在模板文件test.component.html增加输出，以便测试值是否传递。<p>{{name}}</p>我们在app.component.html中调用app-test组件，并通过[]传值。<app-test [newName]='"test"'></app-test>组件的输出angular中通过()实现组件的输出。比如我们在app-test组件中，定义了一个like方法，此方法执行时，回调父组件的ringWasPlace方法，并传递一个字符串。在app.component.ts代码如下import { Component, EventEmitter, OnInit,Input } from '@angular/core'; @Component({ selector: 'app-test', templateUrl: './test.component.html', styleUrls: ['./test.component.css'], outputs: ['putRingOnIt'] }) export class TestComponent implements OnInit { putRingOnIt: EventEmitter<string> @Input('newName') name: string; constructor() { this.name = "" this.putRingOnIt = new EventEmitter(); } ngOnInit(): void { } liked(): void { this.putRingOnIt.emit('oh oh oh') } }父组件模板文件app.component.html<app-test [newName]='"test"' (putRingOnIt)="ringWasPlace($event)"></app-test> <h1> {{message}} </h1>父组件类app.component.ts如下import { Component } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { message: string; constructor() { this.message = "" } ringWasPlace(message: string):void { this.message = message; } } 测试，点击一下like按钮，看到输出如下
-
开启angular之旅 前言这年头，作为新生代的农民工真的太难了。虽说活到老，学到老，但是学习的速度永远跟不上技术的迭代。细数一下，做过的东西真不少了。[timeline] [timeline-item]13年，Delphi[/timeline-item] [timeline-item]14、15、16年，C# WinForm+WPF[/timeline-item] [timeline-item]17、18年，C# WebForm+jQuery+bootstrap[/timeline-item] [timeline-item]19年，转java+spring boot+微服务+jQuery[/timeline-item] [timeline-item]20年，java+spring boot+vue+element UI[/timeline-item] [timeline-item]21年，java+spring boot+微服务+angular[/timeline-item][/timeline]这迭代速度，也是没谁了。现在公司使用angular，虽然基本不会使用，但是作为技术储备，还是打算在学习一下angular。angular开发环境打开安装nodejs进入nodejs官网，找到自己对应版本，下载安装即可安装完成后，输入node -v npm -v显示以下内容代表安装成功npm替换淘宝源npm config set registry https://registry.npm.taobao.org安装angular/cliangular/cli是一个类似工具的东西，具体的我也没有深究，根据我使用一次的直观感受，它的作用就是，安装它后，我们可以通过各种不同的命令行来实现angular项目的创建，运行，调试等等npm install -g @angular/cli输入ng version输出以上页面，代表安装成功。创建angular项目ng new 项目名称创建angular项目，如下示例：创建名为 angular的项目ng new angular生成项目如下运行angular项目在项目文件夹下，输入ng serve打包运行项目，然后我们可以通过默认的4200端口访问http://localhost:4200/查看项目
-
关于node的一些默认配置 作为一个后端高企前端真的非常费劲。其实，之前也接触过Node，但是基本属于能用但是不会用的地步。最近在开发时，将一个angular的前端项目从windows迁移到linux继续开发，中间遇到了很多问题，借此记录一下。Linux默认配置可以通过npm config list查看Node的配置列表。也可以通过一下命令，通过可编辑文件的方式编辑配置文件。npm config edit配置文件位于登录用户（我这里使用root登录）的目录下，是个隐藏文件，可以通过以下命令查看cd /root ls -aWin默认配置可以通过npm config list查看Node的配置列表。在windows系统中，npm全局包下载位置在'C:\用户\AppData\Roaming\npm\node_modules'中。修改全局包存储位置可以通过npm config set命令修改默认全局包的存储路径比如npm config set prefix /usr/lib/node_modules将全局包存储路径改到/usr/lib/node_modules也可以通过npm config delete命令删除某个配置项比如npm config delete prefix删除配置的全局包信息。
-
Spring Cloud集成Sentinel之持久化规则 在使用Sentinel我们发现，只要重新启动Sentinel的Java 客户端服务，Sentinel控制台配置的限流规则，就清空不存在了，下面介绍怎么持久化Sentinel规则。我们继续修改前面的代码。增加依赖 <!-- sentinel-datasource-nacos --> <dependency> <groupId>com.alibaba.csp</groupId> <artifactId>sentinel-datasource-nacos</artifactId> </dependency>修改配置增加增加Nacos数据源server: port: 8401 spring: application: name: cloudalibaba-sentinel-service cloud: nacos: discovery: server-addr: 192.168.120.180:1111 sentinel: transport: dashboard: 192.168.120.180:9000 # 默认8719端口，假如端口被占用，依次+1，直到找到未被占用端口 port: 8719 datasource: ds1: nacos: server-addr: 192.168.120.180:1111 dataId: nacos-consumer-order groupId: DEFAULT_GROUP data-type: json rule-type: flow management: endpoints: web: exposure: include: "*"在Nacos配置中心，增加配置[{ "resource": "/testQPSA", "limitApp": "default", "grade": 1, "count": 1, "strategy": 0, "controlBehavior": 0, "clusterMode": false }]需要注意：dataId、groupId、data-type属性，Nacos配置中心需要与配置文件的保持一致。此时，我们再次1s内多次刷新http://localhost:8401/testQPSA，看到会被限流
-
el-table隐藏顶部复选框 有时候我们使用el-table的选择框时，如果涉及修改、删除时，可能一次只允许用户选择一条，这样的话，如果使用顶部的全选复选框就不合适了。我们可以提供两种方式，一种是隐藏顶部的复选框，另一种是将顶部复选框改成文字，禁止点击。多选框那一列加label-class-name <el-table v-loading="loading" :data="assetClass.assetClassPropertyList" row-key="propertyId" :row-class-name="rowClassName" @selection-change="handleSelectionChange" ref="table"> <el-table-column type="index" width="50" align="center" label="序号"/> <el-table-column type="selection" width="50" align="center" label-class-name="DisabledSelection"/> <el-table-column prop="propertyName" label="属性名称" show-overflow-tooltip align="center"> <template slot-scope="scope"> <el-input v-model="scope.row.propertyName" size="mini" maxlength="64" :show-word-limit="true"></el-input> </template> </el-table-column> <el-table-column prop="isRequired" label="是否必填" :formatter="isRequiredFormatter" width="100"> <template slot-scope="scope"> <el-switch v-model="scope.row.isRequired" active-value="Y" inactive-value="N" ></el-switch> </template> </el-table-column> </el-table>style加样式隐藏顶部复选框<style scoped> /*表格全选框去除空框*/ .el-table >>> .DisabledSelection .cell .el-checkbox__inner { display: none; position: relative; } </style>将顶部复选框改成汉字<style scoped> /*表格全选框去除空框*/ .el-table >>> .DisabledSelection .cell .el-checkbox__inner { display: none; position: relative; } /*表格全选框改为：选择*/ .el-table >>> .DisabledSelection .cell:before { content: "选择"; position: absolute; left: 7px; } </style>
-
vue使用xlsx修改样式导出excel 安装依赖npm install --save xlsx npm install --save xlsx-style //如果需要修改样式，则需要安装解决引入xlsx-style报错问题找到：node_modules\xlsx-style\dist\xlsx.full.min.js 并把这个js文件拷贝到static文件夹下再index.html中引入 新建downExcel.js文件import XLSX from "xlsx" // 配置 const wopts = { bookType: "xlsx", bookSST: true, type: "binary", cellStyles: true }; function downloadExl(json, config, type) { var tmpdata = json[0]; json.unshift({}); var keyMap = []; //获取keys for (var k in tmpdata) { keyMap.push(k); json[0][k] = k; } var tmpdata = []; //用来保存转换好的json let border = { bottom: { style: "thin", color: { rgb: "000000" } }, top: { style: "thin", color: { rgb: "000000" } }, left: { style: "thin", color: { rgb: "000000" } }, right: { style: "thin", color: { rgb: "000000" } } }; let style0 = { border: border, alignment: { horizontal: "center", wrapText: true, vertical: "center" }, font: { sz: 18, bold: true, color: { rgb: "000000" }, outline: true }, fill: { bgColor: { indexed: 64 } } }; let style1 = { border: border, alignment: { horizontal: "center", wrapText: true, vertical: "center" }, font: { sz: 12, bold: true, color: { rgb: "000000" }, outline: true }, fill: { bgColor: { indexed: 64 } } }; json .map((v, i) => keyMap.map((k, j) => Object.assign({}, { v: v[k], position: (j > 25 ? getCharCol(j) : String.fromCharCode(65 + j)) + (i + 1) }) ) ) .reduce((prev, next) => prev.concat(next)) .forEach((v, i) => { // 在遍历时修改样式 let s = { font: { sz: 10, name: "微软雅黑" }, alignment: { horizontal: "center", wrapText: true, vertical: "center" } }; // 判断是否是标题 if (config._this.title.includes(v.v) && v.position.length == 2 && v.position[1] == "1") { s.fill = { fgColor: { rgb: "008000" } }; s.border = { right: { style: "thin", color: { rgb: "000000" } } }; // 判断是否是需要红色字体的标题字段 if (config._this.redTitle.includes(v.v)) { s.font.color = { rgb: "ff0000" }; } } tmpdata[v.position] = { v: v.v || "", s }; }); var outputPos = Object.keys(tmpdata); //设置区域,比如表格从A1到D10 //设置每列对应的宽度 tmpdata["!margins"] = [{ //工作表单元格合并配置项 可选 s: { //s start 开始 c: 0, //cols 开始列 r: 0 //rows 开始行 }, //开始 A1 e: { //e end 结束 c: 4, //cols 结束列 r: 0 //rows 结束行 } }, { s: { c: 0, r: 1 }, //开始 A2 e: { c: 1, r: 1 } //结束B2 }, { s: { c: 2, r: 1 }, //开始 C2 e: { c: 3, r: 1 } //结束D2 }, ] // !cols工作表列宽配置项 可选 tmpdata["!cols"] = config.colwidth; // 第一二行样式 tmpdata["A1"].s = style0; tmpdata["A2"].s = style1; tmpdata["C2"].s = style0; var tmpWB = { SheetNames: ["mySheet"], //工作表名数组 Sheets: { mySheet: Object.assign({}, tmpdata, //!ref设置工作表的范围 如 必须 否则不显示 { "!ref": outputPos[0] + ":" + outputPos[outputPos.length - 1] //设置填充区域 } ) } }; const tmpDown = new Blob( [ s2ab( XLSX.write( tmpWB, { bookType: type == undefined ? "xlsx" : type, bookSST: false, type: "binary" } //这里的数据是用来定义导出的格式类型 ) ) ], { type: "" } ); // 数据处理完后传入下载 saveAs( tmpDown, config._this.fileName + "." + (wopts.bookType == "biff2" ? "xls" : wopts.bookType) ); } // 获取26个英文字母用来表示excel的列 function getCharCol(n) { let temCol = "", s = "", m = 0; while (n > 0) { m = (n % 26) + 1; s = String.fromCharCode(m + 64) + s; n = (n - m) / 26; } return s; } function s2ab(s) { if (typeof ArrayBuffer !== "undefined") { var buf = new ArrayBuffer(s.length); var view = new Uint8Array(buf); for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff; return buf; } else { var buf = new Array(s.length); for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xff; return buf; } } // 下载功能 function saveAs(obj, fileName) { var tmpa = document.createElement("a"); tmpa.download = fileName || "未命名"; // 兼容ie 火狐 下载文件 if ("msSaveOrOpenBlob" in navigator) { window.navigator.msSaveOrOpenBlob(obj, fileName); } else if (window.navigator.userAgent.includes("Firefox")) { var a = document.createElement("a"); a.href = URL.createObjectURL(obj); a.download = fileName; document.body.appendChild(a); a.click(); } else { tmpa.href = URL.createObjectURL(obj); } tmpa.click(); setTimeout(function () { URL.revokeObjectURL(obj); }, 100); } export default downloadExl;使用import downloadfn from "@/config/downExcel data(){ return{ fileName:"testExcel", xmindJSON: [ { Code: 1, Name: "里斯", GBPerfix: "ABC-F", stop: "测试" }, { Code: 2, Name: "里斯1", GBPerfix: "ABC-B", stop: "测试1" }, { Code: 3, Name: "里斯2", GBPerfix: "ABC-D", stop: "测试1" } ], config: { colwidth: [ { wpx: 169 }, { wpx: 63 }, { wpx: 203 }, { wpx: 128 }, ], _this: this }, title: ["功能模块与路径", "用例编号", "前置条件"] } }methods:{ export() { downloadfn(this.xmindJSON, this.config); } }
-
请输入一个有效的值，最接近的值为24.01和25.01 在用到表单里，发现把鼠标移到type="number"的input框上时有时候会显示“请输入有效值,两个最接近的有效值为24.01,25.01”的提示，24.01和25.01跟你输入的整数值有关。代码里面并没有这个提示，发现只有当输入小数时会出现提示，原来是浏览器默认输入整数，如果要输入小数需要修改步长，比如将step设为0.01。 <el-input @input="((val)=>{editInput(val,'beforeWeight')})" type="number" @blur="onBlurBeforeWeight" v-model="form.beforeWeight" :min="0.01" :max="9999999999.99" :step="0.01" placeholder="请输入去种仁前重量" > <template slot="append">公斤</template> </el-input>
-
elementui textarea与input字体不一致问题解决 今天使用elementui中input及textarea时，发现两种控件默认显示的字体是不一致的，input的比较扁，而textarea显示的比较瘦高。可以看下下面这张图，比较明显。原因通过F12，我们可以看到textarea的字体为monospace,如下图input的字体为Arial,如下图解决在全局css文件加入以下代码即可， 因为我们项目使用的是ruoyi的系统，所以在sec/assets/styles/element-ui.scss文件中加入以下代码即可textarea { //font-family: Arial, Helvetica, sans-serif; //解决TextArea与input不一致的问题 font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif; }
-
vue-baidu-map通过路书实现轨迹回放 网上实现轨迹回放的代码很多，但是很少有vue实现的。本文通过vue-baidu-map对vue轨迹回放功能进行说明。安装依赖npm install vue-baidu-map --save修改main.jsmain.js增加以下内容，注意ak需要替换成自己的。import BaiduMap from 'vue-baidu-map' Vue.use(BaiduMap, { ak: '替换成自己的ak' })前端页面<template> <div class="app-container"> <el-form :model="queryParams" ref="queryForm" :inline="true"> <el-row> <el-col :span="6"> <el-form-item label="车辆" prop="vehicleLicence"> <el-select filterable v-model="queryParams.vehicleLicence" placeholder="请选择车辆" clearable size="small" style="width: 100%" > <el-option v-for="vehicle in vehicleOptions" :key="vehicle.licence" :label="vehicle.licence" :value="vehicle.licence" /> </el-select> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="查询时间" prop="dateRange"> <el-date-picker v-model="dateRange" size="small" style="width: 100%" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="-" start-placeholder="请选择开始时间" end-placeholder="请选择结束时间" :picker-options="pickerOptions" ></el-date-picker> </el-form-item> </el-col> <el-col :span="5"> <el-form-item label="轨迹速度"> <el-slider v-model="speed" style="width: 200px" :step="1"></el-slider> </el-form-item> </el-col> <el-col :span="5"> <el-form-item style="float: right"> <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button> <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> </el-form-item> </el-col> </el-row> </el-form> <baidu-map style="height:47.1rem;width:100%" :center="center" :zoom="15" :scroll-wheel-zoom="true"> <bm-polyline :path="path" stroke-color="blue" :stroke-opacity="0.5" :stroke-weight="3" :editing="false" ></bm-polyline> <bm-marker :position="{lng: startMark.lng, lat: startMark.lat}"></bm-marker> <bm-marker :position="{lng: endMark.lng, lat: endMark.lat}"></bm-marker> <bml-lushu @stop="reset" :path="path" :icon="icon" :play="play" :rotation="true" :speed="speed * 10" :infoWindow="true" :content="content" > </bml-lushu> </baidu-map> </div> </template> <script> //百度地图 import BaiduMap from 'vue-baidu-map/components/map/Map.vue' import BmScale from 'vue-baidu-map/components/controls/Scale' import BmNavigation from 'vue-baidu-map/components/controls/Navigation' import BmMarkerClusterer from 'vue-baidu-map/components/extra/MarkerClusterer' import BmMarker from 'vue-baidu-map/components/overlays/Marker' import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow' import { BmlLushu } from 'vue-baidu-map' import drugMarkerIcon from '@/assets/icons/map_marker_check.png' import { selectGpsOrbitList } from '@/api/dmp/industry/gps/orbit' import { listAllVehicle } from '@/api/basic/vehicle' export default { components: { BaiduMap, BmScale, BmNavigation, BmMarkerClusterer, BmMarker, BmInfoWindow, BmlLushu }, props: {}, data() { return { // 查询参数 queryParams: { vehicleLicence: undefined }, // 日期范围 dateRange: [new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate() + ' 00:00:00', new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate() + ' 23:59:59'], play: false, path: [], center: { lng: 116.984646, lat: 36.659686 }, startMark: {}, endMark: {}, icon: { url: drugMarkerIcon, size: { width: 32, height: 32 }, opts: { anchor: { width: 27, height: 13 } } }, content: undefined, speed: 20, pickerOptions: { disabledDate(time) { return time.getTime() > Date.now() - 8.64e6 } }, vehicleOptions: [] } }, methods: { reset() { this.play = false }, handleSearchComplete(res) { this.path = res.getPlan(0).getRoute(0).getPath() }, handleQuery() { const search = this.addDateRange(this.queryParams, this.dateRange) if (this.queryParams.vehicleLicence === undefined) { this.msgError('请选择车辆') return } if (search.beginTime === undefined || search.beginTime === '' || search.endTime === undefined || search.endTime === '') { this.msgError('请选择查询时间') return } selectGpsOrbitList(this.addDateRange(this.queryParams, this.dateRange)).then(response => { if (response.data.length <= 0) { this.msgError('未查询到该车辆的运行数据') return } let length = response.data.length let middle = -1 if (length % 2 === 0) { middle = length / 2 + 1 } else { middle = (length + 1) / 2 } response.data.forEach(item => { let obj = { lng: item.longitude, lat: item.latitude } this.path.push(obj) }) this.center = this.path[middle] this.startMark = this.path[0] this.endMark = this.path[this.path.length - 1] this.content = this.queryParams.vehicleLicence this.play = true }).catch(error => { }) }, /** 重置按钮操作 */ resetQuery() { this.resetForm('queryForm') this.dateRange = [new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate() + ' 00:00:00', new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate() + ' 23:59:59'] } }, mounted() { listAllVehicle().then(response => { this.vehicleOptions = response.data }) } } </script> <style> </style> data关键参数说明：play:true或false，为true时，开始播放轨迹。path:数组，格式为[{lng: 116.984646,lat: 36.659686}]center:地图中心点，格式{lng: 116.984646,lat: 36.659686}startMark:轨迹开始经纬度，格式{lng: 116.984646,lat: 36.659686}endMark:轨迹终点经纬度，格式{lng: 116.984646,lat: 36.659686}icon:轨迹图标，如下演示的小车图标content:轨迹显示内容，如下按时的车牌speed:轨迹绘制的速度，这里通过el-slider实现滑动调整速度bm-polyline组件属性说明path:绘制曲线的经纬度数组bml-lushuplay:true或false，为true时，开始播放轨迹。infoWindow:true或false，为true时，显示窗口，及content内容。
-
Vue使用NProgress NProgressNProgress就是在页面顶端显示一个进度条。安装npm install --save nprogress使用引入NProgress我们新建一个global.js文件，通过钩子，在路由开始前，启动NProgress，路由结束后，停止NProgressimport NProgress from 'nprogress' import 'nprogress/nprogress.css' import router from './router' router.beforeEach((to, from, next) => { NProgress.start() setTimeout(() => { next() }, 1000) } ) router.afterEach((to, from) => { NProgress.done() })在main.js中引入global.jsimport './global'NProgress方法说明//方法 NProgress.start() - 显示进度条 NProgress.set(0.4) - 设置百分比 NProgress.inc() - 稍微增加 NProgress.done() - 完成进度(进度条消失)修改NProgress颜色颜色配置是在App.vue中的加入样式#nprogress .bar { background: red !important; }NProgress配置可以通过调用 .set(n)来设置进度，n是0-1的数字。 NProgress.set(0.0); // Sorta same as .start() NProgress.set(0.4); NProgress.set(1.0); // Sorta same as .done() 可以使用inc()随机增长进度条，注意，这个方法永远不会让进度条达到100%。 NProgress.inc(); NProgress.configure({ showSpinner: false }) //禁用进度环 NProgress.configure({ trickle : false }) //关闭进度条步进 NProgress.configure({ trickleRate : 10}) //每次步进增长多少 NProgress.configure({ trickleSpeed : 200}) //每次步进间隔，单位毫秒ms NProgress.configure({ easing: 'linear'}) //动画方向 NProgress.configure({ speed : 10}) //动画速度，单位毫秒ms NProgress.configure({ minimum : 0.08}) //最小百分比spinner即右侧的一个东西
