- 博客(59)
- 收藏
- 关注
RSS订阅原创 vue3页面适配响应式（适用pc，移动端）
网上关于适配的方法很多，今天在适配的时候发现网上的方法并不适合我这个系统，还用到了ts，但是ts也没有用标准，尝试了大半天后终于找到合适的办法了。在main.ts中引入rem.js，并在vue.config.js写入。在根目录src下建立文件夹utils，然后创建rem.js文件。在根目录src下创建postcss.config.js。
2024-03-04 17:23:24
948
1
原创 el-table合并单元格
el-table-column 需要添加property字段，属性值同props，用来判断需要合并的字段。此处为this.rolePermitItemList。
2023-08-03 11:06:08
1175
原创 使用node开启静态资源服务
node 服务开启 安装 expressnpm i expressconnect-history-api-fallback 为解决history模式404的插件安装 npm install --save connect-history-api-fallback使用var history = require('connect-history-api-fallback');app.use(history());
2022-02-10 10:03:55
950
原创 vue无白屏刷新
在App.vue文件中添加provide ，isRouterAlive。在需要刷新的页面添加inject: [“reload”],<template> <div id="app"> <router-view v-if="isRouterAlive" /> </div></template><script>export default { name: 'App', provide ()
2022-02-08 15:57:43
603
原创 el-table动态表头，动态数据处理
在el-table中遇到一个有意思的数据处理，以下数据表头为动态的数据此数据表头处理比较简单，难点在于表头对应的数据，当后端返回的数据只有部分时，如只有温度就返回温度，只有PM2.5就只返回PM2.5,而且后端没有返回其他没有的字段的默认值，此时我们就需要对数据进行处理对应好数据所在的位置不然则会出现PM2.5的值跑到了温度下面<el-table> <el-table-column align="center" label="序号" type="index"> </
2022-01-05 15:40:03
5505
7
原创 Vue导入上传Excel
对Excel的数据进行上传首先需要使用xlsx此文章的上传方式为手动上传（数据解析可在前端进行，也可交由后端处理）安装插件 npm install xlsx引入 import XLSX from ‘xlsx’使用el-upload进行上传 （el-upload在这不再做介绍）<el-upload :show-file-list="true" :headers="{ Authorization: token }"
2021-12-27 16:30:51
3180
原创 elementui 表格插入图片并且鼠标移入放大
先来看下效果图如果需要移入图片放大则可使用el-popover悬浮效果<el-table-column align="center" label="模板封面" prop="image"> <template slot-scope="scope"> <el-popover placement="right" title="" trigger="hover" > <!-
2021-12-23 10:36:22
1967
1
原创 vue数字滚动
1.安装依赖：npm install vue-count-to -D2.应用<template> <countTo :startVal='startVal' :endVal='endVal' :duration='3000'></countTo></template><script> import countTo from 'vue-count-to'; export default { components: {
2021-12-15 16:19:41
1399
原创 vue 列表无缝实时滚动
1、安装vue-seamless-scrollnpm install vue-seamless-scroll --save 2.引入组件 import vueSeamlessScroll from 'vue-seamless-scroll' components: { vueSeamlessScroll}, 3.对vueSeamlessScroll进行配置computed: { ...mapGetters(["$selectionIndustry"
2021-12-15 16:09:30
263
原创 el-tree清空、设置默认值等功能
<el-tree ref="permissions" :default-checked-keys="permissionChecked" @check-change="handleCheckChangePermissions" //节点选中状态发生变化时的回调 @check="handleCheckChangeArea" //当复选框被点击的时候触发 :data="PermissionsTreeData" show-checkbox node-key="id" :check-
2021-12-15 15:41:47
2491
原创 Vue导出Excel
Excel 的导入导出都是依赖于js-xlsx来实现的。在 js-xlsx的基础上又封装了Export2Excel.js来方便导出数据。使用由于 Export2Excel不仅依赖js-xlsx还依赖file-saver和script-loader。所以你先需要安装如下命令：npm install xlsx file-saver -Snpm install script-loader -S -D由于js-xlsx体积还是很大的，导出功能也不是一个非常常用的功能，所以使用的时候建议使用懒加载。使
2021-12-15 15:24:55
1045
原创 vue导出pdf
一、安装第一个.将页面html转换成图片npm install --save html2canvas 第二个.将图片生成pdf在这里插入代码片npm install jspdf --save二、定义函数,创建两个工具js文件新建utils文件夹 将htmlToPdf.js放入htmlToPdf.js：/* eslint-disable *///不使用JQuery版的import html2canvas from 'html2canvas';import JsPDF from 'jsp
2021-12-14 15:08:01
1208
1
原创 vue分页 对el-pagination进行二次封装
分页组件Pagination<template> <div class="container"> <el-pagination style="margin-left: 20px; margin-top: 20px" @size-change="handleSizeChange" @current-change="handleCurrentChange" :
2021-12-14 14:51:26
493
1
原创 vue 运行install 后缺失core-js
vue 运行install 后缺失core-js报以下错误These dependencies were not found:core-js/modules/es.regexp.dot-all.js in ./node_modules/[email protected]@cache-loader/dist/cjs.js??ref–12-0!./node_modules/[email protected]@babel-loader/lib!./node_modules/_cache-loader
2021-11-18 16:40:48
2195
原创 uniapp苹果内购获取不到苹果的iap支付通道
根据uniapp文档介绍获取苹果的iap支付通道，开始时未获取到appleiap，此时需要进行下列操作plus.payment.getChannels( channels => { this.provider = channels; for (let i in channels) { var channel = channels[i]; console.log(channels); if (channel.id === 'appleiap') {
2021-11-03 13:59:43
3406
2
原创 一像素边框处理
伪类 + transform这种方式的原理很简单，就是把原先元素的 border 去掉，然后利用 :before 或者 :after 重做 border ，并 transform 的 scale 缩小一半，原先的元素相对定位，新做的 border 绝对定位。个人认为这是比较完美的做法。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-eq
2021-10-28 16:08:53
145
原创 vue 响应式属性 VS 非响应式属性
响应式属性 VS 非响应式属性响应式当Vue组件的实例初始化的时候已有的数据就是响应式数据通过Object.defineProperty代理实例this身上的响应式属性的值发生改变会触发视图更新非响应式当Vue组件的实例初始化的时候没有，后期添加的属性没有通过Object.defineProperty代理实例this身上的非响应式属性的值发生改变不会触发视图更新如何设置响应式属性this.$set(target, propertyName/index, value)
2021-10-27 14:56:24
2111
原创 省市区三级联动以及无限分类
省市区三级联动以及无限分类一、 省市区三级联动省市区三级联动推荐使用https://github.com/uiwjs/province-city-china 三级联动数据结构[ { "code": "420000", "name": "湖北省", "province": "42", "children": [ { "code": "420100", "name": "武汉市", "province"
2021-10-27 14:49:49
2479
原创 v-if和v-for的优先级
在同一级别以v-for优先永远不要把 v-if 和 v-for 同时用在同一个元素上。一般我们在两种常见的情况下会倾向于这样做：如果是一个列表中的项目 (如 v-for=“item list” v-if=“item.check”)。在这种情形下，请将 list 替换为一个计算属性 (比如 checkListNew)，让其返回过滤后的列表,然后再进行渲染。computed: { checkListNew: function () { return this.list.filter(f
2021-10-26 17:57:34
2215
原创 什么是跨域？怎么解决跨域
跨域问题的出现小程序不存在跨域的问题，但如果当前的项目发布成H5模式，则会出现跨域以H5项目进行当前项目的运行如果没有配置web服务器内容，则会出现无法运行的情况需要配置浏览器的安装路径跨域问题的解决方式最为快速简单的方式是安装客户端浏览器调试插件，只需要利用CORS unblock插件，开启该插件，就可以直接进行本地跨域测试操作利用vue.config.js设置跨域代理操作，在项目根目录新建module.exports = { devServ
2021-10-26 17:37:52
2971
1
原创 Vuex的使用
Vuex的使用一、Vuex为什么需要使用Vuex，它的作用是什么集中管理状态数据用于给多个组件共享数据Vuex的基本概念store 数据仓库是storestate： 设置状态state ->mapStategetters：获取数据getters 根据已有的状态数据计算得到新的状态数据，等同于Vue中的computed -> mapGettersmutations： 修改数据mutations（同步修改）->mapMutationsactions: 异步操作
2021-10-26 12:39:25
2468
1
原创 uniapp 前后端通信实现
一. request功能的封装新建utils目录，并在该目录下新建config.js与request.js两个文件config.js地址参数配置export default { host:'http://localhost:3002'}request功能的封装，利用的是uni.requestimport config from './config'export default (url,data={},method="GET")=>{ return new Promi.
2021-10-26 11:46:11
4382
原创 uniapp关闭默认返回安卓和ios
页面加入生命周期onBackPress(e) { if(this.isModalShow){ this.isModalShow=false; return true;//返回true阻止默认操作 }},ios页面有默认手势关闭页面，需要在page.json配置单个页面或整个应用关闭ios的手势返回，那它就只能走我们的导航栏关闭了，就能监听了。{ "path": "pages/xxx", "style": { "navigationBarTitleText": "xx
2021-09-24 11:21:34
7220
原创 uniapp picker 在 ios中只有遮罩层或者 picker在app端第一次点击无法弹起，第二次几率性正常
1. uniapp picker 在 ios中只有遮罩层或者 picker在app端第一次点击无法弹起，第二次几率性正常解决：临时解决办法：在manifest.json中 修改 “nvueStyleCompiler” : “weex”官方在HBuilderX 3.1.7 已修复，但本项目未能解决，修改 “nvueStyleCompiler” : "weex"后正常不复现2.第一次加载白屏问题 ，添加加载动画页面3.uniapp APP端在区分ios和Android时，只有 uni.getSyste
2021-07-15 10:55:17
7443
原创 uniapp在顶部处添加按钮 和 动态修改标题、按钮文本
uniapp在顶部处添加按钮 和 对应的事件添加按钮：在pages.json中配置app-plus,{ "path" : "pages/myCollection/index", "style" : { "navigationBarTitleText": "我的收藏", "n
2021-05-26 15:58:39
5115
1
原创 for 和 for...in 和 for...of
for in 和for of的区别1 遍历数组通常用for循环ES5的话也可以使用forEach，ES5具有遍历数组功能的还有map、filter、some、every、reduce、reduceRight等，只不过他们的返回结果不一样。但是使用foreach遍历数组的话，使用break不能中断循环，使用return也不能返回到外层函数。Array.prototype.method=function(){ console.log(this.length);}var myArray=[1,2,4
2021-01-17 14:37:54
6693
原创 axios请求方式和配置项
axiosgithub 开发者平台https://developer.github.com/axios安装&导入npm i axiosimport axios from "axios"基本五种请求get请求axios(config)axios(url,config)axios.get(url,config)post请求axios(config)axios(url,config)axios.post(url,data,config)put请求axios(conf
2020-12-29 11:03:51
7855
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人