- 博客(34)
- 收藏
- 关注
原创 uni-app封装request请求,用于接口对接
一、根目录下新建 config.js 文件用于配置项目的域名const config = { base_url: '项目域名'}export { config }二、根目录下新建 utils/http.js 文件import { config} from '../config.js'export const apiResquest = (prams) => { //prams是调用的接口API的参数 //请求头设置 let headerData = {
2021-05-06 09:50:32
1372
原创 vue+elementUI项目中,如何让Element UI的Message消息提示每次只弹出一个
1.封装js,命名为message.js,代码如下:/**防止重复点击重复弹出message弹框 */import {Message} from 'element-ui';let messageInstance = null;const resetMessage = (options) => { if(messageInstance) { messageInstance.close() } messageInstance = Message(opti
2020-05-25 17:12:00
3254
原创 vue项目打包后因vendor文件过大首次加载很慢的优化方法
1.打开/config/index.js文件将productionGzip设置为trueproductionGzip: true,然后用npm安装依赖,命令如下:npm install --save-dev compression-webpack-plugin@1.1.122.打开/build/webpack.base.config.js文件找到module.exports的module中的rules,将limit设置为1000(默认为10000),如下图:3.服务器端配
2020-05-13 10:34:41
2703
1
原创 html页面适配手机端方法
在head中加:<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">注释:viewport :用户网页的可视区域.width:控制viewport的大小,可以指定一个值,如...
2020-04-19 11:15:07
6764
3
原创 css图片的等比例自动缩放
根据父容器的自动缩放,并保持图片原来的比例。需要这样设置父容器的大小。 img{ max-width: 100%; max-height: 100%; width: auto; height: auto; } ...
2020-04-17 17:07:35
3338
1
原创 微信小程序实现点击拍照以及长按录像功能
话不多说,直接上代码,代码里面注释写的都很详细wxml文件:<!-- 相机 --><camera wx:if="{{!videoSrc}}" device-position="back" flash="off" binderror="error" class="photo"> <cover-view> <!-- 拍照按钮 --&g...
2020-04-15 10:37:15
3501
1
原创 padding影响div宽高解决方法
在开发中,有时我们不希望 padding 影响到 div 的实际宽度,为了不让padding影响整个div的实际宽度,我们可以设置一个css属性:box-sizing:box-sizing
2020-04-10 10:00:01
2273
原创 五分钟快速上手Vant组件,搭建小程序界面样式
Vant Weapp是移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,有助于开发者快速搭建小程序页面样式,文档地址:https://youzan.github.io/vant-weapp/#/intro1.从github上面下载源码文件,开源地址:https://github.com/youzan/vant-weapp2.打开文件,复制dist文...
2020-04-08 16:36:25
1181
原创 微信小程序跳转页面方法
一、跳转到 tabBar 页面wx.switchTab()方法用来跳转至tabBar页面,并关闭其他所有非 tabBar 页面,示例代码如下:wx.switchTab({ url: '/index'})二、跳转到其他页面(非tabBar页)小程序中跳转至其他页面有三种方法,这三种方法分别是是wx.redirectTo()、wx.navigateTo()以及wx.reLaun...
2019-07-23 14:18:35
6047
原创 Vuex最简单的使用方法
一、安装Vuex安装命令:npm install vuex --save二、新建store.js文件文件内容如下:import Vue from 'vue';// 引入vueimport Vuex from 'vuex';// 引入vuexVue.use(Vuex); // 使用vuex插件// Store实例export default new Vuex.S...
2019-05-14 13:58:29
404
原创 Git上传常用指令
1.切换分支git checkout develop2.拉取git pull origin develop3.提交全部改动git add -A4.提交到自己的分支git commit -m '注释'5.把自己的改动提交到主分支git push -u origin develop...
2019-04-25 11:26:59
1513
原创 Vue项目中localStorage本地储存的公共方法
创建local.js文件,文件内容如下:const local = {}/** * put 把数据放到本地存储 * @param {*} key * @param {*} value */local.set = function (key, value) { window.localStorage.setItem(key, JSON.stringify(value));}...
2019-04-19 09:56:41
2919
原创 vue中全局组件的封装与使用
一、写好组件<template> <button class="btn"> <slot/> <!-- 插槽 --> </button></template><script>export default { // 传入子组件的参数写到props props: { }...
2019-03-28 10:27:42
3438
原创 Vue生成二维码插件QRcode
一、安装在命令行中输入一下命令安装二维码插件:npm install qrcodejs2 --save需要注意的是,这里安装的是qrcodejs2而不是qrcode ,因为安装qrcode会报错。二、引入在需要的页面引入QRcode插件:import QRCode from 'qrcodejs2' 三、使用html部分:<div id="qrco...
2019-03-08 11:30:57
1221
原创 vue实现图片放大的方法
一、v-viewer插件首先,用命令行安装v-viewer插件:npm install v-viewer --save然后,在main.js中注册v-viewer插件,代码如下:// 实现图片点击放大import Viewer from 'v-viewer'import 'viewerjs/dist/viewer.css'Vue.use(Viewer);Viewer.s...
2019-01-25 09:55:33
5522
3
原创 vue实现打印功能最简单的方法
一、下载打印插件通过这个地址下载vue打印插件:https://github.com/xyl66/vuePlugs_printjs,下载完毕后,在src下新建文件夹plugs,将下载的插件print.js放到plugs文件夹里二、全局注册打印插件在main.js里注册打印插件,注册完成后,就可以在组件中使用了,main.js里的代码如下:// vue 打印插件import P...
2019-01-23 16:45:59
13634
22
原创 基于Vue+ElementUI的省市区选择公共组件
公共组件部分此组件是配合后台用的,每选择一次,调去一次后台接口,获取相应地址的数据。html部分:<template> <el-form-item label="地址" :label-width="'100px'"> <el-select v-model="addList.province" placeholder="请选择省" cl
2018-11-02 10:22:37
19098
2
原创 JavaScript中Json字符串与对象、数组之间的相互转换
1、Json字符串转Js数组varjsonStr ='[1,2,3,4,5,{"a":1}]';varjsarr=JSON.parse( jsonStr );//转为数组alert(jsarr[0]);2、Json字符串转Js对象varjsonString ='{"bar":"property","baz":3}';varjsObject = JSON.parse...
2018-10-24 09:27:58
881
原创 Vue爬坑:把对象中的数据给了某个变量,改变一个对象的值,另一个对象也变化的解决办法!
在vue中,在data里建立两个对象。data() { return { dataA:{ a:1 }, dataB:'' }};将dataA的内容赋值给dataB,改变dataB里对象的值,发现dataA里的值也跟着变化了。为什么会出现这种情况呢?其实,这是一个引用传递而不是值传递,dataA和dataB指向的是同一...
2018-10-16 10:30:33
27878
24
原创 js中最简单最实用的数组去重方法!
js数组去重是比较常见的数组操作方式之一,网上有很多关于数组去重的博客文章,方法各式各样,但有些方法实用性很差,很容易造成不必要的麻烦,所以我们需要去其糟粕取其精华,下面我们就整理一些比较实用的数组去重方法。一、for循环嵌套,利用splice去重此方法是比较常用的方法之一,也是es5中比较实用的方法之一。话不多说,上代码:function newArr(arr){ for(...
2018-10-10 13:25:36
47027
8
原创 JS字符串与数字之间的转换方法
一、字符串转换成数字字符串转换成数字最常用的方法有两个:parseFloat和parseInt。parseFloat是把一个字符串转换为一个浮点数,parseInt是把一个字符串转换为一个整数。示例如下:var num = parseInt('123abc'); //返回123var num = parseInt('2.4'); //返回2var num = parseFloat('...
2018-09-28 13:18:34
764
原创 JS中根据某个特定字符截取字符串
在项目中,我们有时候需要将字符串根据某个字符截取出来,并获取某个值,比如字符串"1-2-3-4-5",我想获取3,怎么做呢?请看下面代码:var str = "1-2-3-4-5"var arr = str.split("-");console.log(arr)//返回一个数组['1','2','3','4','5']通过上面代码,我们用split方法把字符串str转换成了数组arr...
2018-09-20 10:09:52
54797
1
原创 VUE2.0中监听对象属性的方法
data() { return { addMealList: { name: "", price: "0", discount: "0", weight: "0", }, }; }, watch: { addMealList: { handler: functi...
2018-09-07 14:34:00
732
原创 仅需三步,即可在Vue项目中配置sass
1.安装sass依赖包在终端中输入npm install --save-dev sass-loader,下图表示安装成功:安装完sass-loader后,再安装node-sass,输入npm install --save-dev node-sass,因为sass-loader依赖于node-sass,下图表示安装成功:2.添加配置打开build文件夹下的webpack.ba...
2018-08-22 11:44:30
6006
1
原创 快速搭建vue+webpack开发环境
1.安装node.js与npm首先,你需要安装node.js与npm,如果没有安装,可以去官网安装,node.js官网地址:https://nodejs.org/en/,一般node.js都自带npm。安装完node.js后,在终端输入node -v以及npm -v查看是否安装成功,如果出现版本号,即表示安装成功,如下图: 2.安装webpack在终端输入:npm install ...
2018-08-17 10:50:52
3194
原创 vs code终端命令不能使用解决方法
今天想试一下vs code编译器,安装之后打开项目,想用终端执行一些命令,然而刚刚开局就遇到了坑,如下图: 终端竟然无法识别npm和node?什么鬼!于是,去cmd里看了下,发现cmd里可以正常使用后经四方打探,终于找到了解决方案,打开vs code属性里的兼容性,勾选以管理员身份运行,然后应用重新启动vs code,就可以运行终端命令啦!...
2018-08-17 09:13:45
65282
40
原创 js中常用的正则表达式验证方法
在项目开发中,几乎每个项目都避免不了表单验证,比如用户名验证,密码验证等等,接下来,就整理一下比较常用的正则表达式验证。1.用户名验证(字母、数字及下划线组成)var username = /^[a-z\d_]{5,20}$/i2.,密码验证(以字母开头,字母、数字和下划线组成,长度为6-18)var password = /^[a-zA-Z]\w{5,17}$/3.手机号...
2018-08-15 11:59:03
571
原创 webstorm2018最新版最简单的破解方法
webstorm是一款前端主流编译器,虽然这款编译器不是免费的,但是破解方法还是有不少的,接下来就告诉大家一种最简单的方法:首先,去官网下载最新版webstorm,官网地址:http://www.jetbrains.com/webstorm/,点击download,如下图:下载完毕点击安装,安装完成后,运行webstorm,弹出注册窗口选择Activate,在打开的License Ac...
2018-08-15 10:29:23
1324
原创 javascript中为动态生成的元素添加事件
近期在开发项目中,遇到一个问题,就是给动态生成的元素添加事件,用平常使用的方法添加不上,废话不多说,上代码:<div id="mydiv"></div><script>var html = "<div class='child'>我是动态生成的</div>"$("#mydiv").html(ht
2018-08-14 14:16:46
3234
原创 谈谈JS中“相等”与“全等”的区别
在javascript中,判断两个变量是否相等的操作符有两组,他们分别是:相等和不相等,全等和不全等。他们的区别就是相等和不相等是先转换然后比较,全等和不全等不转换只比较。相等与不相等相等是用两个等号表示,即“==”,而不相等则用叹号与等号表示,即“!=”,这两个操作符都会先转换操作数,然后在进行比较。比如:var a = ("123" == 123);alert(a);//结果为...
2018-07-22 22:37:53
1984
原创 CSS清除浮动常见的三种方法
1.结尾处添加空div标签设置clear:both在浮动的盒子之下再放一个标签,在这个标签中使用clear:both,用来清除浮动,这种清除浮动的方式会增加页面的标签,如果页面浮动布局多,就会有很多空的div,会导致造成页面结构混乱。例子如下:<style type="text/css"> .div{background:red;width:200px} .left{fl...
2018-06-26 17:11:15
258
原创 ES6中let与const的用法
let与const是ES6语法中比较常见的两个命令,下面我们就讨论一下let与const。letlet是用来声明变量的命令,它类似于var命令,但不同于var的是let是块级作用域,而var是函数作用域。那么,什么是块级作用域呢,废话不多说,直接上代码。for (let i =0;i<6;i++) {console.log(i);//有结果}console.log...
2018-06-25 10:34:07
198
原创 javascript中防止重复点击、防止点击过快实用方法
防止重复点击可以添加一个开关,让这个开关默认为true,第一次点击将其变为false,点击事件的执行需要判断这个开关是否为true,为true执行,false不执行。例子如下: var isclick= true; function click(){ if(isclick){ flag = false; //下面添加需要...
2018-06-22 15:26:52
53264
5
原创 快速理解CSS中的position定位
在CSS中,有一个非常重要的属性,几乎只要用CSS,就避免不了使用这个属性,它就是定位属性position。它可以使元素非常灵活的处于你想的位置。position属性的值有absolute、relative、fixed、static以及inherit.其中前三个值是我们开发中比较常用的,static为默认值,也就是没有定位,inherit是规定从父元素继承 position 属性的值,也很少使...
2018-06-22 15:05:58
185
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人