8.2k 字 7 分钟

# 项目搭建规范 # 一。代码规范 # 1.1. 集成 editorconfig 配置 EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格。 # http://editorconfig.orgroot = true[*] # 表示所有文件适用charset = utf-8 # 设置文件字符集为 utf-8indent_style = space # 缩进风格（tab | space）indent_size = 2 # 缩进大小end_of_line = lf # 控制换行类型 (lf | cr |...
2.7k 字 2 分钟

# 在 vue3 中 ts 的巧妙使用 # 技巧一 (取 ref 对象) # 说明: 在获取组件的 ref 对象时，我们可以通过 <InstanceType<typeof 组件 ref>> 来给 ref 对象限制类型 # 作用： 在取到 ref 对象后，如果调用其组件内的方法，如果方法不存在会报错，增强代码安全性 # 注意： 子组件部分的 setup 写法如果用 script 标签方式，需要用 defineExpose 将方法暴露出去，否则父组件取不到子组件的方法 (官方文档有说，如果用 setup () 函数的方法就不用考虑) #...
3.9k 字 4 分钟

# Vue3 中封装 useMapper 函数（Vuex） # 作用 <script> import { useStore } from "vuex"; import { computed } from "@vue/runtime-core"; export default { setup() { //1.传统方法在vuex中拿到state const oldCounter =...
2.1k 字 2 分钟

# 该案例的实现思路 每个盒子都有自己的索引值，在你选中一个盒子之后，会在数组 a 中记录这个索引值，而这时我们需要定义一个盒子移入就触发的事件，在选中一个盒子的条件下（也就是数组 a 的 length 为 1 时）将你移入的那个盒子的索引值记录到数组 b 中，这时数组 a 和数组 b 中都有一个索引值，我们只需要将在那些索引值在这两个索引值之间的盒子高亮一个颜色就可以了，而数组 a 里面的索引值所对应的盒子设置为另一个高亮颜色，就可实现 # 案例演示 在点击某个格子后会高亮一个盒子，然后可以在盒子范围内选中第二个盒子即可获取选中区域 #...
131 字 1 分钟

# Element plus 的 Form 表单中的 resetFields 失效问题 1.el-form 标签需要绑定 model 2.el-form-item 标签需要绑定 prop（注意 el-form 里面的 model 里面的子项一定要与各个 prop 相对应） 上面两个条件符合就不会失效了
52k 字 47 分钟

# Element Plus 组件二次封装 # 前言 直至今天，看了一下别人写的代码，才发现以前自己写的代码太垃圾，所以在这次做的一个后台项目中，采用他的代码风格，怎么说呢，复用性特别好，封装的很好，学到很多，所以记录一下思路，我认为这个封装思路是真的很棒，写第一个页面的时候可能会麻烦一些，但是后面只要是相似的页面，事半功倍，直接 CV 改配置项就好了，是真的顶，记录一下，学习一下，我这里用的是 vue3+ts # Form 表单的封装 # 简述 这里是 Form 表单部分，下面是完整的思路，最后有附上完整的代码，大佬可以直接看完整的代码就能看懂了，小白们跟着我的思路估计能看懂.... #...
1k 字 1 分钟

# Swiper 在 Vue 中的使用 # 第一步，安装 npm i swiper@4.5.0 npm i vue-awesome-swiper@3.1.3 # 第二部，全局引入 // 全局引用并使用轮播图组件 import VueAwesomeSwiper from 'vue-awesome-swiper' import 'swiper/dist/css/swiper.css' Vue.use(VueAwesomeSwiper, /* { default options with global component }...
1.1k 字 1 分钟

# Vue2.0 全局过滤器的定义与使用 # 第一步：定义过滤器所需函数 在 src 目录下创建 filter 文件夹，在里面创建 js 文件，里面填写内容是过滤器所要用到的函数 这里我用的是日期格式化处理函数，用的是 dayjs 插件 import dayjs from "dayjs";export function date(val, b) { let data = dayjs(val).format(b); return data;}# 第二步：在 main.js 引用函数文件并注册全局过滤器 //...
643 字 1 分钟

# 父元素 display:flex 布局下的子元素宽度无效问题 因为设置了 display: flex; 导致 block 布局变成了 flex 布局， 所以在子元素宽度没有被撑破的情况下，子元素宽度是有效的，但是当子元素内容过多，此时宽度会比实际宽度小，所以如果想要在已经设置了 flex 布局的基础上，再进行子元素宽度的设置，可以应用下面的样式：（在该子元素上设置） 设置了（display: flex；）后，子元素如果设置了宽度，在父元素宽度没被撑破时有效，但是一旦撑破，子元素宽度就会失效（会变小），解决方法可以在子元素加个（flex-shrink:...
3.9k 字 4 分钟

# 在 Vue 中实现验证码登录 # 效果展示 # 第一步：创建验证码组件 这里是组件的代码，可以自行命名文件名，我这里命名为 SIdentify.vue <template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth"...