球球和皮皮-CSDN博客

球球和皮皮

码龄7年

个人简介：前端开发

IP 属地：北京市

查看详细资料

原力等级

当前等级

5

当前总分

1,176

当月

23

个人成就

获得94次点赞
内容获得53次评论
获得327次收藏
代码片获得1,053次分享

TA的专栏

兴趣领域设置

前端

javascriptcssvue.js
后端

node.js
学习和成长

面试

创作活动更多

超级创作者激励计划

万元现金补贴，高额收益分成，专属VIP内容创作者流量扶持，等你加入！

搜TA的内容

银河麒麟4.0.2操作系统，解决旧版本浏览器不能加载网页的问题

模拟现场的环境，安装虚拟机，安装银河麒麟4.0.2系统，再浏览器复现问题

发布博客 2025.01.06 ·

VMware Workstation Pro安装银河麒麟V10、银河麒麟4.0.2操作系统

当前时期，某些项目会要求国产化，必须使用国产操作系统，这个时候就需要用到虚拟机，毕竟谁也不希望把自己的Windows系统换成一个垃圾银河系统安装操作系统的过程中也不会很顺利，银河麒麟操作系统的生态还不完善，基本上每一步都有坑，这里记录一下我的安装经历。安装步骤中最大的坑，就是这一步，一定要选对操作系统：客户机操作系统：Linux版本：CentOS 6 64位。

发布博客 2025.01.06 ·

Windows11安装VMware Workstation Pro虚拟机

虚拟机可以用来模拟其他系统，由于我需要模拟银河麒麟4.0.2操作系统，所以查阅资料安装了VMware Workstation Pro，过程中有很多坑，本着前人栽树，后人乘凉的原则，记录一下安装过程。虽然文章写的很快，但是实际解决问题花费的时间很多。

发布博客 2025.01.06 ·

canvas画布截图并制作为预览图

canvas画布生成预览图

发布博客 2023.11.22 ·

Babylon.js把图片拖动到画布中

把图片拖动到画布中，生成对应的三维模型

发布博客 2023.08.28 ·

有没有会做这种echarts图表的？

这种简单的不需要Echarts

回答问题 2023.08.22

给vant侧边导航＜van-sidebat＞添加小图标

最近想优化一下自己做的功能小界面，于是盯上了侧边导航栏的样式。这个vant组件的侧边导航栏，默认不支持添加图标的功能，只能自己强行添加，所以这个方法也适用于其他需要添加图标的地方。优化前优化后这里记录一下处理方法。提示：以下是本篇文章正文内容，下面案例可供参考这个方法适用于所有组件，但是因为要操作DOM，所以不建议大量使用，会影响效率。

发布博客 2023.06.21 ·

el-tree实现懒加载，同时获取节点对应的数据并展示

el-tree懒加载。点击树节点，加载下一级目录，同时调用接口展示该节点中的数据。

发布博客 2023.05.05 ·

springboot+vue前后端分离项目，前端拿不到数据

this.total= res.total - 0

回答问题 2023.03.23

vuejs 如何通过操作dom添加一个组件

DOM添加的组件应该不会被识别，最好写个v-if控制组件，或者在组件上添加ref属性，通过this.$refs[]设置组件

回答问题 2023.03.03

账号被其他人登录，自动退回到登录页


axios.interceptors.request.use(
  (error) => {
    // token过期
    if (httpStatus === 401) {
      const config = error.config
      Router.push({ path: '/login' })
      return error
    }
  }
)

回答问题 2023.02.21

请问这种表格怎么用HTML,CSS实现

<html>
<style>
    table {
        border-collapse: collapse;
          width: 270px;
    }
    td, th {
        border: 1px solid #ccc;
        padding: 8px;
        text-align: center;
          width: 90px;
    }
    th {
        background-color: #dfeff8;
        color: #1d78c5;
    }
</style>

<div>
<table>
  <tr>
    <th style="width: 50%">姓名</th>
    <td style="width: 50%">张三</td>
  </tr>
  <tr>
    <th style="border-bottom: none">部门</th>
    <td style="border-bottom: none">信息部</td>
  </tr>
</table>
<table>
  <tr>
    <th>本次消费</th>
    <th>本月消费</th>
    <th>余额</th>
  </tr>
  <tr>
    <td>10</td>
    <td>230</td>
    <td>700</td>
  </tr>
</table>
</div>
</html>

回答问题 2023.02.21

一般考虑没有添加路由设置或路由设置写错了，如何解决？(关键词-页面加载)

少写了个空地址重定向

