目录1. 安装所需依赖2. 组件设计实现3. 组件使用示例在前端开发中，拖拽排序是一种提升用户体验非常好的方式，常见的场景有单列表拖拽排序，多列表拖拽交换排序，比如以下这种效果： 下面将以这种效果为例，设计一个组件。1. 安装所需依赖npm install vuedraggable --save
本例中目前所用的版本为：2.20.02. 组件设计
......
336
0
0
2023-05-21
目录基础表格固定表头高度/流体高度自定义列宽基础表格首先开发table组件之前，先想好要用什么样式的api，因为笔者在生产工作中用的都是element，所以前面几个组件风格和element类似，但是这次不打算用element的风格了，打算换一种，直接展示：我们期望用户这样使用：<script setup>
const dataList = [
......
327
0
0
2023-05-18
目录vue封装自己的Svg图标组件库安装及配置方法vue使用svg封装图标组件，代替img图片提高性能可行性分析实践方案总结vue封装自己的Svg图标组件库安装及配置方法一、安装组件svg-sprite-loadernpm install svg-sprite-loader --save-dev || yarn add svg-sprite-l
......
361
0
0
2023-05-12
目录轮播图功能-获取数据轮播图-通用轮播图组件轮播图-数据渲染轮播图-逻辑封装轮播图功能-获取数据目标: 基于pinia获取轮播图数据核心代码：（1）在types/data.d.ts文件中定义轮播图数据的类型声明// 所有接口的通用类型
export type ApiRes <T> = {
code: string,
msg
......
286
0
0
2023-05-11
目录一、组件间通信最基本方式-props二、组件间通信-vue自定义事件三、组件间通信-事件总线四、组件间通信-v-model五、组件间通信-sync属性修饰符六、组件间通信-$attrs与$listeners七、组件间通信-$children与$parent八、组件间通信-provide与inject九、组件间通信-vuex一、组件间通信最基本方式-pro
......
343
0
0
2023-05-08
目录Vue3 组件通信方式Vue3 通信使用写法1. props2. $emit3. expose / ref4. attrs5. v-model6. provide / inject7. Vuex8. mittVue2.x 组件通信方式Vue2.x 通信使用写法1. props2. .sync3. v-model4. ref5. $emit / v-on6
......
281
0
0
2023-05-03
在 Vue 中，props 和 slot 都是组件之间进行通信的机制，它们的作用和应用场景有一些区别：props 是一种组件的数据传递机制，通过在父组件中以属性的形式向子组件传递数据。子组件接收这些数据，并可以进行相应的处理和渲染。props 在组件开发中非常常见，可以让我们更加方便和灵活地进行组件间的数据传
......
291
0
0
2023-04-27
目录组件效果使用文档封装过程1. 文件切片2. 构造切片请求参数3. 控制分片请求的并发完整代码待完善组件效果单文件切片上传多文件切片上传组件使用案例<template>
<div id="app">
<div class="upload-wrap">
<UploadSlice
......
395
0
0
2023-04-15
插槽的作用在组件入门这篇教程中，学院君已经给大家演示了插槽（slot）功能的基本使用，插槽的主要作用就是在组件中分发父作用域的内容，这个父作用域可以是 Vue 全局容器（可以看作是一个全局的「根组件」），也可以是父组件。说到这里，我们可以引用一张 Vue 官网提供的组件架构图，实际上，一个 Vue.js 应用就是基于下面这样的一个组件树来组织和管理页面元素的
......
286
0
0
2023-03-26
通过前面的系列教程，我们已经介绍完了 Laravel 框架支持的所有对数据库相关基础功能。在日常开发中，对数据库查询结果进行分页也是一个非常常见的需求，我们可以基于之前介绍的查询方法和前端 HTML 视图实现分页功能，不过从 Laravel 5.3 开始，Laravel 框架就已经为我们提供了非常完整的分页解决方案，包括后端 API 和前端视图。不管你使用查
......
496
0
0
2023-03-25
目录前言组件介绍一、父传子1. 父组件通过 props 传递数据给子组件2. 定义props的类型和默认值二、子传父子组件通过 $emit 传递数据给父组件三、非父子组件间数据传递1.通过公有的父组件进行非父子组件间的通信2. 通过使用一个空的 Vue 实例作为中央事件总线小结前言本章我们将介绍组件间是如何实现数据通信的。包括父组件向子组件、子组件向父组件、
......
302
0
0
2023-03-15
前言在Vue组件库开发过程中，Vue组件之间的通信一直是一个重要的话题，虽然官方推出的 Vuex 状态管理方案可以很好的解决组件之间的通信问题，但是在组件库内部使用 Vuex 往往会比较重，本文将系统的罗列出几种不使用 Vuex，比较实用的组件间的通信方式，供大家参考。组件之间通信的场景在进入我们今天的主题之前，我们先来总结下Vue组件之间通信的几种场景，一
......
325
0
0
2023-03-14
vue组件通信方式一、props(父向子传值----自定义属性) / $emit(子向父传值----- 自定义事件)父组件通过props的方式向子组件传递数据，而通过$emit 子组件可以向父组件通信。1. 父组件向子组件传值(props)下面通过一个例子说明父组件如何向子组件传递数据：在子组件article.vue中如何获取父组件section.vue中的
......
288
0
0
2023-03-14
目录前言组件之间通信的场景父子组件之间的通信父组件通过 prop 向子组件传递数据子组件通过自定义事件向父组件传递数据兄弟组件之间的通信状态提升隔代组件之间的通信attrs/attrs/listenersprovide/inject基于 $parent/$children 实现的 dispatch 和 bro
......
333
0
0
2023-03-10
目录一、 按照 "日", "一", "二", "三", "四", "五", "六" 把一个月的日期排列二、单元格样式处理三、单机、按住ctrl点击、按住shift点击事件处理1.记录键盘按下ctrl、shift事件2.点击事件处理3.遵循excel点击的操作方式:四、组件代码:需要写一个日历组件有以下功能，element无法满足，自己造一个只显示当
......
362
0
0
2023-03-04