m0_58861443的博客

真机页面无法滚动

ant-design-vue Table组件去掉自带分页器去除分页器只需要一行代码 :pagination=“false” <a-table ref="table" size="middle" bordered rowKey="id" :columns="columns" :dataSource="dataSource" :pagination="false" //去除自带分页器

echarts使用1：使用命令安装npm i echarts --save2：在项目中引入（1）全局引入在main.js中import echarts from 'echarts'Vue.prototype.$echarts = echarts（2）按需引入（在echarts.vue中作为子组件）import * as echarts from 'echarts';import Vue from "vue";Vue.prototype["$echarts"] = echarts

一：ECharts数据更新问题父组件<echarts :data='data'></echarts>子组件<div> <div id="index" style="height:450px;padding:10px 10px" ></div> </div>props{data:{ type:Array, default:()=>{

viser图表中展示的文本或者tooltip信息展示框中的文本信息如果需要添加单位等某些处理来最终展示，那么可以用 formatter 来进行文本格式处理，效果图如下 <v-chart :forceFit="true" :height="height" :data="data" :scale="scale" :padding=" padding" :onClick="handleClick" :title="title">...

自定义提示文本，如图效果 <v-pie position="count" color="item" :v-style="pieStyle" :label="labelConfig" :tooltip="tooltip" />data（）{return{ tooltip:[ 'item*percent*count', (item,percent,count) => { //这里可以对数据进行处理

问题 ：点击跳转详情页的时候。路由改变，页面不刷新，也不触发created 事件 。原因 ：页面有缓存。解决方案 ：1: 在路由出口处，加上唯一的key属性做为路由的id<keep-alive><router-view :key="$route.fullPath"> </router-view><keep-alive>我们配置了动态路由，并且给每个标题传了不同的id值 通过$route.fullpath就可以拿到传过去的id2:watch 监

vue Ant Design a-range-picker自定义时间要实现的效果 ，选择时间时，需要添加 昨天，今天，上周，本月，本季度等筛选条件步骤自定义 rangeDate.jsimport moment from 'moment'const rangeDate = { data() { return { ranges: { '昨天': [moment().day(moment().day() - 1), m

Jeecg 自定义详情页追加导航栏要实现的效果、-点击详情。跳转详情页面，详情追加到tab导航栏。但是不在菜单栏显示实现步骤在菜单栏设置路由2。在需要跳转的地方设置路由（传递id）// 点击跳转详情页面xiangqing(id){ this.$router.push({ path:`/xxx/${id}`, }}3，在详情页面从路由中获得id id =this.$route.params.id，用发送请求...

Vue3自己封装 confirm 函数一。 封装 confirm 组件 confirm.vue<template> <div class="confirm" :class='{ fade: fade }'> <div class="wrapper" :class='{ fade: fade }'> <div class="header"> <h3>{{title}}</h3>

vue3——自己实现数据无限加载功能的封装一、封装的意义数据较多的时候，滑动滚动条显示加载状态，可以给用户很好的体验代码维护性更好代码可复用二、如何封装？需要用到@vueuse/core中的useIntersectionObserver，用来判断元素是否出现在可视区链接：useIntersectionObserver1. 准备项目根目录下打开任意终端，执行npm install @vueuse/core@5.3.0，这里安装的固定版本，各位按需选择因考虑复用组件，故封装为全局组件，老

Vue3 制作发送验证码倒计时提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录Vue3 制作发送验证码倒计时前言一、怎么制作验证码定时器包？采用 VueUse的包。useIntervalFn( )二、使用步骤1.设置发送验证码按钮2.功能实现3.样式总结前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考

Vue3封装 page 分页组件实现效果分页组件封装 page.vue<template> <div class="pagination"> <a @click='changePage(false)' href="javascript:;">上一页</a> <span v-if='currentPage > 3'>...</span> <a @click='changePage(item)

Vue3封装 消息提示实例函数Vue2.0使用 Vue.prototype.$message = function () {}vue3.0使用app.config.globalProperties挂载原型方法app.config.globalProperties.$message = Message也支持直接导入函数使用 import Message from './Message.js样式布局封装 message.vue<template> <Transition na

Vue3封装 消息提示实例函数组件功能分析：固定顶部显示，有三种类型：成功，错误，警告。显示消息提示时需要动画从上滑入且淡出。组件使用的方式不够便利，封装成工具函数方式。样式布局封装 message.vue<template> <Transition name="down"> <div class="my-message" :style="style[type]" v-show='isShow'> <!-- 上面绑定的是样式

vue按钮组件的自定义封装封装按钮组件 button.vue<template> <button class="xtx-button ellipsis" :class="[size,type]"> <slot /> </button></template><script>export default { name: 'XtxButton', props: { size: { type

教你在Vue3中如何使用依赖注入完成组件之间的数据传递使用依赖注入父组件向子孙组件传递数据// 父组件import 子孙组件import {ref,provide} from 'vue' setup(){ provide('moneyInfo',1000) return{moneyInfo} }//孙子组件import {inject} from 'vue'setup(){ const moneyInfo=inject('moneyInfo') ret

Less的自动化导入提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加例如：第一章 Python 机器学习入门之pandas的使用提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录Less的自动化导入一、为什么要做Less的自动化导入？二、项目中引入less1.手动引入1）准备样式变量文件2）手动引入使用其中的变量2自动引入方案1）在当前项目下执行一下命令`vue add style-resources-loader`，添加一个vue-cli的插件2） 安装完毕

Vue的持久化文章目录Vue的持久化前言一、为什么要做Vue的持久化？二、使用步骤1）首先：我们需要安装一个vuex的插件`vuex-persistedstate`来支持vuex的状态持久化。2）然后：在`src/store` 文件夹下新建 `modules` 文件，在 `modules` 下新建 `user.js` 和 `cart.js`3）继续：在 `src/store/index.js` 中导入 user cart cate模块。4）最后：使用vuex-persistedstate插件来进行持久化

数字转换成字符串 const difficulty = [ { value: 1, label: '简单' }, { value: 2, label: '一般' }, { value: 3, label: '困难' }]后端返回渲染成：方法const numberDifficulty = difficulty.reduce((acc, cur) => { acc[cur.value] = cur.label

格式化时间将2021-09-05T09:08:03.000Z 转换成 YYYY-MM-DD HH:mm:ss 格式1.引入第三方包 dayjs (一个轻量的处理时间和日期的javascript库)（1）下载 npm install/ i dayjs --save(2). main.js 中全局引入 `import dayjs from 'dayjs Vue.prototype.dayjs=dayjs'2 时间转换函数 timeTranslate (val) {

history路由模式与hash路由模式两种单页应用的路由模式 区别hash模式hash模式 ：使用 URL 的 hash 来模拟一个完整的 URL, 其显示的网络路径中会有 “#” 号hash 虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash后刷新, 也不会有问题hash模式示例: http://localhost:8080/#/home http://localhost:8080/#/user原理： hashChangehistory模式

1:浏览器自带的可以做全屏功能的api 但是有浏览器兼容问题document.documentElement.webkitRequestFullScreen()2:通过插件安装插件npm i screenfull使用插件在全屏组件中引入import screenfull from 'screenfull'给icon 添加点击事件，在回调中使用使用插件的核心api<svg-icon icon-class="fullscreen" class="fullscreen"

项目开发完成打包 ：用webpack做打包（把.vue, .js, .less ------> .js, .css, .html）打包的优势在保证功能的情况下，让文件尽可能的小在保证功能的前提下，让我们的页面显示出来的速度更快一些打包命令。npm run build:prod打包之后，会得到dist目录，如果希望可以双击打开index.html，则需要提前在vue.config.js中配置：vue.config.js中{ publicPath: '.

打包去掉console.log在vue.config.js中，配置：chainWebpack(config) { config.optimization.minimizer('terser').tap((args) => { args[0].terserOptions.compress.drop_console = true return args })}

// 动态生成路由router.addRoutes([路由配置对象])或者 this.$router.addRoutes([路由配置对象])示例， 点击按钮，跳转abc页面<button @click="hAddRoute"> addRoutes </button>hAddRoute(){ this.$router.addRoutes([{ path:'/abc', component:()=>import('@/views/abc')

>>> 在less中使用/deep/ 在 less中使用:: v-deep 在scss中使用

Mongo 出现问题，显示代理服务无法连接数据库解决方案1:打开终端 ，输入命令 lsof -i:xxx 查找xxx监听的程序xxx 是代理服务端口号2: kill -9 12580 服务内部链接数据库失败，需要杀死进程重新链接 kill -9 12580PID :12580 是本次进程的ID， 每次启动一个应用都会给一个ID3:重新启动Mongonpm run serve...

后台返回的数组包对象格式的数据转换成表格数据格式的方法 transformDate(res) { const mapInfo = { id: '编号', password: '密码', mobile: '手机号', username: '姓名', timeOfEntry: '入职日期', formOfEmployment: '聘用形式', correctionTime: '转正日期

方法1: 添加 readonly 属性readonly规定输入字段为只读可复制，但是，用户可以使用Tab键切换到该字段，可选择,可以接收焦点，还可以选中或拷贝其文本。 <el-form-item label="部门" prop="departmentName"> <el-input readonly v-model="formData.departmentName" style="width:50%" placeholder="请选择部门" @focus="hFocus"

（添加数据成功后要看到新数据，所以要到最后一页）//1:封装添加数据apimethods:{ async doAdd(){ // 调用API await xxx() // 关闭弹出框 this.xxx弹出框=false // 判断添加数据最后一页是否时满的 if(isLastPageFulled){ //是满的 ，页码加1 this.page=this.maxPage+1 }else{ // 不是满的

删除数据时，分页出现的小问题(如果页面中只剩一条数据。做删除后，重新渲染时，请求的仍然是这个页面的数据，就会出先No Data）```js// 做删除时要携带idasync doDel(id) {const res = await delEmployee(id)// 判断这页数据是否等于1if (this.list.length === 1) {// 等于1 删除时页码要减1this.queryParams.page–if (this.queryParams.page <= 0)

添加删除功能1:绑定点击事件 ,传入Id。@click=“hDel(scope.row.id )”2：写删除方法 ，添加 confirm 询问是否删除3:调删除API。4:删除成功。重新查询数据 async doDel(id) { // 调用删除API const res = await delAPI(id) //重新渲染 this.$message({ type: 'success', message: '删除成功!' }) con

快速把对象属性拿出来var obj={姓名："需",手机号："1234567"} Object.keys(obj) console.log(obj). // ["姓名", "手机号"]

即时通讯即时发送和接收互联网消息等的业务ajax只能是发送请求后，得到一次响应，无法实现即时通讯、ajax轮询可以模拟，比如创建计时器，每间隔一秒，自动调用接口即时通讯一次请求多次响应WebscoketHTML5出的新的协议，可以在一个TCP链接上，实现即时通讯的效果需要前端的后端的支持后端可以主动向前端推送内容webScoket的使用...

http协议 超文本传输协议，定义服务器和客户端的传送格式请求发送的数据包，叫请求报文（http请求报文）HTTP 请求消息由 请求行，请求头部，空行，和请求体 4部分组成往后端传参有几种方式 （3）请求行 url后面请求头请求体 （get 方式可以在请求体里给后端带值，根据语意化一般不在请求体中携带）响应回来的数据包，叫响应报文（http响应报文）http响应消息由状态行，响应头部，空行，和响应体4部分组成缺点：HTTP协议：客户端与同西端建立

项目中关于分页的那些问题添加分页组件（element UI）关于分页中自定义页码和点击页码跳转问题 <el-pagination :page-sizes="[3, 5, 7, 10, 20]" //自定义页码数 layout="sizes,prev,pager,next,jumper" :current-page.sync="curPage" //动态绑定当前页

全局组件。全局组件的作用能在项目中多次使用组件的.vue文件写在component里定义全局组件的格式//引入组件 import 组件名字 from '@/component/x x x'//注册组件 Vue.component('组件名字',组件名字）统一注册全局组件的方式方式1 (缺点：每注册一次全局组件。都要写这两段代码)//引入组件 import 组件名字 from '@/component/x x x'//注册组件

let obj={a:1} let obj2=obj obj2.a=100 console.log(obj.a)//100 //对象的结构赋值 ... let obj={a:1} let obj2={...obj} obj2.a=100 console.log(obj.a)//1数据存放1.基本类型的变量是存放在栈区的（栈区指内存里的栈内存）2.引用类型的值是同时保存在栈内存和堆内存中的对象对象引用当从一个变量向另一个变量赋值引用类型的值时，同样也会将存储..

表单校验的基本步骤定义验证规则定义规则*data() { return { // 省略其他... rules: { name: [ { required: true, message: '部门名称不能为空', trigger: 'blur'}, { min: 1, max: 50, message: '部门名称要求1-50个字符', trigger:'blur'}, { validat