兔子的博客

原创 el-table合并表头，表头第一个添加斜线

斜线 主要添加css。

原创 vue预览和下载 pdf、ppt、word、excel文档,文件类型为链接或者base64格式或者文件流,

*

原创 echarts相关配置

示例，双y轴刻度，防止线重叠。

原创 摸鱼摸鱼摸鱼

摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼摸鱼。

原创 我的创作纪念日

一晃就四年了。

原创 vue3页面适配响应式（适用pc，移动端）

网上关于适配的方法很多，今天在适配的时候发现网上的方法并不适合我这个系统，还用到了ts，但是ts也没有用标准，尝试了大半天后终于找到合适的办法了。在main.ts中引入rem.js，并在vue.config.js写入。在根目录src下建立文件夹utils，然后创建rem.js文件。在根目录src下创建postcss.config.js。

原创 1024快乐

1024 ~~~~

原创 vue复制文案，复制图片，黏贴图片

vue 实现复制文案，复制图片，在微信聊天框，黏贴为图片。

原创 el-table合并单元格

el-table-column 需要添加property字段，属性值同props，用来判断需要合并的字段。此处为this.rolePermitItemList。

原创 vue注册自定义指令，添加权限判断

添加按钮级权限判断

原创 封装js方法，实现获取url参数

通用方法获取url参数

原创 使用原生div制作table表格

在移动使用横屏表格功能，横屏后无法实现同向滚动功能，此时使用div制作table，实现容器内的滚动

原创 js获取一年中所有的周数和对应的日期

js获取一天中所有的周和周对应的日期

原创 js常用方法 数组去重、数组排序等

常用方法

原创 在vue3中使用echarts不显示tooltip问题

vue3无法出现tooltip

原创 el-table 排序

el-table排序

原创 在uniapp中使用unipay实现微信支付

在uniapp中使用uni-pay完成微信支付

原创 使用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());

原创 vue无白屏刷新

在App.vue文件中添加provide ，isRouterAlive。在需要刷新的页面添加inject: [“reload”],<template> <div id="app"> <router-view v-if="isRouterAlive" /> </div></template><script>export default { name: 'App', provide ()

原创 el-table动态表头，动态数据处理

在el-table中遇到一个有意思的数据处理，以下数据表头为动态的数据此数据表头处理比较简单，难点在于表头对应的数据，当后端返回的数据只有部分时，如只有温度就返回温度，只有PM2.5就只返回PM2.5,而且后端没有返回其他没有的字段的默认值，此时我们就需要对数据进行处理对应好数据所在的位置不然则会出现PM2.5的值跑到了温度下面<el-table> <el-table-column align="center" label="序号" type="index"> </

原创 Vue导入上传Excel

对Excel的数据进行上传首先需要使用xlsx此文章的上传方式为手动上传（数据解析可在前端进行，也可交由后端处理）安装插件 npm install xlsx引入 import XLSX from ‘xlsx’使用el-upload进行上传 （el-upload在这不再做介绍）<el-upload :show-file-list="true" :headers="{ Authorization: token }"

原创 elementui 表格插入图片并且鼠标移入放大

先来看下效果图如果需要移入图片放大则可使用el-popover悬浮效果<el-table-column align="center" label="模板封面" prop="image"> <template slot-scope="scope"> <el-popover placement="right" title="" trigger="hover" > <!-

原创 vue3介绍

原创 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: {

原创 vue 列表无缝实时滚动

1、安装vue-seamless-scrollnpm install vue-seamless-scroll --save　　2.引入组件 import vueSeamlessScroll from 'vue-seamless-scroll' components: { vueSeamlessScroll},　3.对vueSeamlessScroll进行配置computed: { ...mapGetters(["$selectionIndustry"

原创 el-tree清空、设置默认值等功能

<el-tree ref="permissions" :default-checked-keys="permissionChecked" @check-change="handleCheckChangePermissions" //节点选中状态发生变化时的回调 @check="handleCheckChangeArea" //当复选框被点击的时候触发 :data="PermissionsTreeData" show-checkbox node-key="id" :check-

原创 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体积还是很大的，导出功能也不是一个非常常用的功能，所以使用的时候建议使用懒加载。使

原创 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

原创 vue分页 对el-pagination进行二次封装

分页组件Pagination<template> <div class="container"> <el-pagination style="margin-left: 20px; margin-top: 20px" @size-change="handleSizeChange" @current-change="handleCurrentChange" :

原创 vue 运行install 后缺失core-js

vue 运行install 后缺失core-js报以下错误These dependencies were not found:core-js/modules/es.regexp.dot-all.js in ./node_modules/_cache-loader@4.1.0@cache-loader/dist/cjs.js??ref–12-0!./node_modules/_babel-loader@8.2.3@babel-loader/lib!./node_modules/_cache-loader

原创 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') {

原创 一像素边框处理

伪类 + transform这种方式的原理很简单，就是把原先元素的 border 去掉，然后利用 :before 或者 :after 重做 border ，并 transform 的 scale 缩小一半，原先的元素相对定位，新做的 border 绝对定位。个人认为这是比较完美的做法。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-eq

原创 vue 响应式属性 VS 非响应式属性

响应式属性 VS 非响应式属性响应式当Vue组件的实例初始化的时候已有的数据就是响应式数据通过Object.defineProperty代理实例this身上的响应式属性的值发生改变会触发视图更新非响应式当Vue组件的实例初始化的时候没有，后期添加的属性没有通过Object.defineProperty代理实例this身上的非响应式属性的值发生改变不会触发视图更新如何设置响应式属性this.$set(target, propertyName/index, value)

原创 省市区三级联动以及无限分类

省市区三级联动以及无限分类一、 省市区三级联动省市区三级联动推荐使用https://github.com/uiwjs/province-city-china 三级联动数据结构[ { "code": "420000", "name": "湖北省", "province": "42", "children": [ { "code": "420100", "name": "武汉市", "province"

原创 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

原创 什么是跨域？怎么解决跨域

跨域问题的出现小程序不存在跨域的问题，但如果当前的项目发布成H5模式，则会出现跨域以H5项目进行当前项目的运行如果没有配置web服务器内容，则会出现无法运行的情况需要配置浏览器的安装路径跨域问题的解决方式最为快速简单的方式是安装客户端浏览器调试插件，只需要利用CORS unblock插件，开启该插件，就可以直接进行本地跨域测试操作利用vue.config.js设置跨域代理操作，在项目根目录新建module.exports = { devServ

原创 Vuex的使用

Vuex的使用一、Vuex为什么需要使用Vuex，它的作用是什么集中管理状态数据用于给多个组件共享数据Vuex的基本概念store 数据仓库是storestate： 设置状态state ->mapStategetters：获取数据getters 根据已有的状态数据计算得到新的状态数据，等同于Vue中的computed -> mapGettersmutations： 修改数据mutations（同步修改）->mapMutationsactions: 异步操作

原创 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.

原创 uniapp关闭默认返回安卓和ios

页面加入生命周期onBackPress(e) { if(this.isModalShow){ this.isModalShow=false; return true;//返回true阻止默认操作 }},ios页面有默认手势关闭页面，需要在page.json配置单个页面或整个应用关闭ios的手势返回，那它就只能走我们的导航栏关闭了，就能监听了。{ "path": "pages/xxx", "style": { "navigationBarTitleText": "xx

原创 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