白大美的程序日志

组件部分<template> <Tooltip max-width="200" transfer :content="content" :disabled="!showTooltip" :class="tooltipClass" > <span ref="content" @mouseenter="handleTooltipIn" :class="textClass"

对于日常开发的小伙伴而言，iconfont图标非常常见，当在侧边栏展示的时候，由于侧边栏要切换成动态接口获取，图标依然由前端提供渲染，这时候，该怎么写呐，话不多说，上代码```javascript <li class="sub-menu" @click="changeSer(item.code)" :class="{ 'sub-active': subActive === item.code }" v-for="item in s

import axios from 'axios'import { TOKEN } from '#/utils/config'const genFetch = (opts = {}) => { return axios.create({ baseURL: window.__POWERED_BY_QIANKUN__ ? window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__ + 'api' : '/api', timeout: Infinity,.

arrayToTree(arr, parentId) { // arr 是返回的数据 parendId 父id let temp = [] let treeArr = arr treeArr.forEach((item, index) => { item.title = item.name if (item.parent_id == parentId) { if (this.arrayToTre..

最近来了个新需求，要在项目里实现一个终端，要实时发送信息获取返回，并且渲染到页面上查了一些相关文档，踩了几个小坑坑，最后实现如下，希望能帮到你，不喜勿喷哦<template> <div class="container-box"> <div class="container-header"> <h2>命令行</h2> </div> <section> <di

对于日常开发的小伙伴而言，iconfont图标非常常见，当在侧边栏展示的时候，由于侧边栏要切换成动态接口获取，图标依然由前端提供渲染，这时候，该怎么写呐，话不多说，上代码 <li class="sub-menu" @click="changeSer(item.code)" :class="{ 'sub-active': subActive === item.code }" v-

首先要引入，npm安装这里省略，直奔主题// 在你的项目中引入，可以在main.js引入，也可以在单独vue中引入importJSEncryptfrom"jsencrypt";data中定义公钥data(){ return { publicKey:"",// 公钥可以通过后台接口获取，也可以后台给一个固定的公钥写死，看后台方式 }}如何调用 methods: { getEncrypt(data) { ...

最近真的忙炸了，react和vue来回切换，写react时间久了并没有写起来vue来身轻如燕，居然发现有点写混了，就最近写的Modal自定义组件来说，着实有点费了一下脑子，话不多说，先上代码这是父组件：<template> <Form> // 这里踩了一个坑，就是普通的布局，页面渲染上会有问题，没有办法做到刷新，所以建议放到Form里面，当然可能也是我哪里写的不对，所以，欢迎你留言沟通，让我知道问题所在 </Form></temp

不知道这种业务场景大家有没有遇见过，就是确定按钮，你连击多次的时候会发多次请求，这种问题其实前后端都可以增加限制，前端部分的限制是通过一个开关，及设定布尔值去做的判断html部分<Button @click="payMent" :disabled="buyFlag">立即购买</Button> js部分data() { return { buyFlag: false, };},methods:{ async p...

前端项目在webpack打包时，会在控制台输出一些无用信息，如下图所示密密麻麻的一长串，无论是研发本地启动还是生产构建时，看起来都不太友好，所以修改了一下配置在你的build文件夹的webpack.base.config.js文件，可以添加如下几行代码const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');module.exports = merge(webpackBaseConfig, { pl

最近在研发过程中，遇到了树级table这种需求，虽然是后台管理，用户体验上不需要面面俱到，但是，还是尽量把自己的工作做好，这类的框架很多，看需求而定，我先推荐一个github上的开源框架，虽然没有用到，但是个人感觉还是很不错，日后可以作为参考https://xuliangzhan_admin.gitee.io/vxe-table/#/table/advanced/expandLazy我有用了iview，后来又用了antdesign，相对来说antdesign的API比较多，方法比较多，话不多说，上代码

最近在研发过程中，遇到了一个优化，vue项目嵌套在另外一个vue项目的iframe中，外层vue的iframe刷新，iframe中的vue项目希望可以停留在你当前操作的页面，而不是刷回到一开始的iframe里src路径当开始听到这个优化点的时候，一上来有点懵，初步想法是存在localstroage里面，每次页面刷新的时候，去缓存里面取值，然后在push但是这样操作有问题，localstro...

话不多说，先上代码，习惯性在components里定义自己的公共组件，名称看个人习惯，我的叫做commonConfirm，定义一个对应的.vue文件以及index.js首先你的commonConfirm.vue 文件<template> <transition name="fade"> <div class="com-confirm-...

由于项目的请求地址非常多，总监又不太希望配置环境变量去每次build，所以想打包完外部修改，避免多次打包当时这个需求给过来的时候有点蒙，毕竟做了三年的vue项目，一直都是配置环境变量在内部去做的打包区分but，刚入职，一开始拒绝总是不好的，就本着先答应试试看的姿态去查了一下发现，原来这个早就有了解决方案，真的是积累不够，狂扇自己几个耳光话不多说，我先上我的代码，亲测好用的...

在大型后台项目开发中，表单是必不可少的，各种校验规则对应的错误提示，在某个选择条件下切换后，发现相关联的错误提示信息还存在，这样看起来不是很友好，自测过程中发现这样子的问题，参照API，写的很清楚具体用法，如下 this.$refs['formValidate'].fields.forEach(function (e) { if(e.prop === 'totalAmount'){ e.resetField() } })多看API多思考原理思维

首先先展示一下需求要求实现的样子用过iview的小伙伴们都知道，iview的滑块不是这个样子的，而且大部分的滑块都是圈圈点点，如下图所示而且右边的表单也不是这样子的，肿么办，跟领导沟通完无果，我现在都怀疑，作为一个前端，是否还有权利去拒绝一些不好实现的地方，还是应该接受所有一切，有点矫情，哇哈哈哈，奈何，硬着头皮改吧，我这里是改了iview的slider的组件，从nodemodule里找到了slider的组件，改了一下样式部分然后实现了图一的效果，后面的表单加减号是单独写的，我先上一下sl.