随笔分类 -  vue.js

1 2 下一页
Vue 是一套构建用户界面的渐进式框架。 Vue 只关注视图层V， 采用自底向上增量开发的设计。 Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
代码编辑器设置自定义提示
摘要：<template> <ace-editor id="kp-ace-editor" @init="editorInit" @input="changeData" ref="my-ace-editor" v-model="aceContent" :options="{fontSize: options 阅读全文
posted @ 2020-12-28 16:50 桥南小院 阅读(536) 评论(0) 推荐(0)
ElmentUI表单校验自定义——动态添加和删除
摘要：需求： 1.表单列表：点击按钮增加一行、删除、校验输入； 2.表格列表：点击按钮增加一行、删除、输入校验。 <template> <el-form :model="form" ref="ruleForm" label-width="100px"> <el-form-item label="负责人" 阅读全文
posted @ 2020-09-21 15:46 桥南小院 阅读(765) 评论(0) 推荐(0)
如何监听浏览器当前页面是否处于活动页面（可见或最小化窗口）
摘要：背景：主要是考虑到定时器触发浪费接口调用，造成资源浪费 实例; 核心方法： getHidden () { // 判断当前页面是否处于活动状态 let prefixs = ['webkit', 'moz', 'mos', 'o'] if ('hidden' in document) { return 阅读全文
posted @ 2020-06-30 16:54 桥南小院 阅读(1410) 评论(0) 推荐(0)
el-table各种样式兼容问题解决方案
摘要：/* ************************************ * 1.边框消失：被固定栏遮挡：上/下/左/右 * 2.调整边距后问题：线条偏差错位：标题与内容不对齐（右侧固定栏多出内容：需要设置自适应宽度） * 3.操作栏按钮高度不够:表格行间距是padding：6px 0;按钮内 阅读全文
posted @ 2020-06-28 10:39 桥南小院 阅读(2620) 评论(0) 推荐(0)
分布打包中途离开，如何重新获取进度
摘要：本地缓存相关策略： 1.sessionStorage或localStorage:setItem()、getItem() 2.store: 对比2种方式动态更新问题： 1.本地缓存初始化可以获取，但无法动态监听变化更新； 2.store，通过定义计算属性可以通过监听变化实时更新数据。 computed 阅读全文
posted @ 2020-04-30 15:36 桥南小院 阅读(178) 评论(0) 推荐(0)
前端实现拉新——table增删改查
摘要：背景： 避免每次新增、编辑、删除时频繁调用后台接口 部分实例： <template> <div> <el-button round type="primary" @click="add"> 新建 </el-button> <el-input v-model="searchValue" placeho 阅读全文
posted @ 2020-03-26 12:00 桥南小院 阅读(1257) 评论(0) 推荐(0)
vue定时器设置——页面未激活、路由切换进行销毁
摘要：<template> <div>定时器demo</div> </template> <script> const hiddenProperty = 'hidden' in document ? 'hidden' : 'webkitHidden' in document ? 'webkitHidden 阅读全文
posted @ 2020-01-21 10:48 桥南小院 阅读(1516) 评论(0) 推荐(0)
vue测试模板与jsonSchema自动生成elment组件
摘要：背景： 新功能页面设计与布局、动态生成UI组件、拖拽模板生成页面，然后生成代码等等，目的都是减少开发成本或复用通用组件。 html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue模板</title> <link rel 阅读全文
posted @ 2019-12-20 11:09 桥南小院 阅读(1897) 评论(0) 推荐(0)
elementUI——主题定制
摘要：需求： 设计三套主题色+部分图标更换； 实现方式汇总： 1.传统做法，生成多套css主题包，切换link引入路径切换href实现，参考网站：http://jui.org/； <link id="skincolor" href="skin-default.css" rel="stylesheet" t 阅读全文
posted @ 2019-12-13 12:03 桥南小院 阅读(2927) 评论(0) 推荐(0)
el-pagination分页优化
摘要：表格分页优化： <template> <el-pagination small background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" : 阅读全文
posted @ 2019-11-11 18:06 桥南小院 阅读(2080) 评论(0) 推荐(0)
导出带图片的Excel——OOXML文件分析
摘要：需求： 普通js导出文件excel具有兼容性问题，通过js-xsl导出文件API未找到导出图片的方案，实例过少，因此针对07年后以.xlsx后缀的excel文件，通过修改后缀.zip参考文件模板来实现完整OOXML文档下载。 OOXML分析xl目录下的文件，如图：http://officeopenx 阅读全文
posted @ 2019-10-17 10:04 桥南小院 阅读(3410) 评论(0) 推荐(0)
对话框的表单校验——模板笔记
摘要：目的： 减少重复工作、简化开发速度 案例： 1.设置一个对话框： 2.抽离表单： 【实例】：可编辑的表格：对话框形式+下拉选项+表格内容编辑 1.新建或重命名：对话框或表格内操作表单 设置了对话框的话，把表单抽离： 2.表格内编辑，不需要进行表单校验，即：未修改直接提示，不拦截 3.表格内操作：下拉 阅读全文
posted @ 2019-09-03 15:39 桥南小院 阅读(538) 评论(0) 推荐(0)
el-table——可编辑、拖拽排序与校验的formTableDrag
摘要：背景： 1.利用form进行校验输入； 2.利用sortable操作Dom替换表格数据顺序； 3.利用lodash实现数据深拷贝与参数替换等 一：最外层的数组校验 二、表格与文本之间 的转换： 三、表单嵌套的表格： 阅读全文
posted @ 2019-08-29 23:11 桥南小院 阅读(1376) 评论(0) 推荐(0)
axios使用API
摘要：背景：请求失败后，因跨域引起的不能传递statusCode问题，通过设置前后台选项解决，这里先总结一下axios的使用 一、安装与配置： 安装： axios使用API: 1.默认使用的是get请求： 2.常用2种请求方式： 3.自定义配置axios： 4.请求配置： 5.返回配置： 6.拦截操作：返 阅读全文
posted @ 2019-08-23 11:11 桥南小院 阅读(1545) 评论(0) 推荐(0)
路由与公共组件——规划命名与文件目录
摘要：背景：节俭的、清晰的代码目录结构，可维护性、复用性高的公共组件是开发时良好的习惯； 一、文件目录结构设计： ├── build // 构建相关 ├── config // 配置相关 ├── src // 源代码 │ ├── server // 所有请求api、mock请求、axios封装 │ ├── 阅读全文
posted @ 2019-08-20 12:31 桥南小院 阅读(520) 评论(0) 推荐(0)
表格分页——tablePagination
摘要：背景：表格是最为通用的展示方式，为了展示的统一性，以及分页组件的重用，这里写一个分页组件，供比较多或者较少数据2种表格进行分页展示。 分页组件： 使用示例： 说明： 加入分页后表格的展示数据均由分页控制，即通过传入的tableBegin监听改变 阅读全文
posted @ 2019-08-16 10:57 桥南小院 阅读(1575) 评论(0) 推荐(0)
Nightwatch——自动化测试（端对端e2e）
摘要：背景： 前端页面模拟仿真操作，目的是避免每次更新相关内容重复之前的测试操作，减少不必要的时间投入，以及校验功能的可用性。但是目前元素定位是个问题（每次页面有修改都要重设某些元素定位） 使用Nightwatch进行E2E测试 使用Nightwatch进行E2E测试 E2E测试 不同于行为驱动测试（BD 阅读全文
posted @ 2019-08-12 21:44 桥南小院 阅读(4842) 评论(0) 推荐(0)
vue-cli脚手架——3.0版本项目案例
摘要：一、【准备工作】 node与git部分见vue-cli2.0搭建案例 vue-cli3.0是一个基于 Vue.js 进行快速开发的完整系统。有三个组件： CLI：@vue/cli 全局安装的 npm 包，提供了终端里的vue命令（如：vue create 、vue serve 、vue ui 等命令 阅读全文
posted @ 2019-07-20 16:16 桥南小院 阅读(1552) 评论(0) 推荐(0)
vue-cli脚手架——2.0版本项目案例
摘要：一、【准备工作】 Node.js 安装包及源码下载地址为：https://nodejs.org/en/download/。 Git 各平台安装包下载地址为：http://git-scm.com/downloads 1.node -v npm -v // 更新：npm update -g npm co 阅读全文
posted @ 2019-07-20 15:12 桥南小院 阅读(3262) 评论(0) 推荐(0)
el-table——可合并单元格的表格
摘要：const amount2 = this.getSpanArr(tableData, 'amount2') const spanArrs = { // amount1:amount1, amount2: amount2 } const amount2 = this.getSpanArr(tableD 阅读全文
posted @ 2019-07-11 15:04 桥南小院 阅读(2694) 评论(0) 推荐(0)

1 2 下一页