肖帅的博客

通过iframe嵌入的第三方系统父子系统的通信问题

处理unapp的input文本框foucus后获取不到键盘的keyCode和鼠标光标放在文字前面的问题

vue 视频 时间进度条组件有些视频是以视频流的形式进行渲染的，没有视频滚动条，所以就写了24h的时间组件组件已上传到npm上，npm i as-time-line下载安装即可，最少需要1.2.0版本https://www.npmjs.com/package/as-time-line1，安装npm i as-time-line -S2，引用，在vue里面的main.js中引入，添加代码如下import timeLine from "as-time-line";import "as-

视频的时间刻度组件

vue项目正式环境下(NODE_ENV = production)js打包成gz格式1，如下图所示，vue项目中的js会被打包成gz格式，项目默认情况下不是gz格式，需要前端进行配置2，打成gz格式包目的：可使压缩包更小一些，首次加载就快一些。（相对于默认情况下）3，配置打成gz包方法：3.1 在vue.config.js进行配置，（没有此文件可新增）3.2 需要 安装依赖包 compression-webpack-plugin 和 speed-measure-webpack-plugin (百

视频流

基于jQuery实现首页悬浮框，如下图所示1，在页面中引入jQuery.bay-window.js，jQuery.bay-window.js的代码如下：!function($){ /** * Description: jquery飘窗插件，可自适应浏览器宽高的变化 * Author: ddqre12345 * CreateTime: 2017.5.3 * param: args={startL:default, startT:default, angle:-Math.PI/

一，html2pdf—html页面下载pdf文件需求：html2pdf—html页面下载pdf文件使用的插件js是html2pdf.js，html2pdf官方链接地址，按照官方的说明，直接调用save方法就可以。var element = document.getElementById('element-to-print');var opt = { margin: 1, filename: 'myfile.pdf', image: { type: 'j

vue项目新闻消息向上滚动案例效果如下图所示：代码组件如下：<template> <div class="message-page"> <div class="msg-tit"> <div class="msg-top"> <div class="tit-word">消息通知</div> <div class="

ajax请求接口第一次失败无响应以后都成功问题案例说明：1，在谷歌浏览器上退出登录成功后 第一次调用接口会无响应，第二次调用正常。（mac电脑上会刷新列表）2，关于这个问题，找了好久没找到根本原因，使用postman调用接口正常本案例的解决方案：前端换标签，又原来的button标签换成span标签button是请求该接口的路径方法<!-- <button class="sp-st" @click="submitInvite('dialogForm')">发送</butt

uniapp项目使用onReachBottom函数实现请求下一页数据，使用onPageScroll函数获取页面滚动条的滚动高度一，需求：如下图所示，当滚动条滚动到一定位置时要将红色框内的内容放到最顶部并且位置固定。二，实现内容：①需要获取滚动高度②滚动条触底时可请求下一页的数据图片位置固定三，代码实现可使用uni app提供的页面生命周期方法onReachBottom和onPageScroll实现在onPageScroll 函数中，e.scrollTop可获取页面滚动高度使用onRe

####uni-app的基本使用基础部分：环境搭建页面外观配置数据绑定uni-app的生命周期组件的使用uni-app中样式学习在uni-app中使用字体图标和开启scss条件注释跨端兼容uni中的事件导航跳转组件创建和通讯，及组件的生命周期uni-app中使用uni-ui库项目：黑马商城项目uni-app介绍 官方网页uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/

vue项目注册全局方法可使用$on和$root结合使用本案例是在App.vue中注册了一个全局方法1，在App.vue中created()方法中注册一个方法this.$root.$on("appGuide",this.doGuideMethod);//注册一个全局方法在methods中定义doGuideMethod方法2，其他vue组件中可调用 this.$root.$emit("appGuide"); ...

vue自定义全局组件说明：本案例是封装的一个弹框页面，因为只想要一个遮罩，内容自定义。因为ElementUI上已经提供了一个弹框组件，但觉得elementUI的组件内容有点多，所有自己就封装了全局组件。自己封装的参考了elementUI组件的源码。主要步骤如下1，创建一个文件夹my-dialog2，在my-dialog文件夹下创建MyDialog.vue和index.js3，index.js需要引入MyDiloag并封装和抛出4，在main.js中引入index.js主要代码如下1, M

vue项目中keep-alive的用法vue项目中keep-alive的用法之一，直接在keep-alive标签中使用 <keep-alive> <personal-form @doPersonData="doPersonData" v-if="pageFlag"></personal-form> <company-form @returnBackMethon="returnBackMethon" v-else-i

vue 生命周期1，说一下你对Vue的生命周期的理解简单回答beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。keep-alive 有自己独立的钩子函数 activated 和 deactivated。复杂回答|生命周期发生了什么beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeDes

1，说说你对MVVM的理解MVVM是前端视图层的概念，主要关注于 视图层分离，也就是说：MVVM把前端的视图层，分为了 三部分 Model, View , VM ViewModelModel-View-ViewModel的缩写，Model代表数据模型，View代表UI组件,ViewModel将Model和View关联起来数据会绑定到viewModel层并自动将数据渲染到页面中，视图变化的时候会通知viewModel层更新数据2，Vue2.x响应式数据/双向绑定原理Vue 数据双向绑定主要是

vue项目ElementUI组件中el-upload组件与裁剪功能组件结合使用如下图所示，点击上传组件，选择文件后，会立马弹出图片裁剪功能组件的页面问题描述：1，在使用upload组件中，如果修改fileList中的内容，浏览器会报错2，获取上传的文件，传递给图片裁剪组件（在on-change中获取文件并传递个裁剪组件）3，要获取裁剪后的图片即File文件（将裁剪后的图片返回出去）4，获取到裁剪后的file调用上传的接口由于el-upload组件默认使用的是“选取文件后立即进行上传”，

vue项目添加图片裁剪组件功能如下图所示：1，安装命令如下npm i vue-cropper --save2，调用组件，引入vue-cropperimport { VueCropper } from “vue-cropper”;3,封装组件代码如下:cropper.vue<template> <div class="cropper_model"> <el-dialog title="图片剪裁" width="800px

vue 项目antDesign动态表单添加校验如下图所示1，在表单页面中，a-form-model-item 标签可嵌套2，使用prop传值时使用form表单定义的字段主要代码如下 <div class="form_area" v-for="(item, index) in form.domains" :key="index"> <a-form-model-item style="display: inline-block;text-align: le

Ant Design表单中添加动态属性并使用select组件案列如下图所示，这个表单页中的专业可以添加多条，在专业的第一个字段使用的是select组件，还要保证每条的数据不相互影响代码如下：<template> <div class="add-mem"> <div class="form-css"> <a-form-model :model="form" :rules="rules"

使用el-upload图片上传校验图片的width与height<el-upload class="avatar-uploader" ref="haiRef" :action="uploadHaiPic" :sh

vue项目使用el-table实现无限滚动案例如图所示，该案例是一个弹框内容注意：属性可参考ElementUi中的InfiniteScroll 无限滚动，当数据不再继续请求接口时可用“infinite-scroll-disabled”属性判断是否继续加载步骤如下：1，前端安装“save el-table-infinite-scrol”cnpm install --save el-table-infinite-scroll2，全局引用，在main.js中引用（vue3项目）import

二级弹框案例，如下图所示<template> <div class="zw-dialog"> <div class="zw-top"> <p class="zw-word">请选择职位</p> <div class="zw-in"> <!-- <input class="zw-put" v-model="jobKey

js处理文本内容显示6行，超出6行出现显示更多按钮，对于网上说的css样式处理，基本上都是超出6行使用…去处理，不符合需求，先看结果，再看需求：如下先看实现结果，如下图所示：需求：产品经理提出详情信息中默认只展示6行，超出6行后，显示“展示更多”按钮。分析：小编接到这个需求也是一脸懵，经过几天的闲时思考，终于实现！对于网上说的css样式处理，基本上都是超出6行使用…去处理，不符合需求，所以还得分析，如下1，宽度不定（移动端），高度不定，文本内容不定（文字可以是汉子，字母，数字等），几乎什么都不确

解决el-dialog弹框引起的body抖动问题1，开发中发现使用el-dialog出现抖动的问题，找了好久才找到解决问题的方法。2，解决该问题在el-dailog上添加:lock-scroll="false"代码如下： <el-dialog :visible.sync="auditFlag" :close-on-click-modal="false" custom-class="my-dia

vue项目中实现按钮可随意移动组件代码如下：在项目中引入该组件即可<template> <div v-show="hide" class="move-button" ref="moveBtn" @mousedown="btnDown" @touchstart="btnDown" @mousemove="btnMove" @touchmove="btnMove" @mouseup="btnEnd"

问题描述：在开发中发现头部出现抖动现象，造成抖动的现象有多个，如下：①，页面中使用v-if和v-else时 同时使用img标签，img标签的宽度不同，会有抖动现象②，使用css3使用flex布局时，造成抖动现象。解决方法如下：使用 min-height 可解决问题（ps:这个问题是在我项目环境下解决的，不同的问题可能是不同的环境下造成的）...

vue项目中图片加载不到时，使用默认图片替换解决方法：①使用三目运算符②使用onerror <img :src="item.photo ? item.photo :''" alt="头像" class="photo" :onerror="defaultImg" />co...

vue使用v-infinite-scroll实现滚动条边滚动边加载1，安装v-infinite-scrollnpm install vue-infinite-scroll --save2 在main.js中引入import infiniteScroll from 'vue-infinite-scroll'Vue.use(infiniteScroll)3，使用<div v-i...

ElementUi中Cascader级联选择器 回调问题解决1，在开发中使用了Cascader级联选择器，应用于省市联动的效果，发现问题：数据回调时不显示。2，解决方法：使用ref进行回调处理。this.$refs.cityShow.presentText ="复制";// 首次手动复制关键词是“presentText”详细问题描述：Cascader级联选择器中使用的是props进行...

vue组件间的6种通信方式方法一、props/$emit父组件A通过props的方式向子组件B传递，B to A 通过在 B 组件中 $emit, A 组件中 v-on 的方式实现方法二、$emit/$on这种方法通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级。当我们的项目比较大时，可以选择更好的状态...

axios请求中添加token，Authorization中添加tokenaxios请求中添加token，应在header中添加的token，使用Authorization属性字段，如下代码export function downLoadZip(str, filename) { axios({ method: 'get', url: url, responseT...

需求：将base64编码的图片直接显示成为图片解决方案：使用img标签，在src中添加对应的代码，把base64编码传入即可！如下所示<img src=“data:image/png;base64,base64编码”/>vue 中的主要代码如下 <img :src="vImg" /> this.vImg = 'data:image/png;base64,...

需求：使用vue+vant框架开发，移动端页面开发出传统图片验证码！效果如下图所示。主要代码如下：<van-field v-model="formData.verifycode" center clearable label="验证码" placeholder="请输入验证码"> <div slot=...

问题：在苹果手机的浏览器上处理的日期显示NaN，如下图所示情况。解决方案：将日期格式中的2020-02-22 转换成为 2020/02/22转换格式前： 2020-02-22 00:02:00转换格式后： 2020/02/22 00:02:00使用如下代码进行格式化处理： var str = /-/g.test(format) ? format.replace(/-/g,"/")...

1主要代码块为，这种处理方式在PC端显示没有问题，但移动端显示会有问题，移动端浏览器兼容问题。 var dt = new Date(dateStr) // yyyy-mm-dd var y = dt.getFullYear() var m = dt.getMonth() + 1 var d = dt.getDate() ...

vue 页面中使用 computed缓存中的数据代码如下：computed: { drCountData: { get() { return this.$store.state.drCountData; }, set(v) { ...

vue项目 Network: unavailable 问题。问题描述：使用vue3.0+的版本，在自己电脑上开发项目，启用项目后，只能用localhost访问项目，十分不便，不能使用手机浏览器或其他人访问，如下图所示。解决方案：在devServer配置里面添加public，如下代码所示。 public:‘172.20.3.3:8080’, devServer: { // 环境配...

使用color属性可以修改下划线的颜色。如下图vant 的官方网站如下：https://youzan.github.io/vant/#/zh-CN/tab<van-tabsv-model="active"stickytitle-active-color="#144a9e" // 选中的标签文字颜色color="#144a9e" // 下面那个下划线颜色@click="ta...