vue-element-ui日期element vue
【Element】el-dialog 内使用 el-image 并添加 preview-src-list 预览，拖拽导致图片预览不完整问题
## 现象 el-dialog 内使用 el-image 并添加 preview-src-list 预览，拖拽导致图片预览不完整 ```html ``` 时记录目标元素当前的 left 和 top 值。 3 ......
【Vue】vue3 中 如何将el-table的表格数据下载为.xlsx格式文件
## 安装依赖 首先，你需要安装 xlsx 和 file-saver 这两个库。 ```bash npm install xlsx file-saver --save ``` 有兴趣可以看看两个库的官方说明，直接看下面使用也没问题。 [xlsx 官方介绍](https://www.npmjs.com ......
Vue3 Refs模板
Refs模板用来获取页面DOM元素或者组件，类似于Vue2.X中的$refs。Refs模板的使用方法如下。 (1)在setup()中创建ref对象，其值为null。 (2)为元素添加ref属性，其值为步骤(1)中创建的ref对象名。 (3)完成页面渲染之后，获取DOM元素或者组件。 src\view ......
在vue项目中使用链判断、null判断运算符报错
链判断运算符的安装 在vue项目中使用es6新的[运算符]（例如链判断运算符，null判断运算符）会报错，编译不成功需要安装babel依赖,并添加到babel.config.js中。 1.安装依赖 //NULL判断运算符 ?? npm install @babel/plugin-proposal-n ......
vue 一些问题便签
1. vue3页面传参 方式一 <div><router-link :to="/">首页</router-link></div> <div><router-link :to="{path:'/news/detail',query:{id:1}}">详情</router-link></div> <di ......
Vue3 依赖注入 provide() inject()
依赖注入就是父组件向后代组件传递数据，可以向子组件传递数据，也可以向孙子组件传递数据。 在父组件中使用provide()函数，向后代传递数据。 在后代组件中使用inject()函数，获取传递过来的数据。 provide() 提供一个值，可以被后代组件注入。 inject() 注入一个由祖先组件或 ......
处理日期和时间导入符号
日期入参：2023.01.01输出：20230101 时间入参：10:01:01 输出：100101 直接上代码: FUNCTION ZRFC_FI_002. *" *"*"區域介面： *" IMPORTING *" VALUE(P_DATUM) TYPE CHAR50 OPTIONAL *" VA ......
vue~el-autocomplete实现组件化
# el-autocomplete核心参数 可以实现异步的数据拉取，从异步返回的数据中，选择需要的结果，并回显到文本框中。 ## fetch-suggestions 回调列表，异步的方式获取数据列表，显示在列表框中 ## @select 当选中某一项时，会触发这个方法，将数据获取到，这时，我们可以将 ......
Vue3 watch() 监听
watch() 侦听一个或多个响应式数据源，并在数据源变化时调用所给的回调函数 <template> <span> <p>{{num}}</p> <p>{{num2}}</p> <button @click="num++">+1</button> <button @click="addNum">+ ......
vue3 setup访问子组件的 DOM 元素
使用setup的情况下这个时候我们无法使用this，注意在setup中setup是封闭的，不会将子组件事件暴露出来，所以要用defineExpose()，将需要在父组件调用的函数暴露出去，子组件代码如下： ``` 哈哈哈哈 ``` 父组件： ``` import { ref, onMounted } ......
Vue3 computed() 计算属性
<template> <span> <p>普通属性:{{num}}</p> <p>计算属性-只读:{{numAdd}}</p> <p>计算属性-可读写:{{numAdd2}}</p> <button @click="numUpdate">修改普通属性</button> <button @click= ......
vue--day75--vuex多组件共享数据
1.Person.vue <template> <div> <h1>人员列表</h1> <h1 style="color: red;">Count 组件的求和为{{ sum }}</h1> <input type="text" placeholder="请输入名字" v-model="name">< ......
vue--day74--四个map方法的使用mapState ,mapGetters,mapMutations,mapActions
1. Count.vue <template> <div> <h1>当前求和位{{ sum}}</h1> <h1>当前求和放大10倍后是{{ bigSum }}</h1> <h1>我在{{school }},学习{{ subject }}</h1> <select v-model.number="n ......
vue3 + vite 动态引入不被打包的静态资源
在开发中，通常会把一些静态资源放在assets文件夹下，但是assets目录下的内容是需要vite编译打包的，所以如果只是引用assets目录下的资源时，使用绝对路径、相对路径均可。 但是，在开发中，我们经常会引用一些不被打包的资源，此时该资源是放在 public 目录下的，那么在引用时，路径的写法 ......
element-ui中table组件的全选禁用遇到的坑？
elementui只提供了除全选之外其他复选框的禁用方法： <el-table-column type="selection" width="80" align="center" :selectable="selectable" ></el-table-column> // 禁用table中的复选框 ......
vue3 路由-导航守卫
假设用户登录，在地址栏输入了Login，人性化的设计应该自动回到home页面。或者用户输入不存在路由，也应该回到home页面。 这个时候需要用到vue-router的导航守卫功能。 在我们封装的router.js文件下添加router.beforeEach…… const router = crea ......
vue前端几个常用的方法
1，字符串数组去重的方法 一、使用set结构去重 set是ES6中的一种数据结构，可以去除重复元素，其特征为无序且不重复，经常用于数组去重的场景。 let arr = [1, 2, 2, 3, 3, 4, 5]; let set = new Set(arr); arr = Array.from(se ......
Vue【原创】可拖动列表 darg-list
可拖动排序的列表 drag-list，这个比较简单易懂，拿例子直接运行看效果就好了。 组件代码： 1 <template> 2 <ul class="list" ref="parentNode" @dragstart="onDragStart" @dragover="onDragOver" @dra ......
Vue3 Composition Api 与 Vue2 Options Api
Options Api Options API，即选项API，即以vue为后缀的文件，通过定义methods，computed，watch，data等属性与方法，共同处理页面逻辑 如下图： Composition Api 在 Vue3 Composition API 中，组件根据逻辑功能来组织的，一 ......
vue 监听窗口变化
mounted() { window.onresize = () => { return (() => { this.$nextTick(() => { if(document.documentElement.clientWidth <= 1000){ this.mode = "vertical" ......
Vue【原创】基于【日历组件】的【节假日管理】功能整合
基于日历组件（lilo-canlendar）的节假日管理功能整合。 效果图： 完整代码： 1 <template> 2 <div class="root-calendar"> 3 <div class="control-wrapper"> 4 <div class="year-wrapper"> 5 ......
百度：为vue站添加百度统计
一，登录百度统计获取统计代码: 使用设置->网站列表->新增网站: 填写数据后点确定: 配置单页: 复制代码: 二，添加代码到vue的html页面 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 2 ......
Vue【原创】日历组件
最近项目中封装了一个日历组件，用于节假日管理，支持输入默认选中的日期，选择管理日期。 效果图： calendar组件： 1 <template> 2 <div class="calendar"> 3 <slot name="title"> 4 <div class="calendar-title"> ......
vue element 多个Form 表单同时验证
多个Form内容统一提交验证 1 <el-form ref="form1"></el-form> 2 <el-form ref="form2"></el-form> 3 <el-form ref="form3"></el-form> 4 <el-form ref="form4"></el-form> ......
Vue3 使用Vuex与Vuex-persistedstate
## Vuex与vuex-persistedstate ### Vuex是什么？ Vuex是一个用于Vue.js应用程序的状态管理模式。它使得在应用程序中的所有组件之间共享和访问状态变得非常简单。Vuex将应用程序的状态存储在一个单一的存储库中，并且提供了一组用于更改状态的API。这使得状态管理变得 ......
vue3同一页面内重复引用同一操作dom的组件产生的问题
##### [2023年8月28日12:39:40] ## vue3同一页面内标签``重复引用同一组件，且该组件内使用css选择器进行dom操作导致页面内相同组件发生变化的问题解决记录 组件内进行dom操作，需要通过js方法进行选择器的元素获取，但当vue3全部渲染完毕后，页面内有多个id为test ......
normalizeKey is not a function #element #vue #疑难杂症
normalizeKey is not a function #element#vue#疑难杂症 原因是组件中使用了 import { Search } from '@element-plus/icons-vue' 解决方案是，在 main.ts 中，将 Vue 的引入置顶。 // TOP impo ......