qq_39598092的博客

原创 elementui 时间和select等带下拉框的 会出现滚出弹出框 层级过高

elementui 下拉框层级太高

原创 uniapp转微信小程序后 video标签的一直出现弹出框 关不掉的问题

我是在video的@timeupdate中写的 大于10分钟就弹出提示框（包括滑动） 这时会多次请求这个方法 因为这个方法是看视频时间变化 所以代码：视频标签<video :src="curEducationDetail.vedioUrl" id="myVideo" class="videoContent" :show-center-play-btn="false" show-loading @timeupdate="videoTimeUpda

原创 uniapp小程序 用@touchmove.stop.prevent=““阻止滑动穿透 但是会影响弹出层内容滑动

<!-- 弹出框 --><view class="popCss" :style="{'top':curTop+'px'}" @touchmove.stop.prevent="" v-if="isPop" @tap="curTab = null"> <!-- 全部分类 --> <view class="typeOne typeOneText" v-if="curTab==0" @tap.stop=""> <!-- 左侧大.

原创 Aliplayer 阿里云播放器自定义视弹出框 包含全屏

<div class="prism-player" id="player-con" :style="{overflow:'hidden',width: '795px',height:'100%'}"></div> <!-- 浮层 --> <script type="text/template" id="endPreviewTemplate"> <!-- 所有弹出框的内容都放在vip_limit_content这个里面 -.

原创 elementUI中select与tree合用时，反显数据到input后，第一次点击checkbox不好使

下面图一是反显显示页面：下面的图是第一次点击时的页面：代码：<template> <div class="hello"> <el-select clearable filterable multiple v-model="value" @change="selectChange" > <el-option :value="mi

原创 子组件等父组件的接口请求完成之后做操作

说明：通过、保存、作废、环境申请同意按钮是写在子组件中，在上面的页面中引入使用的子组件中的按钮代码：<a-button type="primary" @click="visible = true">环境申请同意</a-button><a-modal title="环境申请同意" :visible="visible" :confirm-loading="confirmLoading" okText="确定" ..

原创 ant design vue table中展示的dataIdex相同时

列表数据展示用户名称和邮箱，但是他们是在列表数组数据中的task对象中，如果dataIndex都写task页面就会报错：1、可以改成下图的例子，在表格列的配置columns中修改，这样也不用改标签中的代码：2、还有一种方法就是需要改html的代码：...

原创 判断页面是首次进入 还是刷新

window.performance.navigation.type === 1页面跳转的时候 用this.$router.push不管用，后只能改成<a :href="'/tasks/start-process/' + task.TaskId" v-if="canStartProcess(task)">发布</a>这种跳转方式。注意：我没有测试兼容问题，如果出现兼容问题，小伙伴可以留言共同探讨一下。...

原创 js utc时间格式（2020-11-27T02:58:41.000000Z）转换成北京时间

