- 博客(207)
- 收藏
- 关注
RSS订阅原创 CSS height auto 过渡
ps:可能有伙伴会问，呢上面的例子和height:auto有什么关系，需要注意。height的默认值就是auto;
2023-12-11 18:07:22
603
原创 vue2 按钮权限控制组件 Authority
通过这种方式，你可以灵活地根据具体情况来进行组合和使用，来实现更丰富的权限控制逻辑。，表示只有管理员可以看到插槽中的内容，因此按钮会被显示。属性根据传入的角色和权限数据决定是否显示插槽内容。注意：核心思想是使用插槽的方式，控制显示隐藏。这里使用了插槽来显示具有权限的内容。这里展示了三个使用场景，其中第一个。权限时，才能看到插槽中的内容。，表示是普通用户，但是在拥有。第一步，创建一个名为。
2023-10-08 12:21:29
276
原创 webscoket 封装
<el-table-column header-align="center" align="center" label="序号" width="60" > <template slot-scope="scope"> <span>{{ scope.$index + 1 }}</span> </template>
2023-08-21 17:21:25
356
原创 解决el-cascader 点击单选按钮，但是不触发懒加载，调用展示下层接口
【代码】解决el-cascader 点击单选按钮，但是不触发懒加载，调用展示下层接口。
2023-08-18 16:33:42
627
2
原创 el-table 树形结构数据 设置某一层，新增按钮不展示
属性以及其他相关部分根据您的实际需求进行调整，确保适配您的数据结构和表格列定义。同时，需要在样式部分的。的返回值来确定当前行的层级，并根据层级判断是否显示新增按钮。方法，通过递归查找当前行的父节点并计算层级。在修正后的代码中，我们添加了一个。类的样式，以隐藏新增按钮。
2023-07-31 18:16:00
949
原创 uniapp 的uni.getImageInfo接口API 获取失败
原因：如果你的图片很小，一般小于10kb,小程序会自动把你的图片转换成base64位，呢么就会导致你使用uni.getImageInfo接口报错，所以上面列出了，取消此功能的方法，这样就可以正常使用了，但是缺点是请求个数变多。
2023-06-16 15:38:02
2676
转载 uni-app textarea auto-height 文字出现上下滚动
uni-app textarea auto-height 文字出现上下滚动-腾讯云开发者社区-腾讯云
2023-06-12 16:11:19
427
转载 Vue 插槽详解
这句话的意思就是，没有插槽的情况下在组件标签内些一些内容是不起任何作用的，当我在组件中声明了slot元素后，在组件元素内写的内容。Vue插槽，是学习vue中必不可少的一节，当初刚接触vue的时候，对这些掌握的一知半解，特别是作用域插槽一直没明白。我们在内写的"你好"起作用了！在组件中，我给插槽起个名字，一个名字叫"girl"，一个名字叫"boy"，还有一个不起名字。说白了就是我在组件上的属性，可以在组件元素内使用！
2023-05-09 17:50:01
92
转载 js 监听div的resize事件
我们平时在监听resize变化时，一般监听的都是window/body。可以绑定onresize的标签 body可以绑定onresize的对象 window只有一个起作用,后定义覆盖前定义的但是有时我们希望监听div的resize变化该怎么办呢？尤其是现在css提供了resize属性。
2023-01-29 13:08:06
854
转载 Element-UI el-upload组件，上传失败，但是依然显示文件列表
最近在使用element-ui的 el-upload组件，发现一个问题，就是我在上传文件过程中，上传失败了，文件列表还展示，非常尴尬。
2023-01-18 16:45:06
3068
转载 前端实现HTML转PDF下载的两种方式
在项目工具方法存放文件夹utils中创建// 导出页面为PDF格式} else {}}}})}}}以上两种实现方式各有优劣，方式一是纯前端实现，需要引入第三方插件，可能会导致项目体积增加。方式二虽然更加简洁，但a标签的download属性为HTML5新增属性，可能存在兼容性问题。如果有需要，可以根据自己情况来选择。
2022-12-16 15:05:20
3072
1
转载 vue 带参数跳转打开窗口
如果参数在路径中：router.js path: '/project/:id'var { href } = this.$router.resolve({ path: '/project', query: { id: this.id }});window.open(href);获取参数：this.$route.query.id如果参数不在路径中：1.不打开新窗口： path: '/projectlist' , name: '项目列表...
2022-01-13 11:57:26
251
转载 Vue transition实现点赞动画效果
爱心效果材料：爱心图标两个，没有我这种 icon 组件的用 png 图片代替<transition :name=" isLike ? 'zoom' : '' " mode="out-in"> <!-- 爱心图标 --> <icon data="@icon/like.svg" color="#FF0000" v-if="isLike" key="like"></icon> <icon data="@icon/unl...
2022-01-07 14:26:10
1922
转载 tinymce-vue使用教程
转自：tinymce-vue使用教程 - 简书一、资源下载npm install tinymce -S //当前版本^5.1.1npm install @tinymce/tinymce-vue -S //当前版本^3.0.1二、安装语言包资源下载后,在 node_modules 中找到 tinymce/skins 目录，然后将 skins 目录拷贝到 static 目录下,(PS: 如果是使用 vue-cli 3.x 构建的 typescript 项目，就放到 public 目
2022-01-04 16:04:19
11014
2
转载 element-ui Upload多文件一次上传，获取选择的文件的数量
<el-upload ref="fileUpload" v-loading="fileloading" class="upload-file" :action="uploadUrl" :multiple="true" :limit="9" :on-preview="handleFilePreview" :on..
2021-12-29 18:43:57
4129
转载 Vue - 生命周期函数(activated)
● <keep-alive>包裹的动态组件会被缓存，它是一个抽象组件，它自身不会渲染一个dom元素，也不会出现在父组件链中。当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。● 如<keep-alive>包裹两个组件：组件A和组件B。当第一次切换到组件A时，组件A的created和activated生命周期函数都会被执行，这时通过点击事件改变组件A的文字的颜色，在切换到组件B，这时
2021-12-27 13:09:57
1438
原创 el-input 输入手机号
<el-form-item label="手机号：" prop="phone"> <el-input v-model="identityForm.phone" onkeyup="value=value.replace(/[^\d]/g,'')" @blur="identityForm.phone = $event.target.value" :placeho...
2021-12-20 19:30:36
1895
转载 Token和Session 原理及优缺点
转自：Token和Session 原理及优缺点 - 简书Session和Token的区别一、cookiehttp请求时无状态的。就是说第一次和服务器连接并登陆成功后，第二次请求服务器仍然不知道当前请求的用户。cookie出现就是解决了这个问题，第一次登陆后服务器返回一些数据(cookie)给浏览器，然后浏览器保存在本地，当用户第二次返回请求的时候，就会把上次请求存储的cookie数据自动携带给服务器。如果关闭浏览器cookie失效(cookie就是保存在内存中)如果关闭浏览器cook
2021-11-22 22:36:41
4430
原创 vue 常见的事件修饰符及其作用
常见的事件修饰符及其作用.stop：等同于 JavaScript 中的 event.stopPropagation() ，防止事件冒泡； .prevent：等同于 JavaScript 中的 event.preventDefault() ，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）； .capture：当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。如 div1中嵌套div2中嵌套div3.capture中嵌套div4，那么执行顺序..
2021-09-13 13:03:23
973
转载 element-UI中el-select下拉框可搜索时候，filter-method自定义搜索方法
使用element-UI框架的使用，我们经常使用el-select下拉框，很多时候还需要使用可搜索的下拉框，然后elementUI官网的实例中只是提了一下filter-method可以自定义搜索方法，但是却没有详细介绍怎么用，这里简单介绍一下用法，希望对大家有点帮助在el-select中加入filterable属性，就开启了搜索功能，然后我们用:filter-method="dataFilter"可以自定义一个搜索筛选条件，在这里来写我们自己的逻辑代码注意筛选的时候首先要把输入的值赋值给下
2021-08-31 18:37:27
10846
3
转载 解决element-ui的表格 列的 边框线消失的bug
转自：https://www.cnblogs.com/shuen/p/10196545.html如上图所示，边框线消失了，解决方法如下添加css代码，如果是修改全局，则到全局样式文件添加.el-table__row{ td:not(.is-hidden):last-child{ right:-1px;} }如果是修改局部，则用样式穿透添加，在当前页面的css文件添加/*注意deep两侧都要有空格*/.current_page_classname /deep/ ..
2021-08-18 16:39:42
3891
转载 将数组格式的字符串转换成数组
转自：https://www.cnblogs.com/shy0113/p/12064590.html 由于数据传输的原因，有时我们得到的是字符串形式的数组（比如：str='["a","b","c","d"]',写成str="['a', 'b', 'c', 'd']"，使用JSON.parse()的时候会报错）。要将这种字符串还原成数组对象，有如下两种方法。1，使用 eval() 函数转换（1）eval()函数可计算某个字符串，并执行其中的的JavaScript代码。我们可以借助它来将字符...
2021-08-05 16:49:39
14353
1
转载 如何在uni-app正确使用web-view
转自：https://www.jianshu.com/p/adc72eae0593最近在开发个人的一个小项目的时候遇到一个问题，原因是有一个列表，在点击某一项的时候要跳转到详情，这个详情是一个外部链接，并不是内部的查了一下uni-app的文档，嗯，很好，果然很顺利的找到了web-view组件，然后很天真的直接把web-web放到列表中<template> <view class="history"> <view class="list
2021-08-02 19:14:29
2305
转载 el-select 下拉框数量过多的处理方法之一
Element-ui 下拉列表 选项过多时如何解决卡顿问题当使用Select选择器时，如果下拉列表有几千个几万个，因此通过滚动条一个个的去找不是很现实， 这时可以对select设置filterable属性，可以在下拉控件里进行搜索。例如:<body> <div id="app"> <el-select v-model="value" filterable placeholder="请选择"> <el-opti
2021-07-12 15:55:08
6467
2
原创 el-tab 切换卡顿
切换的时候卡顿 使用v-if 给里面对应的子组件使其直接从DOM中去除其实这两个tab都是同一个子组件 但是就是由于卡顿的原因 所以每个我tab都写了一遍
2021-07-12 11:16:08
1911
原创 el-dialog的“数据残存”小问题
一般情况下其实不用添加v-if，但是visible属性其实控制的是弹框的display:none属性，所以如果这个弹框组件被多处使用，呢么可能存在“数据残存”的问题，呢么v-if，相当于是重新加载DOM,数据不会受到上次的影响，可以解决这个问题。...
2021-06-29 16:34:22
525
2
转载 Element-UI 表单验证规则rules 配置参数说明
rules: { name: [ /*required 是否必填 trigeer 触发检查的方式 blur 失去焦点时检查 change 值发生改变时触发*/ { required: true, message: '请输入活动名称', trigger: 'blur' }, /*min 最小值 max 最大值 注意: type默认为string min和max则为最小长度和最大长度 当需要设置成数字的最小值和最大值时 type:'nu.
2021-06-21 21:11:37
2348
1
原创 el-image 点击遮罩层取消预览功能
// 点击mask关闭图片预览 clickMaskClosePreview(e) { // 使用addEventListener,会出现点击点击两次才触发的情况 if (e.target.getAttribute('class') === 'el-image-viewer__mask') { // this.$refs.preview.showViewer = false this.imgPreviewShow ...
2021-05-26 16:36:28
1564
原创 v-model实时更新带来的render问题
现象：el-input等输入卡顿原因： v-model input 重排重绘，具体可参考https://blog.csdn.net/dobility/article/details/969939511、方法一：把el-input 等使用v-model组件抽离，组件之间的 render 是互不影响的，因此可以通过抽离组件的方式，来实现组件区域化的 render，避免整个大组件 render2、方法二：使用.lazy 修饰符*在输入框中，v-model 默认是同步数据，使用 .lazy 会.
2021-05-25 10:28:32
368
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人