分类 vue.js 下的文章

2024-08-15

在Vue中，可以通过CSS样式来控制滚动条的显示与隐藏。以下是实现这一功能的方法和示例代码：

显示滚动条:




.show-scrollbar {
  overflow: auto; /* 或者使用 'scroll' */
}

隐藏滚动条但仍可滚动:




.hide-scrollbar {
  overflow: auto; /* 隐藏滚动条 */
  /* 针对WebKit浏览器 */
  &::-webkit-scrollbar {
    display: none;
  }
  /* 针对FireFox浏览器 */
  scrollbar-width: none; /* Firefox */
}

在Vue模板中使用:




<template>
  <div id="app">
    <div class="show-scrollbar">这里的内容会显示滚动条</div>
    <div class="hide-scrollbar">这里的内容会隐藏滚动条但可以滚动</div>
  </div>
</template>
 
<style>
.hide-scrollbar {
  overflow: auto;
  /* 隐藏滚动条 */
  /* 针对WebKit浏览器 */
  &::-webkit-scrollbar {
    display: none;
  }
  /* 针对FireFox浏览器 */
  scrollbar-width: none; /* Firefox */
}
</style>

在这个例子中，.show-scrollbar 类使得元素的滚动条总是可见，而 .hide-scrollbar 类则通过CSS规则隐藏了滚动条，同时允许元素滚动。需要注意的是，隐藏滚动条可能会影响可访问性，因为它使得一些用户无法直观地知道内容是可以滚动的。

System

2024-08-15

所有,vue.js

在Vue 3中使用Element Plus的el-input组件来控制用户输入正确的金额，可以通过监听input事件或使用v-model.lazy来实现。为了确保输入的是正确的金额格式，你可以使用input的@input事件或者watch来监听v-model绑定的值的变化，并对其进行格式化处理。

以下是一个简单的例子，展示如何使用el-input组件来控制金额输入：




<template>
  <el-input
    v-model="amount"
    @input="formatAmount"
    placeholder="请输入金额"
  ></el-input>
</template>
 
<script setup>
import { ref } from 'vue';
 
const amount = ref('');
 
function formatAmount(value) {
  // 这里简单处理，仅允许数字和小数点
  // 你可以根据需要添加更多的格式验证和处理逻辑
  value = value.replace(/[^\d.]/g, '')
    .replace(/\.{2,}/g, '.')
    .replace('.', '$#$')
    .replace(/\./g, '')
    .replace('$#$', '.')
    .replace(/^(\-)*(\d+)\.(\d{2}).*$/, '$1$2.$3');
 
  if (value.indexOf('.') < 0 && value !== '') {
    // 也可以处理没有小数点的情况
    value += '.00';
  }
  if (value.indexOf('.') === value.length - 2) {
    // 如果小数点后只有一位数字，补充一个0
    value += '0';
  }
  if (value.indexOf('.') > 0) {
    // 保留两位小数
    value = value.slice(0, value.indexOf('.') + 3);
  }
 
  return (amount.value = value);
}
</script>

在这个例子中，我们使用了el-input组件的@input事件来监听用户的输入，并调用formatAmount函数来格式化输入的金额。formatAmount函数会处理用户的输入，以确保它是一个正确的金额格式（两位小数）。如果用户输入了错误的格式，例如多余的小数点或字母，这个函数会自动修正输入值。

- 阅读更多 -

使用 FastAPI 和 Vue.js 实现前后端分离

System

2024-08-15

所有,vue.js




# FastAPI 后端代码
from fastapi import FastAPI
from starlette.responses import JSONResponse
 
app = FastAPI()
 
# 假设的数据，将会从数据库中读取
items = {
    "items": [
        {"id": 1, "name": "Item 1"},
        {"id": 2, "name": "Item2"}
    ]
}
 
@app.get("/items/")
def read_items():
    return JSONResponse(items)
 
# 其他路由和服务逻辑...




<!-- Vue.js 前端代码 -->
<template>
  <div>
    <h1>Items List</h1>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      items: []
    };
  },
  created() {
    this.fetchItems();
  },
  methods: {
    async fetchItems() {
      try {
        const response = await fetch('http://localhost:8000/items/');
        const data = await response.json();
        this.items = data.items;
      } catch (error) {
        console.error('Error fetching items:', error);
      }
    }
  }
};
</script>
 
