qq_48228724的博客

原创 WAdmin 开源啦！！！

后台管理平台开源

原创 vue3 setup语法糖使用keep-alive

vue3 setup语法糖使用keep-alive缓存组件

原创 git 基础使用(上传,修改上传)

git基础使用(第一次上传,修改上传)

原创 js 获取时间

获取当月天数 //获取当月天数 getData(){ let d = new Date(); let days = new Date(d.getFullYear(), d.getMonth() + 1, 0); return days.getDate(); },根据指定时间获取对应的时间差 //获取时间 num 时间差负数时间则往前推正数这往后推 && time为指定时间没有则默认当前时间 getBeforeDa

原创 js 跳出forEach循环

function defaultUrl(data){ try { data.forEach(v=>{ if(v.index=='/DataHome' || v.index=='/ParkingMonitoring' || v.index=='/FinancialStatisticalAnalysis' || v.index=='/SiteStatisticalAnalysis'){ ...

原创 vue+qrcodejs2 动态生成二维码并下载

安装依赖npm install --save qrcodejs2vue页面引用<script> import QRCode from 'qrcodejs2' import axios from 'axios' import JSZip from 'jszip' import FileSaver from 'file-saver' export default{ components:{ QRCode }, }</sscript>HTML

原创 vue 封装处理websocek的返回数据

websocket 返回的数据格式<Msg=Req;Type=ExitHavePay;Plate=陕A938C8;CarType=小车;InTm=2022-03-06 10:39:56;LeaveTm=-13;ShouldPay=6.00;RealPay=6;CouponMon=0;InDevAdr=4111;SerialNum=TP202203061039556664111>接收到消息的回调方法 //接收到消息的回调方法 this.websocket.onmes

原创 数组和对象的操作函数

js数组 some()用于检测数组中的元素是否满足指定条件（函数提供）。会依次执行数组的每个元素：如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测例如筛选 //将vue页面保存 let Url = this.$route.matched[1].components.default.name let isExist = this.tagsList.some(item=>{ return item === Url }) if(!isExi

原创 防止vue打包后不更新代码有浏览器缓存

在vue.config.js 修改没有文件则在根目录创建文件const Timestamp = new Date().getTime(); //当前时间为了防止打包缓存不刷新，所以给每个js文件都加一个时间戳module.exports = { // devServer: { // // proxy: { //配置跨域 // // "/api": { // // target: 'http://192.168.1.19:9997/', //这里后

原创 百度地图标记点加点击事件和鼠标移入事件并添加数据

this.$nextTick(() => { var timer = setTimeout(() => { this.MP('密钥').then((BMap) => { const map = new BMap.Map('map'); map.enableScrollWheelZoom(true); map.centerAndZoom(new BMap.Point(108.948, 34.263), 11); // 初始

原创 vue+element el-tree实现权限树 全选取消全选和全展开取消全展开

<div> <el-checkbox @change="isAllChange" v-model="isAll">选中全部</el-checkbox> <el-checkbox @change="openAllChange" v-model="openAll">展开全部</el-checkbox> </div><!-- 权限...

原创 js 经纬度正则表达式

经度 var longrg = /^[\-\+]?(0(\.\d{1,6})?|([1-9](\d)?)(\.\d{1,6})?|1[0-7]\d{1}(\.\d{1,6})?|180(([.][0]{1,6})?))$/ if(!longrg.test(this.ruleForm.longitude)){ this.$message.error(this.$t('common.Longitude')+this.$t('common.wrongFormat'));

原创 vue 使用CsvExportor导出

安装 CsvExportor 插件 // 导出表格 async exportStore(){ var that = this try { var arrCount = []; // 发起请求 let res = await that.$operationRequest.operationRequest(that.paramsQuery, 'HandlersCatc/CatcT_Active_Coupons_Persona

原创 vue cli项目创建

原创 js 正则匹配 后端返回的富文本数据

后端返回的数据js处理turn(val){ console.log(val) let data = [] if(val !== undefined){ val.replace(/<p>(([\s\S])*?)<\/p>/g, (match, capture) => { data.push({ type: "text", value: capture, f:false }); });

原创 vue 强制数据渲染

当js数据重新赋值 页面没有渲染的时候调用此函数this.$forceUpdate()

原创 vue超级简单 锚点实现 带滚动效果

先添加点击事件 <div class="box" @click="smooth"> <div class="icon"> <i class="ri-arrow-down-circle-fill"></i> </div> <div class="text"> <div></div

原创 vue 发送短信倒计时

//先定义//倒计时秒数 countdown:60, //按钮上的文字 codeMsg:'获取验证码', //定时器 timer:null,//函数// 获取验证码 getCode() { this.$refs.form.validateField('phone',(errMsg)=>{ if(errMsg){ return false }else {

原创 vue 组件封装聊天时间提示

<template> <span @click="Time()"> {{date}} </span></template><script>export default { name: "Time", props:{ value:{ type:String, default:'' } }, data(){ return{ date:'' } },

原创 请求数据各种方式

请求各种数据先定义值 然后请求数据 然后根据返回的值 来定义剩下需要的值根据前端需要的格式 处理数据有数据修改则先定义数据 将获取的值进行赋值 然后可以根据后端需要的格式改变或者定义值 然后可以 new一个formdata 参考之前的博客get 查询获取列表get 查询获取详情get 查询类型 携带参数查询post 新增数据put 编辑数据delete 删除数据先定义值 然后请求数据 然后根据返回的值 来定义剩下需要的值根据前端需要的格式 处理数据有数据修改则先定义数据 将获取的值进行赋值 然后可以根

原创 新建 formData

const formData = new FormData();

原创 查询具体详情 数据后面拼接属性

<router-link to="/trys/list?type=1"><svg-icon iconClass="truck-line" class="fz-26" style="color: #DF3033"></svg-icon>付邮试用</router-link><router-link to="/user/trys?status=10"><span>{{applyNew}}</span><p&gt

原创 点击刷新列表

刷新列表<li :class="{color_red:tryNavList==0}" @click="tryNavList=0"><router-link :to="{ query: { cate: 1 } }">全部</router-link></li><li v-for="(i,index) in try_article_list" :class="{color_red:tryNavList==(index+1)}" @click="tryN

原创 css 控制列表布局

li{ width: 18.7%; margin-right: 1.33%; padding: 20px 20px 20px; border-radius: 15px; margin-bottom: 20px; position: relative; transition: all 0.3s; background-color:#fff; @media screen and (max-width: 1

原创 get 传值 是params

get传值 paramsexport async function queryBuySetp2List(params: Pick<TableBuyStepListItem, "user_id">): Promise<any> { return request({ url: `/buy/step2`, method:'get', params:params });}

原创 vue3 使用this指向

按需导入import {getCurrentInstance} from "vue";定义const { proxy } = getCurrentInstance();使用proxy.$emit("update:StepComponent",2)

原创 判断数组是否有重复值

var nary = this.rangeTwoPrice.sort(); for (var i = 0; i<this.rangeTwoPrice.length;i++){ if(nary[i]==nary[i+1]){ this.$message.error('区间金额不能重复') this.ruleFormjudgebol = false return ...

原创 vue+ts 组件传值

考虑组件的传值 脑袋变通一下 可以在提交前改变值// 编辑弹框 - 提交 const updateSubmit = async (values: TableVipListItem, resetFields: () => void) => { updateSubmitLoading.value = true; values.id = handleListIds console.log(values) const res

原创 2021-05-27

element Select 默认多选先定义一个数组 把传过来的值循环遍历赋值给数组页面传值@click="()=>detailUpdateData(row)"let listInfo = ref<any>([]) const detailUpdateLoading = ref<number[]>([]); const detailUpdateData = async (value) => { detailUpda

原创 vue3+ts 多选全选 传id

const createIds = [] const detailUpdateAllData = ()=>{ if(Object.keys(handleSelectionQuery).length!=0){ handleSelectionQuery.map(item=>{ createIds.push(item.id) }) detailUpdateData(cr.

原创 vue+ts 发送手机验证码

请求/** * 发送短信 * @param params */export async function sendCode(params): Promise<any> { return request({ url: '/auth/code', method:'post', data:params });}页面请求 //发短信验证倒计 let timerText = ref(true);

原创 vue+ts 请求数据

请求接口文件export async function sendCode(params): Promise<any> { return request({ url: '/auth/code', method:'post', data:params });}data定义数据文件export interface TableTagDataType { list: TableTagListItem[]; pagin

原创 jq form表单预验证

jq form表单<div class="divAll"> <div id="contents"> <h3 class="title">注册象讯账号</h3> <form action="#" onSubmit="return checkForm()"> <div id="form-itemGroup">

原创 jq tab切换

鼠标移入tab切换function mallTwoTab(){ mallTwoNav = $(".mall-two-tab-nav>div") .on('mousemove',function (){ var index= $(this).index(); $(this).addClass("content_bk").siblings().removeClass("content_bk");

原创 vue 固钉

挂载添加事件 mounted(){ window.addEventListener('scroll', this.suspension); }, destroyed(){ window.removeEventListener("scroll",this.suspension); },挂载的函数 suspension(){ this.domTop=document.documentElement.scrollTop ||

转载 js vue实现动态 锚点

先拿到遍历的index值 <ul class="supply-2-wrap"> <li v-for="(item,index) in nav" @click="jump(index)" :class="{supply_2_active:Highlight==index}">{{item}}</li> </ul>给要跳转的盒子取对应的类名js获取窗口和body的滑动高度 jump (index) { //

原创 vue 删除 数组里面的值

moverImg(index){ this.imgList.splice(index,1) },

原创 vue赋值新数组

Badge:0, imgList:[] } }, created() { const imgList = JSON.parse(JSON.stringify(this.imgUrl)) this.imgList=imgList },

原创 vue请求数据

请求数据并处理异步<el-timeline> <el-timeline-item placement="top" v-for="item in specialList" :key="item.id" :timestamp="item.name"> <el-card> <el-image :src="item.image_url" fit="scale-down"><

原创 js跳转

js跳转跳转链接 在当前窗口打开window.location.href="http://www.baidu.com"跳转链接 在新窗口打开 window.open("http://www.baidu.com") 跳转链接 返回上一页 window.history.back(-1);跳转链接self.location.href="baidu.com"...