vue
热忱学习
本博只写我在工作中遇到的问题。这只是我的笔记。本人还在不断学习中。欢迎大神指教。
展开
-
先获取打印的模板,用户选择过的模板通过接口要回显出来,预览只显示key的值,value是前端写死
需求:先获取打印的模板,用户选择过的模板通过接口要回显出来,预览只显示key的值,value是前端写死原创 2022-09-30 17:36:37 · 265 阅读 · 0 评论 -
4.2日最后一次上线 vue3+ts+elementPlus+vite项目总结和代码记录
## VScode插件支持WindiCSS IntelliSense: WindiCSS 自动完成、语法突出显示、代码折叠和构建等高级功能TypeScript Vue Plugin (Volar): 用于 TypeScript 服务器的 Vue 插件Vue Language Features (Volar): Vue3.0 语法支持Iconify IntelliSense Iconify: 预览和搜索i18n: Ally 国际化智能提示Stylelint: css 格式化D...原创 2022-04-02 21:40:12 · 3077 阅读 · 0 评论 -
把后台接口反的数据 处理成想要的数据实现 点击加号数据会追加,不能重复选择
<template> <view class="content-box" style="min-height: 100vh; background: #F5F5F5;"> <common-header>申请发货清单</common-header> <view class="address-box"> <view v-if="customerInfo.consignee_name"> <view clas.原创 2022-03-20 20:28:30 · 465 阅读 · 0 评论 -
把点击过的每一项筛选出去
<template> <view class="brand"> <view v-for="(item,index) in subList" :key="index" class="brand_item"> <view class="brandList_left"> <u-form labelPosition="top" :model="item" > ...原创 2022-03-20 20:18:08 · 201 阅读 · 0 评论 -
3-18 上线 处理后台返回 不同字段的值 并合成一个数组 页面上在取值
根据需求无论是哪个节点 实际需求那里取的是distributionInfoList里面的值如果有发货信息 就取sendGoodDetailInfo 里面的值但是待签收状态 消耗库存 只有组件的发货信息 是从 storageDeduct 取值审核,备货,代签收,签收审核,完成 这五个节点下 组件逆变器,并网箱显示的页面是不一样的数据就需要处理成这个结构如下图,没有截图完全<template> <view class="page_det...原创 2022-03-20 20:05:27 · 268 阅读 · 1 评论 -
请求接口计算数量
需求就是 一个大list 拆分成 逆变器,并网箱, 组件 红框那里都需要计算 <view class="cell_list"> <!-- 逆变器 --> <view class="cell" v-for="(item,index) in distributionListVOS" :key="index"> <view class="cell_title" @click="item.show=!item.show">...原创 2021-11-10 17:33:33 · 416 阅读 · 0 评论 -
uview select封装单选和多选
uview是没有多选的,根据业务需求就自己封装了一个组件一般多选的话是要加字段,根据字段判断,这个思路值得记录下<template> <view class="slot-v"> <!-- 单选 --> <u-input v-model="inputValue" type="select" @click="selectShow = true" :placeholder="placeholder" /> <!-- 多选 --&g原创 2021-10-29 16:26:04 · 4850 阅读 · 2 评论 -
前端当接口请求异步的时候 可以传个callback函数
有个需求是在vue 文件 main.js里面 请求接口 返回的值在其他页面上用import { getOnlinekey } from "./api/common.js";Vue.prototype.$GetOnlinekey=(callback)=>{ getOnlinekey().then(res=>{ let {code,result}=res.data console.log(result,"getOnlinekey") Vue.prototype.$KEY = {原创 2021-10-29 15:20:28 · 419 阅读 · 0 评论 -
vue 列表页面的分页
/** * @param {Object} isLoad 是否翻页 */ getHelpList(isLoad) { if (isLoad){ //如果是翻页 if (this.pageNo * this.pageSize <= this.helpList.length) { //如果当前列表满足整页,说明可能有下一页存在 this.pageNo += 1 } else { //如果不满足整页,说明没有..原创 2021-10-29 14:52:52 · 554 阅读 · 1 评论 -
echart 实现地图坐标轴带图标
需要实现设计图的效果 // 排名图 drawColumbar () { var icon = { frist: require('@/assets/images/icon/1.png'), second: require('@/assets/images/icon/2.png'), thrid: require('@/assets/images/icon/3.png') } let columchart...原创 2021-08-25 16:06:20 · 1038 阅读 · 1 评论 -
echart 报错Cannot read property ‘getAttribute‘ of undefined
要等dom加载完之后在加载图表否则就会报这个错误加上这句代码 就能解决this.$nextTick(function(){this.drawpowerline()})原创 2021-08-25 15:02:33 · 248 阅读 · 0 评论 -
保留两位数字,保留三位数字 ,添加千分位并保留两位小数,根据后台返回状态转换文字
// //保留三位小数 或两位小数 export const forMatMoney=(num,type)=> { var result = parseFloat(num); if (isNaN(result)) { console.log('传递参数错误,请检查!'); return false; } result = Math.round(num * 100) / 100; var s_x = result.toString..原创 2021-08-13 01:13:51 · 252 阅读 · 0 评论 -
获取近一月,近3月,近6月,近一年,近3年
/** * 获取最近n个月/年 * @param {*} type 类型month, year * @param {*} num 数目 */export const getRecentlyDate = (type, num) => { let t1 = '' let t2 = '' switch (type) { case 'month': t1 = new Date() t2 = t1.setMonth(t1.getMonth() - num).原创 2021-06-30 16:23:55 · 314 阅读 · 0 评论 -
5.13日公司上线内容总结 antd vue table 表格 和数据处理的一些代码
最近用的是 antd design vue这个框架如果 数据有空白项tasklist foreach那行代码现在有个业务需求是根据id请求列表,但每个请求回来的列表不一样,筛选条件也不一样,要根据接口返回的来显示可以返回字段的接口返的数据是这个样子的,1是可以显示,0是不可以显示核心代码就是this.coulmns return 那里,最后在push进去操作项 。效果就是需求的那样查询条件那里我一开始不知道怎么绑定v-model,因为是动态的,点击查.原创 2021-05-13 20:27:05 · 231 阅读 · 2 评论 -
antDesign-vue select :value 不支持传入对象,但选择的时候想获取当前选中的整条数据
//流程配置选择表单编码 handlecodechange(item){ this.config.processcode = item this.currentcodelist=this.codeList[item] console.log(this.codeList[item]) // this.currentformCode=e.key },根据下标来去codeList里面找 codeList 就是整个接口请...原创 2021-04-30 17:51:18 · 1939 阅读 · 1 评论 -
记录代码
后台返回的是 这种格式,需要变成模拟时段的样子代码部分原创 2021-01-21 17:03:04 · 93 阅读 · 0 评论 -
vue中扩展函数,除了原有的事件中传的参数增加自己传的参数
<input v-for="a in as" @change="change" :disabledDate="disabledDate" >change(a,b){}disabledDate(a){}改成<input v-for="a in as" @change="change(...arguments, a)" //最主要的是这句:disabledDate="(current)=>disabledDate(current, a)" >.原创 2020-11-06 17:56:53 · 1035 阅读 · 0 评论 -
记录代码
getcode() { let _tip = this.i18n.obtain console.log(_tip) console.log(this.codemessage) var reg = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; if (this.codemessage != _tip) { return } if (this.formd...原创 2020-10-22 16:06:12 · 113 阅读 · 0 评论 -
正则校验6-18位字母加数字密码
const checkpass = value => { debugger if (value.length < 6) { return 0; } var ls = 0; if (value.match(/([a-z])+/) || value.match(/([A-Z])+/)) { ls++; } // if (value.match(/([0-9])+/)) ...原创 2020-09-29 15:23:46 · 3023 阅读 · 0 评论 -
商品详情里面只有一个商品规格默认选中的思路
项目需求是当商品只有一个规格时,默认是选中的,我们公司的思路就是当发生选中规格的点击事件时,去预定,加入购物车,立即购买按钮高亮。点击事件中有对点中商品规格的处理,所以这里只有一个规格时,只要模拟选中规格的点击事件就行了在小程序中的点击事件是 <view class="spec-item" wx:for="{{ specList }}" wx:for-item="spec" wx:key="index"> <view class="name">{{spec...原创 2020-05-28 19:47:06 · 911 阅读 · 0 评论 -
vue 项目中触底加载更多
scrollBottom() { //加载更多 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //变量windowHeight是可视区的高度 var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;.原创 2020-05-28 18:12:37 · 1405 阅读 · 0 评论 -
vue 列表数据有的数据表格会有图标,鼠标浮动到图标上会出现隐藏的div
如图所示,业务需求就是浮动到感叹号上 下面会出现一行字。代码在子组件中的代码 <img src="@/assets/images/hr/hover.png" v-if="contract.contract_status=='INIT'" alt="" @mouseover="hoverIcon(contractindex)" @mou...原创 2020-04-26 16:10:59 · 892 阅读 · 0 评论 -
记录下项目中的代码
在做上拉加载的时候我看到同事这样写的代码 mounted() { window.addEventListener("scroll", () => { this.tableflag === "second" && this.scrollBottom(); }); },...原创 2020-04-26 15:36:57 · 74 阅读 · 0 评论 -
记录下vue中事件广播的用法
新建一个js// utils/eventHub.js import Vue from 'vue' export default new Vue() // 什么都没有绑定,因为它只是一个跳板,并且在实时监听在用的时候两个组件都要引一下eventHub.$emit('show-config-panel', ''); emit里面是事件名称,后面是值。然后用on接收...原创 2020-03-06 03:20:54 · 1044 阅读 · 0 评论 -
vue 父向子传传值,子组件第一次mounted加载,更新goods后mounted就不加载的问题
父组件像子组件传值向子组件good-info里传了个了个goods的对象。在子组件中应该用watch去监听这个对象。及得要用deep:true最后再methods里面写个方法去更新商品对应的信息...原创 2020-03-06 02:56:18 · 2050 阅读 · 0 评论