LzzMandy的博客

1、出现场景：在浏览器记住密码自动填充后，会出现这个蓝色背景，如下所示：2、解决方式：给input组件加一个box-shadow属性，设置内置阴影！值要大于你的input高度才能完全覆盖住以下是使用uniapp框架的代码，如下：<view class="login-info"> <view class="item"> <input class="clear-bg" name="username" type="text" p.

DateTimePicker 日期限制在某个范围内

效果如下：<template> <div class="box"> <div class="all"> <input type="checkbox" id="all" v-model="checked" @change="doChange($event,'0')" > <label for="all">全选</label> </div> <div class="box-item.

需求：9个国家，每列展示5个，竖向排列1、分列对9个国家数组进行截取handleCountrysList(num,countryList.length)，划分每列显示的数据this.countryList=[ {cid:'1',cname:'中国'}, {cid:'2',cname:'美国'}, {cid:'3',cname:'法国'}, ...

RUGUO element-ui 组件el-image预览功能，预览关闭后，再次打开时，记录了上次预览的顺序，复现步骤：有4张图分别是 A B C D，点击B图，预览右箭头操作B->C->D，关闭，点击B，此时看到的图片是D，我们需求是看到B原因：关闭时，没有把index置为0解决：1、修改node_modules/element-ui/packages/image/src/image-viewer.vue的hide方法，index=0，发现没效果2、修改的位置不..

vue-cli2开发的H5移动端，嵌入到app中，问题如下：1、IOS端，输入框点击时，定位不到，需要多点几次才能获取到焦点2、手动定位时不灵敏，如上图所示解决方法：万能的百度，发现是FastClick导致的，按大佬们的解决方案尝试解决1、在main.js中引用fastclick的后增加如下代码import FastClick from 'fastclick'//FastClick的ios点击穿透解决方案FastClick.prototype.focus = func...

需求实现web百度离线地图(v3.0)开发项目环境Vue-cli3，目录如下，注意：需要把地图相关的文件放在public下，vue-cli2需要放在static下！！！参考主要参考下面两位大佬的文章vue-cli2+百度地图（v2.0）https://blog.youkuaiyun.com/PGguoqi/article/details/97127746vue-cli2+百度地图（v3.0）https://blog.youkuaiyun.com/JavaBigADog/article/detai.

1、使用场景：请求的地址有共同的前缀，比如http://168.6.6.6:8080，这时候可以在入口文件main.js中配置成全局的参数// 方法:挂载urlVue.prototype.serverUrl = "http://168.6.6.6:8080"; // 生产环境2、使用方式：直接在***.vue中this.serverUrl使用uni.request({ url: this.serverUrl + '/list', method: "POST", ..

1、协议不同2、域名不同3、端口号不同

1、v-bind 只能实现数据的单向绑定，从 Model自动绑定到 View， 无法实现数据的双向绑定<input type="text" v-bind:value="msg" style="width:100%;">data: { msg: '使用 v-bind 时 input 中数据变化，msg 不会同步变化！'},使用 v-bind 时 input 中数据变化，msg 不会同步变化2、使用 v-model 指令，可以实现 表单元素和 Model 中数据的双向.

1、视图如下： 2、 组件的引用如下:<template> <view class="content"> <hi-tabs v-model="tabIndex" :tabs="tabs" @input="doInput"></hi-tabs> <view v-if="tabIndex==0"> 此处显示全部数据 </view> <view v-else-if="tabIndex==1"&g...

1 高德官网相关知识点：高德官网给出的异步加载的方式说明：https://lbs.amap.com/api/javascript-api/guide/abc/loaddemo:https://lbs.amap.com/fn/jsdemo_loader/?url=http%3A%2F%2Fwebapi.amap.com%2Fdemos%2Fload%2Fload2.htmljs使用方式：<script type="text/javascript"> window.init

原数组如下：sourceArr:[ {month:"2020-6",id:"001",name:"lzz1"}, {month:"2020-6",id:"002",name:"lzz2"}, {month:"2020-6",id:"003",name:"lzz3"}, {month:"2020-6",id:"004",name:"lzz4"}, {month:"2020-5",id:"0011",name:"lzz11"}, {month:"2020-5",id:"0012",

方法1：使用this.$setlet list = {}; for(let key in this.listData){ this.$set(list,key,this.listData[key])}方法2：使用this.$forceUpdate强制刷新let list =this.listData;this.$forceUpdate(); 方法3：JSON转换let list=JSON.parse(JSON.stringify(this.listData)

插槽<slot>主要实现分发，当父组件引用带有插槽的子组件时，引用处的子组件内如有内容，当组件渲染的时候，<slot></slot> 将会被替换1、默认插槽的使用：slot-one组件：<template> <view> <view>我是子组件</view> <slot&gt...

问题描述：图片预览功能包含在一个通用组件中，循环这个组件，图片无法预览，需要刷新才可以。

功能：展示默认的分数， 点击几颗星星，展示几分<template> <div class="form-content"> <div> <span class='name'>质量分<span class="required"></span></span> ...

功能描述：1、左边【一级、二级、三级】字样是不能拖拽的，【item1、item2...】可以拖拽2、左边items位置固定，只能向右拖拽，不能上下拖拽，如：item7从左边拖到右边，左边的item7消失，右边增加item73、右边items可以自由拖拽，但不能向左拖拽4、右边items可以删除，如：点击item7的“×”，右边item7消失，左边item7出现5、重置时，页...

功能描述：“满”、“折”、“特”均为图片实现方式：1、数据json格式 "supports": [ { "type": 0, "description": "在线支付满28减5" }, { "type": 1, "description": "VC无限橙果汁全场8折" ...

功能描述：当DPR=2，显示2X图片；当DPR=3，显示3X图片实现方式：1、dom结构 <div class="title"> <span class="brand"></span> <span class="name">{{seller.name}}</span> &lt...

<div class="tab">1像素边框实现</div>1、1像素边框样式可以在多个地方使用，可以用方法的形式实现，.tab样式如下：<style lang="stylus" rel="stylesheet/stylus"> @import "./common/stylus/mixin.styl" .tab display: fl...

样式中出现的&表示父元素.tab-item flex: 1 text-align: center &:nth-child(1) color:red & > a font-size: 14px &.active color: rgb(240...

功能简介：1、初始化时，页面默认加载6个组件2、每次滚动到最低端时，加载6个组件3、当组件<6个时，滚动不起作用；>6时，滚动到底再加载；全部加载完毕后，滚动时不再加载任何组件实现方法：1、dom结构，给div绑定了滚动方法gotoScroll，注意：这样绑定的方法，不能销毁！！！<div class="op-bottom-echarts" ref...

one.vue界面显示每项数据，点击任意一项，跳转到detail.vue界面显示该项的详情路由地址地址：http://IP:port/#/one ——>http://IP:port/#/detail/3关键点：1、在路由文件中导入组件import Detail from './views/analysisWC/syntheticalAnalysisWC/detail....

<div class="selector"> <img src="/images/one.png""/></div>用上面这种方式时，图片会显示出来，但有时间我们需要根据一个标志来设置具显示的哪一张图片，如下：//dom 部分<div class="selector"> <img :src="flag?...

1、父组件通过绑定方法，向子组件传递方法<com2 @func="show"></com2> func为向自组件传递的方法；show为父组件方法；2、子组件通过向该方法传递参数，来实现向父组件传值自组件通过 this.$emit('func', this.sonmsg)，把参数传递给func方法注意：this.$emit('方法名', 唯一参数)，...

this.$route 和 this.$router ：this.$route是路由【参数对象】，所有路由中的参数， params, query 都属于它data(){ return{ id:this.$route.params.id // 一加载就调用 }}this.$router 是路由【导航对象】，用它 可以方便的 ...

功能简介：1、左边绿色显示内容简介，右边粉色显示每项的详情；2、 点击A项，出现对号图片，同时右侧内容为A的详情；3、继续点击B，图片下滑到B项的中间位置，右边显示B详情，以此类推；4、滚动时，图片消失；5、滚动后，再次点击C，图片出现在C的右侧中间，右边显示C详情；关键点：1、给滚动条注册监听事件，用于获取滚动条的位置；mounted() { ...

功能说明：1、上部分tab 标签是一个组件component:{ tabCom}；2、下部分查询条件是一个组件component:{ searchCom }，而输入框作为一个单独的组件component:{ inputCom }嵌套在search组件中；3、在不同的tab 标签下，输入框的宽度不同，如【通讯录】下100%，【物资库】下50%界面dom：1、通讯录、物资库d...

1、DOM结构：<div id="app"> <input type="text" v-model="firstname"> + <input type="text" v-model="lastname"> = <input type="text" v-model="fullname"></div>...

1、外部容器display：flex； 可以设置的6个属性，如下：flex-direction 元素排列方向 flex-direction: row || row-reverse || column || column-reverse 元素排列方向: (从左往右)默认 || (从右往左) || (从上往...

<div ref="vari" @click="change">{{vari}}</div>data(){ return{ vari:"初始值", }}change(){ let x=100 let y=100 this.$refs.vari.style.transform=`translate(${x...

返回元素的大小及其相对于窗口或者文档的位置

功能简介：1、主页面路径mainpage、添加界面路径addpage2、默认显示全部tab，只有一个添加按钮3、点击添加按钮，跳转到添加界面，添加新数据后，返回原界面，新添加的数据即时显示出来关键点：1、利用缓存存储新添加数据的创建时间、专家类型2、当路由变化时，判断缓存数据是否变化，变化则触发下拉刷新事件；否则，不进行任何操作实现步骤：1、在添加界面，点击提交按...

VUEX的一般结构如下：import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)var store = new Vuex.Store({ state: { // 相当于data }, mutations: { // 相当于methods }, getters: { //相当于filt...

业务逻辑描述：获取图片成功时，图片展示，可点击进行预览；获取失败时，图片显示默认的，不可点击不能预览； 点击哪张图片，预览时这张图片显示在第一个，点击左右键可滑动查看图片；成功时： 失败时：预览时：预览图片组件 showPreview.vue 实现技术点：图片的高度固定是82px，宽度需要根据实际情况决定，这时候可以写一个v-width指令，用来设置图片的宽度，可以...

1、对象：<h1 v-for="(item,index) in userInfo" :key="index">{{item}}</h1>data() { return { userInfo: { id:"1", name:"lucy" ...

功能简介： 初始化时，只有“类型”有数据，“分类”、“子类”均无数据 点击“类型”，触发方法，获取“分类”数据，“子类”仍无数据 点击“分类”，触发方法，获取“子类”数据 “类型”、“分类”、“子类”是顺序的单向关系，前一个影响后一个 点击【重置】，返回初始化状态 实现步骤： 1、dom结构、data数据，注意在“类型”项设置触发方法funChange : this....

需求描述： header.vue页面需要把背景色设置成统一的颜色 #00bcd4，这个颜色在整个项目中被多次使用，这时候可以在src\assets\styles\下新建一个通用样式属性文件varibles.styl，所有通用的样式均可以放在这里按需取用 实现步骤： 1、在src\assets\styles\下新建一个通用样式属性文件varibles.styl2、heade...

前端界面加载的时候，为防止界面抖动，可以用如下设置进行占位.zhanwei{ overflow: hidden; width:100%; height: 0px; padding-bottom: 25%;}padding-bottom: 25%;代表按宽高比4:1进行占位，这里的宽代表的是父元素的宽度，高代表的25%*父元素的宽度的值应用实例：...