- 博客(60)
- 收藏
- 关注
RSS订阅原创 vue input每次输入一个字符后自动失去焦点 问题
问题：我在输入框输入的时候，每输入一次，输入框就自动失去焦点了。ps：实现的功能是，一个列表组件，每个对象中都有一个input输入框。<div class="addTags" v-for="(item,index) in list" :key="item.title"> <input type="text" v-model="item.title"> </div>原因问题在于:key=‘item.title’，input数据也通过v-model="i
2022-05-06 17:45:26
3383
3
原创 CSS实现单行文字居中，多行文字居左
直接上代码：<div class="content"> <span class="text">撒过撒东哥撒东哥的撒过的撒个傻大个快乐；拉就拉；dosage；阿斯顿就啊了；感觉；撒东哥教练说老大格力开关书记</span></div><style>.content{ text-align: center;}.text{ display: inline-block; text-align: left;}&
2022-03-04 17:50:21
312
原创 vue封装组件3种方式
在package.json中配置打包路径：1、在scripts中定义打包指令；指令说明： --target lib 关键字 指定打包的目录–name 打包后的文件名称–dest 打包后的文件夹的名称例如：“sf_common_build”: "node build/build.js --target lib ./src/ui/index.js --name qf-ssf --dest com_ss3种方式：1、npm本地file引用：在项目控制台下输入 npm install …/com
2021-08-14 15:34:19
2920
原创 微信小程序星级显示评定 支持3.3颗星
直接上代码：.wxml<view class="stars"> <view class="star" wx:for="{{stars}}" wx:key="index"> <!-- 整颗星星显示个数 --> <view class="icon_red" wx:if="{{index < int}}" style="width: 100%;"> <image src="{{item.bgfImg}}">
2021-03-17 11:02:11
230
原创 小程序scroll-view使用scroll-into-view定位
问题场景：如下图所示，是一个横向导航滑动菜单，要求进入此页面时，自动定位在所在的位置。方法：使用scroll-view里面的scroll-into-view实现实现原理即初始化的时候根据前一页传过来的数据来给scrollIntoView进行赋值，页面会与下面遍历的数据中id值做对比，自动定位到选中的位置注：scrollIntoView值为某子元素id（id不能以数字开头）具体用法.wxml中 <scroll-view class="scroll-view_H" scroll-x="
2021-03-09 15:42:51
3968
1
原创 vue项目 在移动端 返回上一页 空白
问题：vue的项目 在iOS内嵌中运行时， 返回上一页 页面上半部分出现空白！但点击或者滑动，页面就回复正常了。原因：由于返回后无法将 body 的高度拉开，使得遮住，触发轻点击，方可消除遮罩针对此问题。html、body都是100%，#app撑起了父元素的高度，但是浏览器默认的滚动scroll并不是#app，而是body。某些因素，造成返回history 后，无法复原，为此，我们将#app 进行了绝对定位，并让它重新成为 scroll 的对象，从而解决问题网上解决方案：html,body{
2020-11-20 11:24:13
1137
原创 Vue项目中input标签提交图片，音频到阿里云
1、Vue安装ossnpm install ali-oss2、新建js文件alioss.js 内容如下（可直接复制）var OSS = require('ali-oss')export function client () { var client = new OSS({ region: 'oss-cn-hangzhou', accessKeyId: 'ID 运营会给你', accessKeySecret: '密钥 运营会给你', bucket: '阿里云
2020-08-13 08:57:46
233
原创 vue中父组件改变子组件中的数据data
需求：在父组件的一个事件可以改变子组件中的 openData 的值变为 true。废话不多说，直接上代码：父级页面：<template> <div> <div @click="changeChild">按钮改变子组件数据</div> <children ref="childrenDom"></child...
2020-05-08 14:29:06
3268
1
原创 Vue 项目 页面主题颜色，字体颜色由后台返回数据控制
**需求：**同一个页面，可以根据后台返回的颜色值，改变页面的色调方式无需多言 直接上代码<template> <div class="theme" :style="colorProps"> <div class="btn"> <div class="class1">我的字体颜色是红色的...
2020-04-10 19:14:27
2677
2
原创 swiper在移动端中的应用
**1、vue swiper回调函数内传值到vue数据内**vue swiper回调函数内传值到vue数据，不能直接用this，因为this指向的是当前swiper，所以需要在data内 定义self指向this如下：data() { let self = this return { currentIndex: 0, swiperOption:{ on: {...
2020-04-07 17:38:30
998
原创 html标签中meta属性设置
其中http-equiv属性主要有以下几种参数：1、Expires(期限)<meta http-equiv="expires" content="Wed, 20 Jun 2007 22:33:00 GMT">2、Pragma(cache模式)说明：禁止浏览器从本地计算机的缓存中访问页面内容。用法：＜meta http-equiv=“Pragma” content="no-...
2020-04-07 17:17:46
222
原创 html微信网页字体被放大问题
问题：某些机型（基本是安卓的低版本机型）在微信中打开链接html，页面字体巨大原因：1、一种情况是，该手机设置了字体大小，为超大字体；2、其他（暂不知）解决办法：<script>(function(){ if (typeof(WeixinJSBridge) == "undefined") { document.addEventListener("W...
2020-04-07 17:01:04
1331
原创 Vue 中监控img加载完毕事件
使用场景：当某一个页面中有2个以上的图片，然而有一个事件（比如 截屏）是必须要在页面中的图片都加载完了之后才可以去执行的！否则的话，就不会截到我们想要的屏幕原理：img的load事件<img @load=‘loadImg’ src="" />做法：以下是步骤：1、把页面中的所有图片都加上@load事件；2、编写事件：（变量加一，判断条件去执行方法）loadImageO...
2020-03-31 20:06:15
16978
1
原创 vant 组件的（circle）兼容性问题
本来要写一个音频播放的倒计时圆圈⭕️动效；很庆幸，vant里面有提供！贼开心然后就算音频时间，对应圆圈转动速度，很完美的写完了！可是第二天测试人员给我反馈说，iOS11的手机进度圆圈错位了！ what 什么鬼 为什么为什么这也没有什么的单独设置啊结果一顿百度啊！最终找到了答案谁能想到和全局设置字体样式有关， postcss-pxtorem在node_modules —— p...
2020-03-31 19:56:12
3996
2
原创 JS实现浏览器点击下载图片
点击下载图片分两种：1、一种是同源地址图片（也就是本地本项目中的图片）；2、另一种是不同源的图片；（不同域名下，比如阿里云 七牛云上的图片）下面我们就具体说一下这两种图片下载的方式：第一种（同源）下载：利用a标签下载， a标签有一个download的属性，添加了该属性，a标签将直接下载文件，并根据download属性的值设置下载文件的文件名，不为download属性设置值则文件将以默认...
2020-03-14 12:04:32
6041
4
原创 图片四周有空隙解决办法
解决办法有以下几种：亲测有效方法一：将img设置为block;这个基本可以解决img和div下方的缝隙问题。简单快捷，推荐方式二：设置父级div的font-size:0;方式三：设置外层的div的line-height:0...
2020-03-06 16:16:17
643
原创 微信公众号H5页面：禁止分享操作
H5页面在微信端的禁止分享（分享到朋友圈，好友）本次我们说两种实现方式：第一种是正确无争议保证正确，第二种简单可用，但不保证语法正确（自己刚开始使用的，没问题）！好了，现在我们开始说第一种方式：步骤一：安装jssdk全局安装： npm install weixin-js-sdk步骤二：封装 config配置在utils中创建一个wxForbidShare.js，内容如下：（可粘贴...
2020-02-16 11:38:07
9354
4
原创 vue 使用aes加密的步骤详解
1、在项目中安装组件： npm install crypto-js --save-dev2、在utils文件夹中新建一个crypto.js文件内容如下：（小伙伴们复制即可）/** * 工具类 */import CryptoJS from 'crypto-js'export default {// 加密 encrypt (word, keyStr) { // word, keySt...
2019-12-12 20:53:00
515
原创 Vue等待父组件请求数据返回后，再渲染子组件
问题描述：在写页面过程中有时子组件需要获取到父组件请求获得的数据后才能显示（比如：百度富文本的引用，回显数据的时候）想了很多办法 最后看到这种比较可行，方便<UE :defaultMsg=activityForm.introduction v-if="activityForm.introduction" :config=config ref="ue"></UE>及...
2019-11-24 14:55:34
7388
3
原创 html2canvas截图时 不能使用跨域图片的解决方案
解决方案为三个地方，三个地方缺一不可：1、html2canvas.js源码中修改两个地方：(如果是Vue项目在：node_modules—html2canvas—dist—html2canvas.js) case 2: Logger.getInstance(this.id).debug("Added image " + key.subst...
2019-11-24 14:16:49
2704
3
原创 Vue中引用百度富文本打包后报 路径static路径找不到
好不容易Vue项目引用百度富文本成功了，在测试环境都没有任何问题，于是就打包提交项目吧！我天 问题出现了，报百度富文本的引用包报错，找不到路径！一脸懵，百度各种方式都试了 都不对症，，，最后想到了引用文件的地方修改了一下相对路径 就完美解决了 记录一下：...
2019-11-24 14:00:48
565
原创 vue项目引入highcharts方法，以及遇到的坑
vue项目引入highcharts步骤：第一步:安装 highcharts 命令如下：npm install highcharts --save第二步：编写公用的组件： 在src ------> components (组件目录下)新建 charts.vue 页面代码如下：<template> <div class="x-bar"> ...
2019-11-01 15:33:34
11274
6
原创 elementUi里面的el-input框有时候无法输入的问题
项目中有出现需要输入内容的时候，input框有时候会无法输入进去，感觉像是被禁用了！代码如下:<el-input type="textarea" v-model="ruleForm.text"></el-input>发现elementUI中@input事件可以拿到当前输入的值，问题找到了，视图没有更新的问题解决方法 this.$forceUpdate()即改为...
2019-09-23 16:58:37
9211
9
原创 Vue img图片加载不出来或加载错误显示默认图片
之前写页面考虑不到什么占位图，这次UI设计都有一个占位图，不得不逼着自己更准确的考虑图片显示错误时的情况！1、期初，想着用背景来填充，如果图片显示则就自然而然的把背景图遮盖住了，可实际情况是，如果后台返回的图片有误不显示时，背景图上面还是会有一个破损的小图片显示不美观；background: url("../../../static/images/avaterSpaceMap.png");b...
2019-07-29 16:28:26
12557
原创 axios请求 解决post后台接收不到数据问题
问题描述：axios请求 get请求没有问题，但是post后台返回200但是就是接收不到数据；第一步：安装qsnpm install qs第二步：在封装接口中引用并在post中运用；import axios from 'axios'import qs from 'querystringify'export function post (url, data = {}) { r...
2019-07-25 21:46:49
837
原创 移动端调试工具（eruda）
在页面中引入eruda.min.js并执行方法<script src="http://eruda.liriliri.io/eruda.min.js"></script><script> eruda.init();</script>注：Vue里面不想npm安装的话，直接在index.js里面添加上面这一段js也可以。效果如下...
2019-07-18 16:16:35
488
原创 input输入框不能选中
不论使用框架vant还是其他什么框架的input使用， 今天出现怎么都不能聚焦选不中的问题，之前插件都是用过的啊，不知道突然怎么了，不好使了！后来愣了半天，终于百度到是因为我有一个全局属性所导致的问题。心里那个恼火啊！* { -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none;...
2019-07-16 19:47:59
10071
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人