linear-gradient函数实现线性渐变
当tab标签超出滚动时，在侧边增加一个渐变透明的框，会使视觉上更加明显，让用户感知到该处可以滑动 效果对比展示原本样式： 增加渐变的透明框后的样式： 滚动后的效果： 可滑动的tab标签123456789/* 超出部分可所有滑动 */.tab_scroll { display: -webkit-box; overflow: auto;}/* 隐藏滚轮 */.tab_scroll::-webkit-scrollbar { display: none;} 渐变透明的小方块12345678910.tab_scroll:before { content: ''; position: absolute; right: 0; float: right; /* border: 1px solid red; */ height: 66px; width: 60px; background: linear-gradient(to right, transparent,...
navigator.userAgent获取当前设备信息
获取当前是何设备，来区分不同的事件及渲染模式 navigator.userAgent封装好函数直接调用，利用switch直接进行判断即可 12345678910111213141516171819202122export function currDevice() { const u = navigator.userAgent; const app = navigator.appVersion; // appVersion 可返回浏览器的平台和版本信息。该属性是一个只读的字符串。 const browserLang = (navigator.browserLanguage || navigator.language).toLowerCase(); //获取浏览器语言 const deviceBrowser = (() => { return { trident: u.indexOf('Trident') > -1, // IE内核 presto:...
实现输入框的n种形式
开发过程中遇到的新方案 textarea最常见的就是这种形式，不多赘述。代码如下 但要展示带html元素的内容，可能就不是那么方便了 1234567891011121314<textarea id="sendMsgBox" class="sendMsgBox" ref="sendMsgBox" row="3" maxlength="1000" v-model="sendContent" :readonly="cantOperate" :placeholder="getPlaceholder" @blur="handleBlurFun" @focus="handleFocusFun" @keydown="handleKeyDown($event)" :style="{ 'height':...
viewerjs查看大图组件
因为项目没有使用element-ui，所以不能使用自带的el-image组件进行大图查看，遂找了一个单独的组件 安装1npm install viewerjs 使用案例12345678910111213<!-- 单个图片查看 --><div> <img id="image" src="picture.jpg" alt="Picture"></div><!-- 多个图片查看 --><div> <ul id="images"> <li><img src="picture-1.jpg" alt="Picture 1"></li> <li><img src="picture-2.jpg" alt="Picture 2"></li> ...
修改element-ui的全局配置
项目因使用qiankun嵌入了子项目，且都使用了element-ui的弹窗样式，遂导致子应用中插入到父应用body的弹窗因层级过低无法展示 配置信息因element-ui的弹窗默的z-index层级默认是从2000开始的，并且打开多个弹窗时z-index会逐步递增，所以若主子应用不做区分的话，很可能会导致有的弹窗被遮挡 好在element提供了入口可将全局的弹窗层级设置一个起始值，即只需将子应用的层级初始值调高即可 1234567// 在main.ts中import Vue from 'vue';import Element from 'element-ui';Vue.use(Element, { size: 'small', // 组件的默认尺寸 mini、small、medium zIndex: 3000 // 弹窗默认层级初始值，默认2000}); 祝君无Bug~
安卓微信浏览器中type=file的input框无法使用
如果使用html的input框设为type=file来选择文件，在安卓的微信中打开页面时，会提示暂无可使用应用等错误提示 解决方案若要选择图片，需将input框的accept属性设为image/*；若要选择文件，需将此属性设为 空 1234567<input v-show="false" :ref="el => { if (el) uploadRefs = el }" type="file" :accept="acceptFileTypeArr" @change="handleUploadFunc"/> 123456789const acceptFileTypeArr: any = computed(() => { // 当前支持上传类型 if (uploadType.value === 'image') { return 'image/*'; ...
copy-webpack-plugin处理单独js文件
当文件在static或public目录下但又想对文件进行编译处理，即可在此插件中进行配置 使用说明copy-webpack-plugin是webpack自带的插件，本意是将某个文件/文件夹，从dir1处复制到dist下，即当你在运行npm run build时，static或public目录下的文件就是走的此插件 配置信息因为我使用的是基于@vue/cli-service的vue3.x，所以是在vue.config.js中设置（如果是vue2.x的版本，请在webpack.base.js中设置） 12345678910111213141516171819202122232425262728293031323334353637// 引入const CopyWebpackPlugin = require('copy-webpack-plugin')const UglifyJS = require('uglify-js')// 使用let config = { // ...others, configureWebpack:...
vue3的生命周期钩子
vue3的生命周期钩子与vue2的差不多，只是命名和调用上有一些诧异，详见下文 与 2.x 版本生命周期相对应的 Composition API Vue 2.x Vue 3.x beforeCreate 改用 setup() created 改用 setup() beforeMount onBeforeMount mounted onMounted beforeUpdate onBeforeUpdate updated onUpdated beforeDestroy onBeforeUnmount destroyed onUnmounted errorCaptured onErrorCaptured 新增的钩子函数除了和 2.x 生命周期等效项之外，Composition API 还提供了以下调试钩子函数： onRenderTracked onRenderTriggered 祝君无Bug~
git仓库推送脚本（本地简易版）
由于每次写完代码都要执行一大堆命令来将本地代码推送至远程仓库，所以索性写一个sh脚本 新建push.sh文件：在项目主目录，即/git所在目录新建push.sh文件，并复制以下内容： 12345678910111213141516echo → 暂存选取所有代码git add .read -p "→ 请输入您的commit提交信息：" MSGecho → 提交所有暂存代码git commit -m "$MSG"echo → 将代码推送至三端git仓库git push -u all master# 如果不是hexo项目可忽略以下内容echo → Hexo自动构建及部署npm run cleannpm run buildnpm run deploy 运行脚本每次推送时，在当前目录运行sh push.sh命令即可，接下来会提示你输入要提交的信息，输入完点击回车即可 注：如果加入了hexo项目的构建部署命令，每次推送时也会帮你完成部署 祝君无Bug~
qiankun的css样式污染解决方案
在使用qiankun框架做微前端开发的过程中，遇到了诸多难题，比如路由重定向、变量名及事件名冲突、挂载注销机制及生命周期、keep-alive等，目前遇到的比较难解决的问题可能就是css样式污染问题了。这次抽出了几天时间研究了一下，遂总结此文 问题概述在qiankun加载子应用后，主子应用的样式之间会产生污染，常见的css样式污染有以下几种情况： 无论是否进行样式隔离：主应用的样式污染了子应用（原因：主应用的样式添加了 !important 属性或 >>>...
