plutchar都立秋了啊图片上传无论什么项目，大概都少不了图片上传。作为常见的需求，很多地方会使用到，应该单独封装一个上传组件，方便复用。这里使用 vue + element-ui-upload + 七牛云完成上传前端调用七牛 API现在主流的七牛云上传方式大概为授权式上传，大概为如下过程：请求后端接口获取上传凭证 token(后端通过accessKey，secretKey，bucket 生成
转载
2024-06-18 22:34:13
137阅读
目录为什么要封装组件应用场景vue自己封装组件（局部、全局） Vue组件的三要素①全局组件1）方式： 2）示例：②局部组件1）方式：2）示例：命名规范：（注意）脚手架vue-cli中的组件父传子（props）通过 $on 传递父组件方法$parent获取父组件然后使用父组件中的数据（不推荐）通过$emit传递父组件数据 (推荐) refs获取组件样式修改 样
基于vue.js原生封装的Modal层控件，不需要webpackage等环境，引入js，css即可开箱使用，无需在页面上提前声明Modal，随用随生成，动态渲染挂接到页面，关闭后自动移除，方便快捷，并且支持页面大小，页面传参，页面回调函数等在开发中需要使用的功能查看效果请下载后部署，查看example.html页面引入控件1.引入vue.js2.引入fastdialog文件夹下的文件使用控件普通打
作为一名刚接触vue不到一个月的菜鸟，思想还没有从操作DOM转变为数据驱动，看vue的代码处处别扭。组里为了让我熟悉vue交给了我一个将element 表单封装成组件的练手任务。由于开发过程中遇到的表单需求千奇百怪，我们不能直接将表单封装成一个组件。所以我尝试把输入框，下拉菜单，滑块，时间选择器，单选，多选等功能各封一个组件（感觉很蠢），但这毕竟是练手任务嘛，最后开发时也不会用我的这个。在封装的过
转载
2024-06-29 17:03:29
120阅读
常见组件
封装使用
vue create green-ui命令初始化一个
vue项目勾选如下选择scss选择eslint风格选择保存时校验选择In package.json保存输入项目名创建项目成功启动项目然后把App.
vue修改为如下内容<template>
<div id="app">
定制组件
</div>
</template>
转载
2024-04-21 13:45:24
217阅读
树形结构相信大家在日常生活中都见过，它的特点是一层一层嵌套，比如文件系统。以下是vite的源码目录结构（部分）：/vite
├── docs
├── packages
| └── vite
| ├── CHANGELOG.md
| ├── LICENSE.md
| ├── README.md
| ├── api-extractor.json
| ├── b
转载
2024-09-26 22:37:17
59阅读
二次封装el-table组件，以便使用。包含两个部分：使用说明、创建。前沿：1. 包含：表格展示、分页、二级表头、数据字典转换展示、时间格式转换展示、数组转换成逗号分割字符串展示、表格内按钮、表格内switch按钮、多选、pdf展示名字并点击名字时预览，等众多功能。2. 各个属性灵活运用，也可自己添加、更改相关属性配置。3. 这里设置从父组件中传输过来的对象和数组都用JSON串接收，目的是为了方便
转载
2024-05-06 19:46:48
140阅读
目的：基于vue element ui 对btn按钮 实现二次封装 1.首先，可以看到前端工程下有一个components目录，在components下新建一个文件夹xx-button，再在xx-button下创建一个index.vue文件，如图：2.然后在index.vue中写自己的代码。为了规范，注意代码中的name<templa
转载
2023-05-27 11:24:15
281阅读
在开发中发现发现有好多关于搜索的表单的业务，所以想封装一个搜索的组件，只用通过声明式的配置就可以自动生成我想要的搜索表单。样子就是下图这个样子：以上组件封装基于Ant Design of Vue组件库，原理都一样，可根据自己需求更改。因为在给form对象动态添加属性值不是响应式的，导致表单无法双向绑定form对象的值，form对象的值能改变，但是视图不会改变。这个bug尤其体现在select选择器
element-ui提供了很多方便的UI组件，但是使用的时候，特别是频繁使用到一个模块时候，经常需要进行二次包装，比如弹窗，很多弹窗需要加一些确定，取消按钮需要一些固定的模板套路，这些都可以利用二次封装实现。一、二次封装基本套路1、实现二次封装功能的模板：子组件<template>
<el-dialog :visible.sync="visibleDialog">
转载
2023-12-03 10:33:05
112阅读
刚学了vue，看了下elementUI的组件，自己写着玩。基本需求如下单选全选框、分页类似iview一样通过传入选项数组来定制表头，传入数据数组来控制表格内容单选全选分页就不多说了，就是用element自己的组件 这是官网列表的写法<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
转载
2024-04-26 12:28:22
133阅读
我们经常听说某某芯片采用什么什么的封装方式,在我们的电脑中,存在着各种各样不同处理芯片,那么,它们又是是采用何种封装形式呢？并且这些封装形式又有什么样的技术特点以及优越性呢？那么就请看看下面的这篇文章,将为你介绍个中芯片封装形式的特点和优点。 一、DIP双列直插式封装 DIP(DualIn－line Package)是指采用双列直插形式封装的集成电路芯片,绝大多数中小规模集成电路(IC)均采用这种
Vue 封装固钉组件—粘性布局最近项目中有些业务场景需要用到粘性布局，组件库使用的是element，查看了文档发现element组件库并没有粘性布局的组件，又不能引入其他库，网上找了许多，只发现一篇Vue Affix组件不过使用之后并不能达到我需要的效果，所以做了修改。思路思路就是利用css的position:fixed。当元素位置移除对应视窗时则为元素添加position:fixed，回到视窗内
Vue 封装Toast消息提示学习Vue的道路上,封装一些自定义的组件不可避免，今天就来封装一个Toast消息提示。后面还有dialog对话框，原理差不多。首先先看看效果图现在才知道用qq录制gif图是真方便。(非广告,后面会多用gif图)1 正常组件调用2 全局注册对象调用(不知道是不是叫这个名字)一 首先，我们先封装一个正常组件看看效果。1 首先创建一个最普通的组件/toast/Toast.v
转载
2024-10-22 07:17:04
944阅读
对el-radio和el-radio-group进行二次封装，以便使用。分两步：创建、引用。说明 ：1. 可选项一般是请求数据字典的值以供勾选，假设数据字典的接口为’/getDictionary’，请求参数为code，数据字典中的展示值字段为’label’，选中所传值字段为’value’。2. 也有特定接口请求可选项的，需要指定特定的请求接口url、参数和展示的value和label值。3. 各个
转载
2024-05-31 11:21:06
125阅读
最近在整理以前的代码，碰到了写的element-ui整合vue的项目感觉挺好用的，就用一个案例分享给大家吧。首先还是直接附上一份单独网页版的代码吧，复制导入vue.js即用，不需要后端，感受下element-ui的强大。如果想要直接的案例，不想进行简单尝试，请直接调到标题二：案例环境1. 单独网页版代码：<!DOCTYPE html>
<html lang="en">
&l
转载
2024-04-23 16:00:34
95阅读
element-ui的复杂表格展示和修改数据是常见的业务需求，在element-ui中需要table和form组合使用，但是每次都需要一大堆代码，非常繁琐，我就尝试将两个组件结合，拥有功能为：能够修改表格中数据，数据校验，增加删除保存表格等功能。第一个版本：主要由js实现展示效果：类似于下图，可以直接通过<template>
<div class="app-container
转载
2024-02-19 00:26:10
87阅读
一、
vue21，使用组件<!-- 使用
封装的表格组件 -->
<template>
<div>
<!--
config 配置
loading 加载
tableData 数据
tableHeader 表头
rowClassName 背景色
handleSummaryMethod 共计
handleRowClick 行点击
组件源码组件文档原文Why用过 Element UI Table 的同学都知道用 Table 组件时需要用到el-table-column，它是和 html 混写在一起的, 如果很多列的话，就需要一个个写配置, 否则就需要用到循环。如果列配置内容有根据不同条件展示不同样式内容的话, 就需要在插槽里面做判断, 比如这样两种编辑状态:比如在插槽里面做配置, 如下代码:<el-table-colu
因为后台管理系统中经常会用到DatePicker 来作为常规查询条件中的时间范围，录入单据的创建时间范围，为了追加默认选项和一些常规配置例如：defalutTime来保证查询的时间范围是可以到指定日期之内的，快捷时间范围选项（一周内/一个月/三个月/半年/一年）等，为了将这些相关默认选项进行封装，将 ...
转载
2021-08-03 16:31:00
1635阅读
2评论
