Tech Blog

2024-08-12

在 Vue 3 和 Element UI 中，要获取表格每行的数据，可以使用 Element UI 的 row 对象，它是由表格的 table-data 中的每一项经过渲染后生成的虚拟 DOM 对象。

以下是一个简单的例子，展示如何在 Element UI 的表格中获取每行的数据：




<template>
  <el-table :data="tableData" @row-click="handleRowClick">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '李小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '赵小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }]
    };
  },
  methods: {
    handleRowClick(row, column, event) {
      console.log('点击的行数据：', row);
    }
  }
};
</script>

在这个例子中，handleRowClick 方法会在点击表格的每一行时被触发，并接收到被点击的行的数据 row。在这个方法中，你可以对这行数据进行任何需要的操作。

- 阅读更多 -

html简单的日历界面

System

2024-08-12

所有,html

以下是一个简单的HTML日历界面示例，包括了基本的日历展示功能。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Simple Calendar</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
 
<div>
    <table>
        <thead>
            <tr>
                <th>Sun</th>
                <th>Mon</th>
                <th>Tue</th>
                <th>Wed</th>
                <th>Thu</th>
                <th>Fri</th>
                <th>Sat</th>
            </tr>
        </thead>
        <tbody>
            <!-- 动态插入日历 -->
        </tbody>
    </table>
</div>
 
<script>
    function buildCalendar(year, month) {
        const daysInMonth = new Date(year, month, 0).getDate();
        const startDay = new Date(year, month - 1, 1).getDay();
 
        const tbody = document.querySelector('table tbody');
        tbody.innerHTML = ''; // 清空之前的日历内容
 
        let day = 1;
        for (let i = 0; i < 6; i++) {
            const tr = document.createElement('tr');
            for (let j = 0; j < 7; j++) {
                if (i === 0 && j < startDay) {
                    const td = document.createElement('td');
                    tr.appendChild(td);
                } else if (day <= daysInMonth) {
                    const td = document.createElement('td');
                    td.textContent = day++;
                    tr.appendChild(td);
                } else {
                    break;
                }
            }
            tbody.appendChild(tr);
        }
    }
 
    // 默认显示当前月份的日历
    const now = new Date();
    buildCalendar(now.getFullYear(), now.getMonth() + 1);
</script>
 
</body>
</html>

这段代码中，我们定义了一个buildCalendar函数，它会根据传入的年份和月份动态构建一个基础的日历。函数计算了这个月的总天数以及这个月的第一天是周几，然后创建相应数量的tr和td来展示日历。

用户可以通过调整buildCalendar函数调用的参数来查看不同月份的日历。例如，可以通过buildCalendar(2023, 3)来查看2023年3月份的日历。

- 阅读更多 -

vue3 组件共用样式的写法和应用--table样式

System

2024-08-12

所有,typescript




<template>
  <table class="data-table">
    <!-- table 的内容 -->
  </table>
</template>
 
<script setup lang="ts">
// 脚本部分保持不变
</script>
 
<style scoped>
.data-table {
  width: 100%;
  border-collapse: collapse;
  /* 其他样式 */
}
 
.data-table th, .data-table td {
  border: 1px solid #ddd;
  padding: 8px;
  /* 其他样式 */
}
 
/* 其他相关样式 */
</style>

这个例子展示了如何在Vue 3组件中使用<style scoped>标签来定义组件专有的CSS样式。scoped属性确保了样式只应用于当前组件的元素，避免了样式污染其他组件的可能。这是一个良好的实践，尤其是在大型应用中。

- 阅读更多 -

HTML启动本地EXE的通用方法

System

2024-08-12

所有,html

在Web应用中直接启动本地EXE文件是一个安全问题，通常不被浏览器和操作系统允许。但是，可以通过一些变通方法实现。

使用ActiveX控件（仅限Internet Explorer，且需用户授权）
使用特定浏览器插件，如Java Applet或Flash
通过服务器端脚本启动（需要服务器权限和配置）
使用HTML5的File API读取用户本地文件，并通过JavaScript的Web Workers API或Node.js启动

以下是使用ActiveX控件的示例：

首先，你需要创建一个ActiveX控件，这通常是一个COM组件或者一个用特定工具（如VB或VC）编写的小程序。然后，你需要在你的网页中嵌入这个ActiveX控件，并通过JavaScript调用其方法。




<object id="myActiveX"
        classid="CLSID:你的控件的CLSID"
        width="0" height="0">
</object>
<script type="text/javascript">
    function launchExe() {
        myActiveX.launchExe();
    }
</script>
<input type="button" value="Launch EXE" onclick="launchExe();" />

请注意，ActiveX控件只能在Internet Explorer上运行，且用户需要接受一个安全警告来允许ActiveX控件的运行。此外，这种方法不适用于现代浏览器，因为它们大多禁用了ActiveX控件的运行。

对于安全性和跨浏览器兼容性考虑，通常不建议在Web应用中直接启动本地EXE文件。如果确实需要与本地系统交互，可以考虑使用基于Web的技术，如HTML5 File API、WebSockets或WebAssembly，或者设计一个桌面应用作为客户端。

