Vue
文章平均质量分 60
记得抬头微笑
记得抬头微笑
展开
-
Vue 插槽 Slot 的数据传递
在某些场景下插槽的内容可能想要同时使用父组件域内和子组件域内的数据。要做到这一点,我们需要让子组件在渲染时将一部分数据提供给插槽。可以像对组件传递 props 那样,向一个插槽的出口上传递数据和内容,然后再父组件里面使用 slot-scope 的方式去接收传递过来的数据,获取数据的方式有两种, 可以通过结构赋值的方式去获取,或者把所有传递过来的内容保存到一个对象中,然后再去使用。原创 2023-05-18 16:39:21 · 2433 阅读 · 0 评论 -
Vue 集成 luckySheet在线文档
Luckysheet ,是一款纯前端类似 excel 的在线表格,支持 excel 的大部分功能,行和列操作、单元格操作、公式和函数、图表、插入图片等功能,该插件功能强大、配置简单、完全开源。在线案例。原创 2023-03-31 14:32:24 · 1864 阅读 · 0 评论 -
Vue 实现拖拽模块(四)拖拽元件位置
本文将继续给大家分享如何拖拽改变 元件位置,文中通过示例代码介绍,感兴趣的小伙伴们可以了解一下原创 2022-12-29 18:50:54 · 2236 阅读 · 5 评论 -
Vue 实现拖拽模块(一)拖拽添加组件
本文主要介绍了vue拖拽组件实现构建页面的简单实现,文中通过示例代码介绍,感兴趣的小伙伴们可以了解一下。原创 2022-11-04 15:09:36 · 6366 阅读 · 0 评论 -
使用 Fragment ,实现 Vue 的模板编译
Vue会把用户在template标签中写的内容进行编译,找出原生的html和非原生的html内容,经过处理生成Fragment,而Fragment会经过patch过程从而得到将渲染的视图中的Fragment,最后根据Fragment创建真实的DOM节点并插入到视图中,最终完成视图的渲染更新。AFragment是原生JS的一种创建文档片段的方法,如果我们对根元素中的每个元素做逐个处理的话,这会引起很大的性能问题,会多次触发浏览器的回流和重绘。......原创 2022-07-18 16:13:18 · 714 阅读 · 0 评论 -
Vue + ElementUI的el-cascader实现多选三级省市区(全选省 / 市 保存的是省市)
el-cascader多选三级省市区(全选省/市 保存的是省市Code)业务场景:需求是多选三级省市区, 开发一个区域组功能(而且产品也是比较希望使用el-cascader来进行实现)需求实现截图:那就开始整呗, 找ElementUI的组件去实现这个// Vue的基本样式<el-cascader v-model="regionList" ref="cascader" :options="treeList" :props="{ multiple原创 2021-01-27 14:52:48 · 6029 阅读 · 17 评论 -
Vue二次封装ElementUI的tree树形组件
项目场景: 在多数后台管理系统中都会有dom-tree树形选择组件的需求, 所以对elementUI的el-tree做了二次封装解决方案: 二次封装需要完成的目标让组件可复用 满足项目基本需求 兼容多种使用场景<template> <div class="select-city"> <el-input v-if="showFilter" p...原创 2020-11-29 10:51:13 · 2283 阅读 · 2 评论 -
在Vue中自定义组件内的ElementUI样式
CSS的样式隔离原创 2020-10-31 11:20:21 · 2648 阅读 · 0 评论 -
Vue在同一个页面的组件中向页面的URL增加参数
动态改变Vue中url的参数原创 2020-06-22 17:51:02 · 4332 阅读 · 1 评论 -
Vue + Xsxl导出Excel表格(前端实现)
场景需求:需要将页面上的表格 / 其他类型的数据导出为excel表格原创 2020-06-17 10:18:29 · 1351 阅读 · 0 评论 -
使用iview的表格实现数据导出
需求场景:需要将前端的数据导出为.csv或者excel文件出来前端导出的弊端:当前端导出数据量较大的数据时,会比较卡顿(建议还是后端用java来做导出比较好)具体实现:在Iview里面已经内置了exportCsv()方法我们在使用iview这个框架的时候可以调用这个API来实现数据导出的需求<i-table :columns="columns8" :data="data7" size="small" v-ref:table></i-table>1..原创 2020-06-11 14:40:43 · 1942 阅读 · 0 评论 -
Vue3.0修改浏览器头部标题
在Vue3.0框架中修改页面表头标题原创 2020-06-09 18:25:08 · 1896 阅读 · 2 评论 -
前端页面展示SQL语句或其他代码语句
今天接到一个有关于需要在前端展示SQL语句的需求,在网上找了好半天,本来我都打算使用txstarea来进行展示了。还是功夫不负有心人,终于被我找见了,感谢各位互联网大佬的无私贡献。实现效果功能涵盖大部分语言,应该是可以满足大部分需要在前端展示代码的功能需求。具体实现1.首先下载使用NPM包npm i vue-codemirror -S2.封装组件<templa...转载 2019-11-05 18:29:39 · 3657 阅读 · 3 评论 -
Vue3.0接入CDN
CDN的作用: 1.CDN可以有效加快项目首屏的加载速度 2.减少前端build之后包的大小在Vue3.0项目中使用CDN 1.需要在Vue3.0项目的vue.config.js里面配置使用CDN进行加载的项 configureWebpack: { externals: { 'vue': "Vue" // 前...原创 2019-09-08 13:52:45 · 4388 阅读 · 0 评论 -
原生JS点击弹出窗以外的内容让元素隐藏
在工作中我们可能会遇到原生手写的Model,我们希望他的表现状态为点击除它的空白处让它消失(隐藏)。这里提供两个思路来解决这个对应的问题 1.首先如果的全屏的Model我会推荐你直接使用click方法写在父组件上面,这样来操作它的表现状态 2.如果是非全屏Model而我们想要它的表现状态为点击它之外的所有地方都希望能够关闭这个Model,我们可以用以下代码进行是实现 ...原创 2019-08-12 14:57:40 · 655 阅读 · 0 评论 -
Vue局部组件的封装与使用
Vue局部组件的封装与使用在项目或者开发的过程中,我们可能会在一个页面或模块中遇到一个重复使用的模块(组件),但是这个重复使用的组件在其他页面又没有使用到,这个时候我们可以使用Vue的局部引用模块的方法。也就是类似于Vue.component的写法,这种方式,不过我们是在页面内直接写模块,也可以把这个写成单独的JS进行引用,这种局部引用的好处在于它不用新建一个.vue文件只需要像JS代码一样写...原创 2019-04-17 19:11:54 · 1248 阅读 · 0 评论