- 博客(52)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 自定义插入页面标签以及实现类似通讯录的首字母搜索
对某个页面实现自定义标签的添加功能,同时支持动态的已有数据提示.其次对所有已有的标签实现类似于通讯录首字母搜索的功能
2022-06-27 19:24:30
179
原创 iview table单个单元格编辑
实现细节<template> <div> <Table :columns="columns" :data="data" border ></Table> <br> <div style="text-align: center;"> <Button @click="submit" type="primary">Submit</Bu...
2022-04-18 16:09:49
974
原创 爷孙通信 及 组件自调用
组件自己调用自己父组件<template> <div> <detail-list :list="categoryList"></detail-list> </div></template><script>import DetailList from './detailList.vue'export default { components: { DetailList }, data...
2022-03-28 19:55:39
1311
原创 v-for 自定义展开收缩div
<template> <div> <div class="main_area"> <div v-for="(item, index) in helpList" :key="index"> <div class="content_main"> <div class="content_text"> <div class="content_title".
2022-02-16 15:03:33
432
原创 vue 全屏效果实现
安装依赖 npm install --save screenfull在需要的界面导入 import screenfull from 'screenfull'实现效果具体实现<template> <div> <div ref="content" class="content"> <Tooltip :content="isFullscreen ? `取消全屏` : `全屏`" placement="bottom"> .
2022-01-07 11:28:49
774
原创 iview poptip 外部input的实现
在开发中，我们期望带有poptip的input可以占满100%的宽度（图1），但实际使用的时候poptip包含组件的方法，会发现并没有达到期望的效果（图2）图1图2解决方案：将input移出<template> <br> <br> <Row> <Col span="8" style="border:1px solid #bed742;"> <Input v-model="value1" :aut
2021-12-27 20:46:55
463
原创 canvas 封装chart —— 绘制权重比例得分图
废话不多说，先整目标效果图开发需求：期望上述完成效果图的组件封装数据格式： // 其中颜色可传可不传，不传的话，按照封装的组件中，随机生成颜色 scores: [60, 60, 50, 20, 10, 32, 88], // 必须的 // 格式1 myOptions: { radius: 60, width: 300, height: 200, data: [ { weighting: 20, title: '语文' }, { weighti
2021-12-15 15:20:47
1640
原创 vue 项目中 v-for渲染的对应card点击切换显示，且对应card加选中样式
默认展示效果点击对应卡片：<template> <Row :gutter="8" style="margin-top: 14px;clear: both;"> <Col :xs="24" :sm="12" :md="8" :lg="4" v-for="(item, index) in curPageData" :key="index" > <Card s.
2021-12-02 11:49:06
1020
原创 iview - tree节点的相关操作
最新有一个新的需求，即在iview tree的自定义节点基础上，对当前节点进行相关的操作，参考相关博客，整理了以下两种方案。右键弹出相关操作按钮 参考博客实现细节：<template> <div> <Tree :data="kindData" :render="renderContent" ></Tree> <Button type="primary" @click=
2021-11-09 18:11:00
1392
原创 JavaScript - 流量单位换算
简易方法：function bytesToSize(bytes) { if (bytes === 0) return '0 B'; var k = 1024, sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], i = Math.floor(Math.log(bytes) / Math.log(k)); return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' +
2021-10-25 16:05:21
544
原创 嵌套tabs的使用：外层切换，导致内层tabs显示空白的问题
异常显示效果：根据iview官网中对tabs的属性，当嵌套使用 Tabs，设置该属性指向对应 Tabs 的 name 字段使用方法：<Tabs type="card" name="outTabs" value="tab1-1"> <TabPane label="tab1-1" name="tab1-1" tab="outTabs"> <Tabs name="innerTabs" value="tab2-1"> <TabPane label
2021-10-15 16:15:10
996
原创 iview-table实现自适应高度渲染表格条数
实现效果：<template> <div :style="{ height: scrollerHeight + 'px' }"> <div> <Input v-model="searchForm.name" icon="md-search" style="width: 30%;" @keyup.enter.native="search()"></Input> </div> <br>
2021-10-13 18:02:44
499
原创 iview-select 鼠标移入option，显示对应操作
目标效果：<template> <Select v-model="selectObj" filterable clearable style="width: 300px;" > <OptionGroup label="--- 测试1 ---"> <Option v-for="item in selectOptions1" :value="item.value"
2021-09-29 15:54:36
497
原创 vue路由跳转白屏问题
当前问题： 比如当前路由为： `/projectDetail?Id=1&name=页面1` 通过页面改变了路由参数Id `/projectDetail?Id=2&name=页面1` 此时做的操作是： this.$router.push({ name: 'projectDetail', query: { Id: this.id, name: this.name } }) this.$router.go(0) 在这种情况下，会导致页面整体刷新，且出
2021-09-23 15:10:04
7308
原创 前端随机密码生成 + 内容复制
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #button { font-family: sans-serif; font-size: 15px; margin-top: 20px; border: 2px solid rgb(20.
2021-08-09 10:19:00
403
原创 vue - axios 取消仍在pending中的接口
需求：tabs切换时，调用相同接口（参数不同）渲染图表数据。（每 3s 请求一次）存在问题：在tabs切换的时候，因为定时器的原因，接口数据仍在pending，导致切换之后的图表第一条数据仍为上一个tabs的数据解决方案：第二次请求接口时，取消上一次请求。axios官方手册第一次未结束，不允许第二次请求定义一个变量，判断此时tabs是否切换，做对应的数据渲染具体js实现：取消上一次接口请求实现细节import axios from 'axios'export
2021-08-06 16:07:22
1929
1
原创 js计算时间，返回 「 x 天 x 小时 x 分钟 」的格式
显示效果：由于后台直接返回的是毫秒的时间戳，则计算如下：formatter (val) { var timediff = val / 1000 // 计算天数 var days = Math.floor(timediff / 86400) // 计算小时数 var remain = timediff % 86400 var hours = Math.floor(remain / 3600) // 计算分钟数 remain = remain % 3600 var min
2020-08-05 13:13:32
519
原创 基于iview的treegrid组件
树形数据展开效果图页面引用<template> <tree-grid :items='data' :columns='columns' @on-row-click='rowClick' @on-selection-change='selectionClick' @on-sort-change='sortClick'></tree-grid></templ
2020-07-27 11:04:35
358
原创 基于axios请求接口获取数据，封装APEXCHARTS
在 博客 的基础上，对页面的axios请求获取的数据进行封装csLine.vue<template> <myCharts :interval="time" :url="urlData" :config="config" :height="height" ></myCharts></template><script>import myCharts from './myCh
2020-07-08 19:32:10
429
原创 基于APEXCHARTS图表组件简单封装，vue页面使用时代码更优化
封装界面myChart.vue<template> <vue-apex-charts :height="currentHeight" :options="chartOptions" :series="series" ></vue-apex-charts></template><script>import VueApexCharts from "vue-apexcharts"let timerId = null export de
2020-07-08 14:53:21
910
1
原创 使用apexcharts组件的折线图(smooth的面积曲线)
引入组件import VueApexCharts from 'vue-apexcharts'页面使用组件 <template> <vue-apex-charts class="vx-col w-1/3" height=250 type="area" :options..
2020-07-01 21:00:38
1542
原创 iview Model 高度默认内容撑开，只有超过指定高度才显示滚动条
<Modal v-model="errorDialog" width="70%" title="信息详情"> <div style="max-height:500px;overflow-y:auto;overflow-x:hidden;">{{errorMessage}}</div></Modal>errorMessage: '',errorDialog: false,showMore (content) { this.errorDial
2020-06-18 14:59:16
3584
2
原创 数组对象拼串
数组对象拼串var objs = [ { "id": 445, "pubId": 22, "propName": "MQ类型", "propCode": "mqType", "defaultValue": "1", "memo": "" }, { "id": 446, "pubId": 22, "propName": "MQ主题", "propCode": "mqTopic", "defaultValue": "", "memo": "" }]
2020-05-28 16:37:26
128
原创 数组对象去重 及 数组对象中找对应对象数据
let arr = [{id: 1,name: 'asdaad'},{id: 2, name: 'asda'},{id: 3,name: 'aa'},{id: 4,name: 'cc'}]let arr1 = [{id: 3,name: 'aa'},{id: 4,name: 'cc'}]// 方法1arr = arr.filter(item => { let list = arr1.map(v => v.id) return !list.includes(item.id)})co
2020-05-26 17:32:04
429
原创 渐变
线性渐变<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>线性渐变</title> <style> .border1{ width:...
2020-03-29 21:56:18
110
原创 实现简易计算器
问题描述：1、除法操作时，如果被除数为0，则结果为02、结果如果为小数，最多保留小数点后两位，如2 / 3 =0.67（显示0.67），1 / 2 = 0.5（显示0.5）<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>百度笔试0329</ti...
2020-03-29 21:44:44
360
2
原创 腾讯2020前端开发暑假实习第一次面试
一、投递信息投递时间：2020年3月4日岗位：Web前端开发方向—暑期实习生工作地点：深圳面试时间：2020年3月14日面试方式：视频面试面试时长：约60分钟面试平台：牛客网面试官姓黄，是位女生二、面试官问题问答题首先进行了一下自我介绍，然后问读研结束了是准备参加工作还是准备继续赌博？然后问答题主要是分为了两个方面（css跟js）position属性？我的回答：...
2020-03-15 16:00:09
426
原创 牛客前端代码刷题集
1 数组求和 题目描述： 有一个数组为[1, 2, [3, 4], [5, 6], 7],求这个数组的和 解题思想：先扁平化递归再求和 var arr = [1, 2, [3, 4], [5, 6], 7] function flat (arr) { var res = [] for (var i = 0; i < arr.length; i++...
2020-03-13 16:27:49
547
原创 AJAX原生创建过程
创建XMLHttpRequest对象，也就是创建一个异步调用对象创建一个新的HTTP请求，并指定该HTTP请求方法，URL及验证信息设置响应HTTP请求状态变化的函数.发送HTTP请求.获取异步调用返回的数据.使用JavaScript和DOM实现局部刷新.var myNewAjax = function (URL) { return new Promise (function (...
2020-03-08 15:37:35
102
原创 JS实现常见的六大排序
1 冒泡排序思想：让相邻的两个数一直作比较，直到完成排序。时间复杂度：O( n² )稳定度：稳定代码实现： var arr = [3, 44, 38, 5, 47, 15, 36, 26, 27, 2, 46, 4, 19, 50, 48] for(var i =0 ; i < arr.length ; i++ ){ // i用来判断当前冒泡排序从位置几开始的 for(va...
2020-02-29 17:17:07
253
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人