2022-05-11 VUE九宫格抽奖页面实现 VUE九宫格抽奖页面实现 VUE模拟九宫格抽奖页面实现直接上代码<template> <div class="gameBox"> <div class="bg1"></div> <div class="bg2" v-show="lampShow"></div> <div class="start" @click="move"> 点击抽奖 <p>({{ number_of_draws }}次)</p> </div> <ul> <li v-for="(item,i) in list" :key="i" :class="['item' + (i+1), {'active': index === i}]"> ... 2022-05-11 VUE相关 549 阅读 0 评论 2022年05月11日 549 阅读 0 评论
2022-05-08 VUE安装 postcss-px-to-viewport,将px单位转换为视口单位的 (vw, vh, vmin, vmax) VUE安装 postcss-px-to-viewport,将px单位转换为视口单位的 (vw, vh, vmin, vmax) VUE安装 postcss-px-to-viewport,将px单位转换为视口单位的 (vw, vh, vmin, vmax)先安装 postcss,直接 npm install postcss --save-dev安装 postcss-px-to-viewport 这里,使用github上的版本,因为可以指定目录或文件才进行转换// 需要使用include属性: npm i https://github.com/evrone/postcss-px-to-viewport --save-dev // 不需要使用include属性: npm install postcss-px-to-viewport --save-devnpm安装报错情况... npm ERR! error: RPC failed; curl 28 OpenSSL SSL_read: Connection was reset, errno 10054 npm ERR! fatal: expected flush after ref listing ...可以尝试用下面的两个设置解决git config --glo... 2022-05-08 VUE相关 1,515 阅读 0 评论 2022年05月08日 1,515 阅读 0 评论
2022-02-18 Vant2.x上传图片并且压缩 Vant2.x上传图片并且压缩 废话不多说直接上代码<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" /> <title>Vant2</title> </he... 2022-02-18 VUE相关 588 阅读 0 评论 2022年02月18日 588 阅读 0 评论
2021-08-05 VUE使用VUEX的状态管理笔记 VUE使用VUEX的状态管理笔记 安装VUEX运行环境npm下,已经安装好vue,并且安装好vuex;未安装的先安装vuex,在项目根目录,src同级目录执行安装命令:npm install vuex --save新建一个状态管理目录这里在src目录下新建一个文件夹 stores,用来管理状态新建mutations的函数常量,即需要用到的mutations里的每个方法,官方建议使用常量命名这里在stores目录下新建一个mutation-types.js文件// mutations的常量 export const COUNTINC = COUNTINC; //自增的函数名称 export const COUNTDEC = COUNTDEC; //自减的函数名称 export const CARTADD = CARTADD; //购物车增加函数名称新建主要的store管理文件,文件里管理了状态的所有操作在stores目录下新建index.js,文件内容如下,都是测试信息,仅供学习参照import Vue from 'vue'; import Vuex from 'vuex'; //这里... 2021-08-05 VUE相关 749 阅读 0 评论 2021年08月05日 749 阅读 0 评论
2021-05-22 uniapp H5本地开发支持跨域请求 uniapp H5本地开发支持跨域请求 uniapp H5本地开发支持跨域请求使用uniapp本地开发的时候,在浏览器端调试效果的话,可能需要请求其他域名的接口,普通网络请求访问,可能会提示下面的跨域错误:Access to XMLHttpRequest at 'http://www.dcr163.cn/' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.解决的办法也很简单,在uniapp项目根目录找到mainfest.json配置文件,找到H5的配置信息,如果没有H5的配置信息,则自己新增配置信息: "h5": { "title": "朋友圈说说【凡人阁】", "devServer": { ... 2021-05-22 VUE相关 785 阅读 0 评论 2021年05月22日 785 阅读 0 评论
2021-04-08 Vuex的关系逻辑图 Vuex的关系逻辑图 Vuex的关系逻辑图,直接上图片,看着图片理解更容易 2021-04-08 VUE相关 712 阅读 0 评论 2021年04月08日 712 阅读 0 评论
2021-03-14 vue列表筛选+排序笔记 vue列表筛选+排序笔记 vue列表筛选+排序笔记<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue列表筛选+排序</title> </head> <body> <div id="app"> <input type="text" v-model="keyword"> <ul> <li v-for="(val,index) in filterLists" :key="index">{{index}}-{{val.id}}-{{val.name}}-{{val.age}}</li> </ul> ... 2021-03-14 VUE相关 703 阅读 0 评论 2021年03月14日 703 阅读 0 评论
2021-01-31 VUE.js中的页面表单使用演示代码 VUE.js中的页面表单使用演示代码 VUE.js中的页面表单使用演示代码,这个是在 nmp run dev,开发模式下的代码,但是页面使用的元素都类型,可以参照:<template> <div> <form action=""> <table> <tr> <th>标 题</th> <th>内 容</th> &... 2021-01-31 VUE相关 713 阅读 0 评论 2021年01月31日 713 阅读 0 评论
2020-06-07 H5实现手机摇一摇的功能,js代码 H5实现手机摇一摇的功能,js代码 废话不多说,直接上代码,在script中添加该代码即可测试/** * 手机摇一摇的动作是指手机在一定时间内移动了一定距离,也可以近似的理解为:手机以不低于一定的速度移动。 * 实现方法:监听 devicemotion 事件后,判断设备在 X、Y、Z 三个方向上移动的距离与前一次的距离差,并除以两次事件触发的时间差,即为设备移动的速度。将这个速度与预设的的速度对比,如果大于预先设置的值,则认为设备在发生摇动。这个预先设定的速度可以进行多次测试后,取它们的平均值。 * 具体代码如下(用手机打开页面摇一摇即可看到效果): */ if( window.DeviceMotionEvent ) { window.addEventListener('devicemotion',motionHanlder,false); const SHAKE_SPEED&nbs... 2020-06-07 VUE相关 604 阅读 0 评论 2020年06月07日 604 阅读 0 评论