![](https://img-blog.csdnimg.cn/2019102519572580.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue
vue
前端61
比昨天更努力,让明天更美好
展开
-
验证码输入框组件--vue
用vue实现验证码输入框原创 2022-07-07 16:27:23 · 2055 阅读 · 1 评论 -
vue下的密码输入框/验证码输入框
1.效果预览2.实现思路制作6个小的正方形div用一个input覆盖在6个div上给input设置透明(隐藏掉input)3.源码html<div class="input-box flexbox"> <div class="code-item" :class="codeValue.length == 0 && inputFocus ? 'code-item-active' : ''">{{codeValue[0]}}</div>原创 2022-04-02 11:27:44 · 3175 阅读 · 0 评论 -
elementUI DatePicker 日期选择器:当日6点之前选择可选T+4日期,当日6点之后仅可选择T+5日期
效果:当日6点之前(可选择T + 4)当日6点之后(可以选择 T + 5)主要做法:利用elementUI DatePicker 的 picker-options属性具体代码:// html<div class="content-box"> <el-date-picker type="date" v-model="time" value-format="yyyy-MM-dd" :picker-options="pickerOptions"原创 2021-06-08 15:47:40 · 313 阅读 · 0 评论 -
elementUI日期选择器限制可选择的时间范围
效果: 限制最小查询日期为2021-05-01HTML// :picker-options="dateRange" :当前时间日期选择器特有的选项参考下表// 通过设置picker-options来达到限制可选择的时间范围<el-date-picker v-model="time" type="daterange" range-separator="至" start-placeholder="选择开始日期" end-placeholder="选择结束日期" :clearable=.原创 2021-05-18 10:18:30 · 2531 阅读 · 0 评论 -
vue 自定义时间转换指令(将时间戳转换为“刚刚“,“xx分钟前“,“xx小时前“,“xx天前“)
引言在一些社区,比如微博、朋友圈等,发布的动态会有个相对本机时间转换后的相对时间,如图中波浪线圈出的时间一般在服务端的存储时间格式是 Unix 时间戳,比如 2017-01-01 00:00 00 的时间戳是1483200000。前端在拿到数据后,将它转换为可读的时间格式再显示出来。为了显出实时性,在一些社交类产品中,甚至会实时转换为几秒钟前、几分钟前、几小时前等不同的格式,这样比直接转换为年、月、日、时、分、秒更友好。本示例就来实现这样一个自定义指令 v-time 将表达式传入的时间戳实时转换原创 2021-04-30 10:46:19 · 1867 阅读 · 3 评论 -
vue中使用递归组件创建导航菜单
概念组件在它的模板内可以递归的调用自己,只要给组件设置name就可以了用法设置name后,在组件模板内就可以递归使用了,不过需要注意的是,必须给一个条件来限制递归数量,否则会抛出错误:max stack size exceeded父组件在父组件中定义一个要递归的数据(list数组),通过props传递给子组件const vm = new Vue({ el: '#app', data: { msg: '我是来自父组件数据', list:原创 2021-04-29 11:21:24 · 852 阅读 · 2 评论 -
elementUI table表格点击某一行选中并且改变背景色
效果:html<el-table :data="data" border style="width: 100%" @row-click="selectRow" //给行添加鼠标点击事件 :row-style="rowStyle" // 设置行样式 >js// 行鼠标点击事件 selectRow(row, column, event) { co原创 2021-04-26 15:51:22 · 9526 阅读 · 1 评论 -
elementui table的多选框:分页选择数据回显并且保存选中的数据
要求:分页选择,数据回显并且保存选中的数据已经添加的商品,再次打开商品选择框时,默认选中,且不可选择父组件效果演示:点击添加商品按钮弹出商品选择框子组件子组件效果演示:代码:父组件: // 点击添加商品按钮-打开添加商品弹窗 openAddGoodsDialog(index) { // 获取整个活动已经选取的商品数据,传递到添加商品子组件中,子组件中默认选中这些商品 let goodsArr = []; this.form.acti原创 2020-10-24 10:28:55 · 2490 阅读 · 1 评论 -
elementUI form表单动态增减表单项自定义校验规则
一、效果:二、代码:<template> <div class="seed_consume"> <el-form :model="form" :rules="rules" ref="form"> <div class="itemBox"> <div class="titleBox"> <div class="left"> <span clas原创 2020-09-23 10:40:58 · 1709 阅读 · 1 评论 -
时间格式2020-09-29T18:02:02.000Z转换为“年月日时分秒“
遇到一个需求:选择时间后打印出来是 “2020-09-29T18:02:02.000Z” 格式的,后台需要转换为 “2020-09-30 02:02:02”格式。一、2020-09-29T18:02:02.000ZT表示分隔符,Z表示的是UTC。UTC:世界标准时间,在世界标准时间上加上8小时,即东八区时间,也就是北京时间。二、 2020-09-29T18:02:02.000Z转换为 2020-09-30 02:02:02 步骤:①.引入 dayjs (一个轻量的处理时间和日期的javascr原创 2020-09-22 14:58:02 · 44836 阅读 · 14 评论 -
vue element-ui v-for循环动态上传、删除图片
示例:代码:// =====html代码=====<el-form-item label prop> <el-upload ref="uploadImg" action="#" list-type="picture-card" :auto-upload="false" :on-remove="handleRemoveImg.bind(null,{'index':index,'data':item})" :on-exceed="原创 2020-09-05 09:31:35 · 1654 阅读 · 0 评论 -
vue 项目中发送 get 请求参数是数组的情况
在 vue 项目使用 axios 来发送get请求时,需要传递的参数是数组的时候,例如:let myThings = ['1', '2', '3']axios.get('/user', { params: { ID: 12345, things: myThings , } })// 上面的请求是 '.../user?ID=12345&t...原创 2020-01-15 15:09:57 · 2457 阅读 · 0 评论 -
vue项目中将查询内容已Exacel形式导出到本地
后台为java,本文只展示前端代码1.先将responseType设置为blob格式const getMerchantAuditListByWhereExcel = p => request.get('/xxx/xxxx', { params: p, responseType: 'blob'}) // 订单管理-导出全部查询结果订单信息Excel2.执行的函数代码...原创 2019-12-20 19:41:45 · 189 阅读 · 0 评论 -
vue使用vue-photo-preview全屏查看图片
安装插件:npm install vue-photo-preview --save引入到项目中:全局引入:在main.js中引入:// 图片预览插件 vue-photo-previewimport preview from 'vue-photo-preview'import 'vue-photo-preview/dist/skin.css'Vue.use(preview)使...原创 2019-12-07 15:40:41 · 2041 阅读 · 0 评论 -
vue项目中对axios的封装
一、安装npm install axios二、引入一般我会在src目录上创建一个network文件夹network文件夹中创建一个config.js (用来封装axios)和一个api.js(用来统一管理接口)三、config.js 中配置axios// 引入axiosimport axios from 'axios'// 引入router路由import router fro...原创 2019-12-01 11:26:28 · 301 阅读 · 0 评论 -
vue实现点击下载图片到本地
html:代码<div class="btnWrap" style="margin-top:30px;"> <el-button type="success" @click="downLoad_lower">线下二维码下载</el-button></div>后台请求图片地址:// 线下二维码下载 downLoad_lower(...原创 2019-11-08 15:38:01 · 4289 阅读 · 2 评论 -
vue cli 3.X 搭建的个人博客(麻雀虽小,五脏俱全 -- 适合vue初学者练习)
vue cli 3.X 搭建的个人博客(麻雀虽小,五脏俱全 – 适合vue初学者练习)项目地址:githup主要涉及到的vue知识点:vue 路由传参vue resource 结合 jsonplaceholder网站练习请求并处理接口数据使用axios 并全局配置keep-alive 实现路由后退缓存,前进刷新自定义指令(私有,全局)自定义过滤器(私有,全局...原创 2019-04-28 13:58:14 · 682 阅读 · 0 评论 -
vue动画最全总结
1.使用过渡类名实现动画 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="./lib/vue-2.4.0.js"&am原创 2019-01-04 10:58:35 · 261 阅读 · 0 评论 -
vue-resource发起get、post、jsonp请求
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content原创 2019-01-02 22:37:21 · 113 阅读 · 0 评论 -
Vue生命周期函数(钩子函数)
&amp;lt;div id=&quot;app&quot;&amp;gt; &amp;lt;input type=&quot;button&quot; value=&quot;修改msg&quot; @click=&quot;msg='No'&quot;&amp;gt; &amp;lt原创 2019-01-02 22:39:34 · 208 阅读 · 0 评论 -
vue自定义指令方法
1.案例:使用 Vue.directive() 定义全局的指令 v-focus//注意: Vue中所有的指令,在调用的时候,都以 v- 开头&lt;input type="text" v-focus&gt;// 其中:参数1 : 指令的名称,注意,在定义的时候,指令的名称前面,不需要加 v- 前缀, // 但是: 在调用的时候,必须 在指令名称前 加上 v- 前缀来进行调用...原创 2019-01-01 12:08:19 · 333 阅读 · 0 评论 -
vue使用children方式实现路由嵌套
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &原创 2019-01-05 15:40:56 · 834 阅读 · 0 评论 -
vue 路由跳转的几种方式
query方式:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2019-01-05 15:38:07 · 652 阅读 · 0 评论 -
vue路由的基本使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &原创 2019-01-05 15:14:20 · 149 阅读 · 0 评论 -
vue ref获取DOM元素和组件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &原创 2019-01-05 14:04:56 · 1419 阅读 · 0 评论 -
vue组件创建的几种方式
方式1:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2019-01-04 16:11:26 · 430 阅读 · 0 评论 -
vue子组件传值给父组件
1.父组件向子组件传值<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&原创 2019-01-05 13:18:17 · 809 阅读 · 2 评论 -
vue 父组件向子组件传值,并且可以在子组件methods中拿到数据
父组件通过props传值给子组件,子组件在methods里要拿到父组件传递过来的数据有2种情况:一、父组件传递的参数是固定的,data里面定义的参数,这时候在子组件通过this.xxx就可以获取到<wang-editor class="wangEditor" :content-data="content"></wang-editor>data() { ret...原创 2019-09-23 10:47:32 · 2537 阅读 · 0 评论 -
vue组件切换方式以及动画
1.组件切换方式方式1:使用v-if/v-else<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal原创 2019-01-04 16:17:28 · 2164 阅读 · 0 评论 -
vue点击按钮动态创建与删除组件
主要功能需求点:点击左侧组件库按钮创建对应的不同的组件,并在右侧区域展示点击右侧创建的组件中的删除按钮,删除对应的组件删除对应的组件之后,下方的组件位置自动上移效果图:代码:父组件代码(去除了css样式代码):<template> <div class="home"> <div class="container"> ...原创 2019-12-27 14:28:12 · 4656 阅读 · 2 评论 -
vue项目中使用vue-clipboard2复制文本
效果图:1. 使用npm install --save vue-clipboard2下载2. 在项目的main.js中注册全局组件(也可以注册私有组件,根据项目自行判断)main.js:import VueClipboard from 'vue-clipboard2'Vue.use(VueClipboard);3.使用<div> <span> ...原创 2019-09-26 14:36:54 · 420 阅读 · 0 评论