- 博客(31)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 史上最全，在vue中使用ztree实现树形结构（第三篇）
首先看上面这个图，可能和ztree联系不起来对不对，不要怀疑，上面就是用ztree来实现的，只不过dom是我们自己定义的而已，可能很多人忽略了ztree的name属性，其实这个属性非常重要，可能很多人觉得，如果需要自己自定义dom，为什么不在ztree提供的addDiyDom中去操作呢？在公司呆了4年，现在想来最深的感受就是，凡是涉及到树性结构的，统统选择ztree准没错，我是ztree的忠实爱好者。这样当最终结构渲染出来之后，修改对应的类名就行了。最终的结构都出现了，再想去绑定各种事件就洒洒水了。
2024-04-26 15:21:07
156
4
原创 在vue中使用iframe解决视频资源的防盗链
但是这样一来，当我们将其他网站上的视频资源，想入到我们的环境当中的时候，由于其他网站的防盗链设置，将url地址放到浏览器当中能够播放，但是放到我们页面中访问的时候，会报错403,找不到资源数据。在static中文件夹中增加一个html文件夹，写我的目标dom结构，不放在静态文件夹中，打包之后发布到线上会找不到这个html，除非写了特定的打包配置，输出目标位置。我们的vue2.0项目当中，存储了许多图片和视频资源，所以在index.html中增加了防盗链设置。在视频资源错误事件里去替换页面结构。
2023-12-13 16:57:46
490
2
原创 史上最全，在vue中使用zTree实现树型结构（第二篇）
对于不存在接口当中的数据，但是我页面又需要展示，也就是节点的操作（熟悉ztree的都知道，节点操作其实是最简单的，只要按照ztree的规则组装节点，什么复制节点，移除节点，添加节点巴拉巴拉都是小问题）；我的右键菜单中，大家可以看到有复制/移动功能，且我页面上是有三颗没有任何关联的树，当我使用复制/移动功能将某一个节点移动到其他树上的时候，需要将当前树的节点移除，而目标树新增一个节点（其实实现真的超级简单了）问题2:我觉得除了我们产品，应该没有哪个产品会提这么变态的需求吧，也不想讲了，有需要的可以提供思路。
2023-09-22 17:03:23
1768
原创 vue中使用cancelToken，解决多次调用相同接口，只用保留最后一次的结果
接口的响应时间不是固定的，比如我第一次点击，网络不好，接口5秒才返回数据，而我的第二次点击，网络很好，只需要2秒返回数据，那么实际上页面展示的数据可能是第一次调用返回的，就导致页面错乱。筛选面板的条件很多，用户可以频繁点击不同的筛选项，对用户不做任何防抖和节流的限制。以上两部分完成之后，用户可正常调用接口，在要重新调用接口的时候取消上一次调用。很多筛选维度和条件，用户每点一个筛选项，发起检索，页面展示数据。
2023-08-23 17:10:41
808
2
原创 element-ui中的el-popover结合vue中的v-for的使用方法
一个使用v-for循环渲染的列表，要求鼠标hover的时候显示其详细的介绍，我将需求简化，看下面代码效果图：鼠标hover到哪一个色块的时候，tips显示其具体的色块代码，给el-popover绑定ref属性，必须是唯一的，通过element-ui组件自带的showPopper属性来控制tips的显隐。
2023-01-17 16:01:32
1107
原创 vue-draggle实现元素拖动，放大，缩小，多元素一起改变位置
最近做了一个需求，类似于提前部署好大屏布局，形成最终页面，那么就涉及到了元素位置的摆放，属性设置等一系列的操作，看下草图：针对此需求，写了一个vue-draggle的组件，提供坐标线，拖动元素移动，点击方位点可以改变元素宽高，按住ctrl多选元素，拖拽某一个元素后，被选中的元素一起相对移动，具体实现请查看我的github地址GitHub - wangshuangqin-hub/vue-draggle: 元素拖动，放大缩小的组件，已经被oscs开源社区收录，如果帮助到你，希望给个star...
2022-05-30 15:58:16
833
原创 利用typescript和webpack封装播放器
我们公司主要做的产品就是面向各种媒体，做播放器需求的时候总是调用公司底层封装好的功能，今天也来讲讲如何封装一个属于自己的简单的播放器（需要webpack配置文件私信给我）播放器分为两个部分，弹框组件和播放器组件，播放器的控件不再使用浏览器自带的控件，用我们自定义的控件整体结构：一个弹层，弹层中包裹video标签弹层需要的属性：弹层是否有遮罩弹层的高，弹层的宽，弹层标题需要一个回调函数，用于存放video节点挂载弹层在页面中的位置（居左，居右，居中）弹层核心代码：// i
2022-04-24 17:50:17
916
转载 router-link to 的用法
Vue-详解设置路由导航的两种方法： <router-link :to="..."> 和router.push(...) - 哥哦狗子 - 博客园
2022-03-11 10:42:47
1061
原创 vue+echarts+3D地图 制作大屏
基于3d地图做的一些效果，首先看下效果图用户不直接操作地图，因为是大屏，只做展示使用，右边列表有两种模式，如果列表数据没有撑开盒子，每3秒轮播高亮，高亮到那个地区，地图上就高亮那一块区域，且显示对应的tooltip(这里没有使用echarts中的tooltip,因为高亮地图的时候，2d地图可以主动触发tooltip出现，但是3d里面不支持，所以这个弹框是我自己写的，因为项目中只有3个地区的数据，只用写3个弹框就行，如果梅个区域都有数据，不建议使用这种方式)第二种展示方式就是，如果右边列表数据过多
2022-02-18 15:40:18
7611
10
原创 vue中实现当文本超长时，中间显示省略点，两端文字显示
最近做一个资源共享的需求，要求将资源名称，共享目标人的工号一定要显示出来，也就是文本超长，显示省略点，但是如果使用css，文本超长省略号会在末尾显示，因此利用js截取来实现//获取字体是为了计算文本所占用的宽度，必须传递一个dom节点，随便选择一个即可，因为系统的字体都是一样的mounted(){ // 获取系统字体 this.getFontFamily(document.getElementById('side-content')) },将获取的字体参数使用全局变量存储起来
2022-01-13 18:01:22
3412
原创 element-ui表单通过后台接口自定义校验
有个需求，用户输入工号之后，需要判断该机构下是否存在这个工号，如果不存在，则提示，否则通过，可以提交表单 data(){ let _this = this var validateUserNumber = (rule, value, callback)=>{ if(value == ''){ callback(new Error('请输入被分享人的工号'))
2021-12-31 17:37:05
1246
原创 js自定义规则排序
<script>// Array.prototype.csSort = function() {// debugger// var newarr = this;// let order = [6,5,4,3,2,1,8,7]// let tableData=newarr;// tableData = newarr.sort((a,b) => {// return order.indexOf(a..
2021-12-24 11:24:17
1229
原创 利用径向渐变做酷炫的按钮闪光效果
最近公司事情不多,就研究下自己感兴趣的东西前置知识:需要理解径向渐变 径向渐变的连写各个属性的含义 边框背景,边框背景连写各个属性的含义效果就是点击之后,会开启边框背景一个光点,然后移动的过程,不能上传视频,大家自己下载代码在本地看效果吧本不想用js实现,最开始想到的是动画方式,在每个阶段改变border-image-source里径向渐变的圆心位置,但是发现不能成功,用的是连写的方式,后来猜想是不是连写方式不支持,我又把边框背景的每个属性进行拆分,动画的时候只改变border-ima...
2021-12-01 17:13:48
1031
原创 使用element-ui的输入框使用字节数来限制用户输入长度
最近做分发资源到短视频平台需求的时候,用户要求输入的长度不是按照个数来限制,而是用字节数来判断用户输入长度,比如输入1 占位长度应该是1,输入12,占位长度也应该是1,因为每个数字占用一个字节,两个字节占一个字符,符号同理,而输入汉字,占位长度应该是1,因为一个汉字是两个字节,一个字符 看看element-ui官网对字符长度统计原理的解释也就是,"123发生口角电话".length,可以理解为是按照索引来统计,很明显这不能满足我的需求那么这个提示文字就需要我们自己去实现,且支持用户输入...
2021-11-23 16:07:16
4403
原创 在vue中如何判断滚动条到达底部
mounted(){//在生命周期函数mounted中 console.log(this.$refs.veriface,'智能切分滚动组件实例')//具有滚动条的dom元素, this.$refs.veriface.addEventListener('scroll', (e)=>{ // console.log(e,'滚动条滚动触发') var scrollTop = e.target.scrollTop var windowHei...
2021-11-23 14:27:15
3696
原创 css3实现翻书特效
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
2021-11-05 14:06:38
924
原创 使用生成器函数解决回调地狱的方案
<script> // 使用生成器函数,解决回掉地狱的问题 // 1s后打印111，2秒后打印222，3秒后打印333 function * gen(){//生成器函数格式 yield one() //yield可以看作是分割符，代码运行到此结束，除非调用next方法 yield two() yield three() } function one(){ setTimeout(_.
2021-11-03 16:47:13
111
原创 vue中如何拦截阻断element-ui tab组件切换
首先我们来看下element-ui tab组件中的描述那么就是说在before-leave这个回调函数触发之后，必须给这个方法一个返回值，返回false则会阻止tab页面跳转，否则发生跳转我的业务场景：用户切换到当前tab页之后会对当前页面数据做操作，操作之后如果不点击保存，跳转tab页，则提示用户“当前页面未保存”，否则成功跳转，如图效果代码如下，看官网对confirm是如何描述的，“我们将用Promise来处理后续响应”，也就是说，在点击了确定之后，用户会走到then方...
2021-06-24 17:07:26
2557
原创 史上最全，在vue中使用zTree实现树型结构
最近做了蛮多需求都是在vue里面去操作dom，着实让人头大需求如下：要求树形结构按照设计稿样式（ztree原本的样式ui接受不了） 鼠标浮动上去的时候，有功能按钮出现，浮在功能按钮上面，出现对应的功能提示 支持树形结构搜索，搜索后高亮显示，并出现默认选中样式 树结构很长，支持滚动（会有一个问题，浮动的功能提示信息受overflow的影响，那么第一行的提示信息会被覆盖）好了，看下做好的效果图...
2021-06-24 16:15:25
8577
4
原创 vue中base64和file文件类型的互相转换
如图需求，上传文件后要求支持图片的预览，裁剪，放大和缩小，利用vue-cropper实现，elemeng-ui的上传组件之后是file文件类型，需要转换成base64在右侧区域进行展示预览。 // 组件dom结构，on-change钩子函数绑定 <el-upload class="upload-demo" drag
2021-06-23 18:32:13
1543
原创 数组对象中的对象数组的数据处理
最近做一个需求，可以对多个资源进行批量设置某些属性，同时单个资源也可以进行自己独有的属性设置，但是在批量设置界面，需要展示多个资源公共的部分并将其渲染出来，数据处理结果如下批量设置属性界面:单个属性设置界面：需求简化如下：实际就是考验对数组和对象的处理，demo如下<script>//求多个资源中每个属性都出现，且属性出现的次数和资源条数相同的结构 let arr = [{ id: 1, ta..
2021-04-25 15:17:14
595
原创 axios.create的理解以及在VUE项目中为何要对axios进行封装
最开始学习的时候，一直不太理解axios中create的用法，今天来大概聊聊进入公司后，发现公司并不是用的axios去获取接口，而是对axios进行了一次封装，因为我们的项目比较庞大，接口并没有部署在同一台服务器上，在config将服务器地址代理到两个域名上 proxyTable: { '/wsq': { // target: 'http://127.0.0.1:8080', // 设置你调用的接口域名和端口号 changeOrigin: tru
2021-03-25 15:37:53
2874
原创 如何使用video标签判断一个服务器的url视音频资源是否有效
公司内部对H5player播放器做了部分封装，在去渲染播放器的时候，一旦遇到一个url地址存在，但是实际的服务器文件不存在的时候，再去取渲染播放器就会失败，因此我想在渲染之前判断url地址是否有效，方法如下letvideo=document.createElement('video');video.src=_this.detailData.url//获取到的服务器地址video.onload=...
2021-03-24 14:36:02
2747
原创 vue前端下载文件的2种方式
以下两种方式下载适用于后端返回了文件的url下载地址 var x = new XMLHttpRequest(); x.open("GET", url, true);//url为文件的下载地址 x.responseType = "blob";//二进制文件 // x.withCredentials = true; //如果跨域 x.onload = function(e) {
2021-03-10 14:49:19
3242
原创 如何根据地址判断该资源是图片类型
最近做到一个需求，要求根据网络地址，来判断这个资源是不是图片类型，vue的上传组件，有个钩子函数可以通过文件类型来判断，但是如何根据地址如何判断呢？网络地址有的会直接带有文件后缀名，如.jpg，那对于没有带文件类型的地址，该如何正确判断？//在vue项目中使用 // 根据图片地址判断是否是图片资源 getPromises(src) { let img = document.createElement("img"); img.src
2021-02-03 11:54:50
584
原创 vue异步请求数据存储本地化的数据，如何动态监听
在vue项目中，对于一些系统启动就需要存储到本地的身份认证信息，或者权限，或者系统加密点等等，可以再多个页面都会用到，但是存储到本地的加密点，权限等信息可能涉及到用户权限相关的，如果我们想根据这些信息去判断该给用户展示哪些内容的时候，无法实时的获取到，可以采用vue监听本地化数据的方式//在vue原型上main绑定方法Vue.prototype.resetSetItem = function (key, newVal) { if (key === 'systemCode' || key ===
2021-02-03 11:45:15
518
1
原创 vue表单校验clearValidate失效问题解决
// this.$refs.nowFileform.resetFields(); setTimeout(function () { _this.$refs.nowFileform.clearValidate();//消除校验,这里的setTimeOut不能去掉,去掉之后会不生效 },30);至于原因，不知道，希望有直到大佬告诉我一下...
2021-02-03 11:38:08
7578
2
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人