自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

sani_x的博客

一个默默无闻的前端小学生

  • 博客(38)
  • 问答 (1)
  • 收藏
  • 关注

原创 css 手写 border样式

项目要求:模块的border 是虚线显示,且虚线长度可以控制,所以使用dotted,dashed是不能很好的实现的。解决方法:使用background的linear-gradient来实现线性渐变的。html结构<div class="topBg"> <div class="top"> <div @click="navto" style="cursor: pointer"> <i class="el-icon-plus avatar-upload

2022-04-14 16:18:12 399 3

原创 flex 布局竖直排列换行后让子元素撑开父元素

原因使用横向布局时可以正常撑开父元素,所以只能使用flex-direction: row;元素排列变成横向布局通过给父元素writing-mode: vertical-lr;,子元素writing-mode: horizontal-tb;,曲线实现竖向布局。代码示例<div class="itemMain"> <div class="submenuItem" v-for="(itemC,indexC) in item.childItem" :key="indexC">

2022-03-25 20:16:39 2522

转载 解决 ios 微信小程序分享到朋友圈 禁用问题

微信小程序分享到朋友圈显示当前页面的转发按钮显示当前页面的转发按钮wx.showShareMenu 配置当前页面的转发按钮。onLoad(){ wx.showShareMenu({ withShareTicket: true, menus: ['shareAppMessage', 'shareTimeline'] })}//分享到好友onShareAppMessage() {}//分享到朋友圈onShareTimeline() {}...

2021-12-28 16:52:56 4439 1

原创 关于 uni app 打包 h5 污染wx,造成引入企业微信的通讯录组件 ww-open-data 无法使用的问题

uniapp 打成h5 让wx受到污染,引入企业微信的通讯录组件ww-open-data无法使用的问题以及解决方法。

2021-12-03 15:23:28 2692 14

原创 vue 打包 -webkit-box-orient 失效