- 阅读更多 -

JS特效第107弹：jQuery+css3相册图片叠加堆放展开动画特效

System

2024-08-12

所有,css3

以下是一个使用jQuery和CSS3创建相册图片叠加堆放展开动画的示例代码：

HTML部分：




<div id="gallery">
  <div class="item">
    <img src="image1.jpg" alt="Image 1">
    <div class="overlay"></div>
  </div>
  <!-- 其他图片项 -->
</div>

CSS部分：




#gallery .item {
  position: relative;
  width: 200px;
  height: 200px;
  float: left;
  margin: 10px;
  overflow: hidden;
}
 
#gallery .item img {
  width: 100%;
  height: auto;
  transition: transform 0.5s ease-in-out;
}
 
#gallery .item .overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
  transform: translateY(100%);
}
 
/* 其他样式 */

jQuery部分：




$(document).ready(function() {
  $('#gallery .item').hover(function() {
    // 鼠标悬停时
    $(this).find('img').css({
      transform: 'scale(1.1)'
    });
    $(this).find('.overlay').css({
      opacity: 1,
      transform: 'translateY(0)'
    });
  }, function() {
    // 鼠标移出时
    $(this).find('img').css({
      transform: 'scale(1)'
    });
    $(this).find('.overlay').css({
      opacity: 0,
      transform: 'translateY(100%)'
    });
  });
});

这段代码实现了当鼠标悬停在相册图片上时，图片会缩放并且叠加层会由上向下展开的堆放开展动画效果。鼠标移出时，动画效果逆向播放，恢复到原始状态。这是一个典型的利用CSS3的transform和transition属性制作的动画效果。

System

2024-08-12

所有,vue.js

要将Vue或React项目配置为PWA，你可以使用vite-plugin-pwa。以下是配置步骤：

安装vite-plugin-pwa：




npm install vite-plugin-pwa -D
# 或者
yarn add vite-plugin-pwa -D

在Vite配置文件中引入并使用vite-plugin-pwa插件。

对于Vue项目，在vite.config.js中：




import { defineConfig } from 'vite'
import pwa from 'vite-plugin-pwa'
 
export default defineConfig({
  plugins: [
    pwa({
      // 插件选项
    })
  ]
});

对于React项目，在vite.config.js中：




import { defineConfig } from 'vite'
import pwa from 'vite-plugin-pwa'
 
export default defineConfig({
  plugins: [pwa()]
});

配置manifest.json文件，并将其放置在项目的公共目录中（例如public文件夹）。

manifest.json示例：