<!-- 样式和布局... -->

以上代码展示了如何使用FastAPI（后端）和 Vue.js（前端）创建一个简单的前后分离应用。后端提供RESTful API，前端通过AJAX调用这些API获取数据并展示在页面上。这样的架构让前后端开发可以同时进行，提高开发效率。

- 阅读更多 -

Vue之事件绑定（初识Vue事件）

System

2024-08-15

所有,vue.js

在Vue中，事件绑定主要通过v-on指令实现，它用于监听DOM事件，并在触发时执行相关的Vue实例中的方法。

以下是一个简单的例子，演示如何在Vue中绑定点击事件：




<!DOCTYPE html>
<html>
<head>
    <title>Vue Event Binding Example</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <!-- 绑定点击事件 -->
        <button v-on:click="greet">Click Me</button>
    </div>
 
    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            },
            methods: {
                greet: function() {
                    alert(this.message);
                }
            }
        });
    </script>
</body>
</html>

在这个例子中，我们创建了一个Vue实例，并通过v-on:click绑定了一个名为greet的方法。当按钮被点击时，会弹出一个包含message数据属性的警告框。

- 阅读更多 -

Vue+Flask电商后台管理系统

System

2024-08-15

所有,vue.js

以下是一个简化的Vue+Flask电商后台管理系统的示例代码。

Flask后端代码 (app.py):




from flask import Flask, jsonify
from flask_cors import CORS
 
app = Flask(__name__)
CORS(app)
 
# 假设有一个产品列表
products = [
    {'id': 1, 'name': 'Product 1', 'price': 100},
    {'id': 2, 'name': 'Product 2', 'price': 200}
]
 
@app.route('/products', methods=['GET'])
def get_products():
    return jsonify({'products': products})
 
if __name__ == '__main__':
    app.run(debug=True)

Vue前端代码 (src/components/ProductsList.vue):




<template>
  <div>
    <h1>产品列表</h1>
    <ul>
      <li v-for="product in products" :key="product.id">
        {{ product.name }} - {{ product.price }}
      </li>
    </ul>
  </div>
</template>
 
<script>
import axios from 'axios';
 
export default {
  data() {
    return {
      products: []
    };
  },
  created() {
    this.fetchProducts();
  },
  methods: {
    async fetchProducts() {
      try {
        const response = await axios.get('http://localhost:5000/products');
        this.products = response.data.products;
      } catch (error) {
        console.error('Error fetching products:', error);
      }
    }
  }
};
</script>

确保Flask服务器正在运行，并且Vue前端可以正确地从Flask服务器获取数据。这个例子演示了如何使用Flask创建一个简单的API，并使用Vue来展示从API获取的数据。在实际应用中，你可能需要进一步实现数据的增删改查操作。

- 阅读更多 -

详细分析Vue3中的defineEmits基本知识（子传父）

System

2024-08-15

所有,vue.js

在Vue3中，defineEmits是一个函数，它用于定义组件可以触发的事件。这是Vue3中的一个新特性，它使得组件可以更明确地声明它们触发的事件，从而提供更好的类型支持和IDE支持。

defineEmits可以在组件的setup函数中被调用，并且可以被用于子组件向父组件传递数据。

以下是一个简单的例子，展示了如何使用defineEmits来从子组件向父组件发送事件：




<template>
  <button @click="sendToParent">Send to Parent</button>
</template>
 
<script setup>
import { defineEmits } from 'vue'
 
const emit = defineEmits(['fromChild'])
 
function sendToParent() {
  emit('fromChild', 'Hello, Parent!')
}
</script>

在这个例子中，我们定义了一个名为fromChild的事件，当按钮被点击时，会触发这个事件，并将消息'Hello, Parent!'传递给父组件。父组件需要监听这个事件才能接收到传递过来的数据。

- 阅读更多 -

一篇文章了解 threejs 在 vue 项目中的基本使用

System

2024-08-15

所有,vue.js




<template>
  <div id="container"></div>
</template>
 
<script>
import * as THREE from 'three';
 