一行溢出不显示overflow: hidden;white-space: nowrap;text-overflow: ellipsis;多行溢出不显示overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical;需要添加注释,来解决这个问题,注意css和scss的方法是不一样的!!!在scss中 /*! autopr

2021-11-08 11:34:45 437

原创 forEach打断方法

问题:多层循环嵌套如何打断循环进程解决方法:1.使用return 打断,但是这只是打断一次循环,如果嵌套循环的数据中有重复数据该方法就容易出现问题。2.使用 try 通过抛出异常的方式实现终止循环(多层循环,数据有重复,推荐使用)例:checkAll.forEach((item,index)=>{ try { that.Nodisabled.forEach((itemC,indexc)=>{ if(item==itemC.title){//获取被选中的数据 let n

2021-07-16 13:43:07 1349

原创 vue axios 二进制文件 下载 乱码

注意请求是时候一定要请求头添加 responseType: ‘blob’, 来获取二进制流axios({ method: 'post', responseType: 'blob', url: process.env.BASE_API + '/Console/exportPieAreaAmountList', params: form }) .then(response => { co

2021-07-08 17:50:02 422

原创 css js 常用功能 记录

css-hover动画.zoom-in{ transition: transform ease .3s; -ms-transition: -ms-transform ease .3s; -moz-transition: -moz-transform ease .3s; -webkit-transition: -webkit-transform ease .3s; -o-transition: -o-transform ease .3s; } .zoom-in:hover{

2021-07-07 11:16:41 104

原创 uCharts swiper、scroll-view、绝对定位等布局

Swiper嵌套:inScrollView: 开启,pageScrollTop:在onPageScroll中绑定页面滚动距离.(动态传入offsetTop的值)canvas2d:开启(小程序层级兼容,不能使用真机调试,请直接预览,调试请先关闭)canvasId:开启canvas2d后,需要手动指定canvasId。且父元素不能含有v-if改v-showScroll-view嵌套:inScrollView: 开启,pageScrollTop:在onPageScroll中绑定页面滚动距离。(既有页

2021-06-28 11:12:22 1012

原创 margin auto 改变 (flex) 盒子布局

问题:在Flex布局中因为的影响子集布局,所如果布局复杂的时候flex的层级嵌套就会特别多。使用原理:Margin:0 auto,可以使元素居中。auto:让某一边的间距自动匹配拉满。方法:我们就可以使用margin-left,margin-right:auto,来使特定的元素居左或者居右。...

2021-06-22 09:17:19 371

转载 鼠标移入 移出 子元素触发父元素的 mouseout mouseove,mouseleave mouseenter事件

转一下,这位仁兄写的。解决了燃眉直接https://blog.youkuaiyun.com/qq_41139830/article/details/82860616方法一、 用mouseleave/mouseenter代替mouseover/mouseout【最佳方法】mouseover 与 mouseenter:mouseover => 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。mouseenter => 只有在鼠标指针从元素外穿入被选元素(到元素内)时.

2021-05-26 09:46:36 1088

原创 JQ jquery 获取 子元素 修改内容

html结构<div id="test"> <a href="">123</a> <a href="">asd</a> <a href="">zxc</a> <a href="">qwe</a></div>获取第一个子元素$('#test').children().first().html("<<<");获取最后一个子元素$('#test').ch

2021-05-21 11:46:38 625

原创 template 标签 VUE v-slot 用法

匿名插槽(也叫默认插槽)没有名字,但是只能有一个父<todo-list> <template v-slot:default> 任意内容 <p>我是匿名插槽 </p> </template></todo-list> 子<slot>我是默认值</slot>具名插槽比上面的好点有个名字父<todo-list> <te

2021-05-18 17:09:10 6690 4

原创 关于 template 标签 在 js vue 中的用法

template 定义内容模板 <template> 元素是一种用于保存客户端内容机制,该内容在加载页面时不会呈现。将模板视为一个可存储在文档中以便后续使用的内容片段。虽然解析器在加载页面时确实会处理<template>元素的内容,但这样做只是为了确保这些内容有效;但元素内容不会被渲染。说白了和input type=”hidden” 类似,一个储存字符状态,一个储存代码片段js 中使用IE完全不兼容,仅作为了解扩展!<table id="producttable

2021-05-18 16:55:29 1893

原创 input number 箭头图标 只输入数字

问题pc端使用input type="number"时会出现上下可点击的小箭头,且可以输入小数点等符号解决方法:Css(去除图标) ::v-deep input::-webkit-outer-spin-button, ::v-deep input::-webkit-inner-spin-button { -webkit-appearance: none; } ::v-deep input[type="number"]{ -moz-appearance: textfield;..

2021-05-18 16:23:35 358

原创 ie 报语法错误,方法未定义,不兼容es6/es7语法 如 =>,...

原因是ie不兼容es6/es7语法 如(=> 箭头函数) 等 使用外部插件(只有少量js代码时候可使用): browser.min.js(兼容es6)core.min.js(兼容es7)必须把js代码放在html页面里面,且使用type="text/babel":<script type="text/babel"> function user(){let age = abc; setInterval(() => { cons...

2021-04-27 11:02:11 1235

原创 Babel js (es6/es7)语法转换 es5

问题:该方法只要用于兼容个别浏览器对es6乃至es7语法不支持使用。方法:新建babel项目对js语法进行降级示例初始化:cnpm init -y安装转换工具:cnpm i -g babel-clicnpm i --save-dev babel-preset-es2015 babel-cliBabel对应版本安装:cnpm install babel-preset-stage-20的集成度最高包含es6到ES7的语法兼容,最大最杂最省事懒得折腾,但是为了避免开发..

2021-04-27 10:58:46 1508 1

原创 html2canvas海报生成

html2canvas海报生成官网:http://html2canvas.hertzen.com/使用环境:js,vue;使用方法:Html:<div class="poster-container" ref="imageWrapper" style="display: inline-block;">我是海报</div><div onclick=”createPoster”>生成海报</div><el-butto..

2021-04-23 09:38:35 547

原创 layui upload; 限制上传个数打断提交

Before回调中使用stopPropagation(); 强行打断进程layui.use('upload', function() { var upload = layui.upload; //执行实例 var uploadInst = upload.render({ elem: '#uploade', //绑定元素 url: '/upload', //上传接口 size: 1024 * 2, accept: 'images', acceptMime: 'image/jp

2021-04-20 17:59:10 662

原创 使用 rimraf 快速删除 node_modules

在全局安装rimraf模块,然后通过其命令来快速删除node_modules目录:npm install rimraf -grimraf node_modules

2021-04-09 16:24:41 578

原创 时间戳 时间文本 时间 转换成指定格式日期

/*** 时间戳转换成指定格式日期** eg. ** dateFormat(11111111111111, 'Y年m月d日 H时i分')** → "2322年02月06日 03时45分"*/const dateFormat = (timestamp, formats) => { // formats格式包括 // 1. Y-m-d // 2. Y-m-d H:i:s // 3. Y年m月d日 // 4. Y年m月d日 H时i分 format.

2021-04-02 19:56:29 1405 2

原创 video uni-app h5 无法内联播放会自动全屏 问题

可以直接使用playsinline属性来限制,webkit-playsinline="true" 属性 针对iOSx5-playsinline="true" 属性 针对 微信<video id="myVideo" :src="videoUrl||''" object-fit='fill' enable-progress-gesture=false @timeupdate='timeUpdate' @ended='Ended' :autoplay='...

2021-04-01 18:13:23 709

原创 element ui table 定义 slot-scope=“scope“ 数据不更新问题

<el-table-column prop="scope" label="修改后"> <template slot-scope="scope"> <span v-for="item in scope.row.attributes" :key="item.attributeID"> {{ rouleshowattributes.attrID == item.attribut.

2021-03-30 10:35:54 3091

原创 uni 微信小程序 背景图片

<view class="mian" :style="{backgroundImage:`url(${indexBackgroundImage})`,backgroundSize: 'cover'}"> 网页内容</viewdata() { return { indexBackgroundImage: "../../static/test.jpg", }}ok简单粗暴就解决了

2020-11-23 16:03:16 596 2

原创 uniapp picker 定义 range-key

<picker @change="bindPickerChange" :value="index" :range="array" :range-key="'text'"> <view class="uni-input"> 选择回看时间:{{array[index].start}}---{{array[index].end}} </view></picker> array: [{ id:"1", text:"2020年 5月 18日.

2020-10-28 14:12:04 2880 4

原创 js解决css 缓存 问题 (随机数)

<script> var cssStr='<link href="css/index.css?v='+Math.random()+'" rel="stylesheet" type="text/css"/>'; document.write(cssStr);</script>放在<head>标签里面就好了

2020-05-22 16:14:22 407

原创 uniapp 微信小程序 登录

定义web页面 open-type 获取用户信息 调用<!-- 微信授权模块 --> <!-- #ifdef MP-WEIXIN --> <view class='mask' v-if="scopeUserInfo"> <view class='accredit'> <view class='title'>需要你的授权</view> <view class='info'>..

2020-05-12 16:46:24 311

原创 uni app getBackgroundAudioManager 的使用和坑(自动播放,进度条)

项目需求需要在页面上添加音频播发功能,在官网上<audio>停止维护了,所以使用了uni.getBackgroundAudioManager()在后台还能继续播放的api接口。写死的播放路径的代码(代码主体,之后都是在该代码上修改): var that=this console.log(this.detail.audio,"放入的音频路径") this.bgA...

2020-04-28 19:50:13 13847 6

转载 h5 js input 实时监控输入

<input type="text" id="fix">$("#fix").on('input propertychange', function(event){ //"#fix为你的输入框 last = event.timeStamp; //利用event的timeStamp来标记时间,这样每次事件都会修改last的值,注意last必需为全局变...

2020-04-26 11:03:09 449

原创 swiper3 动态加载数据 js

需要定义两个属性、observer:true,//修改swiper自己或子元素时,自动初始化swiperobserveParents:true//修改swiper的父元素时,自动初始化swipervar mySwiper = new Swiper('#nei', { autoplay: 500,//可选选项,自动滑动 pagination : '#nei .swiper-pagin...

2020-04-25 23:08:38 574

转载 如何修改 Element-UI input 标签的高度

从以下地址拿的https://www.jianshu.com/p/2c65d9c5a78b————————————————————————————————————————深度作用选择器如果你希望 scoped 样式中的一个选择器能够作用得“更深”,例如影响子组件,你可以使用 >>> 操作符。有些像 Sass 之类的预处理器无法正确解析 >>>,...

2020-04-20 16:44:42 11027 3

原创 Swiper 3 平滑滚动 并 出现文字介绍

引用swiper依赖swiper.min.cssswiper.min.js创建swiper的js,html,css var swiper = new Swiper('.swiper-container2', { pagination: '.swiper-pagination', slidesPerView: 5, pagina...

2020-02-18 17:58:45 2251

原创 js tab切换 封装方法 比较好用的

var tabs = function (tab, con,con2) {//debugger tab.eq(0).addClass('sevenFenlei_topMenu_zi_active') con.hide(); con.eq(0).show(); con2.hide(); con2.eq(0).show(); tab.click(func...

2020-02-18 17:40:35 278

原创 AMD VMWare中安装Mac OS 10.15

1.准备镜像:https://pan.baidu.com/s/1bptBH9P#list/path=%2Fsharelink3576976523-567458960346773%2FMac&parentPath=%2Fsharelink3576976523-5674589603467732.准备插件:Unlocker 3.0 (解锁Apple Mac OS X):https:/...

2019-12-17 15:19:21 14932 31

原创 关于vue环境下 apexcharts 动态 赋值失败的问题

问题:在引用"apexcharts"进行动态赋值的时候,出现了数组赋值失败,插件无法循环生成的问题,排错一下午,最终发现是整理后的数值有问题问题原因: 我们调用接口的循环输出数据,或者直接给data中的值赋值的时候数组的最后一位有可能是“__ob__: Observer” 这些数据是vue这个框架对数据设置的监控器,一般都是不可枚举的。 解...

2019-11-19 12:07:15 1343

原创 uni app 自定义 头部组件(3)传值

进过了第一篇,第二篇的介绍,你们会发现既然是头部导航就少不了传值(高亮),所以本章就是用记录主键传值的既然要传值,那主键就必须有可以接受的地方。所以进入我们写好的自定义组件中添加接收字段名,字段类型,字段默认值props: { navitem: { type: Number, default: 0, }, listitem: { type: Number, def...

2019-11-07 16:22:37 994

原创 uni app 自定义 头部组件(2) 局部 右侧按钮

uni app 局部自定义头部的修改

2019-11-07 15:51:22 5242 1

原创 uni app 自定义 头部组件(1)禁用原生

解决uniapp自定义头部

2019-11-07 15:23:29 1451

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除