1、安装element-uinpm install element-ui --save2、在main.js中引入element 和 css文件// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base...
原创
2023-05-26 05:54:51
228阅读
# 简略版+自己的注释// 判断一个变量是否是对象
function isObject(obj) {
return obj.constructor === Object
}
class Observer {
constructor(value) {
this.value = value;
if (!arr.isArray(value)) {
this.walk(value);
}
}
walk(o
转载
2024-07-18 21:16:20
110阅读
tab功能在网页中是比较常见的，那么用vue怎么实现tab操作呢，与jQuery实现tab的思路有什么区别呢？在使用jQuery类库实现tab功能时，是获取鼠标在mousenter或click时的index值，然后切换到当前的标题和内容，把其他的标题和内容的状态去掉：$('.tab .title').find('.item').removeClass('current').eq(index).ad
一、问题vue项目中运用到了Tab切换，切换vue组件，如图切换封装的echarts图表组件 ❗ **==> 注意：此时用的自己写的死数据，图表也添加了监听事件使图表随窗口变化而变化 **代码如下：<el-tabs v-model="attributeName">
<el-tab-pane label="用户数量" name="first">
转载
2024-03-16 01:24:51
491阅读
表格中我们经常需要动态加载数据， 如果有多个页面都需要用到表格， 那我希望可以有个组件， 只传数据过去显示， 不用每个页面都去写这么一段内容： 1 <el-table :data="tableData" border size="mini" fit highlight-current-row height="500">
2 <el-table-column ty
转载
2024-04-23 10:37:58
686阅读
首先还是要明确几个概念，这里通过修改css并截图给大家介绍下，理解了这几个概念，代码写起来会得心应手许多。clientWidth，clientHeightscrollWidth，scrollHeightoffsetWidth，offsetHeightclientLeft，clientTopscrollLeft，scrollTopoffsetLeft，offsetTop1. clientWidth，
转载
2024-03-25 20:01:46
976阅读
(vue.js)Vue element tab 每个tab用一个路由来管理？ 来源：网络整理 时间:2017/5/13 0:24:01 关键词: 来源：网络整理 时间:2017/5/13 0:24:01 关键词: 关于网友提出的“ (vue.js)Vue element tab 每个tab用一个路由
转载
2019-06-10 11:39:00
501阅读
2评论
有tab栏切换通常都是会直接刷新界面，现在有一个需求就是说当我点击tab切换或者菜单切换的时候，原本写的查询不变。1、在layout中加入keep-alive,进行缓存这时候，当你输入查询条件，进行切换的时候，你会发现， 效果达到了。但是如果你够细心，你会发现，如果有联动的界面，从a界面点击一条数据进入b界面，数据不再更新，一直保持着第一次的那条数据。为什么会这样呢？原因是vue的生命周期函数mo
转载
2024-04-03 10:44:00
917阅读
文章目录样式准备思路搭建搭建页面框架准备状态管理监听路由变化tab方法登录 与 退出登录 样式准备搭建好的vue脚手架（elementui，router，vuex）elementui（NavMenu 导航菜单，Tabs 标签页）思路将打开的所有路由放到一个栈里（openTab:[]），tabs显示遍历openTab初始状态，将首页推入栈，并设置激活状态当切换路由时(监听路由变化),判断栈里是否存在
转载
2024-02-20 12:32:32
380阅读
一直想自己动手做一个图片轮播的控件,查查网上的资料大多引用已经做好的组件,其原理算法不是很清楚,于是自己用jquery写了一个.先看下效果图: 主要界面实现思路如下:1.新建一个div宽度为100%,flex布局,主要是为了
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阅读
我始终坚持，前端开发不能满足于实现功能，而是需要提供优秀的交互与用户体验。即使没有产品没有UI的小项目，也可以自己控制出品质量，做到小而美。所以前端们不仅仅需要了解框架如何用，还要学习一些设计、交互、体验的知识，在一堆雷同的产品中脱颖而出。哦，扯远了，因为今天想记录的这个功能是一个小小的体验提升，有感而发了。表格行数较多时会让页面产生滚动条，用户滚动页面的话，上面的搜索条件或者其它内容被卷上去了看
此需求来源于一个pc端的网页，要求用户打出@的时候 能够出现候选人列表，当点击其中一个之后，文字则显示@xxxx应产品要求 1，当删除'@xxx'中其中的任意一个字符或字符串的时候 '@xxx' 这段字符串均被删除 2，'@xxx'字符串中不得穿插其他内容 即当用户光标在'@xxx'中输入的时候，是无效的思路：1, 首先绑定textare
缩放浏览器，表格+分页依旧正常展示，如下图所示：图片中涉及到 左侧的dg-table（封装过的el-table）、右侧的el-table 两种类型的样式设置由于本篇是使用了position定位来处理的，所以先要了解：Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动 简单的定位实现过程给想要自适应高度的div设置position:absolute;top:0;left
转载
2024-04-19 22:11:07
356阅读
现在前端开发在写样式的时候比以前省心多了，这无疑得益于 UI 框架的普及，但是缺点就是使用它的东西不能完全自定义。这次就遇到
element-UI input 输入框
高度自定义的问题。先测试下简单的按钮修改：一、先放一个按钮<template>
<div>
<el-button type="warning">按我</el-butto
转载
2024-02-14 20:16:35
376阅读
/*
* 定义公共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阅读
一、计算属性computedcomputed是计算属性，也就是计算值，多用于计算值的场景不支持异步，当computed内有异步操作时无效，无法监听数据的变化computed具有缓存性，computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值才会重新调用对应的getter来计算。也就是说，只有依赖数据发生改变时，才会重新进行计算如果一个属性是由
转载
2024-02-11 08:50:27
258阅读
一：安装及引入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 的自定义指令功能 自定义一个指令 官方文档 下面是指令内容export default {
bind(el, binding, vnode, oldVnode) {
let resizeEvent = new CustomEvent('drag-resize',{detail:'尺寸变化',bubbles:false});
//初始化不最大化
el.
转载
2024-04-19 20:27:23
679阅读
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阅读
