1. 首页
  2. 分类
  3. vue.js
Vue-Circle-Progress：优雅的Vue.js圆形进度条组件
System
2024-08-07
所有,vue.js



<template>
  <div id="app">
    <vue-circle-progress
      :radius="80"
      :progress="progress"
      :background="background"
      :duration="200"
      :width="15"
      :show-percent="true"
      :font-size="20"
      :fill="fill"
      viewBox="0 0 170 170"
    >
      <!-- 自定义内容 -->
      <h1>{{ progress }} %</h1>
    </vue-circle-progress>
  </div>
</template>
 
<script>
import VueCircleProgress from 'vue-circle-progress';
 
export default {
  components: {
    VueCircleProgress
  },
  data() {
    return {
      progress: 70,
      background: '#e5e5e5',
      fill: '#4fc08d'
    };
  }
};
</script>
 
<style>
/* 添加一些基本的样式 */
#app {
  text-align: center;
  margin: 50px;
}
</style>

这个例子中，我们创建了一个简单的Vue应用，其中包含了vue-circle-progress组件。我们设置了进度条的半径、进度值、背景色、进度条的颜色、以及其他一些属性。我们还在进度条中添加了自定义内容，即进度值，并且添加了一些基本的CSS样式。这个例子展示了如何使用vue-circle-progress组件，并简单定制其外观和内容。

- 阅读更多 -
JavaWeb学习笔记Thymeleaf和Vue的本质区别
System
2024-08-07
所有,vue.js

Thymeleaf和Vue都是前端模板引擎，但它们有着本质的区别：

  1. Thymeleaf主要用于服务器端的模板渲染，它会生成HTML标记，发送到客户端进行显示。
  2. Vue则是一个客户端的框架，主要用于构建动态的客户端应用。

区别的本质在于它们的使用场景和工作方式：

  • Thymeleaf依赖于服务器端的处理，它在服务器端生成HTML，然后发送到客户端。
  • Vue则是在客户端处理模板，将模板编译成可以在浏览器中运行的JavaScript代码。

下面是一个简单的例子，展示如何在JavaWeb项目中使用Thymeleaf：




<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Thymeleaf Example</title>
</head>
<body>
    <h1 th:text="'Hello, ' + ${name} + '!'"></h1>
</body>
</html>

在后端Java代码中，你可能会这样设置模板数据：




model.addAttribute("name", "World");

而使用Vue的例子可能如下：




<div id="app">
  <h1>{{ message }}</h1>
</div>
 
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});
</script>

在这个例子中，Vue接管了HTML模板，并在客户端进行渲染。服务器端的工作主要是提供Vue的JavaScript文件和初始化Vue实例所需的数据。

- 阅读更多 -
Vue中使用Web Serial API连接串口，实现通信交互
System
2024-08-07
所有,vue.js



<template>
  <div>
    <div v-if="!isConnected">
      <button @click="requestPort">连接串口</button>
    </div>
    <div v-else>
      <button @click="disconnect">断开连接</button>
      <button @click="sendData">发送数据</button>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      isConnected: false,
      port: null,
    };
  },
  methods: {
    async requestPort() {
      try {
        this.port = await navigator.serial.requestPort();
        await this.port.open({ baudRate: 9600 });
        this.isConnected = true;
        this.readPortData();
      } catch (error) {
        console.error(error);
      }
    },
    disconnect() {
      if (this.port) {
        this.port.close();
        this.port = null;
        this.isConnected = false;
      }
    },
    sendData() {
      if (this.port) {
        const writer = this.port.writable.getWriter();
        const data = new TextEncoder().encode('Your data here');
        writer.write(data).then(() => {
          writer.close();
        }).catch(error => console.error(error));
      }
    },
    async readPortData() {
      if (this.port) {
        const reader = this.port.readable.getReader();
        while (true) {
          const { value, done } = await reader.read();
          if (done) {
            reader.cancel();
            break;
          }
          // Handle incoming data
          console.log(new TextDecoder().decode(value));
        }
      }
    }
  }
};
</script>

这个代码实例提供了一个简化的Vue组件，用于连接串口和与之交互。它展示了如何使用Web Serial API来请求串口，打开串口，发送数据，接收数据，并在不需要时关闭串口。注意，实际应用中你需要根据自己的需求和硬件设备来调整波特率和数据处理方式。

- 阅读更多 -
Git Push即部署！宝塔面板+Gitee，VuePress项目自动化部署博客/文档站实战分享
System
2024-08-07
所有,vue.js



#!/bin/bash
 
# 定义部署目录和Gitee仓库地址
deploy_path='/www/wwwroot/your-domain.com'
repo_url='git@gitee.com:your-username/your-repo.git'
 
# 进入部署目录
cd $deploy_path
 
# 拉取最新代码
git pull origin master
 
# 安装依赖
npm install
 
# 重新生成静态文件
npm run build
 
# 提交更新
git add .
git commit -m 'Update'
git push origin master

