tab栏切换通常都是会直接刷新界面,现在有一个需求就是说当我点击tab切换或者菜单切换的时候,原本写的查询不变。1、在layout中加入keep-alive,进行缓存这时候,当你输入查询条件,进行切换的时候,你会发现, 效果达到了。但是如果你够细心,你会发现,如果有联动的界面,从a界面点击一条数据进入b界面,数据不再更新,一直保持着第一次的那条数据。为什么会这样呢?原因是vue的生命周期函数mo
转载 2024-04-03 10:44:00
905阅读
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阅读
Element UI 项目分析讲过 vue 的插件开发原理,迫不及待的想要搭建一套自己的 插件库,那就从熟悉市面上最常用到的 vue UI 组件 ———— Element UI 开始吧。使用 vue init webpack-simple productName 初始化项目前提环境: node npm vue-cli# init vue init webpack-simple my-project
转载 2024-06-02 17:09:52
520阅读
一、vue-video-player1.安装cnpm install vue-video-player -S cnpm install 'video.js' -S2.导入使用在main.js中导入:import VueVideoPlayer from 'vue-video-player'; import 'video.js/dist/video-js.css'; Vue.use(VueVideo
转载 2024-09-24 14:36:45
417阅读
1、组件上使用v-model 官网解释:允许一个自定义组件在使用 v-model 时定制 prop 和 event。 默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event, 但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。 使用 model 选项可以回避这些情况产生的冲突。 简单来讲就是
文章目录组件介绍开发思路组件安装与使用标准用法自定义背景色和字体颜色点击和关闭的回调组件代码参数说明事件关于dxui组件组件介绍“Tag” 组件是一种常见的用户界面元素,通常用于显示标签或标记,以标识或分类内容、数据、选项或元素。标签通常用于给用户提供快速的视觉参考,帮助他们理解、筛选、组织或分类信息。以下是关于 “Tag” 组件的介绍和特点:标签显示:“Tag” 组件通常以文本或小图标的形
利用axios拿到后台城市数据,定义两个数据,一个为右边索引栏的字母数组(大写),一个为索引和城市的对象数组先将右侧索引栏字母定义出来,遍历数据的拼音,取出首字母,排序,转大写再定义第二个数组,做一个双for循环,先循环索引的字母,将字母以对象的形式插入到空数组中,再循环数据中拼音的首字母大写,若找出数据中的首字母大写与索引的字母一样的话就进行插入,以对象的形式插入到刚刚的数组中,最后用v-for
转载 1月前
353阅读
结构及样式先拆分一下日历, 可将其上下拆分成两部分, 上面的 星期 部分, 和下面的 数据 部分, 一周7天限定了列数为7列, 行数会随当月天数及1号所在位置而有所不同.移动端亦应根据屏幕宽度自适应布局, flex布局就是一个很好的选择, 我们对数据部分进行下模拟, 先造一个长度为40数据都为0的数组如下:const dataArr = Array(40).fill(0, 0, 40)现在, 我们
文章目录组件介绍开发思路安装与使用组件代码参数说明事件关于dxui组件组件介绍“Dialog” 组件是一种用户界面元素,通常用于显示模态对话框或弹出窗口,以展示重要信息、提示、确认、表单填写或其他互动内容。这种组件提供了一种方式来引导用户的注意力,以进行特定任务或获取用户的响应。以下是关于 “Dialog” 组件的介绍和特点:模态对话框:“Dialog” 通常是模态的,这意味着在对话框打开时
setup 中实现响应式数据<template> <img alt="Vue logo" src="./assets/logo.png"> <h2>a:{{a}}</h2> <button @click="add">vue3</button> </template> <script> im
一、功能概述 img 本章记录一下基于Vue实现一个的tabs选项卡切换组件(iview组件库tabs组件源码)。需要将实现的功能一步一步细化拆解出来,然后逐步实现。目前实现的功能包括:实现基础选项卡切换功能。实现当前选中的页签底部条高亮显示并且加入移动的动画。当空间不足时,显示左右箭头点击后可以进行移动页签。... 后续有时间还会继续累加功能。二、疑问?️不管是elemen
转载 2024-08-22 14:06:35
334阅读
tab功能在网页中是比较常见的,那么用vue怎么实现tab操作呢,与jQuery实现tab的思路有什么区别呢?在使用jQuery类库实现tab功能时,是获取鼠标在mousenter或click时的index值,然后切换到当前的标题和内容,把其他的标题和内容的状态去掉:$('.tab .title').find('.item').removeClass('current').eq(index).ad
前言最近刚刚结束项目,感觉收益颇多,因此记录一下,希望可以帮助到大家(我踩过的坑,大家就踩着我过去就行)背景本人java后端开发,公司临时需求需要弄一套权限管理系统,后端肯定没有问题,前端根据之前我使用的HTML,CSS感觉特别的繁琐和丑陋(主要本人不是专业前端),因此通过浏览相关资料,发现了vue+element+Admin(完美的后台前端解决方案),它基于vue+elementui 实现,详细
转载 2024-04-16 11:13:16
155阅读
一、vue组件之间存在什么样的关系?我们可以Vue组件之间的关系为如下两类:1)父子组件之间通信。2)非父子组件之间通信(兄弟组件、隔代关系组件等)。二、Vue中的组件通信方式1)父子组件之间通信:1. pros / $emit父组件通过props的方式向子组件传递数据,而通过$emit 子组件可以向父组件通信。注意:props 只可以从上一级组件传递到下一级组件(父子组件),即所谓的
转载 2024-09-25 15:12:18
93阅读
ElementUI是一套基于VUE2.0的桌面端组件库,ElementUI提供了丰富的组件帮助开发人员快速构建功能强大、风格
原创 2023-10-08 10:46:08
285阅读
1:背景是一个web端的电商网站,根据点击的导航选项卡呈现不同得种类商品,首先这里说下我的路由结构是导航是一个组件,选项卡的内容又是单独的一个组件。这是导航组件的内容,这里主要通过v-for循环生成导航,没什么好说的,需要注意的是,这因为选项卡需要知道用户所点击的是哪个模块,所以在数据中有个typeId属性,这里需要把该属性值传给选项卡组件。<template> <ul cl
upload组件的参数属性action必选参数,上传的地址string——headers设置上传的请求头部object——multiple是否支持多选文件boolean——data上传时附带的额外参数object——name上传的文件字段名string—filewith-credentials支持发送 cookie 凭证信息boolean—falseshow-file-list是否显示已上传文件列
本文是在官方文档的基础上,更加细致的说明,代码更多更全。简单来说,更适合新手阅读 ①简单来说: 就是几个组件放在一个挂载点下,然后根据父组件的某个变量来决定显示哪个,或者都不显示。 ②动态切换: 在挂载点使用component标签,然后使用v-bind:is=”组件名”,会自动去找匹配的组件名,如果没有,则不显示;改变挂载的组件,只需要修改is指令的值即可。
12.ElementElement:是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库,用于快速构建网页。Element 提供了很多组件(组成网页的部件)供我们使用。例如 超链接、按钮、图片、表格等等~如下图左边的是我们编写页面看到的按钮,上图右边的是 Element 提供的页面效果,效果一目了然。我们学习 Element 其实就是学习怎么从官网拷贝组件到我们自己的页面并进行修改,官网网
vue自定义小日历组件一、前言自己开发的项目需要用到类似博客侧边栏小日历组件,觉得自己造一个比较随心所欲,更能满足自己的需求,所以决定自己开发一个。最终效果如图所示。二、日历样式我的这个日历组件主要分为导航栏区和主要内容区,导航栏按钮样式什么的都是自定义的,很简单,源码有就不罗嗦。主要讲一下日历内容的样式设计。日历内容都是用<ul>和<li>标签实现的,星期栏和日期栏分别为
  • 1
  • 2
  • 3
  • 4
  • 5