{
  "name": "Your App Name",
  "short_name": "App",
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone",
  "scope": "/",
  "start_url": "/index.html",
  "icons": [
    {
      "src": "pwa-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "pwa-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "pwa-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ]
}

在入口HTML文件（通常是index.html）中，添加关联manifest.json的元标签：




<link rel="manifest" href="%PUBLIC_URL%/manifest.json">

确保你的Vite服务器配置能够正确处理manifest.json和图标文件。
构建并启动你的Vite服务器。现在，你的项目应该已经配置为PWA了。

这个配置过程大致需要3分钟，具体取决于项目的大小和复杂度。在实际操作中，你可能还需要根据自己的需求调整manifest.json文件中的配置，以及可能需要添加额外的图标尺寸。

- 阅读更多 -

【VUE】前端阿里云OSS断点续传，分片上传

System

2024-08-12

所有,vue.js

在Vue中实现阿里云OSS的断点续传和分片上传，你可以使用阿里云提供的OSS SDK，并结合axios进行文件的分片和上传。以下是一个简化的示例：

首先，安装阿里云OSS SDK：




npm install ali-oss

然后，在你的Vue组件或者服务中，使用以下代码进行文件的分片和上传：




import OSS from 'ali-oss';
import axios from 'axios';
 
// 配置你的OSS信息
const client = new OSS({
  region: '<Your region>',
  accessKeyId: '<Your accessKeyId>',
  accessKeySecret: '<Your accessKeySecret>',
  bucket: '<Your bucket>'
});
 
export default {
  methods: {
    async uploadFile(file) {
      try {
        // 使用分片上传
        const result = await client.multipartUpload(file.name, file, {
          progress: (p) => {
            // 这里可以获取上传进度，更新UI
            console.log(p * 100);
          }
        });
        console.log(result);
      } catch (e) {
        console.log(e);
      }
    }
  }
}

在你的Vue组件中，你可能会有一个文件输入元素，用于获取用户选择的文件：




<input type="file" @change="handleFileChange"/>

然后在你的Vue实例中处理文件变化：




methods: {
  handleFileChange(e) {
    const file = e.target.files[0];
    if (file) {
      this.uploadFile(file);
    }
  }
}

这样就可以实现阿里云OSS的断点续传和分片上传功能。记得在实际应用中处理好错误处理和进度更新的逻辑。

- 阅读更多 -

基于JQuery实现移动端上拉加载、下拉刷新

System

2024-08-12

所有,jquery

使用jQuery Mobile可以很容易地实现移动端的上拉加载和下拉刷新功能。以下是一个简单的示例代码：

首先，确保你的页面包含了jQuery Mobile库：




<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

然后，在你的HTML中创建一个页面，并添加下拉刷新和上拉加载的属性：




<div data-role="page" id="myPage" data-pull-to-refresh="true" data-infinite-scroll="true">
  <div data-role="header">
    <h1>页面标题</h1>
  </div>
  <div role="main" class="ui-content">
    <!-- 内容区域 -->
  </div>
  <div data-role="footer" data-position="fixed">
    <div class="ui-grid-a">
      <div class="ui-block-a">
        <a href="#" class="ui-btn">按钮</a>
      </div>
    </div>
  </div>
</div>

最后，在你的JavaScript中添加下拉刷新和上拉加载的事件处理：




$(document).on("pagebeforeshow", "#myPage", function() {
  // 下拉刷新事件
  $(this).on("panelbeforeopen", function(e, panel) {
    // 刷新数据的逻辑
    console.log("下拉刷新...");
    // 刷新完毕后，可以调用panel.close()关闭下拉面板
  });
 
  // 上拉加载更多事件
  $(this).on("scrollstart", function(e) {
    var $this = $(this),
        threshold = 50; // 定义距离底部多少px时开始加载
    
    if (!$this.data('scrollDone')) {
      return;
    }
    
    if ($this.scrollTop() + $this.height() + threshold >= $this[0].scrollHeight) {
      // 加载更多数据的逻辑
      console.log("上拉加载更多...");
      // 加载完毕后，设置$this.data('scrollDone', true)以允许新的加载
    }
  });
});

这样，你就有了一个能够实现移动端下拉刷新和上拉加载的页面。记得在实际的应用中，你需要将数据加载的逻辑替换为实际的数据加载逻辑，比如从服务器获取数据。

- 阅读更多 -

旧版本jquery升级新版本后如何处理兼容性问题

System

2024-08-12

所有,jquery

在升级 jQuery 版本时，可能会遇到与新版本不兼容的旧代码。解决这些兼容性问题的步骤如下：

阅读 jQuery 迁移指南：了解从旧版本到新版本可能出现的重大更改。
更新代码：根据迁移指南更新代码，如选择器更改、去除过时的方法等。
测试：在多种浏览器上测试网站以确保没有显著的功能问题。
使用 jQuery Migrate 插件：如果不想手动修复所有问题，可以暂时使用 jQuery Migrate 插件来帮助平滑过渡。

示例代码：




<!-- 在旧版本的 jQuery 之后包含 jQuery Migrate -->
<script src="https://code.jquery.com/jquery-3.x.x.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-3.x.x.min.js"></script>

使用 jQuery Migrate 插件时，请确保在引入其他脚本之前先引入 jQuery 库，然后再引入 jQuery Migrate 插件。这个插件会尝试修复在新版本 jQuery 中不再支持的方法和特性。

System

2024-08-12

所有,elementui

虚拟滚动技术通常用于处理大量数据的列表或表格，以减少内存使用并提高性能。虚拟滚动技术只渲染当前视口内的数据项，当用户滚动时，只有可见的数据项会被渲染和更新。

在Vue2和ElementUI中，可以使用el-table组件配合第三方库如vue-virtual-scroll-list或vue-virtual-scroll-tree来实现虚拟滚动。

以下是一个简单的例子，展示如何在Vue2和ElementUI中使用el-table实现虚拟滚动：

安装依赖库：




npm install vue-virtual-scroll-list

在Vue组件中使用vue-virtual-scroll-list：




<template>
  <virtual-list
    class="virtual-list"
    :size="itemHeight"
    :remain="visibleItemCount"
  >
    <el-table :data="visibleData" height="400" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </virtual-list>
</template>
 
<script>
import { VirtualList } from 'vue-virtual-scroll-list'
 
export default {
  components: {
    VirtualList
  },
  data() {
    return {
      itemHeight: 50, // 每个数据项的高度
      visibleItemCount: 10, // 可视区域能看到的数据项数量
      dataList: [], // 完整的数据列表
    }
  },
  computed: {
    visibleData() {
      // 计算当前可视区域的数据
      const start = this.$refs.virtualList.start
      const end = this.$refs.virtualList.end
      return this.dataList.slice(start, end + 1)
    }
  },
  mounted() {
    // 模拟数据填充
    this.dataList = new Array(1000).fill(null).map((_, index) => ({
      date: '2016-05-02',
      name: `John ${index}`,
      address: `No. ${index} Lake Park`
    }))
  }
}
</script>
 
<style>
.virtual-list {
  height: 400px; /* 设置表格的高度 */
  overflow-y: auto;
}
</style>

在这个例子中，我们使用了vue-virtual-scroll-list组件来创建一个虚拟滚动的列表。size属性定义了每个数据项的高度，remain属性定义了可视区域内应该渲染的数据项数量。data属性绑定到了visibleData计算属性，该属性计算了当前可视区域内的数据项。

这个例子中的dataList包含了1000个数据项，但是只有可见的数据项会被渲染，虚拟滚动技术通过这种方式提高了性能，减少了内存使用。

- 阅读更多 -