{
    path: "/",
    meta: {
      title: "管理系统",
    },
    redirect: "/login",
    component: Login,
  },

回答问题 2023.02.15

请问怎么保证js按顺序执行

开玩笑呢吧，在哪里运行的，两个同步方法，不可能先B再A

回答问题 2023.02.15

elementui的折叠面板

订单折叠后，由于数据双向绑定，activeName清空，所以再次点击确认，不会默认第一个展开。
需要在确实按钮绑定的事件中设置activeName = "0"

回答问题 2023.02.14

tinymce 右击显示菜单

朋友，你这看着不是右键菜单，像是个在光标位置显示快速工具栏。
实现方法见下：

setting: {
    quickbars_selection_toolbar: "removeformat | bold italic underline strikethrough | fontsizeselect forecolor backcolor"
}
```javascript


![img](https://img-mid.csdnimg.cn/release/static/image/mid/ask/68362025367613.png "#left")

回答问题 2023.02.14

页面放大element-UI的table显示不全，如何解决？？

给.el-table的样式里，width和height设置成百分比

回答问题 2023.02.14

关于#javascript#的问题：蓝色节点位于屏幕水平居中位置，下面子节点怎么根据蓝色节点，像图中节点一样（下面子节点的个数是不确定的）

给你提供个思路，具体就不写了
（1）、创建一个组件，由父组件传入位置信息和数组信息，位置信息读取节点距离屏幕的位置就行。
（2）、使用el-col组件，宽度支持传入参数自适应变化，把数组的长度传进去，就实现了自适应变化。
（3）、el-col里写个div，样式自己随便写。
代码如下：

<html>
   <head>
      <title>VueJs 在线编辑器</title>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js">
      </script>
       <!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
   </head>
    <style>
        .bg-purple {
            border: 1px solid black;
        }
    </style>
   <body>
      <div id = "intro">
          <el-row :gutter="2">
            <el-col :span="24/allArr.length" v-for="item in allArr" :key="item.id">
              <div class="bg-purple" align="center">
                  {{item.title}}
              </div>
            </el-col>
          </el-row>
      </div>
      <script type = "text/javascript">
         var vue_det = new Vue({
            el: '#intro',
            data: {
               message: '我的第一个VueJS任务',
               allArr: [
                   {
                       id: 1,
                    title: "是"
                   },
                   {
                       id: 2,
                    title: "否"
                   }
               ]
            }
         });
      </script>
   </body>
</html>

回答问题 2023.02.14

如何实现在网页里面的下拉列表中的联动

完美解决，代码如下：


<select id="class-select" onchange="handleChange(value)">
  <option value="1">一班</option>
  <option value="2">二班</option>
</select>
 
<table id="data-table-1" border>
  <tr>
    <th>班级</th>
    <th>人数</th>
  </tr>
  <tr>
    <td>一班</td>
    <td>20</td>
  </tr>
</table>
<table id="data-table-2" border style="display: none">
  <tr>
    <th>班级</th>
    <th>人数</th>
  </tr>
  <tr>
    <td>二班</td>
    <td>30</td>
  </tr>
</table>
 
<script>
  function handleChange(value) {
    if(value == 1) {
      document.getElementById('data-table-1').style.display = ''
      document.getElementById('data-table-2').style.display = 'none'
    } else {
      document.getElementById('data-table-2').style.display = ''
      document.getElementById('data-table-1').style.display = 'none'
    }
  }
</script>

希望采纳！！！

回答问题 2023.02.14

Vue怎么解压7z类型的压缩包

最后用的libarchive.js框架

import { Archive } from 'libarchive.js/main.js';

readFile(url, fileName){
      Archive.init({
          workerUrl: 'libarchive.js/dist/worker-bundle.js'
      });
      new Promise((resolve, reject) => {
        var blob = null
        var xhr = new XMLHttpRequest()
        xhr.open("GET", url)
        xhr.setRequestHeader("Accept", "")
        xhr.responseType = "blob"
        xhr.onload = async () => {
          blob = xhr.response
          let file = new File([blob], fileName, { type: ''})
          const archive = await Archive.open(file);
          let obj = await archive.getFilesArray();
            
          console.log("压缩包里的文件", obj);
          resolve(file)

        }
        xhr.onerror = (e) => {
          reject(e)
        }
        xhr.send()
      })
    }

this.readFile('https://cdn.jiajutech.com/jiaju/2020/6/24/01cf9073-52ee-4fc1-ba75-a46a6231911e.material', 'files')

不好意思，各位的办法都没有借鉴到，没办法采纳了。

回答问题 2023.02.13