这段代码是一个简化版的自动化部署脚本，它展示了如何使用bash脚本来实现Gitee上的VuePress项目在宝塔面板上的自动化部署。脚本中定义了部署目录和Gitee仓库地址，在进入部署目录后，使用git命令拉取最新的代码，并安装依赖，然后生成静态文件，并提交和推送这些更新。这样，每次在Gitee上推送代码后，都可以自动部署到宝塔面板上。

- 阅读更多 -
Vue3中的动态路由
System
2024-08-07
所有,vue.js

在Vue 3中，动态路由通常是通过Vue Router库来实现的。你可以在路由定义时使用动态片段（:开头的参数）来创建动态路由。

以下是一个简单的例子，展示如何在Vue 3项目中使用动态路由：

首先，确保你已经安装并设置了Vue Router。




npm install vue-router@4

然后，在你的Vue项目中配置路由：




import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import User from './views/User.vue'
 
// 路由配置
const routes = [
  { path: '/', component: Home },
  { path: '/user/:id', component: User }
]
 
// 创建router实例
const router = createRouter({
  history: createWebHistory(),
  routes
})
 
export default router

在User.vue组件中，你可以通过this.$route.params.id来获取动态片段的值：




<template>
  <div>User ID: {{ $route.params.id }}</div>
</template>
 
<script>
export default {
  // 通过路由守卫来预加载数据
  async beforeRouteEnter(to, from, next) {
    try {
      const response = await fetch(`/api/users/${to.params.id}`)
      const user = await response.json()
      next(vm => vm.user = user)
    } catch (e) {
      next(false)
    }
  },
  data() {
    return {
      user: null
    };
  }
}
</script>

在上述例子中，当用户访问/user/123时，User组件会显示用户ID为123的信息。通过beforeRouteEnter守卫，我们可以预加载用户数据并更新组件的状态。

- 阅读更多 -
推荐一款神奇的前端组件：Vue-Split-Pane
System
2024-08-07
所有,vue.js

Vue-Split-Pane 是一个用于 Vue.js 应用程序的分割面板组件。它允许您将应用程序界面分割成两个或更多部分，并且这些部分可以通过拖动来调整大小。

以下是如何使用 Vue-Split-Pane 的基本示例：

  1. 首先，安装组件：



npm install vue-splitpane --save
  1. 在 Vue 应用程序中全局注册：



import Vue from 'vue'
import VueSplitPane from 'vue-splitpane'
 
Vue.component('split-pane', VueSplitPane)
  1. 或者在局部注册：



import VueSplitPane from 'vue-splitpane'
 
export default {
  components: {
    VueSplitPane
  }
}
  1. 在模板中使用：



<template>
  <split-pane split="vertical">
    <template v-slot:left>
      <!-- 左侧内容 -->
    </template>
    <template v-slot:right>
      <!-- 右侧内容 -->
    </template>
  </split-pane>
</template>

在这个例子中，split="vertical" 表示分割方向是垂直的，您也可以将其设置为 "horizontal" 以创建水平分割。通过 <template v-slot:left> 和 <template v-slot:right> 插槽，您可以分别定义要在分割面板左侧和右侧显示的内容。

Vue-Split-Pane 提供了多种属性和事件来自定义分割面板的行为，如最小宽度、最大宽度、初始宽度等。详细的文档可以在其 GitHub 仓库 中找到。

- 阅读更多 -
2024年Web前端最全vue+echarts 区域地图绘制（街道）_echarts地图分块，2024年最新逆袭面经分享
System
2024-08-07
所有,vue.js



// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入地图
require('echarts/map/js/china');
// 引入要使用的组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/geo');
 
// 初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
 
// 指定图表的配置项和数据
var option = {
    tooltip: {},
    geo: {
        map: 'china',
        roam: true, // 是否开启鼠标缩放和平移漫游
        label: {
            emphasis: {
                show: true
            }
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        {
            name: '街道',
            type: 'map',
            geoIndex: 0,
            data: [
                {name: '北京.东城区', value: Math.round(Math.random() * 1000)},
                {name: '北京.西城区', value: Math.round(Math.random() * 1000)},
                // ... 其他数据项
            ]
        }
    ]
};
 
// 为echarts对象加载数据
myChart.setOption(option);

这段代码演示了如何使用ECharts创建一个区域性的地图，并在地图上标注数据点。代码中使用了require来引入ECharts的模块，这是模块化的方式，适用于现代的JavaScript工程构建工具，如Webpack。代码中的geo属性启用了地图的漫游和缩放功能，series属性中的type为map表示我们要绘制的是一个地图，geoIndex指定了使用geo组件中的map。最后，我们通过setOption方法将配置项和数据加载到ECharts实例中，从而生成了地图。

- 阅读更多 -
vue3使用Element Plus的el-table，高亮当前点击的单元格
System
2024-08-07
所有,vue.js

在Vue 3中，要高亮当前点击的el-table单元格，可以使用el-table的cell-class-name属性来为单元格指定一个类名，然后通过CSS来实现高亮效果。以下是一个简单的示例：

  1. 在Vue组件中定义一个方法来处理点击事件，并更新状态以记录当前点击的单元格信息。
  2. 使用cell-class-name属性来为特定单元格添加一个类名。
  3. 通过CSS为添加的类名定义高亮样式。



<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    @cell-click="handleCellClick"
    :cell-class-name="tableCellClassName"
  >
    <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 setup>
import { ref } from 'vue';
 
const tableData = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  // ... more data
]);
 
