项目功能
文章平均质量分 51
小源写代码
这个作者很懒,什么都没留下…
展开
-
页面自适应-rem
学习目标:1、rem学习内容:1rem指html.body{font-size: 10px}设置的值(此处1rem=10px)html中<template> <div id="rightBox1" :style="{ height: pdfheight }"> </div></template><script> window.onload=function(){ (function(){原创 2022-01-20 11:44:18 · 675 阅读 · 0 评论 -
el-popver气泡框放大展示
效果展示:静止效果:身份证正反面示意图鼠标悬浮放大效果:查看具体信息代码实现:父组件:<Photo_show>是封装的组件,并在其中传需要的参数,封装的原因是项目需要多次使用该效果。HTML<template> <div> <Photo_show ref="LicenseUpload" :isLicense='2' :pilot_id="id" /> <Photo_show ref="LicenseUpload"原创 2021-12-30 16:13:23 · 580 阅读 · 0 评论 -
VUE引入阿里icon
效果展示:引入眼睛的图标步骤:1:https://www.iconfont.cn/2:搜索3:放在要选择的图标上“添加入库”4:点击自己的购物车5:下载代码6,向项目的src文件夹下的assets添加iconfont文件夹,将刚刚9个文件复制到里面7、main.js中import './assets/iconfont/iconfont.css';8、对应的.vue文件中<i class="iconfont icon-yanjing"></i>9、注意i原创 2021-12-29 21:11:36 · 483 阅读 · 0 评论 -
组件样式交替显示(点击触发tag变input)
效果展示:默认展示经纬度数值,点击后变为input输入框可以输入点击前:点击后:代码:html:首选是一个组件v-for的循环展示,v-for中再设置两种样式<div id="item-area"> <div class="item" v-for="(i, index) in items" :key="index" > <el-input class="i原创 2021-12-17 15:38:05 · 226 阅读 · 0 评论 -
功能杂记(watch数组、键盘快捷)
学习目标:1、监听数组变化2、回车键input框默认输入完成,取消对焦3、阻止事件冒泡学习内容:1.监听数组变化 watch:{ items:{ handler:function(val){ this.initItem() }, deep:true } },<el-input @input="newInput" v-model.trim="airwaylist.name" @keyup.enter.native="$原创 2021-12-17 13:53:31 · 180 阅读 · 0 评论 -
mousemove()和mouseleave()鼠标进出元素控制事件
功能1描述:基于vue和element-ui实现鼠标移动在el-table某一列时,该列出现排序箭头。其他列没有排序箭头。代码实现:html:<el-table :data="tableDataFiltered" @sort-change="sort" @header-click="changeSortIconCol" @mousemove.native="sort1move" @mouseleave.native="sort1leave"><el-table原创 2021-12-15 18:15:15 · 1613 阅读 · 0 评论 -
排序表格的列
功能展示:1、展示表头及右侧排序箭头且箭头默认灰色2、首次点击默认升序排列且箭头变为蓝色3、再点击变为降序排列(如此循环)4、点击其他列,上一排列箭头变回灰色代码:HTML<el-table :data="tableDataFiltered" :max-height="maxheight" border stripe class="table" ref="multipleSelection" :header-cell-style="{backgrou原创 2021-12-07 17:27:24 · 253 阅读 · 0 评论 -
关键字搜索功能
效果展示:1输入关键字,页面自动展示包含关键字的信息分析:搜索框输入关键字——在四列内容中匹配——选中匹配到的整项数据——所有选中数据作为table的data代码:html<el-input type="search" v-model="searchValue" placeholder="请输入关键字" clearable=""> <i slot="suffix" class="el-input__icon el-icon-search"><原创 2021-12-03 13:29:29 · 2012 阅读 · 0 评论 -
拖拽实现-并与地图交互
效果展示:横向拖拽,并且地图中点随拖拽顺序变化学习内容:提示:这里可以添加要学的内容例如:1、 搭建 Java 开发环境2、 掌握 Java 基本语法3、 掌握条件语句4、 掌握循环语句代码:html部分<Draggable :items="dragItems" @dragHandle="dragHandle(arguments)" />在data中data(){ return { dragItems:[] }}在mounted中moun原创 2021-12-01 14:33:40 · 552 阅读 · 0 评论 -
input输入改变-地图显示改变
结果展示:描述:地图信息与子组件dialog信息联动显示界面部分代码:<el-row v-for="(item, index) in airwaylist.pointList" :key="index" > <el-col :span="6" class="posstyle" > <el-form-item > <template> <el-s原创 2021-11-17 20:44:51 · 151 阅读 · 0 评论