追风筝的博客

前段时间写后台管理项目时，用到了el-autocomplete来做模糊搜索。因为要可以清除条件，所以加了clearable属性，然后遇到了个bug。点击清除图标后，如果你已经是聚焦状态了，你在点击输入框，下拉框不会再显示了。通过这个方法，你可以解决 el-autocomplete 使用clearable清除内容，再次点击输入框下拉条件不再显示问题。添加一个清除事件的方法。

最近在使用 Vue 和 Element UI 开发后台管理系统时，操作表单数据重新请求表格接口后遇到表格数据不更新的问题。后面查阅了些资料，这通常是由于 Vue 的响应式系统没有检测到数据的变化，或者数据更新后没有正确地触发视图的重新渲染。

nuxt踩坑之文字滚动， nuxt + vue-seamless-scroll， vue-seamless-scroll，nuxt使用滚动报错， client-only解决nuxt报undefined

vue + quillEditor vue + quillEditor编辑器 quillEditor编辑器 富文本编辑器

预览效果的编辑器 vue + mavon vue + mavon-editor mavon-editor编辑器mavon-editor预览编辑器 mavon editor编辑器

addEventListener()的使用 复制文章携带版权信息 内存泄漏

加解密算法及实现 加密 解密 算法

pc支付宝支付 pc端实现支付宝支付 pc端接入支付宝二维码支付

实现拖拽效果/实现优先级/实现排序/ nuxt.js+vuedraggable

nuxt.js 引入jquery的方式步骤1 npm下载jquery：npm install jquery --save 步骤2 在nuxt.config.js配置引入const webpack = require('webpack');export default{ build:{ plugins: [ new webpack.ProvidePlugin({ '$': 'jquery' }) ] }}步骤3 页面中使用：

