- 博客(55)
- 收藏
- 关注
RSS订阅原创 项目中新知识点学习运用记录-长期更新
时，它将返回右侧的操作数。这个运算符提供了一种简洁的方式来处理可能为空的情况，避免了使用或运算符(这与空值合并运算符不同，因为它基于条件的真假来决定返回值，而不仅仅是检查值是否为。运算符被称为空值合并运算符。它用于设置默认值，当左侧的操作数为。)可能带来的不期望的行为，尤其是当左侧操作数为空字符串(时，才返回左侧操作数的值，否则返回右侧操作数的值。运算符可以确保只有当左侧操作数不是。
2024-09-14 11:03:19
458
原创 React项目中使用发布订阅模式
发布订阅模式（也称观察者模式）是一种管理跨组件通信的有效方式，尤其是在不希望直接依赖于特定组件的情况下。这种模式允许一个对象（发布者）通知多个其他对象（订阅者），而不必知道这些对象是谁或他们在哪里。这有助于解耦组件，使得代码更加模块化和可维护。
2024-09-12 10:50:14
787
原创 iview datepicker type datetimerange校验问题
iview datepicker datetimerange validate
2022-11-22 19:20:13
943
1
原创 echarts常用图表
完整代码如下根据代码需要进行改动// utilizationTimes.vue文件<template> <div class="whthinWay flex flex-col items-center" :class="{'shadow':shadowFlag}" v-loading="waysLoad"> <span class="whthinWayTitle">查档方式</span> <div cla
2022-05-30 16:25:26
321
原创 项目新问题合集（自用记录）
1、定义网格布局如图所示：.classify-menus{//外层容器 width: 80%; display: grid; grid-column-gap: 10px; grid-row-gap: 80px; grid-template-columns: repeat(5,20%); grid-template-rows: repeat(5, 20%);}参考链接...
2022-05-10 17:03:50
102
原创 面试实战题
1、vue全家桶 以及应用场景参考链接2、for和forEach的区别参考链接参考链接3、如何一键修改vuex中state中的值（一行代码）参考链接
2022-05-06 10:14:29
102
原创 Vue3+TSt初学
一、TS初识//TS文件代码(()=>{ function printStr(str:string){ return '你好'+str; } let str = 'learn cool'; console.log(printStr(str));})//1、将ts文件通过在HTML文件中通过script标签引入//2、通过tsc tab键编译ts文件 生成的js文件//编译后的JS文件代码(function () { functio
2022-04-24 17:46:36
2021
原创 JS中的遍历方法forEach和map的区别
一、用法：同为遍历数组的方法，两者的用法区别在于：forEach()会改变原数组的方法，不会返回有意义的值let arr = [1, 2, 3, 4, 5];arr.forEach((num, index) => { return (arr[index] = num * 2);});//执行结果 arr=[2,4,6,8,10]map()方法不会更改原数组，而是返回新的数组；let doubled = arr.map(num => { return nu
2022-03-19 15:45:41
3295
3
原创 Nuxt2XX引入Tailwindcss
Tailwindcss官方的安装方法是适用于nuxt3的，因此nuxt低版本安装会有各种各样的错误，以下是可以使用nuxt2版本的；执行安装时必须停下运行的项目一、安装依赖npm i -D @nuxtjs/tailwindcss@4.2.1二、执行代码生成tailwind.config.js文件npx tailwindcss init 文件tailwind.config.js中配置可按默认设置：三、nuxt.config.js文件配置如下，放在export default对象中 bui.
2022-02-28 16:42:04
879
原创 牛客网刷题新知
1、var 赋值 变量的作用域var a = 1,b = 1;//这种情况在函数中赋值 a,b都是局部的 相当于var a = 1,var b =1;var a = b = 1;//这种函数中赋值的情况是 a是局部的，b是全局的 相当于 b = 1; var a = b;2、
2022-02-12 14:38:50
530
原创 vue 中常见的时间格式转换
项目中后台返回的时间有多种形式，时间戳、ISO标准时间格式等，我们需要转化展示成能看的懂得时间格式：1、将2020-06-27T14:20:27.000000Z 时间格式转换成 2020-06-27 14:20:27可以将方法定义为全局过滤器，或全局方法方便引用Vue.filter('format', function(date) { var json_date = new Date(date).toJSON(); return new Date(new Date(json
2022-02-11 10:56:36
10872
原创 el-table实现分页 序号
序言：根据需求实现表格添加序号，根据组件给的方法实现了添加序号，但分页后都是从1开始的，不符合序号连贯起来的要求设计给数据分页处理，由于这里写的是固定数据，因此要为tableData数据实现分页//涉及js方法slice定义和用法：slice()以新的数组对下个，返回被选中的元素；slice()方法选择从给定的start参数开始的元素，并在给定的end参数处结束，但不包括；注意：slice()方法不会改变原数组实现给表格添加序号//html代码<el-table :data
2021-12-31 14:36:32
2370
原创 ui组件 element 中是使用 el-empty报错
报错信息： Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the “name” option.报错图片报错原因：根据报错信息提示el-empty未注册，项目中全局引用element使用，无需单独注册某个组件。解决办法：重新安装element的版本，建议安装如下element，重新运行即可解决问题。npm i e
2021-12-14 14:01:39
5933
2
原创 echart折线图 轮询请求更新数据
需求：在后端没有使用websocket的时候，前端做轮询请求实时更新图表数据，这时候我们要在每次请求数据的时候进行图表的初始化，那么多次请求就会出现多个图表，不符合需求图表以及相关代码 <div class="wrap"> <div id="arichLine"></div> </div> created(){ this.dataRefreh(); this.query_data(); }, //相关方法.
2021-11-03 17:15:11
672
原创 代码托管 git常用命令和操作
1、git 安装完成后 在开始菜单中会有git选项 菜单下有3个程序Git Bash ：Unix与Linux风格的命令行，使用过最多，推荐最多Git CMD : Windows风格的命令行Git GUI ：图形界面的Git,不建议初学者使用，尽量先熟悉常用命令；Git Bash 风格与Linux和Unix的风格是一样的，平时多使用这些基础的技巧，熟能生巧）常用的基本 Linux命令cd:改编目录cd … :回退到上一个目录，直接cd进入默认目录pwd:显示当前所在的目录路径l
2021-10-23 15:24:16
144
原创 Vue 实现华视身份证读卡器功能
在www.downcc.com下载“华视cvr100驱动”安装程序；华视电子官网有相应的文档说明和程序下载一、服务安装选择安装目录：启动读卡服务：安装成功会有如图所示：注意事项：安装开发包必须使用管理员权限，因为windows服务和读卡器设备驱动程序均需要管理员权限，否则会安装失败。win10需要修改组策略才有管理员权限。二、服务的使用打开浏览器，输入地址http://127.0.0.1:19196/mainpage，回车点击openDevice：点.
2021-10-23 15:03:17
5269
3
原创 项目常用el-upload、a-upload、流文件下载
1、流文件下载 //有效时长导出 effectExport() { let query={ st:1, limit:10 } //query 为接口所需参数 //CONFIG.httphost()是我自己项目定义的请求参数，可根据实际情况改变 this.$axios.post(
2021-10-20 14:32:34
1985
原创 vue el-table fixed css方法结局表格固定列错位问题
如图所示，解决上述表格 操作列出现的错位问题，这里是采用了css方法，代码如下所示：/*解决表格fixed错位问题*/ /deep/ .el-table{ overflow: auto; } .el-table__header-wrapper,.el-table__body-wrapper,.el-table__footer-wrapper{overflow:visible;} /deep/ .el-table__body-wrapper{ overflow-x:vi.
2021-09-14 16:20:28
1345
原创 axios再封装
/* * @Author: Hikari * @Date: 2021-03-26 11:05:07 * @LastEditTime: 2021-06-26 14:33:42 * @LastEditors: Please set LastEditors * @Description: RESTFUL_API * @FilePath: /core/nuxt-framework/plugins/api.js */import Vue from 'vue' export default func
2021-08-20 15:59:09
125
原创 自用项目方法合集
get请求多参数 方法/** * 生成 url get请求参数 * @param {*} object * @returns */export function make_params( object ){ let params = '' for( var key in object ){ let value = object[key] params += key + '=' +value + '&'; } ret.
2021-08-18 17:03:00
117
原创 new promise 以及promise.all在项目中的实际应用
需求：在实际项目的开发应用中我们需要先执行前两个方法，用两个方法返回的数据作为参数去执行第三个方法这时候我们就需要使用new promise、resolve、promise.all等方法使用代码如下所示：可根据实际情况进行变通方法1// 账户信息获取getAccount(){ return new Promise((resolve,reject)=>{ this.$axios.post(CONFIG.httphost() + '/user/queryUser',{ .
2021-08-11 18:26:41
1205
原创 滚动条下拉进行分页请求数据
需求说明 一个公告页面，如果一次性请求所有数据必定会造成页面卡顿，所以将接口设置成分页模式，按照每页请求<a-list item-layout="horizontal" :data-source="data" class="list"@scroll.passive="getScroll($event)"> <a-list-item slot="renderItem" slot-scope="item" @click="godetail(item.id)" style="cu.
2021-08-11 18:14:07
793
原创 Ant-design-upload中 upload批量挂接
需求是批量上传一个文件夹中的文件，当文件夹中的文件上传完成之后进行一个上传完成的提示<el-dropdown class="ml-1" size="medium"@command="BatHandle"> <el-button icon="el-icon-s-operation" > 批量操作<i class="el-icon-arrow-down el-icon--right"></i> </el-button>.
2021-08-11 16:06:40
667
原创 slot 的简单理解
slot简单来说就是‘占坑’，在子组件里占好了位置，父组件使用该子组件时，新添加的元素就会自动填充到这个坑里；给childrer添加一个slot插槽，父组件添加的DOM元素就自动填充到这个slot插槽里面了；多个DOM元素会一起填充到这个slot插槽里；<div id="app"> <children> <span>我是魔鬼</span> <!--上面这行会显示在 “我是子组件” 数据后面--> .
2021-07-17 14:37:17
243
原创 a-upload文件夹上传
项目开发时遇到了一个需要使用upload组件上传文件夹的需求总的来说选中文件夹之后还是单个文件进行上传的本质需要清楚的是当上传多个文件的时候（比如10个文件10），upload组件的是先执行10次beforeUpload方法 再执行十次上传方法，完整代码如下；我的需求是在完成十次文件上传后进行一次表格数据刷新和上传成功的提示；//template中的代码<a-upload name="file" :showUploadList="false" :multipl.
2021-07-16 17:39:32
7211
翻译 viewer.js图片插件预览的使用
使用方法npm 安装使用npm install v-viewer --save在项目中引入import Vue from 'vue';import Viewer from 'v-viewer'import 'viewerjs/dist/viewer.css'Vue.use(Viewer)Viewer.setDefaults({ Options: { 'inline': true, 'button': true, 'navbar': true, 'title': true, .
2021-07-08 13:24:44
422
原创 date各种格式
//获取当前时间（时分秒）let myDate = new Date();let str = myDate.toTimeString(); //"10:55:24 GMT+0800 (中国标准时间)"let timeStr = str.substring(0,8); // '10:55:24'
2021-07-07 11:33:37
1248
原创 deep迭代遍历树形tree数据 取出所需值
定义好迭代取值的方法let datas = [] //是一个树结构的数据setName(datas){ //遍历树 获取id数组 for(var i in datas){ this.expandedKeys.push(datas[i].id) if(datas[i].children){ this.setName(datas[i].children); } }},项目需求：取出当前分支的id以及当前分支的上一级id值，组成对象数组传递给接口数据/
2021-05-08 15:21:45
375
原创 vue实现 24小时刻度间断显示展示
根据24小时刻度线将工作时段进行表示展示实现出发点，即利用组件的进度条，将24段div包裹的进度条组装成一个完整刻度线（生成一个组件，通过for循环遍历出来）实现效果图：实现代码，封装内部组件timebar.vue<template> <div> <span >{{time}}</span> <div class="bar"> <q-linear-progress .
2021-02-27 09:31:29
4813
6
原创 vue v-for 下的$ref 返回数组
如果refs自身的dom，或父级的dom是经过v-for渲染出来的，vue框架就会把ref.key在registerRef函数就被设置成数组v-for父级dom渲染实现：source中查看被转化为数组格式：因此要获取对应元素从两个方面开始考虑：1、使用vue的this.$nextTick方法解决获取不到元素的问题；2、因为ref获取的元素变成了数组属性，因此要在多个refs中使用【0】取；因此这也是在获取refs对应的名称之后通过[0]这种获取数组元素的方式来获取对应的准确值；..
2021-02-27 09:10:03
1814
原创 quasar ui组件的使用记录
1、关于自定义页码 quasar pagination根据客户需求定制页码选项//table组件的相关属性:rows-per-page-options = [10,50,500]//完整代码//html <q-table class="q-mr-sm q-ml-sm q-mt-md" title="开机时长" separator='cell' :data="data" :columns="columns"
2020-12-22 16:09:00
687
原创 vue+elementUI中el-radio设置默认值
如果后台返回的单选框的值是number：单选框的lable需要设置成 :lable=‘0’;如下：<el-form-item label="仿牌选项：" prop="ifCod" size="mini" class='form-label'> <div id='radio' > <el-radio class='m0' :disabled="disab...
2020-03-10 15:33:28
22301
原创 vue项目中main.js常用定义以及全局配置
main.js// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.// import Vue from 'vue';// import App from './...
2020-03-10 14:02:04
2462
原创 后台管理系统根据后台返回配置动态菜单栏
工作中提出的需求是这样的：根据登录后返回数据的菜单尽心动态菜单栏的配置 而不是在app.vue将菜单栏进行定死登录成功后 后台返回的数据样式
2020-03-10 11:25:39
1605
原创 项目中新增商品的样式
1、商品编辑保存的样式变化（基于elementUI）编辑视图保存视图实现代码<el-button type="primary" size='mini' class="el-icon-plus" :disabled="disable" @click='addTable'>新增</el-button><el-table ref='table...
2020-03-09 16:14:38
484
原创 Vue项目中定义全局的日期时间过滤器，用于展示适合需求的时间格式
首先在全局main.js文件中定义全局过滤器，用于各个页面的日期处理，当后台返回的日期值为null时我这里做了处理展示为空function formatDate(date, fmt) { let exp = date; if (!exp && typeof (exp) != 'undefined' && exp != 0) { fmt = nu...
2020-03-04 23:23:05
502
原创 el-table 实现滚动条分页懒加载
1、滚动条懒加载实现分页数据获取首先在文件夹directive下的directive.js文件夹中定义全局指令 如下：'use strict';/** * * * 添加所有的全局指令 * * */ import Vue from 'vue' // 聚焦指令 // 注册一个全局自定义指令 `v-focus` // v-focus Vue.directive('f...
2020-03-04 23:15:59
6988
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人