首先UTC时间格式先转换成 （时间 Fri Nov 27 2020 10:58:41 GMT+0800 (中国标准时间)）这种时间格式 之后就对该时间串进行获取年月日时分秒 之后对获取的时间进行拼接timeChange(UTCDateString) { if (!UTCDateString) { return '-'; } function formatFunc(str) { return str > 9 ? str : '0' + str }

原创 ant design vue中想更改a-tree-select的数据键值对名字

首先可以看看https://www.antdv.com/components/tree-select-cn/中的replaceFields 这个参数 你可能就有灵感了 就不用看我废话了// 引入树形结构 replace-fields这个后面就是你要改的格式 value和title是官网给的数据结构的键值对 而name和tit则是要替换的键值对 这样就不会报错了 否则会一直报循环不到键值对<a-tree-select v-model="value" style="wid.

原创 mock创建数据接口

1、在mock文件夹中创建一个js文件，在文件中创建数据并mock接口import Mock from 'mockjs'// 设置全局延时，没有延时的话，有时候会检测不到数据变化Mock.setup({ timeout: '300-600'})Mock.mock(/\/testlist/, 'get', Mock.mock({ id: '@id', // 随机生成id name: '@cname', 'phone|1': /^1[0-9]{10}$/, // 生成数字1＋10位数字...

原创 用elementUI表单验证 只对某一项单独进行验证或取消验证

//验证this.$refs.examine.validateField("barCode")//取消验证this.$refs.examine.clearValidate('barCode');

原创 用touchend写的点击事件 弊端

首页 点击顶部是可以跳转到搜索页面的搜索页面页面操作是 我点击首页的经典 跳转到经典的列表页面当我点击经典列表页面的返回按钮时 问题出现了 会直接跳转到搜索页面 查找了很多的资料 后来我把代码中touchend换成click就没有这个问题了touchend和click的区别 可以看https://blog.csdn.net/lululove19870526/article/details/44345759所以touchend还是慎用...

转载 为什么给元素设置scrollTop不起作用？

今天要给一个元素添加一个向上滚动的效果，于是马上用到了scrollTop()。比如说是下面的页面结构：#wrapper的高度是屏幕的可见高度，它在页面中不会随着页面的滚动而滚动。.scroll-fixed-count是#wrapper的子元素，它的高度很高，要远远超过#wrapper的高度。现在我想在某个事件触发之后，让.scroll-fixed-count向上移动100px，于是我用： 1 angular.element('.scroll-fixed-count')

转载 点击位置滚动到浏览器顶部

let top=$('#swiper')[0].offsetTop-44;$("#app").scrollTop(top);我用的是最外层的App 想要控制位置 控制的内容必须有滚动条https://www.cnblogs.com/yaoning/p/8710357.html

原创 vue项目把软键盘收起 input失去焦点

html：<input type="text" placeholder="请输入要搜索的内容" v-model="value" @keypress="keyFn" ref="input1">js:keyFn(e) { if (e.keyCode === 13) {//软件盘上的确认按钮 this.$refs.input1.blur(); } },...

原创 git 回退版本

操作步骤如下：1、在gitlab上找到要恢复的版本号，如：139dcfaa558e3276b30b6b2e5cbbb9c00bbdca962、在客户端执行如下命令（执行前，先将本地代码切换到对应分支）：gitreset--hard139dcfaa558e3276b30b6b2e5cbbb9c00bbdca963、强制push到对应的远程分支（如提交到develop分支）gitpush-f-uorigindevelop...

转载 阻止a标签跳转

一、在html中　　1. <a href="javascript:;"></a>　　2. <a href="###"></a>二、在Jquery中 1. $('a').click(function (e) { e.preventDefault(); }) 2. $('a').click(function () { return false; })...

原创 img标签引入图片不变形 背景图不变形 等比例缩放图片

img标签img{ object-fit: cover; object-position: top;}背景图不变形.bg{ background-image: url(imgUrl.jpg); background-size: cover;}

转载 解析Vue单页使用keep-alive页面返回不刷新的问题

使用vue单页开发项目时遇到一个很困惑的问题：在列表页点击一条数据进入详情页，按返回键返回列表页时页面刷新了，用户体验非常差啊！！！使用<keep-alive>解决这个问题，下面是我的使用心得。<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。首先在App.vue页面上有下面一段代码，我们都知道这是页面渲染的地方...

原创 ES6 Promise 用法讲解

Promise是一个构造函数，自己身上有all、reject、resolve这几个眼熟的方法，原型上有then、catch等同样很眼熟的方法。那就new一个var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log('执行完成');...

转载 详解Vue调用手机相机和相册以及上传

<template> <div> <input id="upload_file" type="file" style="display: none;" accept='image/*' name="file" @change="fileChange($event)"/> <div class="image-item space" ...

转载 Vue之引用第三方JS插件,CKPlayer使用

前言：不管是VUE还是Angular，有时候我们需要使用到一些js插件，但是的源库中并没有相应的插件包，这个时候我们需要如何引入并且使用呢？这个问题其实非常简单，接下来我以VUE为例写给大家介绍一下如何加载第三方js插件。备注：今天写这篇文章是在是出于同事的老婆的弟弟的老婆学起了前端vue（关系有点绕），所以问到我这个问题，我就总结一下，其实她问的是vue中如何使用ckplayer插件。所以...

转载 NodeJs/Vue项目中对process.env的使用

NODE_ENV获取环境变量let env = app.get('env')let env = process.env.NODE_ENV//默认 NODE_ENV 为环境变量名称//可自行在 process.env 对象下定义需要使用的变量,在项目中可以根据//不同的 env 值设置 defaultUrl 或者其他值在webpack 打包的项目/Node JS项目中，可以安装 ...

转载 uniApp plus初始化原理及plus is not defined，mui is not defined 错误汇总

关于plus是哪里来的问题plus是5+Runtime的内部对象。就像chrome浏览器里有chrome.开头的一些对象方法，5+runtime内部内置了plus对象。因为plus和mui不一样，plus是引擎级别的，不需要前端框架。而mui是前端框架，所以是要引入mui.js才能使用的。不要在没有plus和mui的环境下调用相关API普通浏览器里没有plus环境，只有HBui...

转载 unApp 小程序开发如何实现视频或音频自定义可拖拽进度条

　　程序原生组件的音频播放时并没有进度条的显示，而此次在我们所接的项目中，鉴于原生的视频进度条样式太丑，产品要求做一个可拖拽的进度条满足需求。视频和音频提供的api大致是相似的，可以根据以下代码修改为与音频相关的进度条。wxml的结构如下:<video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodown...

转载 【ElementUI】日期选择器时间选择范围限制

ElementUI是饿了么推出的一套基于vue2.x的一个ui框架。官方文档也很详细，这里做一个element-ui日期插件的补充。　　官方文档中使用picker-options属性来限制可选择的日期，这里举例子稍做补充。　　单个输入框的　　组件代码：<el-date-picker v-model="value1" type="date" ...

原创 vue项目中阻止某个接口请求

let CancelToken = axios.CancelToken;let self = this;let urlP=`https://event.csdn.net/logstores/csdn-pc-tracking-page-exposure/track?${params.titleSymbol}`;//接口路径 因为是get请求 我就直接这么写了 axios.get...

原创 uniApp 内嵌uniApp H5项目中的上传图片压缩

父组件：引入子组件<prompPhoto :showPhoto="showPhoto" :photoOptions="photoOptions"></prompPhoto>方法接受子组件传过来的压缩图片路径 从而对头像进行修改changePhoto(){ let _this = this; this.showPhoto = true; ...

原创 uniApp H5项目中的压缩图片

子组件：选择相册还是拍照 并对相片进行压缩 成功之后把路径通过sFn方法传给父级，父级通过fFN方法走借口，对头像进行修改<view class="main"> <view class="item" @tap="albumPhoto"> <text>从手机相册选择</text&g...

转载 基于VUE和JS手写的移动端H5自定义音乐播放器(直线进度条和圆形滚动进度条)

1. 先上效果图，可以嵌合在H5移动端页面，可拖拽点击颜色进度条的小白色圆圈快进~下面就是圆形的进度条哦~(请尊重劳动成果，转载请注出处~)P.S（在这里说下圆形进度条的效果，一开始也是用canvas，但是发现canvas不支持淘宝适配方案，于是想着自己写一个，思路是控制圆边的显示。后来忽然看到园友--JR93的一篇文章思路一下子彻底就打通了。用度数逐步增加来控制圆边的显示比控制周长来得好...

原创 elementUI实现表格树形结构

效果：html代码：<el-table :data="tableData" style="width: 100%" :row-class-name="getRowClassName"> <el-table-column type="expand"> <template slot...

原创 vuex中想写路由跳转

首先需要在js文件中引入routerimport router from '../../router';引入之后 就可以在方法中使用了router.push({path: '/login'})

原创 js多行省略兼容常用浏览器

<template> <div id="app1"> <p ref="word" :id="'overflowhidden'+index" v-for="(item,index) in data">{{subWord('overflowhidden'+index, 3, item)}}</p> </div>&...

转载 js async await 终极异步解决方案

既然有了promise 为什么还要有async await ？ 当然是promise 也不是完美的异步解决方案，而 async await 的写法看起来更加简单且容易理解。回顾 PromisePromise 对象用于表示一个异步操作的最终状态（完成或失败），以及其返回的值。Promise对象是由关键字new及其构造函数来创建的。构造函数会，把一个叫做“处理器函数”（executo...

原创 uniApp调用软键盘中的搜索（确认）键

<input confirm-type="search" @confirm="confirm" type="text" placeholder="请输入关键词" v-model="searchCont"/>methods:{/* 键盘上完成的事件 */ confirm() { //搜索的代码 },},...

原创 uniApp 旧版本更新新版本时 相应引入icon的方法也变了

//引入import uniIcons from "@/components/uni-icon.vue";//声明components: { uniIcons, },//使用<uni-icons type="trash" size="22" color="#666666"></uni-icons>//或者<uni-icons type="ar...

原创 html页面中 想要table超出宽度下方出现横向滚动条 数据少时制动适应宽度平均分剩下宽度

最开始只写了 最大值max-width和最小值min-width 但是怎么弄页面只有3列数据的时候宽度就是153px；后来加了一个width：100%；就数据少的时候就自适应宽度了数据少的时候 显示...

原创 uniApp去掉默认的title

原创 uniApp image标签引入图片想要偏移不要用padding 会出现 图重影问题 最好换成margin