- 博客(35)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 记录Vue 使用Ant Design of Vue项目中小技巧（持续更新）
一、深度拷贝场景复现：在进行编辑表格某项数据时模态框进行回显数据，修改数据时当前模态框里面的值会影响到表格里面的数据，在进行取消操作时表格的数据会莫名消失。解决代码如下： editChiidren(val) { this.title = '编辑' this.visible = true this.form = JSON.parse(JSON.stringify(val)) },二、图片上传（这里是使用了Ant Design of Vue组件库）场景复现：
2021-12-31 15:35:24
1252
原创 解决vue-print-nb-jeecg打印el-table表格预览竖版显示不全的问题！
第一步: 下载 vue-print-nb-jeecg 插件第二步: 在main.js中,引用并注册全局使用第三步: 需要打印的元素添加 id</第四步: 打印按钮添加 v-print=“’#printMe’”</
2023-08-03 16:41:00
955
4
原创 Vue 数字相加、相减精度丢失处理。
最后就是使用第三方库：例如 decimal.js、big.js 等第三方库可以提供更高精度的浮点数运算。方法 三：扩大运算范围：将浮点数转化为整数，相乘或相加后再除回去，可以避免小数位精度的影响。
2023-04-27 14:39:41
4257
原创 使用AI帮我封装一个结合element Ui的上传组件。
则是用于防止跨站请求伪造攻击的 CSRF token。需要根据具体的业务需求设置这两个属性。//可以从 cookie 中读取这个 CSRF token，并将其作为参数传递给服务器。总结：以上代码我没有在项目中运行 如有问题可以私信我，然后再做优化。引入组件后，需要将其注册为当前页面的局部组件。完成注册后，就可以在当前页面的模板中使用上传组件了。是上传组件的路径，具体路径需要根据实际情况进行调整。指定了上传文件的接口地址，而。在上面的代码中，我们将。这里将上传组件命名为。
2023-04-11 11:26:00
128
原创 实用的HTML标签和Js
一、details标签details 字面意思是 “详情”，在markdown里也经常用，用该标签包裹了的内容默认会被隐藏，只留下一个简述的文字，我们点击以后才会展示详细的内容默认情况下，简要文字为 “详情”，想要修改这个文字，要搭配 summary 标签来使用<details> <summary>点击查看更多</summary> <p>我是一段被隐藏的内容</p></details>效果：...
2022-05-10 10:11:47
282
原创 vue 将平级数据处理成父子节点数据
场景：在调接口的时候后端反的数据是平级的对象，为了展示符合设计图上的数据，需要将数据进行处理export default { data() { return { PlatformConfirm: [], //改造好的数组 }, methods: { // 将数据改造成父子结构 // Platform.serviceOrderItem 接口的数据数组 Platform.serviceOrderItem.forEach((item) =>
2022-04-29 14:00:13
458
原创 vue-amap 高德地图进行地址信息解析成经纬度
业务场景：当用户输入完位置信息或者是详细的地址，点击按钮进行地址解析；代码如下：<a-form-model-item label="经度" > <a-input placeholder="请输入经度" v-model="model.latitude" disabled style="width: 160px" /></a-form-model-item><a-form-model-item label="纬度" > <a-
2022-02-17 10:05:39
1619
原创 vue-amap 高德地图插件实现点击地图获取信息（直接复制就可以用）
业务场景：需要在地图上获取某个位置的详细信息。代码如下：mian.js：import VueAMap from 'vue-amap';Vue.use(VueAMap);// 初始化vue-amapVueAMap.initAMapApiLoader({ key: 'c4de786c74a450ac841ea096528c6ff1', plugin: [ 'AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale',
2022-02-17 09:56:24
1551
10
原创 vue-amap 高德地图实现拖拽选址
业务需求：需要在地图上门进行移动地图实时获取全部信息，我这里是使用了插件vue-amap需求效果图：下面是具体的代码实现：mian.js代码如下：Vue.use(VueAMap);VueAMap.initAMapApiLoader({ key: "在高德申请的key值填写这位置", plugin: [ "AMap.Autocomplete", //输入提示插件 "AMap.PlaceSearch", //POI搜索插件 "AMap.Scale", //右下角缩略图
2022-02-17 09:49:24
2408
5
原创 记录Uniapp 小技巧（暂停更新....）
获取定位信息：自带得API两种方法都有不同上传文件、图片、视频：上传图片 、上传文件、上传视频页面之间通信和获取通信，最后在卸载代码如下：//使用uni.$emit('方法名',需要传得数据)uni.$emit('coupon',{title:res.data.title,id:res.data.id});uni.navigateBack({});//回退到之前得页面//在需要数据得页面进行onLoad 周期里面获取onLoad(options) { uni.$on('coupon',
2021-10-28 10:22:10
330
转载 Vue中computed和watch的区别
计算属性computed :支持缓存，只有依赖数据发生改变，才会重新进行计算不支持异步，当computed内有异步操作时无效，无法监听数据的变化3.computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed5.如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是
2021-10-16 17:37:28
68
原创 ESlint的整理，代码片段
现在的项目都有配置ESlint，但是大家的配置都是不一样的下面就我现在自己用的贴出来步骤一、步骤二、右键打开扩展设置步骤三、找到右上角点开步骤四、最后就是把下面的代码复制到你的json文件里面，{ "git.enableSmartCommit": true, "emmet.triggerExpansionOnTab": true, // "files.associations": { // "*.js": "html", // "*.vue
2021-10-13 09:57:34
167
原创 Vue 登录拦截之本地存储
有这么一个需求，就是需要在用户没有登录的时候用户在浏览器网址后面输入页面地址，都跳转到登录页，这时我们就需要路由拦截，我这里是没有使用token来判断因为我是将用户信息存储在本地浏览器里面的，接下来就开始实现代码：点击登录时，将用户信息保存在localStorage里面methods: { loginsSubmit(ruleForm) { var data = { username: this.ruleForm.useName, password: t
2021-10-09 10:41:17
145
原创 vue之级联选择器选中拿到当前全部数据（elementU）
业务需求：应后台要求接收的数据是多个，在级联选择器中只能拿到指定的值，固解决如何拿到多个值传入后台。代码结构：<el-form-item label="分类"> <el-cascader v-model="formInline.classification" :options="classificationOpt" :props="{ label: 'cloumName', value: 'id', ch
2021-08-31 09:31:09
2634
原创 向上无缝滚动 vue-seamless-scroll
vue-seamless-scroll1、安装vue-seamless-scrollnpm install vue-seamless-scroll --save 2、引入组件（我这里是全局引入）import scroll from 'vue-seamless-scroll'Vue.use(scroll)3、代码结构<template> <vue-seamless-scroll v-if="list && list.length" :data="list
2021-07-14 10:12:48
158
原创 vue 局部过滤 数组数据
业务需要是table展示多个地区以逗号隔开,而后台返回来是有null 的数据需要我们进行处理一下，代码如下： <el-table-column> <template slot-scope="scope"> <!-- 这里是拿到数据展示 --> {{ scope.row.deptNameList | deptNameList}} </template> </el-table-column>
2021-06-16 15:27:54
1208
原创 Vue for循环数据展示 获取img的src
循环数据展示图片<div style="width: 50%;height: 145px;text-align: center;" class="img" v-for="item in imgArr" :key="item.ID"> <img @click="sonimg($store.state.imgSrc + item.CNPICTURGUID)" style="width:100%;height:80%;" :src="$sto
2021-05-14 16:58:24
1909
原创 Js获取audio时长及自定义修改样式
如图效果图：需要将上面图中的时间进行样式修改，需求有几点：一、显示总的时长，二、显示播放时间，三、需要已进入到页面就显示时间，代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conten
2021-04-13 14:54:35
1191
原创 去掉带有html的数据传入子页面（framework7）
点击从后台获取带有html标签的数据过滤掉传入子页面一、通过ajax接收，再将数据转换成json类型数据进行过滤html标签<div class="item-content" οnclick="dxjy_content('+JSON.stringify(message.pageList[i]).replace(/\"/g,"'")+')"></div>二、进行事件点击，跳转子页面，function dxjy_content(data){ //当前的temp是需要在app.
2021-04-07 12:06:36
83
原创 项目：设备故障提交功能
一：本项目是第一次工作的小功能。二：该功能是扫码获取值并填充到设备编码、名称、型号。三：将以上参数转换Json数据形式传入后台。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0,
2021-03-29 21:49:26
106
原创 Vue 截取字符串与input 自动获取焦点！
Vue input 框 删除输入内容 自动获取焦点<template> <input ref='id' v-model="msg" id="searchMT" placeholder="输入汉字搜索..." > <div @click="deleteci">删除</div> </template>export default { data() { return {
2021-03-26 16:02:53
172
原创 js后台接收数据进行字符串！
js发送ajax接收数据进行字符串拼接暨三元表达式！一、页面需要动态将后台数据展示在页面上二、HTML准备<div class="LdtHtgl_public_table"> <table width="100%" class="IpadHtgl_deviceAdmin_table" > <tr class="LdtHtgl_device_head"> <th>序号</th> <t
2021-03-04 15:51:21
514
1
原创 安装Electron vue 步骤
安装 vue-cli 和 脚手架样板代码cnpm install -g vue-cli 或者是 npm install -g vue-cli 都可以。接着安装：vue init simulatedgreg/electron-vue my-project（my-project名称可以更改！）根据下图进行选择你需要的![在这里插入图片描述](https://img-blog.csdnimg.cn/20201030120139642.jpg?x-oss-process=image/watermark,
2020-10-30 12:03:34
553
原创 解决Swiper 自动循环播放和小点跟随
解决Swiper 自动循环播放和小点跟随直接贴代码<div data-pagination='{"el": ".swiper-pagination"}' class="swiper-container swiper-init demo-swiper"> <div class="swiper-pagination diandian"></div> <div class="swiper-wrapper"> &
2020-09-28 15:31:12
1042
原创 Vue 背景音乐点击随机播放
Vue 背景音乐图片点击旋转和暂停<div id="music" @click="music" :class="{'cilcle' : iscilcle}" > <img src="../../../assets/images/zysx/music.png" alt=""> <audio id="audio" loop ref="audio" autoplay :src="musicUrl"></audio> </
2020-09-07 16:03:17
1057
2
原创 清除Canvas 画过的内容
清除Canvas 上一次的内容<!--插入一个canvas画布 --><canvas id="myCanvas" width="300" height="300" ></canvas><botton onclick="cls">清空</botton>function cls(){ //获取canvas的ID var c=document.getElementById("myCanvas"); var ctx=c.getConte
2020-08-31 09:32:26
2718
原创 jQuery+html 实现背景音乐随机播放 (framework7)
jQuery+html 实现背景音乐随机播放<div> <img onclick="playMusic(this)" src="路径/music.png" height="120px" width="120px" /> <audio id="audio" src=""></audio> </div>在页面刚进入的时候拿到音频数据{ path: '/msMain/', url: './mSpages/msMain.ht
2020-08-03 16:26:38
903
原创 Vue 列表下一页 上一页
Vue 列表点击下一页 上一页 示例代码export default { data() { return { //获取来的数据储存 pageData:'', // 总页数 pageCount:'', // 当前页码 pageNum:'', //当前
2020-07-31 11:07:29
4489
原创 Vue For 循环后台传的数据列表 点击每个ID显示对于数据
遍历列表html代码<!-- 列表--><div > <p v-for="(item,index) in pageList（数据数组名称） " :key="index" @click="itemId(item.数据对应的名称)">{{item.name（数据对应的名称）}} </p></div><!-- 展示对应列表里的内容--> <div class="nav"> </div&g
2020-07-30 11:47:28
1651
calendar.js
2021-07-12
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人