export default {
  name: 'ThreeJsComponent',
  mounted() {
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.getElementById('container').appendChild(renderer.domElement);
 
    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
 
    camera.position.z = 5;
 
    const animate = function () {
      requestAnimationFrame(animate);
 
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
 
      renderer.render(scene, camera);
    };
 
    animate();
  }
}
</script>
 
<style>
#container {
  height: 100vh;
}
</style>

这段代码在Vue组件的mounted生命周期钩子中初始化了一个Three.js场景，创建了一个3D立方体，并设置了相机、渲染器，然后开始了循环动画渲染流程。这是Three.js在Vue项目中的一个基本用法示例。

System

2024-08-15

所有,vue.js

ELADMIN是一个基于Spring Boot和Vue.js的开源后台管理系统，它提供了一套开箱即用的后台管理功能，包括用户管理、角色管理、菜单管理、权限管理等。

如果你想要使用ELADMIN作为你的后台管理系统，你可以按照以下步骤进行：

克隆ELADMIN的代码仓库到本地：




git clone https://github.com/elunez/eladmin.git




cd eladmin

使用Maven构建项目：




mvn clean install

启动后端服务：




cd eladmin-boot
mvn spring-boot:run

构建并启动前端：




cd eladmin-web
npm install
npm run dev

完成以上步骤后，你应该能够在本地访问ELADMIN的后台管理界面。

注意：确保你的开发环境中已经安装了Maven和Node.js。

如果你想要定制ELADMIN以满足你的具体需求，你可能需要对后端和前端代码进行相应的开发和配置。具体的开发文档和配置指南可以在ELADMIN的GitHub仓库页面找到。

System

2024-08-15

所有,vue.js

在Vue 3和Element Plus中，如果你想要在去掉遮罩层后仍然能操作底层页面，你可以通过设置append-to-body属性为true来实现。这样，对话框就会被添加到body上，从而不会阻塞底层页面的交互。

对于弹窗嵌套，Element Plus的Dialog组件本身支持嵌套。你只需要确保每个Dialog都有一个独立的visible属性，并且这些属性是响应式的，这样就可以控制它们的显示和隐藏了。

以下是一个简单的例子：




<template>
  <el-button @click="outerVisible = true">打开外层Dialog</el-button>
  <el-dialog
    :visible.sync="outerVisible"
    title="外层Dialog"
    append-to-body
  >
    <el-button @click="innerVisible = true">打开内层Dialog</el-button>
    
    <el-dialog
      :visible.sync="innerVisible"
      title="内层Dialog"
      append-to-body
    >
      <!-- 内层Dialog的内容 -->
    </el-dialog>
  </el-dialog>
</template>
 
<script setup>
import { ref } from 'vue';
import { ElButton, ElDialog } from 'element-plus';
 
const outerVisible = ref(false);
const innerVisible = ref(false);
</script>

在这个例子中，我们有一个外层Dialog和一个内层Dialog。每个Dialog都有一个触发按钮，并且它们的visible属性是响应式的。这样，当内层Dialog打开时，外层Dialog仍然可以操作。而且，通过设置append-to-body属性为true，它们都能够显示在页面的底部，而不是阻塞页面的其它部分。

- 阅读更多 -

Vue + ECharts大屏可视化

System

2024-08-15

所有,vue.js




<template>
  <div ref="chart" style="width: 100%; height: 100%"></div>
</template>
 
<script>
import * as echarts from 'echarts';
 
export default {
  name: 'EChartsComponent',
  props: {
    option: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      chartInstance: null
    };
  },
  watch: {
    option: {
      handler(newOption) {
        if (this.chartInstance) {
          this.chartInstance.setOption(newOption);
        }
      },
      deep: true
    }
  },
  mounted() {
    this.chartInstance = echarts.init(this.$refs.chart);
    this.chartInstance.setOption(this.option);
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
    if (this.chartInstance) {
      this.chartInstance.dispose();
    }
  },
  methods: {
    handleResize() {
      if (this.chartInstance) {
        this.chartInstance.resize();
      }
    }
  }
};
</script>

这个代码实例展示了如何在Vue组件中集成ECharts图表，并处理图表的初始化、选项更新和窗口大小调整。这是一个基本的模板，可以根据具体需求进行扩展和定制。

- 阅读更多 -