前端
关注
分享
扫一扫
北辰浅巷墨漓
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
基于Vue的图片裁剪 vue-cropper
今天做项目遇到了这样一个需求：对于要上传的图片进行裁剪，于是发现了一个好的工具----vue-cropper首先下载vue-croppernpm install vue-cropper引入vue-cropperimport { VueCropper } from 'vue-cropper'export default { components: { VueCropper }, }封装成组件uploadPattern.vue<template> &原创 2021-06-24 17:39:19 · 1184 阅读 · 0 评论 -
elemnt-ui table改为只能单选
这几天遇到了这样一个需求：使用element-UI的table组件，但是又只能勾选其中一条数据，从而进行其他的操作。解决办法：//单选 selectData(selection, row) { this.$refs.multipleTable.clearSelection(); if (selection.length === 0) { return; } this.$refs.multipleTable.toggleRowSelection(row, true);原创 2021-06-16 17:01:35 · 767 阅读 · 0 评论 -
vue重点知识
$nextTick()1. 使用原由由于Vue的数据驱动视图的更新是异步的，也就是在修改数据的当下视图不会立即更新，而是等同一事件循环中所有数据变化完成之后，统一进行视图更新。2. 使用场景需要在视图更新之后，基于新的视图进行操作，一般写在created和mounted里面mounted(){ this.$nextTick(()=> { this.setCircleHeiht() }) window.addEventListener("resize",this.原创 2021-04-23 17:56:19 · 206 阅读 · 0 评论 -
Echarts遇到的坑
最近在用Echarts绘制一些图表，但是在使用的过程中有这样一个问题：我们要展示的数据都是从后端获取的，所以展示的数据当然也要是从后端获取的。但是我们看到官网的实例data都是固定的，本来觉得挺简单的，就是将后端获取到的数据赋值给全局变量temp，然后data：this.temp代码：//调用接口 _getOneWeektrans(){ getOneWeektrans().then((res)=>{ let data=res.d原创 2021-02-01 15:18:32 · 527 阅读 · 0 评论 -
js转换Datetime遇到的坑
今天写页面发现这么一个问题：将后台传来的时间格式化，本来是一个很简单的问题，但是搞了好久发现转换不对，百度了很久，自己写的和别人差不多，没发现什么问题。原本的代码：function _getDate(time) { let str = null let date = new Date(str) let year = date.getFullYear() let month = date.getMonth() + 1 let day = date.getDate()原创 2021-01-26 09:25:41 · 554 阅读 · 0 评论 -
银联支付前端页面跳转
这几天做银联的时候遇到了这样一个问题：后端返回了一个完整的html,需要在前端跳转到银联支付的页面，测试的时候一直进如debugger，在网上查了很多资料，都没找到想要的答案。问题如下：最后问了客服才知道，是因为银联不能在测试情况下打开页面，所以解决办法就是按F12把测试关闭就可以打开了。跳转页面的代码： const div = document.create...原创 2020-01-10 10:07:29 · 2849 阅读 · 2 评论 -
阻止子元素的事件冒泡到父元素
在项目中我们常常遇到这样一个问题：就是一个父元素里面有很多子元素，父元素和子元素都会有点击事件，当我们点击子元素的时候，不希望触发父元素的点击事件。案例：购物车列表，想要点击增加或减少按钮时不希望触发父元素的点击事件进入详情页。在子元素的点击事件中加入： //阻止click事件冒泡到父元素 event.stopPropagation();这样问题就解决啦。...原创 2019-12-26 09:40:27 · 1262 阅读 · 0 评论 -
el-upload的用法
今天用了一下upload这个上传组件，遇到了一些问题，记录一下，可能还是不熟练的原因吧。直接上代码吧：页面部分： <el-form-item label="宣传视频："> <el-upload v-model="value.url" class="upload-demo" :limit="li...原创 2019-12-12 17:03:15 · 8936 阅读 · 0 评论 -
父组件修改子组件的值
之前对emit这个东西不怎么熟悉，最近两天用到了好几次，所以就想把它记录一下。父组件修改子组件的默认值子组件： props: { limitNum: { default: 3 } }, methods:{ emitLimitNum(){ this.$emit("limitNum"); }, }父组件：（upload-im...原创 2019-12-11 16:02:36 · 4937 阅读 · 0 评论 -
移动端点击输入框，键盘把底部的内容顶起
今天遇到这样一个问题：手机端输入表单信息时，键盘把底部的按钮顶起，这样就把一部分表单遮盖住了。详情如下图：可以看到，详细地址被遮盖住了，这样的用户体验肯定不好，解决办法如下：通过将实时屏幕高度和默认屏幕高度进行比较，如果实时屏幕的高度大于默认屏幕高度，就将按钮隐藏，否则就显示按钮。具体实现如下：1.将底部设置为fixed <div class="footer" v-sh...原创 2019-12-05 15:34:27 · 2146 阅读 · 3 评论 -
快速创建vue项目和react项目
创建vue项目：npm install --global vue-cli //全局安装vue-cli 如果之前已经安装好了vue可以不用vue init webpack 项目名创建完成之后就可以启动项目了 npm run dev创建react项目：1.npm install -g create-react-app2.create-react-app my-app3.n...原创 2019-11-15 14:00:29 · 280 阅读 · 0 评论 -
堆栈的深层次理解
下面写了三种颜色来改变div的颜色，前面两种可以改变，第三种却不可以改变，是什么原因呢？<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>堆栈内存的深度理解</title> <style> ...原创 2019-11-14 09:50:16 · 265 阅读 · 0 评论 -
栈内存和堆内存
今天学习了一下js基础，发现自己有很多底层原理都不怎么清楚，今天就来讲一个栈内存（stack）和堆内存（heap）。栈内存：主要分为变量存储空间和值存储空间，用来存基本数据类型，其中js中基本数据类型有5种，分别是：Number、string、null、NaN和Boolean堆内存：存储引用类型的值let n=10;上面这句代码其实分为三部：创建一个变量，然后把变量存放在栈内存的变量...原创 2019-11-12 14:25:30 · 245 阅读 · 0 评论 -
微信小程序自定义icon
微信小程序中wx.showToast，之前做的时候没注意，以为只可以用icon，后来看到官方文档可以自己插入图片，比如：当我们操作的时候失败了，我们需要给一个错误提示，如果我们这样写：wx.showToast({ title: '扫码失败', icon: 'none', duration: 2000})也是显示成功的提示，这时我们可以从https://www.iconfont.c...原创 2019-11-11 15:46:06 · 740 阅读 · 0 评论 -
手机端隐藏滚动条但是可以滑动内容
代码：body::-webkit-scrollbar { display: none; }原创 2019-11-04 09:47:33 · 742 阅读 · 0 评论 -
用HTml+csss实现优惠券
优惠券主要是做两边的波浪，主要用到的是css3多背景拼接，效果图：代码：html: <div class="list"> <div class="item"> <div class="left"> <div class="block"> ...原创 2019-10-25 09:29:43 · 3830 阅读 · 0 评论 -
浮动和定位
平常我们经常使用float这个属性，但是当你使用不当的话，就会出现很多问题，比如说：当我们把浏览器缩小页面布局就会出现混乱，很多时候就是使用float不当而造成的。如下图： 完整效果： 浏览器缩小后效果： 一、浮动讲到浮动，我们必须要明白两个概念，那就是文档流和脱标现象。 1、文档流 页面布局的排列方式：从上至下、从左至右，一个元素占一个“坑”。2、脱标定义：脱离文档流的标准，不受文原创 2017-11-05 08:18:17 · 1866 阅读 · 1 评论 -
ES6学习
ES6let和var的区别let只在代码块中有效，var在全局范围内有效let只能生明一次，而var可以声明多次for循环很适合用letfor(var i=0;i<10;i++){ setTimeout(function(){ console.log(i); //输出10个10 }) } up(){ ...原创 2019-08-14 16:04:57 · 128 阅读 · 0 评论 -
修改组件样式
在写页面的时候通常会遇到这样一个问题：某些组件对于某些场景下使用也许不是很适合，所以我们就希望改变已经定义好的组件样式。<style scoped></style>scoped是为了防止单个页面被污染，虽然把scoped去掉，然后找到对应的标签，可以改掉它的样式。但是显然这种做法是不可取的。还有另一种方法：用>>>格式：>>>...原创 2019-08-15 15:52:07 · 2496 阅读 · 0 评论 -
时间格式显示
最近两天在时间格式的显示上遇到了一些问题，在网上找了一个组件moment，用在微信小程序中，在电脑上能正常使用，但是把代码上传到服务器之后，就报错了，locale is not a function.现在还没弄清楚是什么原因。我只能换了一种方法。utc格式转换为日期时间格式首先将utc格式转换为时间戳 var operationTime = data.recordItems[i].o...原创 2019-08-29 11:53:52 · 266 阅读 · 0 评论 -
vue的基本用法
v-model和v-model.lazy的区别v-model:双向数据绑定，它会根据控件类型自动选取正确的方法来更新元素。v-model.lazy：使用change事件进行同步，而非input进行实时更新<div class="example1"> <input v-model="message" placeholder="edit me"/> ...原创 2019-08-30 17:24:21 · 156 阅读 · 0 评论 -
action-sheet使用
在使用mint-ui组件的action-sheet时遇到这样一个问题：就是name属性我是从后端传过来的，但是要获得每次点击的值。官网提供的写法html<mt-actionsheet :actions="actions" :visible.sync="sheetVisible"></mt-actionsheet>js<script>exp...原创 2019-09-02 16:11:48 · 1682 阅读 · 0 评论 -
Use // eslint-disable-next-line to ignore the next line.问题
这几次创建完一个vue项目之后运行项目就出现了这个问题，之前还以为是自己写错了，但是通过上网查找是因为开启了 eslint编码规范检查。解决办法：1.在build文件夹下找到webpack.base.conf.js2.将…(config.dev.useEslint ? [createLintingRule()] : []),注释掉这样重新启动项目就不会报错了。...原创 2019-09-09 13:46:53 · 6638 阅读 · 0 评论 -
SetInterval遇到的问题
今天在使用SetInterval的时候遇到了这样一个问题：就是setInterval中调用后端接口，直到满足条件就跳转页面。跳转页面代码：this.$router.push({name:"Start"})但是一直报这个错：错因：这个this是window的，而不是Vue的，所以我们需要在SetInterval外面先用一个变量存起来，然后再使用window的this:vue的thi...原创 2019-09-18 10:44:37 · 482 阅读 · 0 评论 -
跳转页面之前清除SetInterval
const time=window.setInterval(function(){},1000);// 通过$once来监听定时器，在beforeDestroy钩子可以被清除。 this.$once('hook:beforeDestroy', () => { clearInterval(time); ...原创 2019-09-18 16:28:39 · 1210 阅读 · 0 评论 -
创建vue模板
如果我们在写代码之前写一个模板，这样就省的我们一个一个敲了，写代码的速度也会快很多。步骤：file->preferences->userSnippets,然后找到vue.json在vue.json文件里面加上以下代码，"Print to console": { "prefix": "vue", "body": [ "<!-- $0 -->", ...原创 2019-09-19 10:19:19 · 302 阅读 · 0 评论 -
将一个数字以个位、十位、百位来显示
效果图：html代码：total是一个数组，将数字通过js分割之后存在total里面<div class="scanner"> <p>全国扫码总量</p> </div> <div class="quantity"> <p> <span v-for="(item,index) ...原创 2019-09-25 10:09:32 · 1265 阅读 · 0 评论 -
Echarts的一些属性
1、地图设置涟漪效果代码： series: [{ name: '城市', type: 'effectScatter', coordinateSystem: 'geo', symbolSize: 15, //设置显示的圆点大小 legendHoverLink:true, d...原创 2019-09-25 10:24:14 · 1132 阅读 · 0 评论 -
字符串转数组
今天遇到这样一个问题：var str="[{productId=1181461914442657793, visitNum=78, productName=麻辣王子}, {productId=1182163138800361474, visitNum=15, productName=荔枝}, {productId=1181472367218651138, visitNum=5, productN...原创 2019-10-10 21:50:44 · 426 阅读 · 0 评论 -
localhost可以运行项目，但换成ip地址就进不去
今天在做项目的过程中遇到了这样一个问题：就是我自己写好的一个vue项目，希望其他人可以通过ip地址去访问，所以当我把ip:端口号/路由写好后在浏览器进行访问，发现访问不了，然而把ip地址改成localhost就可以了。解决办法：只需要找到config文件夹下的index.js文件里的module.exports下的dev,把host:localhost改成host:‘0.0.0.0’，然后重新...原创 2019-07-24 16:19:01 · 3192 阅读 · 0 评论 -
字符串拼接方式
今天使用了mint-ui中的mt-cell组件，遇到了这样一个问题：<mt-cell v-for="item in cells" :key="item.content" :title="item.title" is-link to="batch/addInfo...原创 2019-07-18 22:28:15 · 296 阅读 · 0 评论 -
JS中this的理解
在java中我们也会经常遇到this，在JavaScript中也经常用this，我们需要知道this在不同的使用场景下分别代表的含义以及它的原理。一定要清楚this是在运行时进行绑定的，并不是在编写时绑定，它取决于函数调用的条件以及它的调用位置。 1、JS中的this，有四种使用场景，分别为：1）在普通函数中使用this，this指向全局对象，属于window var x=原创 2017-11-25 23:50:42 · 305 阅读 · 0 评论 -
浏览器兼容问题
在写前端代码的过程中必须要考虑浏览器兼容性问题，很多时候触发一个事件但是结果并不是自己心中想要的结果，可以看一下是否是因为浏览器兼容性问题造成的，下面是一些事件对于浏览器的兼容性。1、 获取事件对象 ①window.event:兼容ie高低版本和谷歌浏览器 ②通过方法中的参数传递function(event){ }:兼容IE9+、谷歌和火狐 所以，通常要有一个兼容性的写原创 2017-11-25 17:52:50 · 447 阅读 · 0 评论 -
原型链详细分析
这张图看起来有些复杂，但是我们可以一块一块来进行分析。首先我们把它分为3块，第一块是Foo函数，第二块是Object对象，第三块是Function。一、Foo函数的原型分析 var obj={}; console.log(obj.__proto__);输出结果： 从输出结果我们可以看出，obj实际上是执行了var obj=new Object();原创 2017-12-11 00:58:50 · 246 阅读 · 0 评论 -
CSS选择器及CSS继承性
一、选择器（4+3+3+*）1、基本选择器 1）通用选择器 用的最多的是在写css文件的最上面写下面代码：（作用：去掉所有的默认样式） *{ margin: 0; padding: 0; } 2）id选择器 - 重要标志：“#” - 通过id获取某个元素：document.getE原创 2017-11-22 17:24:00 · 559 阅读 · 0 评论 -
原型
一、类型的分类1、判断一个“数据”的类型的方法： 1）值类型：number、string、boolean、undefined 2）引用类型：object值类型的数据：用typeof() <script> console.log(typeof ("aa")); console.log(typeof(10));原创 2017-12-10 21:46:53 · 211 阅读 · 2 评论 -
坐标属性
写前端页面的时候因为涉及到屏幕、浏览器和页面，所以坐标也会有很多个。以下是几个坐标的属性： 一、坐标属性 1. 相对于屏幕鼠标的坐标x,y a)screenX b)screenY 2. 相对于浏览器鼠标的坐标x,y a)clientX b)clientY 3. 相对于当前页面鼠标的坐标x,y a)pageX b原创 2017-11-15 12:18:01 · 757 阅读 · 0 评论 -
json与数组
一、json学习每一个新的知识，就必须知道它的定义，知道它是一个什么东西。 定义：json(JavaScript Object Notation, JS 对象标记) 是JavaScript中的一个对象的使用，是一种轻量级的数据交换格式。 作用：从后台传过来的数据不能直接展示在页面上，而是通过json对象来进行数据转换。 JSON格式：{键：值，键：值，键：值….}，注意：如果值是字符串一定要加原创 2017-11-12 14:25:32 · 287 阅读 · 0 评论 -
前端规范和浏览器兼容性
**一、前端规范** 很多时候我们在写页面的时候都会遇到这样一个问题：不知道给类取什么名？当代码量很多的时候，就算取了，我们想找到它也很难。所以说，前端也需要有代码规范，这样对后期的修改和维护都起到很大的作用。 前端分为三大类： 1、HTML 2、CSS 3、JavaScript 下面我们就来介绍这三个的规范。HTML 1、命名规范：统一用小写的字母、数字和下划线的组合（不得包含空格和原创 2017-10-31 17:32:41 · 1797 阅读 · 0 评论 -
微博发布页面
一、布局首先看一下写完后的效果图： 当我们在编辑框里写下吐槽的内容时，在它的下方就会弹出一条评论，而且是最新的总是在第一条。下面主要来讲一下里面有哪些标签。 发表评论部分： 1、有一个最大的div，将评论内容、发布按钮等都包裹在里面。 2、“有什么想吐槽的赶紧来说说”这个是一个 3、写评论内容也是一个div,如果要让div变成可以编辑的，就给它设置一个样式 contenteditable原创 2017-08-06 21:25:45 · 1632 阅读 · 0 评论