vue-element-ui日期element vue
vue+spirngboot前后端数据加解密（基于AES+RSA实现）
案例说明 案例只针对post请求 这里使用’Content-Type’: ‘application/x-www-form-urlencoded; charset=UTF-8’；为键值对的形式（非json） AES加密数据，RAS加密AES的key 实现思路 前台首先请求非加密接口获取后台的公钥前台在 ......
element tree 优化线条树，添加增删改功能
需求：树状结构，支持操作功能（同级、子级、修改、删除）。 根据需求是否展示复选框和操作功能。 封装linetree.vue组件： 1 <template> 2 <div> 3 <el-tree :data="list" :props=defaultProps :expand-on-click-nod ......
vue2实现文件分片上传/续传
两种上传文件方式一种分片和续传工具包/assets/utils.js export function fileParse(file, type = "base64") { return new Promise(resolve => { let fileRead = new FileReader(); ......
懂 Vue3 中的各种 ref:toRef,toRefs,isRef,unref...
在 Vue3 中，有许多与响应式相关的函数，例如 toRef、toRefs、isRef、unref 等等。合理地使用这些函数可以在实际开发中大大提高效率。本文将详细介绍这些函数的用法，让在实际开发中知道应该使用哪些 API 并能够熟练地回答面试官的相关问题。 ref() 大家对于 ref 这个 AP ......
Vue之this.$options.data()和this.$data
Vue之this.$options.data()和this.$data：https://blog.csdn.net/weixin_44090040/article/details/129875428?utm_medium=distribute.pc_relevant.none-task-blog-2 ......
vue实现全局消息提醒功能（vue-extend）
1.需求背景 （1）在一般的管理系统或者 H5 应用中，需要交互反馈提醒。这种交互反馈，往往需要在多个组件中使用到，那么是否可以将其抽离出来，封装一个组件呢？答案是肯定的，可以根据日常的业务，对消息提醒功能进行封装，那么问题来了，如何实现一次注册，多次使用呢，关键时刻，vue.extend API ......
vue3 引入axios 并封装下
没有考虑取消重复请求、重复发送请求、请求缓存等情况 重复请求参考此链接 实现请求拦截 实现响应拦截 常见错误信息处理 请求头设置 api 集中式管理 index.js import axios from "axios"; import qs from "qs"; const serverConfig ......
element table第二页序号不从1开始
<el-table-column type="index" width="80" label='序号' align="center"> <template slot-scope="scope"> {{scope.$index + (formInline.pageno - 1) * formInlin ......
vue项目中自定义鼠标图标实现
要做大屏项目，为了各个细节都充满炫酷的感觉，鼠标的样式也要修改一下，自定义成自己想要的样式。 1、先上效果图，两种展示方式 实现这个效果首先要创建在目录下创建一个styles文件夹，里面分别包括common.css、common.scss、custom-cursor.scss。 1、common.c ......
在vue3中使用openlayers3实现track轨迹动画
网上太多资料代码，抄来抄去，而且版本也是OL2的，部分API已经弃用 基础知识不多说，直接讲重点 三个关键变量 // 记录开始动画的时间 const startTime = ref(0); // 轨迹分割的颗粒度，数值越小分的越细 const particle = 20; // 轨迹动画的速度，数值 ......
vue实现大文件分片上传 vue-simple-uploader
首先为什么要分片上传？大部分小白使用element-ui中上传组件，但是直接用它上传大文件会 超时 或者Request Entity Too Large（请求实体太大）这种问题。 1. 使用插件 vue-simple-uploader我的这个可以自定义样式(没懂的留言给我) 1.1 customUp ......
vue2、vue3适配大屏。分辨率变化，样式不变
一、vue3适配大屏的，创建一个叫 useDraw.js export default function () { const scale = { width: '1', height: '1', } const baseWidth = 1920 const baseHeight = 1080 co ......
网站变灰-指定日期变成灰色
文件名： js\timedWebsiteGraysOut.js // 设置每天凌晨触发一次的时间（24小时制） const targetHour =9; // 12:00 AM // 设置定时器，每隔一分钟检查一次 const dailyCheckInterval = setInterval(dai ......
基于vue脚手架的练习2
<template> <div> <span>父值为:</span>{{ to_value }} <button @click="clear()">清空</button> </div> </template> <script> export default { props:['to_value'], ......
Vue路由params、query传参用法，以及form表单回车自动提交问题
一、路由参数用法 1.1 query参数 第一种方式传参：跳转路由并携带query参数，注意to的字符串写法 将id和title拼接字符串形成地址 <router-link :to="`/home/message/detail?id=${item.id}&title=${item.title}`"> ......
vue实现下载附件功能
两种方式下载： 第一种：直接a标签下载 <a class="item-btn download" :href="'/xxx/xxx/download?id=' + xxx.id" :download="xxx.name">下载附件</a> 第二种： <el-button class="item-bt ......
公历日期转农历日期的SQL函数
/* 功能: 返回指定日期的农历日期 (需配合 sys_date_lunar 表使用) 参数说明: @solarDay 日期 @type 日期: 0: 年月日 文本: 1: 月日的文本 数字: 20: ymd , 21 md 例: select dbo.usf_GetDateLunar('2023- ......
vue-quill富文本编辑器实现图片缩放
安装环境 官网：https://vueup.github.io/vue-quill/guide/modules.html npm安装：npm install @vueup/vue-quill@latest --save pnpm安装：pnpm add @vueup/vue-quill@latest ......
element-ui 表格分页勾选数据
新增 使用:row-key 编辑 主要是回显数据，如果使用 :row-key,会造成取消了，但是翻页后，无法取消的问题。 给表格使用 select 和 select-all 事件去选择 然后把选择的数据给请求，使用this.$refs.multipleTable.toggleRowSelection ......
element-plus中的文件上传
官网：https://element-plus.org/zh-CN/component/upload.html 简单使用： 场景：与表单项一起提交，但是需要回显功能，可以用过本地url预览方式实现 <!-- 此处需要关闭 element-plus的自动上传，不需要配置 action等参数 只需要做前 ......
Windows服务器，通过Nginx部署VUE+Django前后端分离项目
目录 基本说明 安装 Nginx 部署 VUE 前端 部署 Django 后端 Django admin 静态文件（CSS，JS等）丢失的问题 1. 基本说明 本文介绍了在 windows 服务器下，通过 Nginx 部署 VUE + Django 前后端分离项目。本项目前端运行在 80 端口，服务 ......
vue中this.$refs的使用方法和遇到的问题
this.$refs ：用于操作真实的DOM节点。 在开发时碰到了一个小需求，需要子组件向父组件传参，而且是不需要通过事件传递的，一开始使用this.$emit()来写的，但是一直没有接受到参数，于是放弃了使用this.$emit()的使用。 于是，使用了在父组件中调用子组件的方法，来获取传递的参数 ......
JavaWeb - Day03 - Ajax、前端工程化、Element
01. Ajax-介绍 Ajax 概念：Asynchronous JavaScript And XML，异步的JavaScript和XML。 作用： 数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术 ......
element plus el-table表格合并
el-table表格合并实现都是使用表格的span-method属性绑定操作函数 <el-table :data="table.data" :span-method="objectSpanMethod" > </el-table> 操作函数格式 const objectSpanMethod = ({ ......
VS Code 配置Vue3模板
配置用户代码片段 搜索vue 配置模板 { "vue3": { "prefix": "vue3", "body": [ "<template>", " <div>", " </div>", "</template>", "", "<script setup lang=\"ts\">", "impor ......
OpenTiny Vue 3.12.0 发布：文档大优化！增加水印和二维码两个新组件
TinyVue 3.12.0 主要更新：全面优化 54 个高频组件的 Demo / API 文档，让文档更加清晰易懂、符合预期；Watermark 水印组件；QrCode 二维码组件。 ......
[Vue] vue学习笔记(8): 生命周期(vue2)
vue里的生命周期，也叫生命周期回调函数，是指vue在一些关键时刻引用的特定函数，这些函数的名称是确定的，这些函数中的this指向vue实例或组件实例 挂载流程 0️⃣初始化生命周期和事件，但数据代理还未开始 1️⃣beforeCreate() ➡️ 此时无法通过vue实例访问data中的数据以及m ......
vue解析上传的json文件信息
1.模版 <a-upload name="layoutFile" v-model:file-list="fileList" @change="importModules" accept="*" :showUploadList="false" :customRequest="() => {}" :he ......
Vue2 的@hook 、 hook: 与生命周期
如何实现父组件监听子组件的生命周期 方法一：$emit // 父组件 <template> <div> <Child @mounted="onMounted" @updated="onUpdated" @beforeDestroy="onBeforeDestroy" ></Child> </div> ......