- 博客(94)
- 资源 (1)
- 收藏
- 关注
原创 如何在Vue3项目中使用vw实现移动端适配
如何在Vue3项目中使用vw实现移动端适配接下来的内容,直接使用Vue官方提供的Vue-cli的构建工具来构建Vue项目。首先需要安装Vue-cli:$ npm install -g vue-cli全局先安装Vue-cli,假设你安装好了Vue-cli。这样就可以使用它来构建项目:vue create vw-vant根据命令提示做相应的操作(以下是我个人的配置):Vue CLI v3.11.0┌───────────────────────────┐│ Update available
2022-03-01 15:48:04
1159
原创 在vue中a标签Window.loanth.herf下载图片文件失效解决方法
在vue中a标签Window.loanth.herf下载图片文件失效解决方法在main.js 中加入代码Vue.directive('down', { inserted: (el, binding) => { el.style.cssText = 'cursor: pointer;color:write;' el.addEventListener('click', () => { console.log(binding.value) let lin
2022-01-20 09:49:08
940
原创 HBuilderX 快速在模拟器中实现真机上的效果
HBuilderX 快速在模拟器中实现真机上的效果随便下载一个模拟器(我用的是夜神模拟器)在百度上搜索你模拟器的端口号在HBuilderX 中 (运行=》运行到手机模拟器 =》android模拟器端口设置)把模拟器的端口更改为你下载的那个模拟器端口号即可5.再次( 运行=》运行到手机模拟器 =》就会出现模拟器型号)...
2022-01-04 14:20:56
2801
原创 vue中使用公交车传值
使用eventBus注意事项需求是:a页面跳转到b页面,使用this.$router.go(-1);跳回并且需要且带参数第一步:需要创建一个新的js文件(vue使用)import Vue from 'vue'/** * 定义空的vue实例,作为 eventbus实现非父子组件之间的通信(vue2.x中去掉了broadcast) */var eventBus = new Vue({});export default eventBus;第二步:b页面代码//首先引入import ev
2021-11-30 17:41:57
452
原创 在modal中使用Carousel 走马灯注意事项:
在modal中使用Carousel 走马灯注意事项:在modal中使用Carousel 走马灯注意事项:直接在modal中使用Carousel 走马灯,Carousel 获取的宽度为0原因:是因为Carousel 在页面加载的时候获取不到modal宽度解决方法:在Carousel 最外曾加上v-if【v-if的值就等于modal。v-model的值】v-if的作用可以重新加载组件。我们要在modal执行完毕后在执行Carousel ,这样Carousel 就能获取到modal的宽度代码:效
2021-05-26 14:33:14
528
原创 iview 动态设置校验
iview 动态设置校验不理解的话直接照着抄,变量直接换成一样的试试直接上代码静态部分data部分重点来了需要使用计算属性:computed
2021-04-15 16:43:14
227
原创 在iview中使用ref主要事项:
在iview中使用ref主要事项:在我开发中遇到一个需求:在2个表格嵌套的情况下按下回车键获取下一个input框的焦点案例:ref的深入理解://jsdocument.getElementsByClassName('focusEl')[index + 1].getElementsByTagName('input')[0].focus()解题思路:前提是用的网上封装的组件input原生的input不存在这个问题,不理解就看ref的解释【上方】要是用ref获取不到那就用我上面的方法获取
2021-03-19 17:10:23
843
原创 iview 组件的用法
iview 组件的用法form表单的使用 - 这里的ref是用来获取这个form表单的 - :model=" " 这里面的值是一个对象 - :rules=" " 这里面是写验证内容可以参考iview官网[form](http://v1.iviewui.com/components/form) - label 这里是用来写标题的 - prop这个应该要跟你formValidate中的属性一致(也就是你v-model中的值) <Form ref="formValidate" :mod
2021-01-27 16:48:06
711
原创 Vivew中的DatePicker
Vivew中的DatePicker选择的日期为(yyyy-MM-dd)@on-change=“row.currentCheckDate = $event” 固定写法必须加这个要不然提交到后端的原因会格式不对的 <DatePicker :v-model="row.currentCheckDate" @on-change="row.currentCheckDate = $event" format="yyyy-MM-dd" typ
2021-01-21 10:55:06
400
原创 vue生成二维码
Vue——前端生成二维码与后端生成二维码相比,前端生成二维码更具有灵活性,下面就介绍两种前端生成二维码的方式,两种方式相比之下,vue-qr比qrcode多了一个再中间添加logo的功能。方式一:qrcodenpmnpm install --save qrcodejs2importimport QRCode from 'qrcodejs2’<div class="qrcode" ref="qrCodeUrl"></div> <script>me
2021-01-15 13:31:24
635
原创 uni-app页面栈传值
在app中经常会用到页面栈传值,页面栈可以获取到前面页面的所有值比如:现在有3个页面(a,b,c)现在有一个需求是这样的:需要从a页面跳到b再从b跳到c,然后b要获取c页面的数据这样的话我们可以这样写:a页面:uni.navigateTo({ url: './bookingGoods?&goodsList=' + JSON.stringify(this.detailList), })可以携带参数。b页面获取:有一个声明周期函数 onLoad (option) {
2021-01-07 15:44:34
1948
原创 vue省市区遍历数据
省市区遍历数据一般项目中都会省市区然后从后台获取数据,遍历前台(我的大哥交给我一个简单的方法)先说页面布局(省市区)是同级的,【也有可能是嵌套型】这种情况的:拿到后台数据后,先看一下数据结构一般都是:[{ “name”: “北京市”,[{ “name”: “北京市”,[]}]},{},{}]思路:在vue中这样写(不管在什么框架下写,思路都是一样的)重点: 给select>option 加事件,必须的 @click.native=“事件名”<select> <opt
2020-12-08 18:59:17
2105
原创 简单的封装axios
简单的封装axios现在项目中下载axios 跟qs模块然后在src目录下创建一个api文件夹,里面创建一个index.js文件 代码如下:import axios from "axios"import qs from "qs"import { Loading } from 'element-ui';// 配置公共地址axios.defaults.baseURL="";// 请求超时时间axios.defaults.timeout=5000;// 公司用的是token的话可以加// a
2020-11-30 23:25:01
127
原创 vue路由小妙招用法
vue路由小妙招用法动态路由的写法:例如:{path:“info/:id”}this.$route.params.id 获取动态的idbeforeRouteEnter进入组件之前执行的守卫函数beforeRouteUpdate组件复用的时候执行的守卫函数目前只有一种情况复用 连续进入同一个动态路由页面的时候会用复用就会导致组件创建阶段的生命周期钩子函数并不会运行beforeRouteUpdate(to,from,next){this.id=to.params.idconsole
2020-11-29 21:52:07
146
原创 小程序引用组件
在小程序中使用组件跟vue中略有一点差别废话不说,上才艺!小程序中的组件必须在components创建,创建方法:第一步:先创建一个文件夹,然后在文件夹上右击(新建Component)注意【千万不要点新建page】第二步: 点击(新建Component)后,会在你的文件夹中出现四个文件,就说明创建成功了!然后检查json文件中是否有"component": true, (一般都会自动生成)第三步:在父组件的json文件中起名,写路径(形式如下)messageSon是随便起的(代表组件的名
2020-11-20 11:17:08
2635
原创 vscode配置 easy sass
vscode配置 easy sass具体介绍请参照:https://www.imooc.com/article/19624第一步:首先在vscode插件库中下载easy sass插件第二步:第三步:这个是默认配置"easysass.compileAfterSave": true, `为false避免这类文件编辑保存后被编译为无效,css 需要手动删除的尴尬。 "easysass.excludeRegex": "","easysass.formats": [ {
2020-11-07 12:13:30
4354
原创 css可以从父元素继承的属性有
css可以从父元素继承的属性有:一 、字体系列属性<!->通过指定font-size-adjust属性,浏览器将调整字体大小,无论字体系列("宋体"性质值0.58):<-!>font:组合字体font-family:规定元素的字体系列font-weight:设置的字体的粗细font-size:设置字体的尺寸font-style:字体的风格font-variant:把段落设置为小型大写字母字体font-size-adjust:0.58,浏览器将调整字体大小,二、
2020-11-04 14:18:40
1216
1
原创 2020-09-18
解决子元的样式素影响父元素的样式解决办法:父级或子元素使用浮动或者绝对定位absolute;浮动或绝对定位不参与margin的折叠父级overflow:hidden;父级设置padding(破坏非空白的折叠条件)父级设置border...
2020-09-18 12:03:38
83
原创 git开发常用的命令
git开发常用的命令初始化 git init查看文件当前状态 git status将本地代码提交到暂存区 当前所有git add. 指定文件 git add 文件名 所有 git add -A将暂存区代码提交到本地分支git commit -m '附加描述'代码同步 git pull origin master将本地分支代码提交到远程版本库 git pull origin master查看提交历史 git log git log --author="用户名" git log -p
2020-09-17 09:56:26
55
原创 利用GIT进行多人协作开发
利用GIT进行多人协作开发1.首先,在本地下载好Git以后,我们需要设置提交代码的用户名和邮箱git config --golbal user.name "xxx"git config --golbal user.email "xxx"如果用使用了 —global选项,那么以后你所以的项目都会使用这里的配置的用户信息。如果要在莫格特定的项目中使用其他名字或者邮箱,只需在该项目执行:git config user.name"xxx"git config user.email "xxx"现在,
2020-09-03 13:51:19
364
原创 自定义数组去重方法
为数组原型添加一个自定义去重的方法// 为数组添加一个自定义去重方法myDistinctArray.prototype.myDistinct=function () { var obj={}; // 这里的this就是你使用的数组 (arr、arr1) for(var i=0;i<this.length;i++){ var cur=this[i]; if(obj[cu
2020-08-10 11:06:54
380
原创 ajax请求及请求头设置
原生js发送ajax请求:$ajax({ url:"请求地址", dataType:"json",返回格式 (与后台商量) async:true, 请求是否异步,默认为异步,这也是ajax重要特性 cache:false, 是否读取缓存 data:{"名":"值"}, 传参数 type:"GET" , GET/POST 请求参数 beforeSend:function(){ 请求前的处理 }, success:function(){ 请求成功后处理 }, complete
2020-07-22 15:23:07
1656
原创 原生js添加动画效果
原生js添加动画效果html这个图片是使用阿里图标需要下载<div class="content"> <div class="contAnimation"><i class="iconfont icon-jiazai inco"></i></div> </div>css.content{ position: relative; width: 100px; height: 100
2020-07-22 14:14:55
1295
1
原创 axios发送formdata请求
axios发送formdata请求axios 默认是 Payload格式数据请求,但有时候后端接收参数要求必须是 Form Data 格式的,所以我们就得进行转换。Payload和Form Data的主要设置是根据请求头的 Content-Type 的值来的:Payload Content-Type: ‘application/json; charset=utf-8’Form Data Content-Type: ‘application/x-www-form-urlencoded’axi
2020-06-24 22:19:28
1698
原创 React 动画效果
React 动画效果使用react-transition-group安装:react-transition-groupnpm install react-transition-group --save在页面引入import { CSSTransition } from 'react-transition-group';要给那个元素添加动画,就给那个元素外面加上:in={} 这个值如果为true <CSSTransition in={this.state.isShow
2020-06-14 20:48:00
590
原创 Vue 实现下拉加载数据
Vue 实现下拉加载数据scrollHeight内容总高度offsetHeight 滚动条滚动的距离clientHeight当前页面能看到的内容高度思路:先获取当前页面中上面的三个值总高度=滚动条滚动的高度+cliebtHeight(要是想不到底部就加载数据可以写成)offsetHeight +clientHeight>=scrollHeight-n (n是任意数字)实现代码 // 为window对象添加一个滚动事件 window.addEventListener('sc
2020-06-14 11:20:02
1747
原创 React state 虚拟DOM Refs key
React state 虚拟DOM Refs keystate与props一句话说明他们直接的关系:一旦state或者props中的值改变,组件就会重新第哦啊用render方法虚拟Dom创建一个虚拟DOM需要这么写:React.createElement(‘li’,{onClick:this.addList.bind(this)},`${你好}`)但是我们更多的是用语法糖写:<li onClick={this.addList}>你好</li>二者的效果是一样的
2020-06-12 00:00:48
287
原创 React PropTypes 的使用
React PropTypes 的使用参考:https://react.docschina.org/docs/typechecking-with-proptypes.html在所使用 PropTypes 的页面中引入 ‘prop-types’;如果你是用脚手架创建的项目就不用下载这个包,直接引用就行import PropTypes from 'prop-types';1. PropTypes 提供一系列验证器,可用于确保组件接收到的数据类型是有效的2. 通过类型检查捕获大量错误3. PropT
2020-06-11 13:22:41
2238
原创 前端基础面试题
var 声明一个变量,那么这个变量就属于当前的函数作用域,如果声明是发生在任何函数外的顶层声明,那么这个变量就属于全局作用域。 let 声明的变量具有块作用域的特征。在同一个块级作用域,不能重复声明变量。let 声明的变量不存在变量提升,换一种说法,就是 let 声明存在暂时性死区(TDZ)。 const 定义的变量,一旦定义后,就不能修改,即 const 声明的为常量。
2020-06-11 10:49:24
162
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人