- 博客(47)
- 收藏
- 关注
RSS订阅
原创 ant-design-vue + vue3 表格(拖拽)伸缩列实现
ant-design-vue + vue3 表格(拖拽)伸缩列实现备注：新版ant-design-vue已增加resizable属性实现此功能，只是我这里升级版本改动太大，所以需要自己写1.下载vue3-draggable-resizablenpm i vue3-draggable-resizable2.增加components属性<Table ref="tableElRef"components: { header: { cell: (columnAttrs,
2022-05-02 21:56:35
3184
24
原创 vue 开发命名规范
文件目录src 源码目录|-- api 接口，统一管理|-- assets 静态资源，统一管理|-- components 公用组件，全局文件|-- hooks 公用方法，统一管理|-- router
2022-02-10 15:48:17
680
原创 vue将图片链接、本地图片转为二进制文件流
vue将图片链接转为二进制文件流应用场景：用户修改图片后会覆盖以前上传的图片，需将以前的的图片转为文件流与修改的图片一起上传1.需先将图片链接转为Base64imageUrlToBase64(imageUrl) { let image = new Image() // 一定要设置为let，不然图片不显示 image.setAttribute('crossOrigin', 'anonymous') // 解决跨域问题 image.src = imageUrl +"&v=" + Ma
2021-07-26 08:59:18
6762
11
原创 uniapp+vue3面试纪要
3.uniApp如何实现页面的下拉刷新和上拉加载更多。5.如何修改node_modules包。2.vue3 h函数 创建虚拟节点。3.vue3 页面之间有哪些通信方式。2.uniapp 图片实现懒加载。4.uniapp中微信登录的流程。5.uniapp条件注释的语法。1.vue3与vue2的区别。1.uniapp的生命周期。6.uniapp分包小程序。4.vue3的生命周期。
2024-01-15 17:22:40
556
原创 vite+ceisum 图片JSON 报错问题404
项目引入ceisum插件后发现图片JSON报错404，地址为node_modules.vite xxx,并且格式混乱需要引入vite-plugin-cesium。
2023-09-11 18:17:14
265
原创 修改node_modules避免更新覆盖 patch-package
patch-package 是一个基于 Git 的工具，它可以帮助我们对依赖包进行修复补丁。通过创建一个与问题相关的补丁文件，我们可以轻松地更改依赖包的行为而无需直接修改源代码。这个补丁文件会被存储在项目的 patches 目录下，并在安装依赖包时自动应用。
2023-09-01 16:37:43
712
原创 Non-function value encountered for default slot. Prefer function slots
Non-function value encountered for default slot. Prefer function slots问题原因：Vue3 使用h函数 推荐使用函数式插槽，以便获得更佳的性能。解决方式：// 错误return h(xxx, { xxx }, { xxx});// 正确return h(xxx, { xxx }, { default: () => xxx });// 多个插槽return h( xxx, { xxx }, { default: ()
2022-04-26 14:34:23
1295
2
原创 vue3 使用setup 语法糖
1.特性任何在 script setup 声明的顶层的绑定 (包括变量，函数声明，以及 import 引入的内容) 都能在模板中直接使用（如果编辑器报错v3使用Vue Language Features (Volar)插件，不要使用v2的Vetur）<template> <button @click="count++">{{ count }}</button> <MyComponent /></template><scri
2022-04-24 11:43:27
1646
2
转载 流动繁星背景
<div class="star-field"> <div class="stars stars-sm"></div> <div class="stars stars-md"></div> <div class="stars stars-lg"></div></div>:root { --ship-size: 10vmin; --sky-color: #1C1740; --shi.
2022-04-14 17:18:14
110
转载 el-table 判断expand显示
el-table 判断expand显示<el-table :data="tableData" :row-class-name="getRowClass"> <el-table-column type="expand"> <template slot-scope="props"> ... <template> <el-table-column><el-table>// 判断表格是否有子项，无子项不显示展开按钮
2022-04-14 16:21:45
1266
原创 SpringBoot 基础增删改查
SpringBoot 基础增删改查1.主要代码1.controller层package com.logan.wiki.controller;import com.logan.wiki.req.CategoryQueryReq;import com.logan.wiki.req.DocQueryReq;import com.logan.wiki.req.DocSaveReq;import com.logan.wiki.resp.CommonResp;import com.logan.wiki
2022-04-08 14:12:13
146
原创 Element el-table 自定义show-overflow-tooltip
<el-table-column label="计算规则" prop="calcRule"> <template slot-scope="scope"> <el-tooltip class="item" effect="dark" placement="top"> <div slot="content">浮窗内容</div> <div class="oneLine">{{scope
2022-04-06 19:53:58
1436
原创 js常用函数
互转.Number(str)：字符串转数字.parseInt(***, 10)：字符串转数字.toString()：数字转字符串JSON.stringify()：json转字符串JSON.parse(str)：字符串转json数字.toFixed(2)：保留两位小数Math.ceil(.95)：1 结果返回最小整数（控制非小数）字符串.captalize()：首字母大写*.slice(1, 5)：字符串截取 从第2个字符开始，到第5个字符split(",")：字符串逗号分割为数组
2022-01-18 16:13:11
90
原创 axios拦截器
// axios 拦截器（普通）axios.interceptors.request.use(config => { config.params = { ...config.params, icode: 'F11309C43EB2C21C' } // 追加参数 store.commit('setLoading', true) // loading显示 return config})axios.interceptors.response.use(config => { st
2021-12-22 14:24:53
130
原创 vuex中使用axios + ts 请求封装
vuex中axios请求封装import { createStore } from 'vuex'import axios from 'axios'interface ColumnProps { _id: string; title: string; avatar?: string; description: string;}interface GlobalDataProps { columns: ColumnProps[];}// axiosconst getAndC
2021-12-09 15:10:51
214
原创 vue各种跳转方式
vue各种跳转方式1.router-link// 不带参数<router-link :to="/home"><router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> // 带参数<router-link :to="{ name: 'column', params: { id: column.id }}">跳转</router-link><rout
2021-11-05 10:47:35
227
原创 ts基础使用
ts基础使用1.全局安装typescriptnpm install -g typescript2.TS基本使用1.原始类型定义// 原始类型定义let isDone: boolean = falselet age: number = 11let myName: string = 'logan'let message: string = `hello, ${myName}`let u: undefined = undefinedlet n: null = null// undefi
2021-11-01 15:29:13
409
原创 vue3组件的双向绑定（更改父组件props传值的最佳方式）
vue3组件的双向绑定// 父组件<template> <div> // 默认 v-model:modelValue="inputValueProp" modelValue可自定义用于多个监听值（父组件也要更改） <BindingInput v-model="inputValueProp"></BindingInput> {{inputValueProp}} </div></template>&l
2021-10-29 16:09:57
5303
原创 uniapp项目使用vue3
uniapp项目使用vue31.首先创建普通uniapp项目2.找到manifest.json文件vue版本选择 选择33.重新运行提示： 请确认您的项目模板是否支持vue3:根目录缺少 index.html在根目录下创建index.html，模板已放在下方<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="view
2021-08-31 10:36:57
23836
原创 vue3 创建项目
vue 创建项目1.打开cmd cd到你要创建的文件夹下2.输入vue create project ，project就是你的项目名称3.选择自动和手动Default：是自动安装后面的配置Manually：是手动选择（我这里选择手动）*注: 我这里的第一个ts是上一次记录过的配置，第一次安装是没有的4.选择详情配置，看个人项目需求Choose Vue version：选择vue版本Babel: 转码器，可以将ES6代码转为ES5代码（允许我们使用ES6模块化语法）TypeScri
2021-08-16 12:49:53
120
原创 npm install 报错 check python checking for Python executable python2 in the PATH
场景：在升级了node环境后项目发生了版本号不匹配报错，决定重新初始化后又有了一下报错Building: G:\nodejs\node.exe F:\test\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=gyp info it worked if it ends with okgyp verb c
2021-08-16 09:55:18
6144
原创 vue filter搜索功能实现
<el-table-columnprop="identCode"label="identCode"min-width="120"> <template slot="header"> <el-dropdown :hide-on-click="false" trigger="click"> <span class="el-dropdown-link">唯一码<i class="el-icon-caret-bottom" style="
2021-08-05 14:14:09
364
原创 el-upload 自定义缩略图模版的预览、下载、删除
el-upload 自定义缩略图模版的预览、下载、删除<el-upload action="#" ref="upload" list-type="picture-card" :auto-upload="false"> <i slot="default" class="el-icon-plus"></i> <div slot="file" slot-scope="{file}"> <img class="el-upl
2021-07-22 10:49:33
2049
1
原创 vue使用参数直接取到data数据
vue使用参数直接取到data数据upRecvQtyStatus (row, name) { console.log(this._data[name]) // this._data就是data本身 this._data[name] = true console.log(this.recvQtyStatus)}
2021-06-28 14:58:22
1283
原创 监听vuex中的数据变化的两种方式
监听vuex中的数据变化的两种方式// 第一种computed: { deputyStatus () { return this.$store.state.componentStatus.deputyStatus },},watch: { deputyStatus (newStatus) { console.log(newStatus) }}// 第二种watch: { '$store.state.componentStatus.deputyStat
2021-06-23 16:15:50
423
原创 vuex的封装与使用
vuex的封装与使用1、安装vuex npm install vuex --save2、配置vuex 在src目录下新建文件 modules里是根据功能拆分vuex模块，并在index.js里引入，在main.js引入vuex，具体代码请见下方// index.jsimport Vue from 'vue'import Vuex from 'vuex'import user from './modules/user'import componentStatus from './mod
2021-06-15 11:16:42
284
原创 vue 创建项目
vue 创建项目1.打开cmd cd到你要创建的文件夹下2.输入vue init webpack project ，project就是你的项目名称1.Project name :项目名称，如果为我们init的项目名直接回车（此处项目名不能使用大写）2.Project description:项目描述，如果不需要直接回车3.Author ：作者4.vue build 构建方式 两个选择 第1个是完整版的 第2个是阉割版的（建议使用1） 1).Runtime + Compiler:re
2021-05-28 15:09:30
272
2
转载 vue防抖和节流
vue防抖和节流什么是防抖？短时间内大量触发同一事件，只会执行最后一次函数，防抖常用于搜索框/滚动条的监听事件处理，如果不做防抖，每输入一个字/滚动屏幕，都会触发事件处理，造成性能浪费。2.什么是节流短时间内多次触发同一方法，只会执行第一次函数，节流常用于加入购物车/秒杀活动等，如果不做处理，后端还未执行完毕，前端再次请求接口，造成重复数据.// anti-shake-throttle.js/*** @desc 函数防抖* @param func 目标函数* @param wait 延
2021-05-25 16:03:14
239
1
原创 vue 深拷贝和浅拷贝
vue 深拷贝和浅拷贝什么是深拷贝和浅拷贝深拷贝和浅拷贝只针对像 Object, Array 这样的复杂对象，假设B复制了A，当修改B时，看A是否会发生变化，如果A变了，说明是浅拷贝；如果A没变，那就是深拷贝<script>export default { name: 'index', data () { return { obj: { name: '深拷贝or浅拷贝', dec: '测试深拷贝和浅拷贝' }
2021-05-25 15:18:43
397
原创 vue中keep-alive的使用
vue中keep-alive的使用场景:keep-alive可以将组件缓存起来，组件不会销毁，data数据不会重新加载，减少加载时间及性能消耗，提高用户体验性<template> <div id="app"> <keep-alive> <router-view/> </keep-alive> </div></template><script>export defau
2021-05-25 13:52:21
79
原创 vue mixin（混入）的使用
场景：分发 Vue 组件中的可复用功能，当一个功能在多个vue页面中使用时，就可以使用mixin来进行复用// Mixinsconst Mixin = { data () { return {} }, created () { this.hello() }, methods: { hello() { console.log('你好，我是mixin') } }}export default Mixin // 页面使用impo
2021-05-25 12:39:15
114
原创 promise的使用
promise的使用场景：使用Promise我们可以用同步的方式写异步代码let promise = new Promise((resolve, reject) => { setTimeout(() => { resolve('假装网络请求') })}).then((res) => { console.log(res)})
2021-05-24 22:19:15
56
原创 async/await 同步方法的使用
async/await 同步方法的使用场景：在我们需要在请求完毕之后再执行下面的方法时，就要使用到async/await created () { this.getBannerList()},methods: { async getBannerList () { await this.$http.get('index/getBanner').then(res => { console.log(res.data) }) console.lo
2021-05-24 21:50:02
337
原创 移动端适配
移动端适配<script type="text/javascript"> document.documentElement.style.fontSize = document.documentElement.clientWidth / 18.75 + 'px'; window.onresize = function() { document.documentElement.style.fontSize = document.documentElement.clientWidth
2021-05-21 11:31:32
57
原创 vue面试题自我介绍
2021.5.15 面试准备1.自我介绍面试官好，我叫王荣康，来自山东德州，有过两年半的工作经验，主要擅长的前端技术有vue全家桶，vue3.0，uniapp，ts，微信小程序，微信公众号，擅长的后端技术有tp6，fastadmin，nginx，redis，mysql，phpstudy，宝塔等一些常用技术，个人性格可能会偏内向一点，我更喜欢去学习新的知识，钻研不懂的问题，以上就是我的自我介绍，谢谢！2.面试题vue1.Vue3.0和Vue2.0的区别1.默认进行懒观察 在 2.0里，不
2021-05-15 16:33:54
2930
原创 uniapp目录变量命名开发规范
uniapp命名规范开发目录1.常规开发目录├── api // 统一接口目录│ └── user.js // 用户接口 (按功能分组)├── common // 公共目录│ ├── common.js // 公共函数 ├── components // 公共组件目录├── pages // 页面│ ├── index│ │ └── index.vue│ ├── login
2021-05-13 11:00:48
2592
原创 vue uniapp内网穿透
uniapp内网穿透// manifest.json"h5" : { "devServer": { "port": 8080, // 端口号 "historyApiFallback": true, "host": "*.*.*.*", // 电脑ip地址 "disableHostCheck": true, "noInfo": true }, "router":{ "mode":"history"
2021-05-08 13:57:58
1172
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人