vue
前端方程
这个作者很懒,什么都没留下…
展开
-
vue form表单下嵌套表格 并校验每一行
【代码】vue form表单下嵌套表格 并校验每一行。原创 2023-02-24 10:52:56 · 440 阅读 · 0 评论 -
css 步骤条箭头符号 加阴影制作方法
【代码】css 步骤条箭头符号 加阴影制作方法。原创 2022-10-04 09:53:02 · 339 阅读 · 0 评论 -
vue el-popover使用
【代码】vue el-popover使用。原创 2022-09-29 16:51:39 · 1241 阅读 · 0 评论 -
vue 短信验证码
11原创 2022-07-08 10:51:57 · 793 阅读 · 0 评论 -
vue elment表格内倒计时(待优化代码)
表格内批量倒计时原创 2022-06-01 19:23:00 · 389 阅读 · 0 评论 -
vue 倒计时 验证码倒计时
1原创 2022-06-01 14:26:16 · 1965 阅读 · 0 评论 -
vue 关于阿里巴巴矢量图标库的使用(包含在伪类中使用字体图标)
引入代码import "@/assets/iconfont/iconfont.css";<style lang="less" scoped>::v-deep .el-collapse-item__arrow { width: 40px;}::v-deep .el-icon-arrow-right:before { font-family: "iconfont"; //这一句是必须要加的 content: "展开\e68a";}::v-deep .el-coll.原创 2022-05-30 14:58:35 · 602 阅读 · 0 评论 -
vue elment 上传附件 (复制可用完整)
=======================完整复制可用================= <el-upload accept=".xls" :show-file-list="false" auto-upload action="none" :http-request="handleUpload" > 批量导入原创 2022-05-18 10:59:35 · 167 阅读 · 0 评论 -
vue components is动态组件
<template> <div> <div class="child-div"> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane v-for="(item, index) in list" :key="index" :label="item.name" ..原创 2022-04-22 15:44:53 · 1627 阅读 · 0 评论 -
vue 手机号码校验 elment校验 简单校验 提交校验
<el-form :model="shipmentFormal" label-width="180px" class="query" :inline="true" :rules="rules" style="background-color: #fff; border: 1px solid #eaeaea" ...原创 2022-03-31 10:06:38 · 2049 阅读 · 0 评论 -
vue 活动倒计时
<span>{{ count || 0 }}</span data count: "", //倒计时 seconds: 864000, // 10天的秒数 methods: { // 天 时 分 秒 格式化函数 countDown() { let d = parseInt(this.seconds / (24 * 60 * 60)); d = d < 10 ? d : d + "0"; ...原创 2021-09-13 10:03:46 · 235 阅读 · 0 评论 -
echarts 更改业内颜色用法
myChart = echarts.init(document.getElementById('myEcharts')); var option = { tooltip: { trigger: 'axis', axisPointer: { t...原创 2021-08-10 09:13:36 · 183 阅读 · 0 评论 -
vue axios 文件流下载文件
axios.post( 'a.bbb.cc/d/ee',//请求的url { 'data':this.data//请求数据 }, { responseType:'blob'//服务器返回的数据类型 } ).then((res)=>{ //此处有个坑。这里用content保存文件流,最初是content=res,但下载的test.xls里原创 2021-08-05 15:51:48 · 529 阅读 · 0 评论 -
vue 左侧导航栏选中样式 elment ui
.el-menu-item:hover { background: #2b5dbe !important; border-radius: 10px 0px 0px 10px; } .el-menu-item.is-active { background: #1D33A2 !important; // border-radius: 10px 0px 0px 10px; color: #fff!important; i { color: #fff原创 2021-07-30 15:21:52 · 637 阅读 · 0 评论 -
elment ui分页功能
<!-- 分页器 --> <div class="paginations"> <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryParams.pageNum"...原创 2021-07-27 20:36:18 · 103 阅读 · 0 评论 -
vue input失焦事件
@blur.native.capture="defocus(node, data)" //失焦 v-focus //聚焦directives: { //和生命周期同级 focus: { inserted: function(el) { el.querySelector('input').focus() } } },原创 2021-07-23 10:26:08 · 2892 阅读 · 0 评论 -
vue 页面组件 刷新问题
tree组件 添加lazy后,进行input编辑。更改布尔值 不能及时刷新变化。使用: this.$set(data, 'isEdits', true) 对象 键名 键值 这样进行更改即可强制刷新!原创 2021-07-22 18:42:34 · 201 阅读 · 0 评论 -
vue双击执行事件
=================函数=======================data(){ return{ treeClickCount:0 }} handleNodeClick(data) { // data为被点击节点数据 // 记录点树节点击次数 this.treeClickCount++; if (this.treeClickCount > 2) return; setTimeout(() => {原创 2021-07-22 09:12:18 · 758 阅读 · 0 评论 -
vue 请求携带参数 (防id前端篡改获值)
request代码========================import axios from 'axios'import { Notification, MessageBox, Message } from 'element-ui'import store from '@/store'import { getToken } from '@/utils/auth'import errorCode from '@/utils/errorCode'import securityCode fr原创 2021-07-21 18:49:58 · 1046 阅读 · 0 评论 -
vue elment 树形节点 穿梭框二次开发
<template> <div class="tree-div"> <div class="tree-div-left"> <h1>左侧</h1> <el-input placeholder="输入关键字进行过滤" change="tree-ipt" v-model="filterTextLeft" > </el-inpu.原创 2021-07-15 15:48:07 · 187 阅读 · 0 评论 -
数组元素上下移动 vue
<el-button :disabled="index == 0" @click="rRup(item, index)" ><i class="el-icon-arrow-up"></i ></el-button> <el-button :disabled="index == rightList.length - 1" ...原创 2021-07-14 20:19:40 · 408 阅读 · 0 评论 -
数组去重vue js
let arr = this.rightList.concat(this.selectData); console.log(this.rightList); for(var i=0; i<arr.length; i++){ //第二层for 用于控制与第一层比较的元素 for(var j=i+1; j<arr.length; j++){ //如果相等 .原创 2021-07-14 18:38:20 · 295 阅读 · 0 评论 -
vue elment多文件上传
<el-upload class="upload-demo" ref="upload" :action="upUrl" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" :auto-upload="false" ...原创 2021-07-14 10:49:55 · 131 阅读 · 0 评论 -
vue elment 树形节点添加删除按钮 重点在css
<template> <div class="custom-tree-container"> <el-tree :data="data" show-checkbox node-key="id" default-expand-all :expand-on-click-node="false" :render-content="renderContent" > </el.原创 2021-07-11 16:27:20 · 621 阅读 · 0 评论 -
vue elment分页功能二次封装
=============子组件===============<template> <div> <div class="pagination"> <el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange" :page-sizes="pageSizesArr" :tota原创 2021-07-10 22:54:50 · 128 阅读 · 2 评论 -
vue 根据下拉框 值 进行数据联动
<template> <div class="div"> <el-select v-model="value" @change="opt" placeholder="请选择"> <el-option v-for="item in data" :key="item.value" :label="item.name" :value="item.value" >原创 2021-07-09 21:13:10 · 1708 阅读 · 0 评论 -
vue elment ui步骤条样式更改
.cazongduan { .el-steps{ .el-step__main{ ::v-deep .el-step__title{ color: #f00!important; } } ::v-deep .el-step__icon.is-icon { width: 35px; height: 35px; margin-top: -5px; background: #f5f5f5; border-radiu原创 2021-07-05 17:00:19 · 718 阅读 · 0 评论 -
vue 表格 、 查询 、 分页 完整功能可直接复制套用
<template> <div class="form-template"> <!-- 查询 --> <el-card class="box-card"> <div slot="header"> <i class="el-icon-search"></i> <span> 查询条件</span> </div>原创 2021-07-01 14:11:29 · 558 阅读 · 0 评论 -
vue elment ui 表格单独设置表头的点击事件
<el-table-column :render-header="renderHeader"> </el-table-column> methods: { renderHeader() { return ( <span onClick={this.detailSelected} > + </span> ); }, }原创 2021-06-25 10:38:16 · 416 阅读 · 0 评论 -
vue记住密码功能 cookie利用
<el-checkbox v-model="checked">记住密码</el-checkbox>data() { return { checked: false, }}mounted内写入mounted{ this.getCookie();调用函数 取出保存的状态记住密码 if(localStorage.getItem('zhuangtaichecked')=='false'){ this.check..原创 2021-06-23 16:39:16 · 158 阅读 · 0 评论 -
vue 结合elemnt ui 设置正则表达式
// 表单校验 rules: { nickName: [ { required: true, message: "用户昵称不能为空", trigger: "blur" } ], email: [ { required: true, message: "邮箱地址不能为空", trigger: "blur" }, { type: "email",原创 2021-06-21 20:32:23 · 166 阅读 · 0 评论 -
vue elment表格第一列设置单独颜色样式
el-table 添加 :cell-style="changeCellStyle"methods里面加入 changeCellStyle(row, column, rowIndex, columnIndex) { if (row.column.label === "排名") { return "color: #389DFF"; // 修改的样式 } else { return ""; }},...原创 2021-06-21 09:23:05 · 1054 阅读 · 0 评论 -
vue echarts 自适应问题,相对于屏幕,相对于主体,element-resize-detector
yarn add element-resize-detector -S//引入 import elementResizeDetectorMaker from "element-resize-detector"===============以下为整页复制的echarts板块自适应================<template> <div> <div class="echa" :style="{ width: widthCha }" id="main"&.原创 2021-06-20 14:46:47 · 404 阅读 · 0 评论 -
vue 引入本地iframe资源,打包问题
完美解决打包问题原创 2021-06-19 11:05:58 · 711 阅读 · 2 评论 -
vue swiper使用 轮播图
下载版本的时候 "swiper": "3.4.2",import VueAwesomeSwiper from 'vue-awesome-swiper'import 'swiper/dist/css/swiper.css'Vue.use(VueAwesomeSwiper)![在这里插入图片描述](https://img-blog.csdnimg.cn/20210616155633616.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5na.原创 2021-06-16 15:57:51 · 300 阅读 · 0 评论 -
vue 标签页导航 无缓存版本
1.标签 <el-tag size="medium" v-for="(item, index) in tabList" :key="item.name" @close="handleClose(item, index)" @click="changeMenu(item)" :closable="item.name != 'hom.原创 2021-06-10 01:28:30 · 231 阅读 · 0 评论 -
vue elment组件 全国联动 城市选择
安装// npm install element-china-area-data -S<template> <div id="app"> <el-cascader size="large" :options="options" v-model="selectedOptions" @change="handleChange" > </el-cascader> </div&g.原创 2021-06-08 20:14:08 · 357 阅读 · 0 评论 -
vue elment 面包屑动态生成
================路由内添加================ meta: { title: "发货通知单查询" },<template> <div> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item v-for="(item, i) in breadArr" :key="i"原创 2021-06-07 09:18:28 · 250 阅读 · 0 评论 -
vuex数据持久化写法
//==========存储在vuex内的数据,进行调用的时候============//vuex内部代码写法state:{ name:"旧值"},mutations:{ 函数1(state){ //1.定义一个函数进行对state.name值的更改 state.name="新值"; window.localStorage.setItem("name",JSON.stringify(新值)); //2.更改的时候存入本地 }, 函数2(state,status){ //4.函数2.原创 2021-06-06 15:54:48 · 106 阅读 · 2 评论 -
vue视频 节点提示
安装yarn add video.js -Syarn add videojs-markers -S在全局钟引入main.jsimport videojs from 'video.js'import 'video.js/dist/video-js.css'import 'videojs-markers/dist/videojs-markers'import 'videojs-markers/dist/videojs.markers.css'import 'videojs-markers'原创 2021-05-24 18:47:00 · 261 阅读 · 0 评论