代码编织梦想

vue学习日记——day 3-爱代码爱编程

一、scoped样式冲突 1、默认情况下,写在组件中的样式会全局生效——>因此很容易造成多个组件之间的样式冲突 而为样式加上scoped可以将样式转为局部样式 2、如: <style scoped>

vue3学习日记 day1-爱代码爱编程

一、简介 1、简介     Vue3是新的默认版本,拥有更快的速度,更好的语法 二、使用create-vue搭建Vue3项目 1、创建项目 1、介绍     create-vue是Vue官方新的脚手架工具,底层切换为了vite,为开发提供极速响应 2、使用     2.1、确定环境条件         2.1.1已

vue3学习日记 day3 —— pinia的介绍及使用_vue3 pinia-爱代码爱编程

一、Pinia 1、介绍 1、介绍 Pinia是Vue最新的状态管理工具,是Vuex的替代品 2、变化 2.1、去掉了modules和mutation,每一个store都是一个独立的模块

使用sortablejs 实现el-爱代码爱编程

1、在项目目录下安装 sortablejs: npm install sortablejs --save 2、在要实现表格拖拽的文件中引入 sortablejs: import Sortable from ‘sortable

vue3-爱代码爱编程

1、思路 1、在登录页面需要启动向右滑块验证 2、效果图 3、文章地址:滑动验证码的实现-vue-simple-verify 2、成分分析 1、由三块构成,分别是底部条、拖动条、拖动移动部分 2、底部条:整体容器,包括背景、边框和文字(请按住滑块,拖动到最右边) 3、拖动条:图片+边框+背景色即可 4、完成部分:背景、边框和文字(验证完

added non-爱代码爱编程

​ Added non-passive event listener to a scroll-blocking ‘touchstart’ event. Consider marking event handler as ‘p

vue表单点击按钮增加或者删除一行_vue点击按钮向表格里追加,可以保存,可以删除-爱代码爱编程

vue表单点击按钮增加或者删除一行 不需要动态改变的就不用放在一个form-item中,可以单独写一个form-item。 需要点击增加和删除的表单项目可以用v-for来循环渲染。 <a-form

vue框架cli组件化动态列表实现-爱代码爱编程

<template> <div> <BugHeader></BugHeader> <BugList></BugList> <BugFooter></BugFooter> </div&

[violation] added non-爱代码爱编程

浏览器页面警告:[Violation] Added non-passive event listener to a scroll-blocking <some> event. Consider marking event handler as 'passive' to make the page more responsive. See <

vue事件处理:.passive修饰符与应用场景_vue passive-爱代码爱编程

.passive修饰符         passive这个修饰符会执行默认方法。你们可能会问,明明默认执行为什么会设置这样一个修饰符。这就要说一下这个修饰符的本意了。         浏览器只有等内核线程执行到事件监听器对应的JavaScript代码时,才能知道内部是否会调用preventDefault函数来阻止事件的默认行为,所以浏览器本身是没有办法对

col一行显示五个_el-爱代码爱编程

layout布局实现一行显示五个col代码片段(element-ui和antdesign均可适用) <Row> <div style={{ display: 'grid

el-爱代码爱编程

背景 项目中遇到这种情况:当下拉数据有上千条时,编辑会卡顿缓慢,为了优化体验,使用了 下拉滚动加载 的方式:默认初始加载第一页数据,当滚动条拉到底部时,去加载下一页数据进行累加。 实现方法 首先自定义个指令select

关于elementui中select框在页面滚动时el-爱代码爱编程

前几天在开发一个需求时,无意发现了select超出区域el-option会浮出来问题,我整个人都不淡定了😱,想着正常人应该都不会像我这样反人类操作吧😅... 但是秉着对技术的执着,有问题咱就迎难而上,啥大风大浪没见过的.... 既然已经发现问题,我就开始琢磨为什么会产生这个问题🤔 头脑风暴中,经过思考有了下面的见解... 1

element-爱代码爱编程

多选框初始化时总是默认校验显示问题 解决办法: 表单校验规则   { required: true, validator: validatorType, trigger: 'change' } 设置变量判断是否是第一次加载  isFirstLoadhidden: true  判断如果第一次加载则不校验,第二次再校验是否进行了选择

elementui描述列表descriptions设置自定义样式/修改固定宽度_elementui el-爱代码爱编程

ElementUI描述列表Descriptions设置自定义样式/修改固定宽度 1.在el-descriptions中添加 :label-style="xxx" 和 :contentStyle="xxx"2.在

el-爱代码爱编程

目标 官网的表单项都是写死在代码里面的,但是实际我们的表单大多是通过json配置出来的,就需要动态的根据配置信息做表单校验 例如: [{ name: "商品名称", key: "productName", value: "", type: "input", must: true, placeholder: "请输入", l

element-爱代码爱编程

中使用Element UI的el-select组件实现下滑分页加载的功能,通过自定义指令来判断是否需要滚动加载下一页数据 <template> <el-select v-model="sele

vue3 div模拟select下拉框选择_vue3项目用div封装下拉选择器组件-爱代码爱编程

因为原生的select不太好封装,所以就选用了div+ul来模拟下拉框选择,本文使用的是vue3将其封装成一个组件,需要用到vueuse,不过如果不认识这个插件或者不想安的,也不碍事,这个插件就是让我们封装的组件的在组件范围之外点击可以关闭显示下拉框 1. 封装 <script lang="ts" setup> import {getCur

实现给el-爱代码爱编程

实现给el-table表头加必填符号星号(红*) header-cell-style或者header-cell-class-name改变表头的style类 这样的方法在小项目中可以适用,但是在大项目里,很难定位到可以产生

遍历el-爱代码爱编程

<el-form ref="bannerImgSettingForm" label-width="80px" :model="bannerImgSettingForm" :rules="rules" > &