- 博客(49)
- 收藏
- 关注
RSS订阅
原创 从零到1构建可发布的npm包
通过 rollup, 从零构建可发布的npm包。可实现的目标如下：1. 通过 rollup进行构建2. 支持 Typescript3. 支持 npm 方式安装4. 支持 cdn 方式，在页面中引入5. 支持本地调试6. 可发布到npm
2023-02-18 12:37:26
998
原创 Vue3.0 + Antd，修改antd主题色，配置全局css
1.在vue.config.js里修改配置module.exports = { css: { loaderOptions: { less: { lessOptions: { modifyVars: { 'primary-color': '#3d62ff',// 修改全局主题色 }, javascriptEnabled: true, }, }, },
2022-04-13 16:51:52
2649
原创 如何有效清除页面缓存
使用以下方法，可以清除用户的页面缓存，甚至是小程序里webview页面，类似牛皮鲜一样的顽固缓存亦可清除掉。只需复制以下代码，写到最顶部的script即可，见效快且不影响使用。可以有效清除页面缓存。如果引用了微信sdk，在首页加载时使用了sdk里的方法，如果发生异常，就把最后一句代码去掉。(function(){ var href = origin = location.origin, pathname = location.pathname, search = location.search,
2022-04-12 14:53:25
2479
原创 常用的vue.config.js配置文件
/* eslint-disable @typescript-eslint/no-var-requires */const path = require('path');function resolve(dir) { return path.join(__dirname, dir);}const _mode = process.env.NODE_ENVconst serve = 'http://172.10.10.13:8080/'console.log('vue.config环境变量：',
2022-04-08 12:04:08
2035
原创 Vue3.0 循环列表超出2行显示... 点击展开按钮查看全部(展开收起)
效果图：要点是：将需要文本内容溢出显示省略号的模块组件话，然后在页面渲染后进行计算父组件：<template> <div class="list"> ... // 文本处理组件化 <ellipsis-Text :group_item="item" /> </div></template>子组件：<template> <div class="bottom"> <div
2022-03-26 15:36:13
3445
4
原创 解决vscode修改代码，自动编译问题
场景：vue项目运行后，修改代码，vscode立即自动进行编译解决：原因是因为vscode设置了自动保存功能，将其取消即可，见下图：
2022-03-03 19:10:11
4155
1
原创 实现html移动端自适应
1.在头部修改viewport，如下：<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">2.在header中新增以下代码，实现html的自适应<script> (function(doc, win) { var doc
2022-03-03 09:06:05
3454
原创 js判断数组中多个时间段是否有重叠（时分）
使用let dateArr = [ {start_time: '20:00', end_time: '21:00'}, {start_time: '20:00', end_time: '22:30'}, {start_time: '13:30', end_time: '14:30'}, {start_time: '20:00', end_time: '21:00'} ] // judgeTimeList(time_list) 返回true，表示没有重叠；false表示有重叠
2022-02-23 15:02:57
2811
4
原创 vue3.0 H5页面配置 Autoprefixer 报警Replace Autoprefixer browsers option to Browserslist config.
vue3.0 配置H5 的px转rem自适应时，报Autoprefixer相关预警：Replace Autoprefixer browsers option to Browserslist config.Use browserslist key in package.json or .browserslistrc file.原因：postcss.config.js 文件中，引用的版本过高，需要修改postcss.config.js 更改前代码module.exports = { plugi
2022-01-25 15:19:30
1304
原创 移动端项目中使用vConsole进行调试
1.安装npm i -s vconsole2.在主入口文件main.js中添加以下代码if (process.env.NODE_ENV !== "production" || /vConsole/.test(location.href)) { const VConsole = require('vconsole'); const vConsole = new VConsole(); localStorage.setItem('vConsole_switch_x', 80) local
2022-01-25 15:01:32
1056
原创 实战：vue3.0 ant-design table表头国际化i18n问题
<a-table :columns="columns" :dataSource="dataSource" :pagination="false" :loading="loading" :scroll="{ x: 1100, y: 300 }" > // 表头国际化设置 <template #headerCell="{ column }"> <template v-for="(item, index) in columns" :
2021-12-28 12:00:14
1975
1
原创 vuex持久化存储 vuex-persistedstate
由于页面刷新会导致vuex中的状态更新（数据重置），但有时我们并不希望如此。例如，token、登录状态、以及一些不常更新的状态等，我们希望能够存储到本地，以减少不必要的接口请求，从而获得更佳的用户体验。那么可以使用vuex-persistedstate来实现数据的持久化存储。1.安装npm i -s vuex-persistedstate2.在store/index.js中使用import { createStore } from "vuex";import persistedState fro
2021-12-26 21:15:38
2352
原创 H5在header添加以下代码实现自适应
<script> (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth;...
2021-12-25 20:20:52
489
原创 .prettierrc.js常用配置
module.exports = { printWidth: 80, tabWidth: 2, useTabs: false, singleQuote: true, semi: false, trailingComma: 'none', bracketSpacing: true, jsxBracketSameLine: true}
2021-12-14 18:33:08
1554
原创 require.context动态引入文件
/** * 目录结构 * store * |--modules * |--app.js * |--user.js * |--getters.js * |--index.js*/index.js文件：import Vue from 'vue'import Vuex from 'vuex'import getters from './getters'Vue.use(Vuex)// 规则：https://webpack.js.org/guides/
2021-12-14 11:32:35
1004
原创 怎样让chrome支持小于12px的字体
利用css3的缩放.smallFont{ font-size:12px; -webkit-transform-origin-x: 0; -webkit-transform: scale(0.80); // 利用css3的缩放，调整系数}
2021-12-02 15:49:29
90
原创 VUE3.0使用ref 父组件调用子组件里的方法
父组件：关键之处：必须将定义的ref，比如childRef，return出去，否则 childRef.value 为undefined<template> <div id="home"> <div style="margin-top:100px" @click="showFn"> 父组件点击事件 </div> <child ref="childRef"/> </div></temp
2021-11-24 11:21:39
1093
原创 VUE3.0 路由 hash模式和 history模式
使用hash模式时， 需要引入使用 createWebHistory使用history模式时， 需要引入使用 createWebHashHistory
2021-11-19 15:50:24
1226
原创 防抖(debounce)、节流(throttle)及使用场景
防抖：在事件被触发的n秒后再执行回调，如果在这n秒内又被触发，则重新计时，核心在于清零，最后一次有效。使用场景： 窗口resize事件，搜索框输入联想节流：在单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数， 只有第一次有效,核心在于开关锁。使用场景：多次点击按钮，页面滚动事件。节流 throttleexport const throttle = (fn, delay) => { var timer = null return function () {
2021-11-16 16:26:10
773
原创 Syntax Error: TypeError: this.getOptions is not a function
安装sass时，报错： Syntax Error: TypeError: this.getOptions is not a function原因是安装的版本过高。先卸载: npm uninstall node-sass sass-loader -D再安装低版本：npm i -D node-sass@4.x sass-loader@8.x
2021-11-16 12:24:30
606
原创 小程序uniapp 页面分享功能
1.用户点击右上角分享按钮 /** * 用户点击右上角分享 */ onShareAppMessage: function () { const nickName = uni.getStorageSync('user').nickName ? uni.getStorageSync('user').nickName: '您的好友' const title = nickName + '向您推荐了一个热门活动', path = `/subActivity/SubA
2021-11-12 15:09:14
1571
原创 CSS使用::-webkit-scrollbar设置滚动条样式
修改某个容器的滚动条样式.scrollDom::-webkit-scrollbar { width: 6px; // y轴 height: 6px; // x轴}.scrollDom::-webkit-scrollbar-track { background-color: #f0f0f0;}.scrollDom::-webkit-scrollbar-thumb { border-radius: 3px; background-color: rgb(178, 178, 186);
2021-11-10 11:44:14
669
原创 实战：从后台返回的数据中下载文件
/** * 从后台返回的数据中下载Excel表格 * @param {*} blob // 后台返回的文件流 * @param {*} fileName// 下载的文件名 */export const downloadFn = (blob, fileName) => { const url = URL.createObjectURL( new Blob([blob], { type: 'application/vnd.ms-excel' // 下载文件的MIME类型
2021-11-10 11:31:02
162
原创 实战：element-ui 树形控件之点击单选或多选
效果图：重点：如果需要对Tree节点进行过滤筛选，调用 Tree 实例的filter方法，参数为输入的关键词。需要注意的是，需要设置filter-node-method，值为过滤函数。具体如下：HTML部分：<el-tree ref="tree" :data="treeData" :expand-on-click-node="false" :props="defaultProps" :filter-node-method="filterNode" @nod
2021-11-02 18:49:41
1313
1
原创 实战：element Tree 树形控件之过滤树节点
效果图：重点：在需要对节点进行过滤时，调用 Tree 实例的filter方法，参数为输入的关键字。需要注意的是，此时需要设置filter-node-method，值为过滤函数。具体如下：在这里插入代码片
2021-11-02 18:21:36
3248
原创 实战：element ui 中的表格表头添加图标
效果图：重点：使用 slot=“header” 插槽<el-table :data="tableData" stripe style="width: 100%"> <el-table-column prop="date" label="日期" align="center" /> <el-table-column prop="name" label="员工姓名" align="center" /> <el-table-column prop="dep"
2021-10-27 12:32:33
2966
原创 实战：JS下载图片
/** * 获取图片的 base64 编码 * @param image 图像对象 * @return {string} 返回已编码的 base64数据 */const getImageBase64 = image => { const canvas = document.createElement('canvas') canvas.width = image.width canvas.height = image.height const ctx = canvas.getC
2021-10-27 10:21:29
9783
原创 实战：JS批量打包下载图片--(zip压缩)
1.下载两个插件npm i -s jszip file-saver2.封装函数如下：// 在JS文件中引入这两个插件import JSZip from 'jszip'import FileSaver from 'file-saver'/** * 获取图片的 base64 编码 * @param image 图像对象 * @return {string} 返回base64编码 */const getImageBase64 = image => { const canvas
2021-10-27 10:16:25
4042
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人