vue
关注
分享
扫一扫
金包银是喵桑
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
坑：this.$refs[xxx].validate is not a function
elementui 表单验证的坑this.$refs[xxx].validate is not a function改为：this.$refs[xxx][0].validate原创 2022-02-09 09:46:31 · 784 阅读 · 0 评论 -
elementui 表格出现多余横线
出现如下图所示的渲染问题在全局样式表里面添加以下代码即可.el-table::after,.el-table::before { display: none;}原创 2022-03-24 11:06:47 · 1423 阅读 · 0 评论 -
vue elementUI下拉框select动态设置默认选中第一个后无法切换值
添加一个 @change=“handleSelectChange”，然后使用this.$forceUpdate()即可<el-select v-else v-model="formData[i]" @change="handleSelectChange"> xxxx</el-select> handleSelectChange () { this.$forceUpdate() },原创 2022-02-15 16:42:37 · 2295 阅读 · 0 评论 -
备份：在全局样式表关于elementUI的一些样式修改，主要是表格
/*全局样式表*/html,body,#app{ height: 100%; margin: 0; padding: 0; /* min-width: 1366px; */}*{ margin: 0; padding: 0;}/* 表格 */.el-table *{ font-size: 0.6vh;}.el-table td, .el-table th{ text-align: center !important;}.el-table .原创 2021-07-26 15:00:32 · 341 阅读 · 0 评论 -
elementui统一父元素下面所有子元素的属性，如font-szie
由于elementui样式里的每个属性单独修改很麻烦1.在css scoped的情况下，采用以下代码实现一次性修改分页栏的font-size2.如果要放在全局样式表的话，去掉/deep/即可.el-pagination /deep/ *{ font-size: 1vh !important;}...原创 2021-05-31 10:55:42 · 326 阅读 · 0 评论 -
ElementUI表格多选数据处理
ElementUI表格多选数据处理1.添加复选框<el-table-column type="selection" :reserve-selection="true" > </el-table-column>1.在el-table-column里面选择type为selection设置为复选框2.(可选)如果要获取不同页的数据进行操作，利用reserve-selection，官方文档说明：2.el-table属性设置<el-table stripe原创 2021-05-28 14:38:58 · 1988 阅读 · 1 评论 -
el-form验证整数，ip
var validateIP = (rule, value, callback) => { var reg = /^(25[0-5]|2[0-4]\d|[0-1]?\d?\d)(\.(25[0-5]|2[0-4]\d|[0-1]?\d?\d)){3}$/ if (reg.test(value)) { callback() } else { callback(new Error('请输入正确的格式')) } } // 验证正整数 var原创 2022-03-15 10:28:26 · 626 阅读 · 0 评论 -
less循环遍历，动态赋值类名
less循环并动态渲染类名原创 2023-01-09 15:36:00 · 1154 阅读 · 0 评论 -
vue3+vite与vue2+webpack 分别配置环境变量
vue3+vite与vue2+webpack 分别配置环境变量，并总结差异原创 2022-11-23 13:46:39 · 755 阅读 · 0 评论 -
vue+less 电池电量图标组件
vue+less 动态电池电量图标原创 2022-09-07 10:07:05 · 1773 阅读 · 0 评论 -
使用vite创建vue3项目
vite+vue3创建项目原创 2022-08-29 11:20:39 · 6444 阅读 · 0 评论 -
使用vue render渲染函数开发动态菜单栏
使用vue render动态渲染菜单栏原创 2022-07-14 11:09:02 · 768 阅读 · 0 评论 -
vue中使用lodash debounce
vue中使用lodash.debounce原创 2022-06-10 13:44:27 · 1750 阅读 · 0 评论 -
vue用iframe播放海康视频
由于项目需要同时显示两个相机的视频，使用上一篇文章封装的组件无法完成，因为当时webVideoCtrl.js是直接定义在全局的，$相当于一整个项目的window,无论怎么使用都只能在第一次定义的dom位置显示视频（如果有更好的方法欢迎评论区告知），因此使用了iframe隔离window。1.在public地址下添加iframe.html2.iframe.html<!doctype html><html><head> <title></原创 2022-02-28 09:54:11 · 3821 阅读 · 35 评论 -
vue 封装和使用海康视频组件，使用了海康的webVideoCtrl.js
1.需要先在public文件下引入webVideoCtrl.js和jquery文件在该目录下的 index.html 里面添加script标签引入文件2.创建海康视频处理组件<template> <div class="video-player"> <div id="divPlugin" class="divPlugin"></div> </div></template><script>exp原创 2022-02-24 17:06:14 · 3505 阅读 · 2 评论 -
vue父组件更新数据，子组件没有变化
是子组件的watch写的不对添加immediate: truewatch: { taskId: { immediate: true, // 必须！ handler (val) { ... } }},原创 2022-02-22 14:26:16 · 1446 阅读 · 0 评论 -
vue中在DOM中添加鼠标滚动事件（获取滚轮方向）,兼容火狐
<div @mousewheel="Wheel" @DOMMouseScroll="FireFoxWheel"></div>// IE、chromnWheel(e) { // 滚轮方向 e.wheelDelta}// FireFoxFireFoxWheel (e) { // 滚轮方向 e.detail}原创 2021-12-08 16:17:12 · 1346 阅读 · 0 评论 -
vue子组件封装弹框只能执行一次的mounted问题
封装了一个子组件来处理弹框内容，发现只能执行一次，在父组件添加一个 v-if 即可，当每次弹框关闭的时候销毁掉该组件就没有问题了。贴一下简易代码：父组件：<add-dialog v-if="addVisible" :dialogVisible="addVisible" @addClose="addClose"></add-dialog>addClose () { this.addVisible = false}子组件：<template> <原创 2021-12-06 11:18:24 · 2366 阅读 · 0 评论 -
elementui el-checkbox全选
一.html结构<el-checkbox class="allCheck" :indeterminate="item.isIndeterminate" v-model="item.isCheckAll" @change="handleCheckAllChange(item.isCheckAll,i)">全选</el-checkbox><el-checkbox-group v-model="item.value" @change="handleCheckedChange(i原创 2021-11-10 10:42:08 · 1979 阅读 · 0 评论 -
在vue-cli 3中使用jquery
1.npm安装jquerynpm install jquery --save-dev2.在main.js中引入jqueryconst $ = require('jquery')window.$ = $3.即使这样我eslint还是会报$未定义的错，解决方法：在项目根目录下新建 .eslintrc.js 文件，配置代码如下：module.exports = { root: true, env: { node: true, jquery: true //此处配置意思原创 2021-09-29 11:25:45 · 552 阅读 · 0 评论 -
在Vue项目中引入外部js文件，并在Vue的外部js中引用this
一.外部js脚本示例const submitForm = function () {}export { submitForm}二.在Vue项目中引入外部js文件import { submitForm } from './assets/js/gloabal'三.由于在vue的外部js中使用的this并非当前vue实例，所以我们需要传递thisjs示例如下：vueObject即传递过来的this// 表单预处理判断const submitForm = function (formN原创 2021-09-23 09:50:29 · 3250 阅读 · 0 评论 -
记录：vue项目中动态绑定img的src不显示问题
项目没有报错，但是图片不显示html中的代码如下：<img :src="imgsrc" />data中的imgsrc如下：imgsrc: '@/assets/12.png',出现这种问题是因为项目内的图片地址需要用require包裹，代码修改如下即可：imgsrc: require('@/assets/12.png'),...原创 2021-07-23 14:07:51 · 1699 阅读 · 2 评论