vue
天气晚来秋~
我生待明日,万事成蹉跎。
展开
-
element表格头部换行
element表格头部换行头部换行敲空格,换行是不行的,用eleemntUI自带的render-header函数原创 2022-09-14 09:15:43 · 1198 阅读 · 0 评论 -
js文字转语音播报
js文字转语音播报js文字转语音播报原创 2022-08-03 08:44:26 · 201 阅读 · 0 评论 -
VUE页面表格数据多卡顿用虚拟表单
情景概况:页面表格想要通过滚动条展示非常多的数据,后端返回接口很快。解决方法:虚拟滚动 vue + vxe-tableelement ui 表单已经不能满足这个需求,二次封装也很麻烦,所以推荐用现有插件vxetable..................原创 2022-07-08 15:27:32 · 2811 阅读 · 0 评论 -
VUE语音提示
VUE语音提示引入一段语音提示音在需要提示的地方创建audio标签,播放就行原创 2022-06-30 15:48:03 · 838 阅读 · 1 评论 -
vue模拟双色球
通过vue代码模拟双色球选号原创 2022-06-21 10:23:49 · 618 阅读 · 0 评论 -
vue浏览在线pdf文档
当项目中需要在线浏览pdf文件和下载时,只需提供一个url,可以用iframe元素展现原创 2022-06-21 10:16:26 · 286 阅读 · 0 评论 -
vue全屏和退出全屏
由于浏览器限定原理,新打开页面时不能自动打开全屏,需要手动点击一下才可以。原创 2022-06-21 10:12:38 · 774 阅读 · 0 评论 -
element表格列相同值自动合并单元格
合并表格列通过:span-method="objectSpanMethod" 绑定方法来进行合并原创 2022-04-08 15:23:56 · 804 阅读 · 0 评论 -
computed应用案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.ne.原创 2022-03-19 10:58:09 · 179 阅读 · 0 评论 -
vue项目中使用思维导图mindmap
安装npm install @hellowuxin/mindmaporyarn add @hellowuxin/mindmapvue中使用<template> <div class="nav"> <mindmap height="500" width="100%" nodeClick zoomable showNodeAdd v-model="data" >...原创 2022-02-23 12:27:26 · 5094 阅读 · 20 评论 -
element动态多级表格+自适应表头宽度
<template> <div> <p>表格数据</p> <el-table :data="tableData" border height="400px" max-height="400px" size="small" row-class-name="row" cell-class-name="column" :highlight-cu.原创 2021-11-24 15:43:13 · 725 阅读 · 0 评论 -
el-table多级表头封装(+表头省略号)
<template> <div> <p>表格数据</p> <el-table :data="tableData" border height="400px" max-height="400px" size="small" row-class-name="row" cell-class-name="column" :highlight-cu.原创 2021-11-16 16:50:00 · 869 阅读 · 0 评论 -
普通文本el-tootip超出宽度自动显示省略号,悬停显示
在el-table中只要加show-overflow-tooltip <el-table-column show-overflow-tooltip>就可以实现,那普通文本呢?官方并没有给出,就自己了封装一个<template> <!-- 使用方法 --> <div class="text-box"> <tooltip-over :content="tipText"></tooltip-over> </d.原创 2021-11-16 14:41:46 · 944 阅读 · 0 评论 -
前端校验是否数组及是否为空
const isNotEmpty = arr => Array.isArray(arr) && arr.length > 0;const arr = '';// const arr = [];console.log(isNotEmpty(arr));不是数组,数组为空都是false原创 2021-10-11 10:48:41 · 1075 阅读 · 0 评论 -
element表格hover取消,不影响自己设置的颜色
.page /deep/ .el-table__body tr:hover > td { background-color: rgba(0, 0, 0, 0) !important;}原创 2021-08-12 15:12:47 · 503 阅读 · 0 评论 -
echarts封装(例子:动态时间滚动案例)
1-建立这样一个文件夹和下面的文件,作为子组件echart-option.js 这个文件集中配置option,里面参数可参考https://echarts.apache.org/zh/option.html#titleexport const newOption = { title: { text: '', }, xAxis: { type: 'category', boundaryGap: true, },...原创 2021-08-11 13:40:53 · 378 阅读 · 0 评论 -
element表格取消hover事件
/* page-box父元素的class */.page-box /deep/ tr{ pointer-events: none;}原创 2021-08-07 14:25:05 · 393 阅读 · 0 评论 -
前端15k具备的能力
基本功考察关于基础能力html语义化标签的理解; 结构化的理解; 能否写出简洁的html结构; SEO优化 h5中新增的属性; 如自定义属性data, 类名className等, 新增表单元素, 拖拽Drag h5中新增的API, 修改的API, 废弃的API 稍作了解 (离线存储, audio, video) CSS选择器( 三大特性 ) BFC机制 盒模型 CSS模块化开发(封装); SCSS和LESS的使用 屏幕适配 以及 页面自适应 CSS3中新增的选择器 CSS3中新增的属原创 2021-08-05 15:33:43 · 492 阅读 · 0 评论 -
vue下载文件
调用这个方法就行this.downLoad('http://....', '文件名称');downLoad(url, fileName) { return fetch(url).then((res) => { res.fetch(url).then((blob) => { const a = document.createElement("a"); const url = window.URL.createObjec原创 2021-08-05 11:43:53 · 512 阅读 · 1 评论 -
element表格表头tootip省略号
效果图<template> <div> <p>表格数据</p> <el-table :data="tableData" height="400px" max-height="400px" size="small" row-class-name="row" cell-class-name="column" :highlight-curre.原创 2021-08-05 11:18:49 · 320 阅读 · 0 评论 -
vue地球围着太阳转
效果图<template> <div class="earth-page"> <div class="sun-box"> <div class="sun-qiu"> <div class="yue sun-qiu"> <div class="xiao"> <img :src="yue" /> </di.原创 2021-08-03 10:19:53 · 226 阅读 · 0 评论 -
vue封装过滤器
使用方式<p>{{name | formterStr}}</p>封装全局import Vue from 'vue'Vue.filter('formterStr', function (value) { if (!value) return '' value = value.replace(/学院/g,'大学') // 这里写入过滤的方法即可 return value})...原创 2021-08-03 09:56:24 · 41 阅读 · 0 评论 -
前端超出宽度显示省略号并显示文本,不超出显示也不触发hover事件
需求:1-文本超出div宽度时显示省略号,且鼠标放上去显示全部文本;2-文本不超出时正常显示也不触发hover事件。一、普通div通过title显示用户可能会放大放小窗口,所以做了动态宽度直接上代码 mounted() { this.getSetTextWidth(); // 初试化显示省略的div }, undated() { // 根据窗口变化实时监听 Window.onresize = () => { return ((原创 2021-07-02 15:33:12 · 668 阅读 · 0 评论 -
element表格设置fixed后滚动条滚动时右下角空白块
当滚动时显示不全导致原因:自定义滚动条不全/* 滚动条整体部分 */::-webkit-scrollbar { width: 8px; height: 8px; background-color: #f5f6fa;}/* 滚动条的轨道 */::-webkit-scrollbar-track { width: 8px; height: 8px;}/* 滚动条的滑块按钮 */::-webkit-scrollbar-thumb { width: 6px; he.原创 2021-07-01 16:45:24 · 1210 阅读 · 0 评论 -
vue echart 随页面高度变化而变化
mounted() { window.addEventListener('resize',this.handleResize)},undated(){ window.onresize = () => { return (() => { this.handleResize(); })(); }},methods: { handleResize() { if(!this.echart) return;.原创 2021-07-01 10:36:59 · 206 阅读 · 0 评论 -
前端动态的宽高度
width: calc(100% - 100px);height: calc(100% - 100px);后面设置为减掉的padding,margin,border原创 2021-06-30 17:31:11 · 135 阅读 · 0 评论 -
前端文字省略号
width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;设定一个固定宽度原创 2021-06-30 17:28:22 · 148 阅读 · 0 评论 -
element下拉框可远程搜索,滑动到底可加载
问题:可以实现远程搜索,滚轮到底可以懒加载解决方案:思路输入搜索全局请求,用分页解决,滚动到底增大显示页数量。1-先自定义封装指令,滚轮到底的触发事件创建elementScroll/index.js文件importVuefrom'vue'Vue.directive('loadmore',{bind(el,binding){constSELECTWRAP_DOM=el.querySelector('.el-select-dropdown.el-select...原创 2021-06-24 10:28:06 · 968 阅读 · 1 评论