nuxt.js 跳转新页面的方法一般跳转方式的写法为： this.$router.push({ path: `/soft/${e.routerKey}`, }) 跳转新页面的方式1： let routeData = this.$router.resolve({ path: `/soft/${e.routerKey}`, }); window.open(routeData.href, '_blank');跳转新页面的方式2：window.open(`/soft/${e.r

VUE 任意组件间传值的方式

项目需求: 对不同角色做权限管理效果图如其中主要是对一下文件进行修改src/routersrc/store/modules/permission.js (没有就添加)src/store/modules/user.jssrc/store/indexsrc/permission.js那就按照文件修改的文件进行修改了 src/router中代码如下把需要权限的加在 asyncRoutes 里面// 这里面放的是国定路由的菜单 export const constantRoutes =

实现B页面接收A页面传来的值步骤1：建一个bus.js文件import Vue from "vue"export default new Vue步骤2：A页面引入传值使用($emit)import Bus from '@/bus.js';//在页面销毁前进行传值 beforeDestroy(){ Bus.$emit('stockPOS',this.tacticsStockPOS) },步骤3：B页面引入接收并销毁(on,on,on,off)import Bus from

项目场景：项目场景：一个h5界面要求点击右上角三个点后点击微信好友分享带标题和图片给好友效果图如下首先得得下载微信的 weixin-js-sdkcnpm i weixin-js-sdk --save在需要分享的页面引入import wx from 'weixin-js-sdk'; // 引入wxjsimport { shares } from '@/api/index'; // 分享的接口 传给后端一个地址(与域名一致)在methods写调用的方法// vue调用微信的自定义分

videojs-contrib-hls拉流播放主要是因为之前使用西瓜播放器插件实现hls拉流播放时，安卓手机是正常的，但是苹果一直打转，pc端的话https格式也播放不来，pc端的话去掉s改为http即可进行播放步骤1.下载videojs-contrib-hls依赖(没有下载video.js的也下载一下这个)npm i videojs-contrib-hls --savenpm i video.js --save步骤2. main中引入video-js.cssimport 'video.js

App图片预览需求(前提配置好了vant)如果还没有配置的话，配置步骤如下官网链接：https://youzan.github.io/vant/#/zh-CN/grid步骤1：下载依赖npm i vant --save// 如果有淘宝镜像的话也可以使用（下载的速度会快些 --save，可以在package.json查看）cnpm i vant --save步骤2：在全局main.js中配置// 引入 vantimport Vant from 'vant';import 'vant

需求效果有，但是报错报错前的效果图，报错图，及代码1.效果已经出来了2.报错图3.代码 <p class="date_time" >{{ getday(interestDetails.createTime) }}</p>解决后的代码使用v-if来判定此时是否已经取到该有的值<p class="date_time" v-if="interestDetails.createTime">{{ getday(interestDetails.createTi

当数据格式为"[xxx,xxx,xxx]"字符串转为数组接口效果如下使用后的效果如下步骤如下步骤1：使用split(’,’)切割let a = row.picUrl.split(",");步骤2：去掉左右的【】号 a = a.map(item => item.replace("[", "")); a = a.map(item => item.replace("]", "")); console.log(a);好了，希望对你有所帮助...

项目中的需求之后写的一个时间封装效果图：几小时前日期显示实现步骤步骤1：把这个js封装在工具util中 我命名为 date.jsexport function formatMsgTime (timespan) { // 因为我接口得到的数据是 日期的格式，所有先转为了时间戳 // 2021-01-28 18:34:28 改为时间戳 let thisTime = timespan; thisTime = thisTime.replace(/-/g, '/');

后台管理系统中表格导出功能导出的效果图：1.npm 下载 file-saver 和 xlsx 这两个依赖文件cnpm install file-saver@1.3.8 xlsx@0.14.1 --save2.导出文件存放3.js代码直接拿取/* eslint-disable */import { saveAs } from 'file-saver'import XLSX from 'xlsx'function generateArray(table) { var out = [

项目中使用西瓜播放器插件第一步:npm i xgplayer --savenpm i xgplayer-hls.js --save第二步:// 在需要的页面引入import 'xgplayer';import hlsjsPlayer from 'xgplayer-hls.js';第三步:// 提供一个容器<div id='xg></div>第四步:// 定义一个方法来初始化initPlayer(url, bgImg) { let pla

window.location系列解析效果图为:亲们，自己也可以在控制台里面自己试试加粗样式代码内容：window.location.origin( 可用来动态获取接口 ( 获取传参前的url ) )结果为："http://localhost:8083"window.location.host( 获取域名 + 端口号 )结果为："localhost:8083"window.location.href( 当前的url )结果为："http://localhost:8083/#

项目中使用外部字体这也是我在项目中使用到的代码如下：// 定义:@font-face { font-family: 'Yaku'; src: url('https://aq-images.oss-cn-shenzhen.aliyuncs.com/font/font.TTF')format('TTF'); }// 使用: <span style="font-family: Yaku; color: #ffea60; font-s

React的基础上使用Taro UI组件实现左滑删除家人们，先看看效果图吧1.好家伙，直接上代码了// 1.首先得引入一下组件 AtSwipeActionimport { AtSwipeAction } from "taro-ui";// 2.HTML代码{list.map((item, index) => ( <AtSwipeAction key={item.id} onOpened={this.handle

JSON格式的转换好家伙，直接上代码<script> var obj = { title:'文件名', count:1, } const fill = JSON.stringify(obj); console.log(fill ,typeof(fill)); //string 类型 let fl = JSON.parse(fill); conso

判断一个对象为空的方式JSON 内置对象 JSON.stringify() 方法ES6 Object.keys() 的方法ES6 Object.getOwnPropertyNames() 的方法jq isEmptyObject() 的方法测试代码1. JSON内置对象的方法;const o = {} ;console.log(JSON.stringify(o) === '{}' ) // true// 返回 boolean 值 为空就时 true 否则就是 false2.

Taro小程序跳转公众号的文章步骤：登录公众号后台-小程序-小程序管理-添加-关联小程序关联后就可以在微信的公众平台查看(设置-关联设置-关联公众号)如图所示：然后使用web-view我这个是使用广告轮播实现的代码如下注意：一个页面使用一个web-view 所以我使用遍历传值到跳转地址的页面html代码 {/* 跳转公众号的文章 */} <View> <AtCurtain isOpened={this.state.

小程序的基础库查看小程序的基础库打开Vscode查看project.config.json的配置文件中的libVersion "compileType": "miniprogram", "simulatorType": "wechat", "simulatorPluginLibVersion": {}, "libVersion": "2.10.3", "condition": {}因为小程序的获取用户信息接口的改变在使用的 taro编译的小程序时，基础库就得提升到 2.16.0