
web前端
手把手入门
一百万种可能~
展开
-
vue:v-model实现子组件和父组件数据双向绑定
/组件初始化时,将父组件数据保存到子组件数据中。二、子组件 pic-upload.vue。//监听子组件数据变化。//监听父组件数据变化。原创 2022-11-17 15:03:38 · 1439 阅读 · 0 评论 -
vue:Video.js 快速整合
一、安装包二、main.js引入包Vue.prototype.$video = Video // 在vue的原生里添加了Video这个标签,增强了vue的功能性三、使用class="自定义"到这就可以播放了。原创 2022-11-17 11:36:34 · 1164 阅读 · 0 评论 -
vue:vue-video-player(m3u8)视频播放组件Uncaught TypeError: Object(...) is not a function at Module.eval
异常一、Uncaught TypeError: Object(...) is not a function at Module.eval (webpack-internal:///./node_mod。aspectRatio: '16:9', // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。src: 'https://xxx.cn/xxx/66857842800316666666.mp4'//url地址。// src: "" //url地址。poster: "", //你的封面地址。原创 2022-11-17 09:20:02 · 1911 阅读 · 2 评论 -
element:el-select加图片
【代码】element:el-select加图片。原创 2022-09-28 09:53:09 · 1002 阅读 · 0 评论 -
vue+uniapp:uView事件怎么用
在uView文档中的事件,没有具体的示例,如:这边记录一下用法<u-popup v-model="show" @close="closePopup">原创 2022-02-26 15:28:33 · 765 阅读 · 0 评论 -
vue:添加项目名(开发环境)
一、首先在全局配置文件中添加项目名(任意js文件)二 、vue.config.js 文件中引入项目名import defaultSettings from '../../src/settings.js'三、routers.js 文件中引入项目名import defaultSettings from '../../src/settings.js'...原创 2022-01-05 17:56:10 · 2748 阅读 · 0 评论 -
vue+uniapp:打包部署h5(公众号h5)
一、如果你是刚加载的项目需要重新获取DCloud appid(DCloud 应用的唯一标识)二、发行三、发行原创 2021-12-27 22:58:55 · 1615 阅读 · 0 评论 -
前端:base64转FormData对象
方法一:亲测可用var base64String = /*base64图片串*/; //这里对base64串进行操作,去掉url头,并转换为bytevar bytes = window.atob(base64String.split(',')[1]);var array = [];for(var i = 0; i < bytes.length; i++){ array.push(bytes.charCodeAt(i));}var blob = new Blob([new原创 2021-11-01 15:16:35 · 3819 阅读 · 0 评论 -
vue:手写一个单选框/多选框
一、效果:二、代码:<template> <div> <div id="main"> <h1>多选</h1> <div class="wrap"> <input type="checkbox" name="1" id="item1" /> <label for="item1"> <div cla.原创 2021-09-13 19:03:23 · 1003 阅读 · 0 评论 -
vue:获取协议、域名、环境
一、协议和域名都是原生的location.protocol+'//' + location.host二、获取vue的环境const baseUrl = process.env.VUE_APP_BASE_API; // /dev-api原创 2021-09-10 18:08:21 · 4582 阅读 · 0 评论 -
js、jQuery、vue:作用域
下面这种情况 this无法使用,必须把this重新赋值if (res.code === 10000) { this.middleChart=res.result; let ss = this; this.middleChart.forEach(function(element) { console.log(this.middleChart); //报错 console.log原创 2021-09-06 12:24:31 · 111 阅读 · 0 评论 -
vue:ant-g2渲染图表时出现累增(追加)
问题:问题标签代码:<div id="divId"></div>解决方法:方法一、使用js原生方法,直接清空div标签的内容document.getElementById('divId').innerHTML = '' ;方法二:我还没想出来原创 2021-09-06 11:17:27 · 560 阅读 · 0 评论 -
vue:antV G2在vue中的使用(阿里图表,类似echarts)
效果比echarts好看官方文档:https://g2.antv.vision/zh/docs/manual/getting-started转载来源:https://www.jianshu.com/p/a836ae8aeeb7一、安装npm install @antv/g2 --save本人下面这个也安装了npm install --save @antv/data-set二、引入import G2 from '@antv/g2'; //..原创 2021-09-01 17:28:59 · 3423 阅读 · 2 评论 -
vue-element:实现微信表情
一、创建emotion.json文件夹(以下字符是按照微信官方来定义的)[ "[微笑]", "[撇嘴]", "[色]", "[发呆]", "[得意]", "[流泪]", "[害羞]", "[闭嘴]", "[睡]", "[大哭]", "[尴尬]", "[发怒]", "[调皮]", "[呲牙]", "[惊讶]", "[难过]", "[酷]", "[冷汗]", "[抓狂]", "[吐]", "[偷笑]", "[可爱]",原创 2021-07-29 13:42:42 · 1176 阅读 · 4 评论 -
vue:图片加载失败(此图片来自微信公众平台未经允许不可引用)
一、这个问题并不是微信配置的原因,而是meta没有定义二、复现:图片加载不出来三、错误排查:然后将图片地址放在360和Google中访问,第一次打开提示:此图片来自微信公众平台未经允许不可引用第二次按F5刷新页面可以正常显示四、解决方法(vue为例):在代码中添加 <meta name="referrer" content="no-referrer"> 标签即可,html文件等效作用no-referrer:所有请求不发送 refer...原创 2021-07-23 15:13:55 · 2383 阅读 · 0 评论 -
vue&js:concat不生效
一、看别人的都写的好好的能够赋值,为什么我的数组长度是0呢var arr = [`大漠`,'30','W3cplus'];console.log(arr); // ["大漠", "30", "W3cplus"]var arr2 = arr.concat('Blog','2014');console.log(arr2); // ["大漠", "30", "W3cplus", "Blog", "2014"]二、解决方案看上面的例子我们会发现var arr2 =这个地方就是关键了我..原创 2021-07-20 10:55:21 · 2968 阅读 · 0 评论 -
html:自定义遮罩层弹窗(居中)
一、html代码html<div v-if="maskVisible" class="mask_layer"> <div class="dialog_div"> <div style="display: flex; justify-content: center; align-items: center;width: 100%;height: 100%;"> 内容 </div> </div&.原创 2021-07-15 17:04:23 · 1096 阅读 · 0 评论 -
vue:深拷贝、复制对象(背景:修改vuex中的值出现异常)
一、问题// 原来的代码var official = this.nowOfficial;修改official的值时,出现nowOfficial的值也被修改了,原因:以上写法,两个对象指向同一个地址(一个东西,两个名字)二、分析当组件间传递对象时,由于此对象的引用类型指向的都是一个地址(除了基本类型跟null,对象之间的赋值,只是将地址指向同一个,而不是真正意义上的拷贝),如下数组:var a = [1,2,3]; var b = a; b.push(4); // b中添加了原创 2021-07-05 17:56:59 · 897 阅读 · 0 评论 -
vue+js+jquery:常用的方法
一、获取number类型长度方法一:调用toString方法转为字符串后取长度var num = 123;alert(num.toString().length);方法二:隐式转字符串后取长度var num = 123;alert((num + ‘’).length)二、判断对象是否为空if(JSON.stringify(official) === '{}'){ }...原创 2021-07-01 15:14:38 · 260 阅读 · 0 评论 -
vue-element:修改radio-button(单选框按钮)的样式
一、设置宽度(由于无法直接设置span的宽度)<el-radio-button label="上海">这里有input和span标签</el-radio-button>二、所以可以再标签中添加一个div,只需要控制div的宽度了<el-radio-button label="文本"> <div class="el_radio_button_div">文本</div></el-radio-button>.原创 2021-05-19 12:17:21 · 6731 阅读 · 0 评论 -
css:设置滚动条样式&高度自适应
一、如何出现滚动条在样式中添加 overflow-y: scroll;二、修改滚动条样式2.1、首先在标签中定义一个class名<div class="scroll">2.2、设置样式/*滚动条大小*/ .scroll::-webkit-scrollbar{ width:5px; height:10px; } /*正常情况下滑块的样式*/ .scroll::-webkit-scrollbar-thumb{ backgr.原创 2021-05-17 17:34:16 · 10052 阅读 · 0 评论 -
vue+uniapp:小程序H5使用图表组件(uCharts)
一、打开组件网站:https://ext.dcloud.net.cn/plugin?id=271二、导入组件到项目三、这样图表组件就在项目中了(必须在根目录?)四、使用 4.1:打开图表组件生成工具网站:https://demo.ucharts.cn 4.2: 4.3:把使用demo中的数据放到代码中即可(有很多配置)五:注意事项: 5.1:这两个是对应的...原创 2021-04-28 19:39:47 · 1859 阅读 · 6 评论 -
vue+uniapp:switch开关无法动态修改问题(一开始以为是vuex的问题)
这个开关搞到吐血了:因为vuex动态修改经常出现这种赋值失效问题(数据更新,页面没有渲染),一开始以为是vuex没有渲染,<switch :checked="notify" :color="fontColor" @change="getSubscribe"></switch>翻阅了各种文档,还有各种百度都没有解决问题o(╥﹏╥)o后来测试了下发现上图中值是正确的,开关不正常,于是放弃了uniapp(或colorui)中原生的switch,改用uview的 u-s原创 2021-04-12 13:07:06 · 3459 阅读 · 13 评论 -
微信小程序五:(uniapp)订阅消息
示例:一、二、小程序调用uni.requestSubscribeMessage({ tmplIds: tmplIds,//数组(后台获取的) success:(res)=>{ console.log(res[tmplIds[0]]);//值包括'accept':同意、'reject':拒绝、'ban':后台禁用 }, fail:(err)=>{ }})三、遇到的一些问题调用失败fail返回提示及解决方式:1.errM...原创 2021-04-02 14:42:26 · 3653 阅读 · 1 评论 -
vue+uniapp:全局组件(easycom)
一、创建组件https://my.oschina.net/u/4397787/blog/3309273原创 2021-04-02 11:14:27 · 1079 阅读 · 0 评论 -
css:给div画箭头,基于uniapp(思路)
一、标签<view class="flex align-center island-view"> <view class="block-view"> <view class="nick-name"> <text>昵称</text> </view> <view class="bind-mobile"> <button class="sm">点击绑定原创 2021-03-25 15:13:19 · 1140 阅读 · 0 评论 -
css文字太长省略号代替、element中input的change事件
一、文字太长省略号代替 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;二、如果想要显示省略号中的文字, 2.1、每个标签都有一个title属性,可以使用 title 属性 2.2、利用css的伪类hover,以及显示隐藏属性display(难度太大,不建议使用) 三、element中input的@change事件...原创 2021-03-23 19:13:32 · 731 阅读 · 2 评论 -
jQuery时间日期不兼容(苹果手机出现时间解析失败)
iOS系统在处理jQuery中的 new Date(yyyy-MM-dd HH:mm:ss) 时出现时间解析失败。②、后端直接传时间格式,比如:Fri, 02 Sep 2022 01:42:08 GMT。============================= 现在的。============================= 以前的。原因:iOS中 new Date 无法解析 - 格式的时间格式。一般的时间格式:2016-1-1。转换后:2016/1/1。解决方法:①、前端使用。原创 2020-09-16 09:47:28 · 830 阅读 · 0 评论 -
jQuery+canvas 生成海报(二维码+头像+背景图)
相关搜索: jQuery canvas 头像海报微信二维码 jQuery canvas长按保存一、背景:因为之前同事用java后端生成海报,导致海报加载缓慢,所以把它放到前端来拼接二、菜鸟教程:https://www.runoob.com/html/html5-canvas.html三、准备好需要的材料(图片)html<!-- html中添加 --><canvas id="myCanvas" width="200...原创 2020-09-07 17:14:05 · 1825 阅读 · 0 评论 -
jQuery:当鼠标不在本div上点击时,触发事件
一、获取map的key、valuevar markers = [];markers[2]=3;markers[3]=7;for(var key in markers){ console.log(key); console.log(markers[key]);}二、当鼠标不在本div上点击时,触发事件1.keyboard与flightNo都是标签的id...原创 2019-12-02 14:39:27 · 335 阅读 · 0 评论 -
html页面自动滚动+点击停止滚动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>页面自动滚动+点击停止滚动</title> <style> * { margin: 0; ...原创 2019-11-05 23:53:26 · 4606 阅读 · 0 评论 -
html监听整个页面滚动事件(监听用户是否正常访问)
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>监听整个页面滚动事件</title> <script type="text/javascript"> function scroll(){ //consol...原创 2019-11-05 23:52:00 · 1571 阅读 · 0 评论 -
JQuery中html、append、appendTo、after、insertAfter、before、insertBefore、empty、remove的使用
https://www.cnblogs.com/wx1993/p/4806873.html?tdsourcetag=s_pcqq_aiomsghtml方法,给元素添加html代码或者清空html代码(参数为空字符串); append向元素的末尾添加html代码; appendTo这个方法跟append方法的很像,只是要添加的html代码的目标有所不一样; after向元素的后边添加ht...转载 2018-10-03 10:07:28 · 492 阅读 · 0 评论 -
JS中"&&"的其它用法
首先来了解一下 “&&”操作符的工作原理:“&&”连接两个表达式,当两侧表达式都为真时,返回TRUE。有一个为假则返回FALSE。那么实际运行时,JavaScript到底是怎么执行判断的呢?如果左侧的表达式为FALSE,那么整个表达式的结果一定为FALSE。所以此时JavaScript不会对右侧的表达式进行判断。比如:console.log(0&a...转载 2019-01-15 16:47:49 · 2221 阅读 · 0 评论 -
js拼接字符串遇到onclick时
这个注意代码规范就好了错误的:maxData.push("<div class='rating-star' onclick=\'saveSurvey("+questionsId+")\'>点我</div>");正确的:maxData.push("<div class='rating-star' onclick=\'saveSurvey(\""+que.原创 2019-02-28 19:35:48 · 2635 阅读 · 0 评论 -
js秒数转化为时分秒
function formatSeconds(value) { var secondTime = parseInt(value);// 秒 var minuteTime = 0;// 分 var hourTime = 0;// 小时 if(secondTime > 60) {//如果秒数大于60,...转载 2019-04-25 11:24:07 · 375 阅读 · 0 评论 -
JavaScript中window参数
window.open('','_self','');window.close();直接关闭;window.close();要弹框确认后才关闭原创 2018-09-10 15:16:57 · 1209 阅读 · 0 评论