PC
小曲曲
这个作者很懒,什么都没留下…
展开
-
防考试作弊切屏
【代码】防考试作弊切屏。原创 2024-02-29 16:00:13 · 1478 阅读 · 0 评论 -
element——table
表格宽度width不设置width,剩余宽度会分配给所有列;没有剩余宽度时,所有列都会换行;min-width 会把剩余宽度按比例分配给所有设置了 min-width 的列;直到没有剩余宽度时,会产生滚动条;width是固定宽度,剩余宽度会分配给其他没有设置width的列;没有剩余宽度时,没有设置width的列会换行;对于不确定长度的列,首先需要设置min-width,再设置省略显示:show-overflow-tooltip="true"。当剩余宽度没有时,会显示 …推荐方案 列比较多原创 2022-04-13 16:00:43 · 914 阅读 · 0 评论 -
nuxt——vuex的使用
store/index.js内置export const state = () => ({ // 这里是全局数据保存的地方 token:'', userInfo: {},})// 修改state里面的函数必须用到mutations里面的函数export const mutations = { setUserInfo(state, data) { // 每个 mutation 函数都可以接受到两个参数 // 第一个是 state原创 2022-04-06 11:13:07 · 1519 阅读 · 0 评论 -
递归——获取tree结构默认第一个满足条件的id
// 获取树 getTree() { houseTree().then((res) => { this.data = res.data; // 首次进来获取默认的楼栋id if (!this.buildId) { this.getId(this.data, this.buildIdArr); console.log(this.buildIdArr); if (this....原创 2022-04-01 11:19:42 · 820 阅读 · 0 评论 -
顶部滚动固定及鼠标移入替换图片
顶部滚动固定监听页面滚动距离,控制js变量== 注意this的指向 ==使用js变量控制导航栏的显示隐藏(此处两个导航栏样式不一样)导航栏使用fixed固定定位会脱离文档流,使用sticky粘性布局不会脱离文档流如果导航栏需要占位就用粘性布局.sticky { position: sticky; /* 设置 position 为 sticky */ top: 0px; /* 设置 top、right、bottom、left 属性中的至少一个 */ z-index: 999;}原创 2022-04-01 11:18:05 · 200 阅读 · 0 评论 -
两个左右布局不确定高度的盒子如何保持高度一致 —— table布局
父盒子 table布局且左右间距20px display:table;border-spacing: 20px 0;子盒子 display: table-cell原创 2022-03-24 14:39:48 · 882 阅读 · 0 评论 -
设置滚动条样式或隐藏滚动条
// 隐藏滚动条::-webkit-scrollbar { display: none;}原创 2019-10-28 18:43:57 · 620 阅读 · 1 评论 -
若依—— 父组件向子组件传递数组和对象
父组件向子组件传递数组,控制表格table列的显示隐藏子组件接受的父组件的值分为——引用类型和普通类型两种,普通类型:字符串(String)、数字(Number)、布尔值(Boolean)、空(Null)引用类型:数组(Array)、对象(Object)结论普通类型是可以在子组件中更改,不会影响其他兄弟子组件内同样调用的来自父组件的值引用类型的值,当在子组件中修改后,父组件的也会修改。其他同样引用了该值的子组件内部的值也会跟着被修改。...原创 2022-03-16 13:20:17 · 1384 阅读 · 0 评论 -
切换主题——控制类名的显示隐藏
使用Switch标签切换主题 <el-switch v-model="theme" /> watch: { theme() { toggleClass(document.body, 'custom-theme') } }公共方法/** * 判断某标签上如果有某个类名,就去掉;如果没有就添加 * @param {HTMLElement} element 标签 * @param {string} className 类名 */export fun原创 2022-01-28 10:04:49 · 1132 阅读 · 0 评论 -
前端性能优化 - 使用内容分发网络CDN
为什么使用CDN当引入的组件越来越多时,运用 webpack 打包后的 app.js 文件容易变得过大,对首屏加载很不友好。使用CDN的第三方资源的JS代码,将不再打包到本地服务的JS包中。减小本地JS包体积,提高加载速度。-给网页加载提速Vue项目打包的时候,默认会把所有代码合并生产新文件,其中包括各种库导致打包出来很大。如果使用cdn的话,会更利于程序的加载速度。在Vue项目中,引入到工程中的所有js、css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开原创 2022-01-25 10:23:36 · 955 阅读 · 0 评论 -
角色权限控制合集
后端返回角色标识前提条件已知固定两种角色已知每种角色需要展示的菜单思路步骤登录获取角色标识根据角色在vuex中存储该权限拥有的权限数组[{ path: '/foo', name:'foo', redirect:'', meta: { icon: "weibo", title: "首页", }, children: [], component: Foo }]根据路由数组生成路由文件和菜单数组// 路由文件引入所有文件原创 2022-01-20 10:29:50 · 206 阅读 · 0 评论 -
antdesign——菜单Menu
1、根据list值生成静态菜单代码SiderMenu.vue<template> <div> <a-button type="primary" style="margin-bottom: 16px"> LOGO </a-button> <a-menu :default-selected-keys="['1']" :default-open-keys="['2']" mode="inline"原创 2022-01-20 10:28:41 · 2978 阅读 · 0 评论 -
vue根据路由递归动态生成菜单
需求根据路由数组,生成菜单数组,过滤掉隐藏的菜单源数据let arr = [ { path: "/", name: "home", meta: { icon: "weibo", title: "首页", }, redirect: "/dashboard/analysis", component: () => import("@/layouts/B原创 2022-01-19 15:35:38 · 2269 阅读 · 0 评论 -
antdesign——Tree树形控件
需求根据所有数据展示树形结构根据选中数据获取选中节点的keys集合,渲染默认选中的节点根据选中数据获取选中节点的keys集合const checkedData = [ { title: "0-0", key: "0-0", children: [ { title: "0-0-0", key: "0-0-0", children: [{ title: "0-0-0-0", key: "0-0-0-0" }],.原创 2022-01-18 18:01:18 · 4865 阅读 · 0 评论 -
antdesign——layout
bug1当组件内容很长时:控制左侧菜单不可上下滚动当组件内容很长时:右侧正常上下滚动,且footer在最下边当组件内容很短时:内容部分撑开页面布满全屏//BasicLayout<style lang="less" scoped>/deep/.ant-layout { height: 100vh;}/deep/.ant-layout-content { min-height: auto !important;}</style>bug2:菜单点击收.原创 2022-01-12 10:33:23 · 2135 阅读 · 0 评论 -
PC端页面切换进度条插件nprogress
安装npm i nprogress引入<script src='nprogress.js'></script><link rel='stylesheet' href='nprogress.css'/>// router.jsimport NProgress from "nprogress";import "nprogress/nprogress.css";router.beforeEach((to, from, next) => { NPr原创 2022-01-10 15:03:38 · 271 阅读 · 0 评论 -
elementUI中message的用法
在js文件中直接使用message // 引入弹窗和确认弹窗组件 import { MessageBox, Message } from 'element-ui' // 弹窗提示 Message({ message: res.message || 'Error', type: 'error', duration: 5 * 1000 }) // 确认弹窗提示并添加成功的回调 MessageBox.confirm('You have be原创 2021-09-15 09:51:00 · 5415 阅读 · 0 评论 -
pc端自适应屏幕
媒体查询默认设置body为粉色;当屏幕宽度在480px到580px之间,body为绿色;当屏幕宽度大于580px时,body显示为黄色;<style>body { background-color: pink;}@media screen and (min-width: 480px) { body { background-color: lightgreen; }}@media screen and (min-width: 580px) { bod原创 2021-09-06 13:49:25 · 2470 阅读 · 0 评论 -
Vue+elementUI开发中 Cannot read property ‘resetFields‘ of undefined 问题解决以及原因分析
有个添加数据与编辑数据的功能。为了减少代码量,两者使用了同一个dialog,通过不同按钮点击使用对应的方案进行显示。在添加数据的按钮的click事件中直接写入了resetFields。之后正常运行过一段时间,但是就在最近(添加了很多代码)开始报错:TypeError: Cannot read property ‘resetFields’ of undefined同时我发现,只要显示过一次dialog,后面就不会报错了。所以我可以确定是因为代码量过大,对应的对象来不及生成,从而导致了读取了空对象。所原创 2021-09-02 19:06:33 · 511 阅读 · 1 评论 -
vue根据角色动态路由的实现方式
思路一:路由文件,分为静态路由和动态路由登录成功,判断角色,addRoutes添加动态路由根据路由生成菜单栏方法一:直接获取路由this.router.options.routes,但是addRoutes添加的动态路由使用该方法获取不到解决方法:在addRoutes添加动态路由前,手动拼接静态和动态路由,赋值给options。this.router.options.routes,但是addRoutes添加的动态路由使用该方法获取不到 解决方法:在addRoutes添加动态路由前,手动拼接静态和动原创 2021-09-02 18:29:34 · 2983 阅读 · 0 评论 -
父组件中引入弹窗子组件三种写法
1、props和$emit控制弹窗显示隐藏父组件<template> <div class="about"> <a-button type="primary" @click="show = true"> 打开弹窗 </a-button> <popup :show="show" @change="show = false"></popup> </div></template>&l原创 2021-05-11 14:14:42 · 649 阅读 · 0 评论