const activeCell = ref(null);
 
const handleCellClick = (row, column, cell, event) => {
  activeCell.value = { rowIndex: row.$index, columnIndex: column.index };
};
 
const tableCellClassName = ({ row, column, rowIndex, columnIndex }) => {
  if (activeCell.value?.rowIndex === rowIndex && activeCell.value?.columnIndex === columnIndex) {
    return 'active-cell';
  }
};
</script>
 
<style>
/* 添加高亮样式 */
.active-cell {
  background-color: yellow;
}
</style>

在上述代码中，handleCellClick方法记录了当前点击的单元格信息，tableCellClassName方法根据当前激活的单元格信息为其添加一个active-cell类名，从而实现高亮显示。CSS部分定义了.active-cell类，当单元格具有这个类时，将会应用相应的样式（例如背景色高亮显示）。

- 阅读更多 -
vue、uniapp中动态添加绑定style、class 9种方法实现
System
2024-08-07
所有,vue.js

在Vue和uni-app中，可以通过以下9种方式动态添加绑定的style和class。

  1. 使用数组的语法绑定多个样式对象。
  2. 使用对象语法直接绑定到对象。
  3. 使用数组的语法绑定多个类名。
  4. 使用三元表达式切换类。
  5. 使用对象语法绑定类。
  6. 使用数组的语法绑定多个样式。
  7. 使用数据属性绑定样式。
  8. 使用计算属性绑定样式。
  9. 使用方法返回样式字符串。

以下是每种方法的示例代码：




<template>
  <view>
    <!-- 方法1 -->
    <view :style="[styleObject1, styleObject2]"></view>
 
    <!-- 方法2 -->
    <view :style="{ color: active ? 'red' : 'green' }"></view>
 
    <!-- 方法3 -->
    <view :class="[isActive ? 'active' : '', 'static']"></view>
 
    <!-- 方法4 -->
    <view :class="[isActive ? 'active' : 'inactive']"></view>
 
    <!-- 方法5 -->
    <view :class="{ active: isActive, 'text-success': hasSuccess }"></view>
 
    <!-- 方法6 -->
    <view :style="[baseStyles, overridingStyles]"></view>
 
    <!-- 方法7 -->
    <view :style="{ fontSize: fontSize + 'px' }"></view>
 
    <!-- 方法8 -->
    <view :style="computedStyle"></view>
 
    <!-- 方法9 -->
    <view :style="styleMethod"></view>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      active: true,
      isActive: true,
      hasSuccess: true,
      fontSize: 16,
      styleObject1: {
        color: 'red',
        fontSize: '14px'
      },
      styleObject2: {
        backgroundColor: 'blue'
      },
      baseStyles: {
        color: 'red',
        fontSize: '14px'
      },
      overridingStyles: {
        backgroundColor: 'blue'
      }
    };
  },
  computed: {
    computedStyle() {
      return {
        color: this.active ? 'red' : 'green',
        fontSize: '16px'
      };
    }
  },
  methods: {
    styleMethod() {
      return 'color: ' + (this.active ? 'red' : 'green') + '; font-size: 16px;';
    }
  }
};
</script>
 
<style>
.active {
  color: green;
}
.static {
  background-color: yellow;
}
.inactive {
  color: red;
}
.text-success {
  color: green;
}
</style>

在这个例子中，我们定义了一个组件，它使用了不同的方法来动态绑定样式和类。这些方法涵盖了常用的场景，包括条件渲染类名和样式，以及使用计算属性和数据属性。

- 阅读更多 -
vue 中实现用户上传文件夹的功能
System
2024-08-07
所有,vue.js

在Vue中实现用户上传文件夹功能，可以通过监听<input type="file">元素的change事件来实现。以下是一个简单的示例：




<template>
  <div>
    <input type="file" webkitdirectory directory multiple @change="handleFolderSelect"/>
  </div>
</template>
 
<script>
export default {
  methods: {
    handleFolderSelect(event) {
      const files = event.target.files;
      for (let i = 0; i < files.length; i++) {
        // 这里可以获取文件夹中的每个文件
        const file = files[i];
        console.log(file.name);
        // 处理文件...
      }
    }
  }
}
</script>

在这个例子中，webkitdirectory和directory属性允许用户选择整个文件夹，而不是单独的文件。multiple属性允许用户选择文件夹内的多个文件。当用户选择了文件夹后，handleFolderSelect方法会被触发，并接收到一个事件对象，其中包含了用户选择的所有文件。然后可以遍历event.target.files数组来处理每个文件。

- 阅读更多 -
Copyright © 2025 Tech Blog
All Right Reserved | 京ICP备19053165号