![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
前端学习007
学习、工作记录、技术交流
展开
-
antd table 增加底部合计行统计
1、table 表格中加一个 footer 属性,表头 showHeader 隐藏。2、table 合计行(就是:footer 那行列表),每列的宽度要和上面列表宽度一样。3、合计行要做判断,如果没有数据,不显示。// 合计行显示/隐藏let status = pcDataSource && (pcDataSource.length == ‘0’) ? {display: ‘none’} : {display: ‘block’}; <Fragment>原创 2021-06-16 11:01:21 · 5701 阅读 · 0 评论 -
简单的数组去重
1.最便捷的方法: […new Set(arr)]const arr = [4,5,3,4,6,5,8,6];console.log(Array.from(new Set(arr))) // [4, 5, 3, 6, 8]console.log([…new Set(arr)]) // [4, 5, 3, 6, 8]2.recude+include去重const arr1 = [4,5,3,4,6,5,8,6];const a1 = arr1.reduce((prev,cur) => p原创 2021-04-02 15:56:19 · 424 阅读 · 0 评论 -
uni-app 实现navigateBack返回修改前一页面数据(H5、APP、小程序)
B页面返回修改A页面title的值//A页面<template> <text class="title">返回修改的值:{{title}}</text></template>export default { data() { return { title: 'Hello' } },}//B页面<button @click="change">修改上一页的ti转载 2020-10-22 15:13:51 · 1685 阅读 · 1 评论 -
layui下拉菜单的按钮组,点击和鼠标滑过显示子菜单
<script type="text/html" id="toolbar"> <button class="layui-btn layui-btn-sm" lay-event="add">新增</button> <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">删除</button> <ul class="la.原创 2020-09-24 14:30:14 · 1976 阅读 · 0 评论 -
uni-app图片压缩转base64位,多图片上传
之前写过uni-app H5方式上传图片,但是在生成apk后,上传图片失败,不支持app上传。查找资料后解决app上传多图问题。H5方式上传图片可参考:uni-appH5端canvas压缩图片图片选择,每次最多选择4张,最多上传8张 chooseImage: async function() { var that = this; uni.chooseImage({ source原创 2020-09-09 17:52:26 · 1276 阅读 · 0 评论 -
CSS 盒子垂直居中的方法
一、盒子垂直居中的方法 1、先让盒子的上下边缘和父盒子的水平中心线重叠,,然后再让子盒子往回移动自身一半的距离。 <div class="father"> <div class="son"></div> </div> /* 通过 transform 属性来移动*/ .father { width: 500px; height: 500px; background-co原创 2020-09-09 17:39:54 · 1515 阅读 · 0 评论 -
vue 随机取一个数组中的4项数据
项目的换一换功能随机展示4个商品: /* 换一换*/ change() { this.recommendItems = this.getRandomArrayElements(this.recommendlist, 4) }, /* 随机获取数组中的数据*/ getRandomArrayElements(arr, count) {原创 2020-09-07 15:27:33 · 3540 阅读 · 1 评论 -
uni-app引入自定义图标库
1.进入阿里图标库下载并解压字体图标库到本地(下载Unicode格式的)方法一:2.在项目根目录下创建common目录,并把iconfont.css文件放入common目录中3.修改iconont.css里的@font-face(保留base64字体图标)删除划线部分,保留结尾分号。删除后:@font-face {font-family: "iconfont"; src:url('data:application/x-font-woff2;charset=utf-8;base64,d09原创 2020-07-21 15:39:21 · 872 阅读 · 0 评论 -
vue中mixins的使用方法
mixins就是定义一部分公共的方法或者计算属性,然后混入到各个组件中使用,方便管理与统一修改因项目需要全局隐藏钉钉导航,故创建ddhide.js 文件1.在common文件夹下创建一个ddhide.js文件import * as dd from 'dingtalk-jsapi'// 创建一个需要混入的对象ddhide export const ddhide = { data(){ return{ } }, created(){ if (dd.env.platform !翻译 2020-07-17 09:15:24 · 322 阅读 · 0 评论 -
IOS中 button按钮去除边框
IOS中 button按钮去除边框 <view class="view_2"> <button class="btn edit" type="button" @click="edit">编辑</button> <button class="btn submit " type="button" @click="$dianji(submit)">提交</button> </view>ios系统运行 会出现边框。添加代码可去原创 2020-07-15 11:47:24 · 663 阅读 · 0 评论 -
uni-appH5端canvas压缩图片
实现原理要想使用JS实现图片的压缩效果,核心API就是使用canvas的drawImage()方法。Canvas本质上就是一张位图,而drawImage()方法可以把一张大大的图片绘制在小小的Canvas画布上,不就等同于图片尺寸压缩了?对于本案例的压缩,使用的5个参数的API方法context.drawImage(img, dx, dy);context.drawImage(img, dx, dy, dWidth, dHeight);context.drawImage(img, sx, sy, s原创 2020-07-15 11:18:33 · 2787 阅读 · 2 评论 -
uni-app 删除数组中的指定元素
删除数组中的指定元素var index0 = this.imageList.findIndex(item => { if (item.imageName == e.imageName) { return true } }) this.imageList.splice(index0, 1)原创 2020-07-15 11:17:54 · 18178 阅读 · 0 评论 -
iOS手机竖着拍的照片被旋转了90°的原因以及解决方案
最近项目发现ios竖屏拍照上传图片文件时候,照片自动选中为横屏。经过测试发现,只有iOS手机竖着拍的照片才会出现这样的问题,而iOS手机横着拍的照片、Android手机拍的照片以及通过屏幕截图、网络下载等途径获得的图片都不会产生这个问题。经过查找资料发现需要引入了一个叫做 exif.js 的库来实现旋转角度的纠正,它提供了js读取图像的原始数据的功能扩展,例如:拍照方向、相机设备型号、拍摄时间、ISO 感光度、GPS 地理位置等数据。而拍照方向就是关键所在!exif.js 获取图像的拍照方向的代码如下翻译 2020-07-14 15:30:55 · 6746 阅读 · 0 评论 -
querySelector() 查找dom元素
document.querySelector<p id="demo">id="demo" 的 p 元素</p><p> 点击按钮修改 id="demo" 的 p 元素内容</p><button onclick="myFunction()">点我</button><script>function myFunction() { document.querySelector("#demo").innerHTML =原创 2020-07-14 15:18:08 · 1143 阅读 · 0 评论 -
jQuery select获取选中的值资料记录
(一) Query获取Select选择的Text和Value:1.为Select添加事件,当选择其中一项时触发 $("#select_id").change(function(){ //code… }); 2.获取Select选择的Textvar checkText=$("#select_id").find("option:selected").text();3.获取Select选择的Valuevar checkValue=$("#select_id").val();4.获取翻译 2020-07-14 15:17:32 · 142 阅读 · 0 评论 -
JQuery菜鸟教程笔记
JQuery语法jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作基础语法: $(selector).action()$ :美元符号定义 jQuery() :选择符(selector)”查询”和”查找” HTML 元素jQuery 的 action() 执行对元素的操作$(this).hide() - 隐藏当前元素 $("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素JQuery选择器jQuery 选择器允许翻译 2020-07-13 15:58:50 · 592 阅读 · 0 评论 -
JS获取页面URL信息整理
http://localhost:8080/user/login?userName=aa&password=1241、window.location.href (设置或获取整个 URL 为字符串)var url= window.location.href;alert(url);// 返回:url2、window.location.protocol (设置或获取 URL 的协议部分)var url = window.location.protocol;alert(url);//返回翻译 2020-07-13 11:56:21 · 177 阅读 · 0 评论 -
HTML DOM学习记录小结
1.改变 HTML 样式document.getElementById(“p2”).style.color=“blue”;document.getElementById(“p2”).style.fontFamily=“Arial”;2.获取或替换元素的内容,一个是 innerHTML,另一个是 innerText。document.querySelector(‘body’).innerHTML = res.data;var txt=document.getElementById(“intro”).原创 2020-07-13 11:07:19 · 333 阅读 · 0 评论 -
uniapp 解决暴力点击触发事件
1.先创建一个文件交common文件在文件下面创建一个common.js文件内容如下// 处理多次点击方法function dianji(fn) { let that = this; if (that.onoff) { that.onoff = false; fn(); setTimeout(function () { that.onoff = true; }, 1500) } else {原创 2020-07-11 09:33:32 · 4624 阅读 · 1 评论 -
将数字转换为大写金额
export const changeToChinese = (Num) => { //判断如果传递进来的不是字符的话转换为字符 if (typeof Num == "number") { Num = new String(Num); }; Num = Num.replace(/,/g, "") //替换tomoney()中的“,” Num = Num.replace(/ /g, "") //替换tomoney()中的空格 Num = N转载 2020-07-07 15:27:43 · 212 阅读 · 0 评论 -
uni-app 全局变量的实现方式
方法1:公用模块定义一个专用的模块,用来组织和管理这些全局的变量,在需要的页面引入。注意这种方式只支持多个vue页面或多个nvue页面之间公用,vue和nvue之间不公用。示例如下:在 uni-app 项目根目录下创建 common 目录,然后在 common 目录下新建 helper.js 用于定义公用的方法。const websiteUrl = 'http://uniapp.dcloud.io'; const now = Date.now || function () { re原创 2020-07-07 15:05:44 · 627 阅读 · 0 评论 -
钉钉导航栏显示/隐藏
//显示钉钉导航栏 dd.biz.navigation.hideBar({ hidden: false, // true:隐藏,false:显示 onSuccess: function(result) {}, onFail: function(err) {} })原创 2020-07-02 17:49:24 · 3030 阅读 · 6 评论 -
uni-app中自定义组件onLoad,onReady不起作用
组件会使uniapp的生命周期失效,换成vue的生命周期就行了,在uni-app的组件中可以直接使用Vue的生命周期函数对逻辑进行处理在uni-app的组件中可以直接使用Vue的生命周期函数对逻辑进行处理原创 2020-07-02 17:31:23 · 7161 阅读 · 3 评论 -
uni-app 滚动tab导航
view 布局:<view class="uni-tab-bar"> <scroll-view scroll-x class="uni-swiper-tab"> <block v-for="(tab,index) in tabBars" :key="tab.id"> <view class="swiper-tab-list" :class="{'active':tabIndex==index}" @tap="tabtap(ind原创 2020-06-28 09:20:16 · 1592 阅读 · 0 评论 -
uni-app集成钉钉应用配置
钉钉多端统一jsapi新特性:除了兼容现钉钉开放平台提供的jsapi的特性,还支持以下下特性1.支持返回原生Promise2.支持模块化引入api,模块化引入平台3.支持dd.checkJsApi, 用于检测当前环境是否支持此jsApi4.提供dd.on, dd.off来绑定事件,用于同一绑定事件,替代document.addEventListener,document.removeEventListener5.添加dd.env来读取当前环境变量6.支持typescript的接口定义npm原创 2020-05-18 09:23:39 · 5318 阅读 · 0 评论 -
学习笔记(6)下拉及多级弹出菜单
内容和知识点:带下拉子菜单的导航菜单绝对定位和浮动的区别和运用css自适应宽度滑动门菜单一、带下拉子菜单的导航菜单纵向导航教程中已使用过二级导航,今天制作下横向导航菜单的二级菜单,方法和纵向一样,只不过由纵向改变为横向而已。先在html代码增加二级菜单的代码。增加完代码后,在浏览器里预览一下:是不是一看头都大了,怎么变成这样了。我们分析一下错乱的原因。首先我们看下“自适应宽度...原创 2020-04-24 13:50:48 · 618 阅读 · 0 评论 -
学习笔记(5)横向导航菜单
知识点:横向列表菜单用图片美化的横向导航css Sprites(精灵图)一、横向列表菜单前边学习过纵向导航菜单,又学习了float属性,那么要实现横向导航菜单是不是很简单了,只需要把li横向排列就可实现了。学习笔记(2)纵向导航菜单及二级弹出菜单添加float 属性, 修改后的代码如下: #menu ul li { float: left; //添加float属性 ...原创 2020-04-24 11:27:40 · 1240 阅读 · 0 评论 -
学习笔记(3)超链接伪类
知识点链接的四种样式将链接转换为块状用css制作按钮首字下沉一、超链接的四种样式a:link {color: #FF0000} /* 未访问的链接 */a:visited {color: #00FF00} /* 已访问的链接 */a:hover {color: #FF00FF} /* 鼠标移动到链接上 */a:active {color: #0000FF} /* 选定的链接 ...原创 2020-04-24 10:20:30 · 579 阅读 · 0 评论 -
学习笔记(1):Html + Div 基础知识
本章介绍1.文档类型2.语言编码3.html标签4.css样式5.css优先级6.css盒模型组成1)文档类型当我们新建一下html格式文档时,会发现代码最上部有如下这句话:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml...原创 2020-04-23 17:40:59 · 142 阅读 · 0 评论 -
html + css 布局技巧总结 ——单列布局(3)
单列布局1.水平居中水平居中的页面布局中最为常见的一种布局形式,多出现于标题,以及内容区域的组织形式,下面介绍四种实现水平居中的方法(注:下面各个实例中实现的是child元素的对齐操作,child元素的父容器是parent元素)使用inline-block 和 text-align实现.parent{text-align: center;}.child{display: inline-b...原创 2020-04-22 13:20:50 · 726 阅读 · 0 评论