src/menu.vue <script type="text/jsx">
import emitter from 'element-ui/src/mixins/emitter';
import Migrating from 'element-ui/src/mixins/migrating';
import Menubar from 'element-ui/src/uti
转载
2024-09-25 10:32:20
67阅读
less 覆盖 Element UI 的 Message 宽度因为要在手机端使用 Element UI，所以不可避免的使用了 Element UI 的 Message 组件。但是 Message 组件多半不能全部显示，很难看（如下），所以就想覆盖Message 的样式。在网上找了一圈，加上自己的不断尝试，最终成功。在 Vue 中使用 ElementUI 的 Message 组件我们采用按需引入 E
首先还是要明确几个概念，这里通过修改css并截图给大家介绍下，理解了这几个概念，代码写起来会得心应手许多。clientWidth，clientHeightscrollWidth，scrollHeightoffsetWidth，offsetHeightclientLeft，clientTopscrollLeft，scrollTopoffsetLeft，offsetTop1. clientWidth，
转载
2024-03-25 20:01:46
976阅读
上一章我们详解了项目的架构目录，这一章主要学习对接口的封装。网络请求封装是每个前端项目必不可少的一项，有利于方便统一管理，比如在请求头统一加上后台校验数据，这样就没必要在每个接口中都写一遍了嘛，这也是面向对象编程的一个好的提现。我们这次选用的是axios插件，这个插件优点还是蛮多的，支持promise，可以拦截请求和拦截响应，客户端支持防御XSRF攻击等等，那么我们就开始吧。一、安装axios老规
转载
2024-07-12 13:05:03
40阅读
组件递归当我们编写一个模块的时候，由于不知道数据的嵌套程度有多深，也就不知道组件的元素结构有多少重复的嵌套，而我们此时所用的Vue模板是一个静态的模板，于是会出现一种无法完整表达嵌套深度的现象因此在这种场景下，就会使用到组件递归的概念，就是指在自身组件中使用自己其关键就是在于注意给组件命名（添加name属性）传的参数也要能完成递归操作，并且有递归出口在组件中有事件注册的时候要对引用的组件进行事件的
文章目录Transition基本用法Transition添加动画效果的基本原理基于css的过渡效果css过渡class为过渡效果命名CSS的transitionCSS的animation同时使用 transition 和 animation — type自定义过渡class深层过渡效果JavaScript钩子Transition组件可配置事件常见事件配置的钩子Transition组件可配置属性封
什么是插槽？插槽（slot）是 Vue 提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，且具有模块化的特质和更大的重要性，插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制 用 < slot > 元素将不同的DOM 树组合在一起，slot 是组件内部的占位符，用户可以使用自己的标记来填充1、默认插槽插槽内容可
转载
2024-10-18 15:02:16
36阅读
# 如何实现 Android 底部 Menu 的高度调整
在 Android 开发中，底部菜单（Bottom Navigation）是一个常用的界面元素。它提供了简洁的方法来切换不同的视图。不过，有些时候你可能希望对底部菜单的高度进行调整。本篇文章将指导你完成这一过程，帮助你理解每一步。
## 流程概述
下面是一张简单的流程图，展示了调节 Android 底部菜单高度的步骤。
| 步骤 |
原创
2024-10-15 05:54:08
174阅读
一直想自己动手做一个图片轮播的控件,查查网上的资料大多引用已经做好的组件,其原理算法不是很清楚,于是自己用jquery写了一个.先看下效果图: 主要界面实现思路如下:1.新建一个div宽度为100%,flex布局,主要是为了
认识vue-router1、概念：vue-router是vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。在使用 vue-router 时，我们需要做的就是把路由映射到各个组件，vue-router 会把各个组件渲染到正确的地方。在vue-router的单页面应用中，页面的路径的改变就是组件的切换。2、安装环境：cnpm install vue-router --s
1.Mock1.1.什么是Mock.js背景前后端分离之后，前端迫切需要一种机制，不再需要依赖后端接口开发，而今天的主角mockjs就可以做到这一点。概念Mock.js是一个模拟数据的生成器，用来帮助前端调试开发、进行前后端的原型分离以及用来提高自动化测试效率。特点数据类型丰富：支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。拦截Ajax请求：不需要修改既有代码，就可以拦截Aja
elementui tree鼠标右击显示menu1、tree鼠标右击方法2、tree懒加载3、鼠标右击事件 最近的项目做权限管理涉及到比较多树形结构，在这里分享一种鼠标右击树节点显示菜单的方法，效果图如下。（网上看了很多其他方法，感觉太繁琐，或者说不适合自己的项目） 1、tree鼠标右击方法官方文档给出了鼠标右击的方法，直接拿来用就是了， @node-contextmenu=“rightCli
转载
2024-04-17 12:12:00
218阅读
缩放浏览器，表格+分页依旧正常展示，如下图所示：图片中涉及到 左侧的dg-table（封装过的el-table）、右侧的el-table 两种类型的样式设置由于本篇是使用了position定位来处理的，所以先要了解：Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动 简单的定位实现过程给想要自适应高度的div设置position:absolute;top:0;left
转载
2024-04-19 22:11:07
356阅读
一.需求有时候我们需要在项目里做一个菜单样式的功能，比如美团的
image.png
再比如JD的
image.png
有时候很多个app需要这样的UI，或者一个app里面有多个地方需要，那如果重复写的话就会很麻烦，我们可以自定义一个View，然后在多处复用。我知道你恨牛逼搭这个页
/*
* 定义公共js里，在入口文件main.js中import；
* 给elementUI的dialog上加上 v-dialogDrag 指令就可以实现弹窗的全屏和拉伸了。
*/
// v-dialogDrag: 弹窗拖拽+水平方向伸缩
Vue.directive('alldialogDrag', {
bind(el, binding, vnode, oldVnode) {
转载
2024-04-04 07:08:12
169阅读
原理是 利用vue 的自定义指令功能 自定义一个指令 官方文档 下面是指令内容export default {
bind(el, binding, vnode, oldVnode) {
let resizeEvent = new CustomEvent('drag-resize',{detail:'尺寸变化',bubbles:false});
//初始化不最大化
el.
转载
2024-04-19 20:27:23
679阅读
一：安装及引入1.1安装方式一：用CDN引入<!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 --><script src="https://unpkg.com/element-ui/lib
转载
2024-09-03 10:58:23
113阅读
vue中的条件渲染v-if v-show 控制模板标签是否在页面上显示v-if 对应的js表达式为false：移除该标签dom节点v-show 对应的js表达式为false：只控制了display属性为none，dom节点依然存在v-show 性能好一点，因为不会去频繁的操作domv-if v-else 若v-if为true，v-else不显示，若v-if为false，v-else显示，但注意v-
import Vue from 'vue'
/*
* 定义一个directives.js,在入口文件main.js中import './utils/directives.js'；
* 给elementUI的dialog上加上 v-dialogDrag 指令就可以实现弹窗的全屏和拉伸了。
*/
// v-dialogDrag: 弹窗拖拽+水平方向伸缩
Vue.directive('dia
转载
2024-05-03 19:51:58
1295阅读
一个后台管理常常需要一个标签页来管理已经打开的页面，这里我们单独写一个组件来展示标签页数组。该标签页组件只做展示不涉及操作数据。标签页数组可记录已打开的数组，还能定义什么页面需要缓存，是一个重要的功能呢。首先，建立一个TagList.vue组件，里面代码如下<template>
<div
class="tag-list-cp-container"
ref="Ta
