- 博客(97)
- 收藏
- 关注
RSS订阅原创 v-drag 可拖拽 div容器中含有input无法输入
继上篇文章 vue写一个可全屏拖拽容器效果之后，发现了：如果可拖动的div中有input输入框的话，不做处理input无法输入内容，所以我们需要在oDiv.onmousedown事件中加上以下代码，就可以解决input输入框无法输入的问题！if(e.target.nodeName == 'INPUT'||e.target.nodeName == 'TEXTAREA'){ return}如图：...
2022-05-31 15:07:05
1226
1
原创 vue写一个可全屏拖拽容器效果
小编这里是每个页面都用到了这个效果，所以这里先封装了一下组件，封装就不多说了…首先实现可拖拽效果，我们先自定义一个全局指令 data(){ return { } }, directives: { drag(el) { // 可就在里写指令的js代码 const oDiv = el // 当前元素 document.onselectstart = () => { return false } oDiv.onmousedown =
2022-05-20 15:11:53
803
原创 watch监听两个变量（或者多个）
首先使用计算属性将要监听的变量绑定到一起//数据区data () { return { selID1:'', selID2:'', }}computed: { changeData () { const { selID1, selID2} = this return {selID1,selID2} }},watch:{ changeData(val){ console.log(val) //val的值就是selID1和selID2的值 //接下来在这里写将要
2022-04-19 10:28:53
2702
原创 掉了几根头发，琢磨出来的一个题
一个以数字组成的数组，实现输出id为数字，并且从大到小排序name（要求使用es6语法）！！！代码：const source = [ null, { id: 4, name: 'test1' }, { id: {}, name: 'ssdf' }, "test", { id: () => {}, name: 'sf' }, { id: '6', name: 'test3' }, { i
2022-02-25 17:40:53
594
2
原创 Token前端存储
存储位置有：localStorage、sessionStrage、vuex、Cookie1、localStorage2、3、4、Cookie，存放在Cookie中可以通过设置http-only来防止XSS攻击
2022-02-17 17:15:14
1363
原创 ES6 中filter过滤器的用法
var sexData=["男","女","女","男","女"];var filter2=sexData.filter(function(sex){ return sex==="女"})//console.log(filter2) ["女", "女", "女"]var porducts = [ {name: 'apple',type: 'red'} , {name: 'orange',type: 'orange'}, {name: 'banana',type: 'yellow'}
2021-02-18 15:50:39
2243
原创 uniapp完成 支付宝支付
支付宝支付uni.getProvider({ service: 'payment', //获取服务供应商 success: (res) => { console.log(res.service); //服务类型：payment console.log(res.provider); //不同服务类型下可能的取值：["alipay","wxpay"] if (res.provider.indexOf('alipay') != -1) { //服务提供商（从服务供应商中获取，是否包含
2020-11-19 18:59:32
1565
2
原创 uniapp完成 微信支付
微信支付uni.getProvider({ service: 'payment', //获取服务供应商 success: (res) => { if (res.provider.indexOf('wxpay')) { this.$http.post('接口地址', { order_id: this.orderdata.order_id, user_id: uni.getStorageSync("user_id"), type: 2 }).then(res
2020-11-19 18:57:44
1717
原创 uniapp封装一个上传图片功能
//util.jsfunction uploadFile(path,imgList){ uni.showLoading({ title: '上传中' }); uni.uploadFile({ url:'上传接口地址', filePath:path, name: 'file', success: res => { let temp = JSON.parse(res.data) imgList.push(temp.data) }, file: res =&g
2020-11-10 13:58:48
1302
原创 uni获取验证码按钮实现
<view v-if="isShowCode" @click="getCode" class="verificationCode"> {{reGet}}</view><view v-else class="verificationCode">{{daojishi}}s</view>data() { return{ isShowCode:true, reGet:"获取验证码", daojishi:"60" }},methods:{
2020-09-16 14:33:34
504
原创 uniapp websocket心跳重连
<script>export default { data() { return { timeout: 30000, // 30s timeoutObj: null }; }, onLoad() { // .判断是否已连接 this.checkOpenSocket(); }, methods: { // 判断是否已连接 checkOpenSocket() { uni.sendSocketMessage({ data: 'ping',
2020-09-16 14:25:29
4126
5
原创 小程序写一个上拉加载更多的数据
wxml<view class="movieContent"> <!-- 精选 --> <view class="doorContent"> <block wx:for="{{commodityData}}" wx:key="idx"> <view class="commodityItems"> <view class="commodityImgBox"> &l
2020-09-12 11:03:00
180
原创 uniapp 项目 离线打包
首先呢，我们要安装相关工具和插件1、下载Android studio点击下载2、Hbuilder官方SDK点击下载完成上边两个操作之后呢，我们就开始打包吧！步骤一、解压官方sdk，得到下边的文件下载Android studio的时候我也出现好多问题，也就不带你们入坑了，可以搜索安装教程按照步骤安装。下载完成之后我们打开，如果你没有安装sdk，就按照下边的操作来！这就好了，然后我们把解压得到的文件夹导入进去将我们要打包的项目进行操作，打开HbuilderX现在回到
2020-09-04 17:29:47
332
原创 了解一下 window.open()
语法：window.open([URL], [窗口名称], [参数字符串])URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。窗口名称：可选参数，被打开窗口的名称。1.该名称由字母、数字和下划线字符组成。2."_top"、"_blank"、"_self"具有特殊意义的名称。_blank：在新窗口显示目标网页_self：在当前窗口显示目标网页_top：框架网页中在上部窗口中显示目标网页3.相同 name 的窗口只能创建一个，要想
2020-08-27 17:05:27
423
原创 入门学习Node.js
Node.js严格来说不是一个框架，而是一个平台。Node.js技术栈：（1）Node.js的核心模块。（2）至少要学习一个Node下的框架：Express框架、KOA框架。（3）模板引擎：是一种编译型HTML语言，例如：Pug（Jade）、EJS等。（4）编译型CSS：Less/Sass/Stylus等。（5）数据库：mongoDB、MySQL。一、MVC架构：1、M：模型（Model），模型和数据库有关。2、V：视图（View），视图和页面（模板引擎）有关，用户最终能看到的就是视图。
2020-07-24 16:39:27
123
原创 window.location.href跳转传参并接收参数
最近做H5页面之间跳转以及带有参数的传递，下边就让我们一起来练习一下吧！window.location.href = "buyOil.html?userId="+ res.userId;buyOil.html 这是跳转路径的地址res.userId是我们传过去的参数，在这里我们模拟res.userId是2，所以就变成了window.location.href = "buyOil.html?userId="+ 2;我们在buyOil.html这里边接受这个参数 function Ge
2020-07-13 15:13:13
14263
1
原创 小程序做一个定位到当前城市，可选择的
点击的时候可选择，代码：其中样式是自己写的一个css，你们可以自己写样式，用到了阿里图标index.wxml<!--定位和搜索--> <view class="indexTop display-flex align-center"> <view class="display-flex align-center"> <text class="textColor city" catchtap="switchcity">{{ci.
2020-07-08 12:00:46
927
1
原创 微信小程序使用colorUI框架
使用colorUI框架，首先我们需要下载下来下载地址：GitHub地址：https://github.com/weilanwl/ColorUI/下载下来解压我们会得到如下文件我们把demo文件夹导入到我们的微信开发者工具中：template文件夹是一个使用colorUI的（相当于）新建小程序里边可以直接使用colorUI，如果你是自己创建的项目，将我们demo中的colorui文件夹复制到项目中，跟pages同级然后在app.wxss导入这样我们就可以使用colorui了将你需要的组
2020-07-03 11:28:31
2346
原创 vue项目中使用qrcodejs生成二维码并下载
1.首先安装npm install qrcodejs2 --save-dev2.在需要使用的Vue页面或者js文件中导入import QRCode from 'qrcodejs2'3.页面里有个标签展示二维码<template> <div id="qrcode" ref="qrcode" ></div></template>方法区写事件：methods:{ showQrcode() { document
2020-06-29 10:54:24
1858
1
原创 纯css制作瀑布流
<div class="masonry"> <div class="item"> <img src="http://picsum.photos/360/460?random=1" > </div> <div class="item"> <img src="http://picsum.photos/360/500?random=1" > </div> <div class="item"&g
2020-06-28 22:39:54
159
原创 vue项目使用自定义字体
我们使用思源字体为例子：百度下载：SourceHanSansCN-Regular.ttf文件百度搜索font-face转换器将下载的文件拖到左边，点击立即生成。加压文件会得到如下文件：在vue项目中新建文件夹并复制下载下来的相应文件在main.js中引入引入css文件在需要的地方进行使用：就OK了！...
2020-06-23 12:01:31
745
原创 router-view组件使用方法
因为一个页面有很多相同的样式，所以我们可以使用router-view组件来实现点击导航不刷新页面的效果，只在当前页面打开内容。最主要的是router.js路由，写法如下：import Index from '../pages/index'{ path: '/', name: 'index', component: Index },{ path:'/nav', name:'nav', component:()=>imp
2020-06-20 09:08:37
1906
原创 让图片显示在div中，且超出部分隐藏，图片不变形，截取图片中心部分
<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title></title> <style> html{ background-color: antiquewhite; } .divContent{ width:200px; height: 200px; border:1px solid #ff5857;
2020-06-19 09:04:44
3754
1
原创 uni-app上传一个头像
<view class="chooseImg" @tap="openChooseImg"> <text v-if="!imgUrl">+</text> <image v-else :src="imgUrl" ></image> </view>设置样式，在数据区定义一个imgUrldata(){ return{ imgUrl:"" }}写事件详见：https://uniapp.dcloud.io/api/med
2020-06-04 23:35:50
3196
原创 Element表格具备selection列，data是一个动态数据时。
在做<el-table></en-table>使用data注入数据后,用<el-pagination></el-pagination>做了分页效果。结果出了一些问题。请看下列代码：<el-button type="danger" :disabled="isdelete" @click="batchDelete">批量删除</e...
2020-05-07 10:51:10
524
原创 Echarts百度图表
http://echarts.baidu.com可以在该网址下载echarts.js文件在使用百度图表的HTML文档中加载下载的echarts.js文件：<script type="text/javascript" src="js/echarts.js"></script>html中创建一个容器，并为其设置宽和高<div id="box"></d...
2020-05-06 21:32:50
269
原创 vue中的axios请求（get与post）
安装axiosnpm install axios --save-dev随着axios的安装，qs随之也就安装好了，在main.js入口文件中引用,使用post请求要用到qs。//axios安装好后即可导入import axios from 'axios';import qs from 'qs';//将$axios和qs挂在原型上，方便在实例中能够使用用this.$axiosVue....
2020-05-06 19:58:41
644
原创 uni-app封装一个request()接口
创建一个对象，将该对象挂在Vue的原型下。新建 @/common/request.js 文件export default { get(){}, post(){}}进入mine.js文件在任意文件中书写下列代码可以调用。this.$H.get();this.$H.post();封装request.js文件//暴露接口export de...
2020-05-05 20:56:41
1361
原创 uni-app中调取接口的三种方法
uni.request({}) uni.request({ url:'', data:{}, methods:'', header:{}, success:res=>{}, fail:()=>{}, complete:=>{} })uni.request({}).then(()=>{})uni.re...
2020-05-05 20:24:33
7307
原创 ES6引入了Promise对象解决异步问题
什么是PromisePromise对象用于异步操作，它表示一个尚未完成且预计在未来完成的异步操作。优点(1) promise对象，进行链式回调，可以将 异步操作 以 同步操作的流程 表达出来，避免层层嵌套，避免"厄运回调金字塔"。(2) 可以有多个then()连缀书写。(3) 不仅给出了异步操作成功的代码解决方案，还给出了异步操作失败和完成的解决方案。new Promise(fun...
2020-05-04 21:42:11
569
原创 ES6新特性（六） Module模块化
一、什么是模块化？1.1. 在ES5中本身是不支持模块化的，后来一些社区的大佬制定了一个模块规范，主要分为两种，一个是用于服务器的CommonJs,比如nodeJS中的require；另一个是用于客户端的AMD，比如requireJs。1.2. 在ES6中专门提供了通用的模块化方案（export / import）。二、export和import的使用2.1. export：用于导出模块...
2020-05-04 14:22:07
238
原创 ES6新特性（五）class类
一、创建类和对象1.1. 在ES5中使用的是function关键字创建类， ES6引入了 class 关键字来创建类。1.2. 创建类的实例使用 new 关键字。** 1.3. 类的 constructor 构造函数：用于传递参数，返回实例对象，通过 new 关键字生成实例时，自动调用该方法。如果没有显式声明构造函数，在类的内部会自动创建一个默认的constructor（）构造函数。**1...
2020-05-03 14:23:36
147
原创 ES6新特性（四） Symbol和迭代器Iterator的使用
一、Symbol应用场景：因为每一个 Symbol 的值都是不相等的，所以 Symbol 作为对象的属性名，可以保证属性不重名。1.1. 什么是Symbol ?1.1.1. Symbol是ES6中新增的原始数据类型，Symbol提供一种独一无二的值比如：在js中声明一个变量a = 5;再声明一个变量b = 5; 虽然这两个变量名不同，但是值是相等的；使用Symbol声明的值不重复、不相等。...
2020-05-02 20:44:06
1891
原创 ES6新特性（三） 函数扩展
一、函数的参数默认值1.1. 方法的形参可以赋默认值，在调用方法时，如果没有与之对应的实参则使用形参的默认值。1.2. 赋默认值的形参的后面不能有普通形参（没有赋默认值的形参）。1.2.1. 默认值只在没有传参或者参数为undefined时使用默认值，如果参数为null,则不适用默认值。 //函数的参数默认值 //赋默认值的形参在普通参数的后面 function metho...
2020-05-01 20:08:53
166
原创 ES6新特性（二）内置对象的扩展方法
一、String对象的扩展方法1.1. 模板字符串1.1.1. 模板字符串是ES6新增的创建字符串的方式，使用反引号定义（反引号一般在tab键的上面，esc键的下面，键盘布局不同所在位置也不同）。1.1.2. 模板字符串在创建时可以使用 ∗∗解析变量，使用更加灵活。1.1.3.模板字符串可以换行，如果创建模板字符串时使用了换行，那么输出的时候也会换行。1.1.4.使用模板字符串可以用∗∗{ ...
2020-04-30 16:08:44
290
原创 ES6新特性（一）
一、什么是ES6？ES全称为ECMAScript，它是由国际标准化组织ECMA（全称：European Computer Manufacturers Association）欧洲计算机制造商协会制定的一项脚本语言的标准化规范。JavaScript就实现了这套标准。ES6中的6代表的是版本，从2015年6月份发布的版本及其后续版本统称为ES6，从2015年开始，每年的6月份都会发布新版本。目前各大...
2020-04-29 16:27:23
700
原创 微信小程序（组件--表单：交互控件）
（1）input输入框组件（2）textarea多行输入框组件（3）form表单组件（4）radio-group单选选择器与radio单选项目（5）label关联组件（6）checkbox-group多选选择器与checkbox多选项目（1）input输入框组件基础属性type属性值占位符placeholder属性placeholder-style：注意：plac...
2019-12-10 15:16:37
283
原创 微信小程序（组件--表单：按钮微信开放能力与客服）
按钮组件之open-type —微信开放能力常用属性值①contact客户会话②share分享转发③getPhoneNumber获取用户手机号④getUserInfo获取用户信息⑤openSetting授权设置页⑥feedback意见反馈页面按钮组件之open-type —微信开放能力常用属性值open-type 微信开放能力属性值----contact客服会话打开客服会话，如...
2019-12-05 17:04:27
422
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人