vue 全家桶
文章平均质量分 61
渔倒到
返璞归真(人-> 猿)
展开
-
vue项目中常见的 filter 过滤器总结
vue中常用几种的filter过滤器原创 2022-11-08 11:32:44 · 1014 阅读 · 0 评论 -
基于Vue的下拉select选择区间组件
业务场景 选择职级范围,ant-design-vue的适用的组件是两个select并用,前值后值充当区间范围,这样会比较麻烦,对用户不友好,与是开发一个 模拟下拉select,但是可选择区间,回显样式类似于 A -B看图:这样一个select就可以完成区间选择了。下面看代码:首先基于antdv的基础组件 dropdown、input、icon、menutemplate部分:这个ant基础组件的使用就不在这里解释了<template> <a-dropdown cla原创 2021-06-15 17:04:04 · 1131 阅读 · 7 评论 -
ant-desing-vue table 可伸缩列在固定列、多级表头情况下的实现以及问题解决
这个东西本来以为手到擒来,因为在官网中已经给出了例子,但是果然还是不能太信任官方,官方给出来的只能是最基础的,然后我们正常的使用场景往往要复杂很多,比如固定列, 比如固定表头,比如自带checkbox列,比如多级表头的情况。要想满足这些情况往往需要自行开发。1.首先蒋官方的例子copy下来,居然拖不动。对照了一下官方,css居然都不一样,于是增加了第一个改动因为style内联样式自带了 translate属性,所以直接去掉right:0;只留left -5.height设置100%就可以。...原创 2021-05-26 10:28:22 · 4293 阅读 · 20 评论 -
[vue-router] Duplicate named routes definition: { name: “indexView“, path: “/indexView“ }
我的路由是这么配置的:结果报错,Duplicate named routes definition 重复的命名路由定义这样改过后:就好了原创 2021-02-05 09:43:53 · 899 阅读 · 1 评论 -
antdv a-datepicker 日期组件设置禁用时间区间, 区间外等总结
日期组件 经常会出现要求某段时间内不可选, 或者某个时间节点前、后不可选。每次都写很麻烦。于是就总结了一下可能出现的情况。首先 vue部分 <a-date-picker :key="key" v-model="dateValue" :value="moment(dateValue, attrBute.format)" @change="onChange" @openChange="openChange" :format=原创 2020-10-20 16:04:43 · 5604 阅读 · 4 评论 -
Ellipsis vue 实现文本自动识别是否溢出,高亮显示关键字
在开发中有很多地方要处理文本溢出,原生的写法有很多弊端,并且不美观。接下来就是我封装的溢出内容自动检测组件。这样的:html部分提示信息为了没关采用ant组件。并且为了支持搜索结果的展示增加了关键字高亮显示<template> <a-tooltip :overlayClassName="overlayClassName" trigger="hover"> <template slot="title"> {{ text }} &l原创 2020-10-12 17:04:11 · 1285 阅读 · 4 评论 -
动态引入 某文件夹下所有vue组件的方法
引入vueconst context = require.context('./', true, /\.vue$/);const install = (Vue) => { context.keys().forEach((key) => { const component = context(key).default; Vue.component(component.name, component); });};引入css 等const context = re原创 2020-10-10 13:36:13 · 2843 阅读 · 0 评论 -
antdesign vue组件问题(二)table 组件错位问题,滚动加载,行选中问题,树表格自定义节点图标
table 组件错位导致问题出现的原因很多;1. 内容区超过td范围, ant 组件并不像ele 提供了 tool-tip展示,解决办法:在每个单元格外包一层div 设置宽度 css 样式 处理成 文本溢出 省略号 代替显示当然你回发现这样处理过后文本是不会超出了,但是错位问题还是没有解决。2. index 列 和 check 列同时出现 会存在错位。index 列 ant 是不支持 ...原创 2020-02-27 10:56:53 · 6143 阅读 · 0 评论 -
antdesign vue组件问题(一)select下拉列表跟随滚动条滚动
本文为二次封装ant组件库中遇到问题的记录:对于select的问题::getPopupContainer=" triggerNode => { return triggerNode.parentNode || document.body; } "...原创 2020-02-27 10:20:00 · 6313 阅读 · 0 评论 -
svgView组件,根据后端地址加载svg图
首先说加载后端svg图片到vue项目中的方式:通过v-html 绑定的方式,需要请求得到svg的xml结构的代码<div class="svg-view" ref="svg-view" v-html="svgXml" :style="svgStyle"></div>也可以直接通过后端url地址加载svg主要有两种方法:embed 和 object ...原创 2020-01-15 15:51:00 · 1113 阅读 · 0 评论 -
element el-input 只能输入正整数完美解决不闪动
完美解决需要将v-model 拆开成 :value 和@input <el-input :value="text" @input="e => (text = isnumber(e))" style="width: 66px" :disabled="isEdit" ...原创 2019-12-27 14:22:09 · 8104 阅读 · 0 评论 -
el-select 获取选中节点的对象
在获取 el-select 选中节点的节点数据时, 需要 :value=“item” item 为对象, 那么 必须 绑定 value-key=“id”<el-select value-key="id" v-model="khzb" placeholder="请选择" @change="changeTelescopic"> <el-option multip...原创 2019-12-04 13:58:35 · 9993 阅读 · 0 评论 -
el-table样式问题
el-table 表头和表体不对齐的问题.el-table { .el-table__header-wrapper { .has-gutter { .gutter { display: block !important; } } }}el-table 冻结列高度问题.el-table__fixed { ...原创 2019-11-15 15:50:42 · 1651 阅读 · 0 评论 -
(vue)input 设置focus失败的解决办法
setTimeout(function(){ $("#input_idname").focus(); },500)原创 2019-10-30 16:10:05 · 7333 阅读 · 0 评论 -
v-model 实现原理, 自定义v-model 以及应用 对可编辑div实现双向数据绑定,解决光标在前和不能输入中文的问题
对于表单大家都很熟悉,v-model 大家也很喜欢,他确实很方便。那么他是怎么实现的呢, 其实他是一个语法糖, v-model 干了 两件事 下面以 input 为例<input type="text" v-bind:value='message' @input='message = $event.target.value'>等价于<input type="text" v...原创 2019-11-27 10:36:23 · 1639 阅读 · 0 评论 -
vue loading 指定区域
element loading在methods 中 添加方法openloading() { this.loading = this.$loading({ lock: true, text: "Loading", spinner: "el-icon-loading", background: "rgba(0, 0, 0,...原创 2019-11-12 18:22:52 · 2126 阅读 · 0 评论 -
解决vue和el-dialog的遮罩层消失
解决vue和element UI中对话框的遮罩层消失,在el-dialog标签里添加 :modal-append-to-body=‘false’错误分析1)若el-dialog弹出框设置了modal-append-to-body=‘true’(默认)属性,它的遮罩层就会被插入到body标签下(即与组件所在的最外层div同一层级)2)el-dialog的显示层和遮罩层都设置了position:...原创 2019-11-04 11:28:08 · 4986 阅读 · 0 评论 -
自定义 el-timeline 节点样式
<div class="left-lineBox"> <el-timeline> <el-timeline-item v-for="(activity, index) in activities" :key="index" ...原创 2019-10-31 16:44:06 · 16997 阅读 · 3 评论 -
element el-date-picker 时间限制
<el-form-item class="two-form-item" label-width="100px" prop="typeOneTotime" v-if="towType == '7'"> <el-date-picker :picker-options="pickerOptions" ...原创 2019-10-29 10:32:46 · 796 阅读 · 0 评论 -
vue 深入学习 之 render 函数
在vue 中,提倡我们使用template 来渲染组件,但是在某些场景会出现很多冗余代码。这时就需要使用render函数构建DOM,用js的逻辑来实现页面代码。而且render函数构建DOM,vue免去了转译的过程。效率更高。使用:当使用render函数描述虚拟DOM时,vue提供一个函数,这个函数是就构建虚拟DOM所需要的工具。官网上给他起了个名字叫createElement。还有约定的简写...原创 2019-09-09 18:10:46 · 255 阅读 · 0 评论 -
vue 组件化开发(四)mixin 全局混入自定义下拉刷新指令
首先我们要明确一下自定义指令以及mixin 的注册方法自定义指令bind:每当指令绑定到元素上的时候,会立即执行这个 bind 函数,只执行一次。注意:在每个函数中第一个参数,永远是el,表示被绑定了指令的那个元素,这个 el 参数,是一个原生的JS对象。inserted:元素插入到DOM中的时候,会执行inserted函数[触发一次]updated:当VNode 更新的时候,会执行 u...原创 2019-08-26 14:33:58 · 629 阅读 · 0 评论 -
vue 组件化(五)el-form之表单校验,以及corn 生成
element 表单是支持自定义校验规则的。校验规则像图中所示添加,为了方便起见model的名称最好和rules的名称相同我的rules 如下 rules: { typeOneFromtime: [{ required: true, message: "时间不能为空", trigger: "change" }], typeOneTotime: [{...原创 2019-08-19 11:09:29 · 1477 阅读 · 0 评论 -
vue 组件化开发(三)elementui el-tree 实现可编辑树
如图:html :<template> <div style="margin-left: 5px;"> <el-tree class="filter-tree" style="overflow:auto;" :data="treeData" ref="tree" node-key="ID"...原创 2019-08-16 17:07:06 · 11271 阅读 · 0 评论 -
vue 组件化开发(二) 带有复杂表头以及可编辑表格的开发
类似效果看图主组件:<template> <div class="edit-table"> <drop-title :unitPaymentNum="unitPaymentNum" :personPaymentNum="personPaymentNum" :readOnly="readOnly" :ti...原创 2019-08-16 16:56:51 · 994 阅读 · 0 评论 -
vue router 应用案例(一)记录滚动条位置
方法1:在router.js里面(即路由文件中),此时模式为 history(注意为history 模式下)const router = new VueRouter({ mode: 'history', routes, scrollBehavior (to, from, savedPosition) { if (savedPosition) { return...原创 2019-11-06 16:10:29 · 1071 阅读 · 0 评论 -
js结合vue操作dom元素 动态设置table表格的高度实例
<template> <div id="app"> <div :style="{width: `${screenWidth}px`}"> <router-view/> </div> </div></template><script>export default...原创 2019-10-31 13:52:15 · 1773 阅读 · 0 评论 -
vue 获取dom元素的样式方法(height为列子)
//获取元素样式值,为元素ref="ele"(在样式里面写死了的高度)var heightCss = window.getComputedStyle(this.$refs.ele).height; // ?px//获取元素内联样式值var heightStyle =this.$refs.ele.style.height; // ?px...原创 2019-10-31 13:50:01 · 1342 阅读 · 0 评论 -
vue element table 不同列的相同行合并
官方给出的案列只进行了第一列的合并,很多时候不满足需求,自己搞了一下思路就是循环一下: 官方的 rowSpanFilter 方法rowtext:shi 每列的key每次返回的this.spanArr 是一个数组 类似 [1, 1, 2, 0, 0] :表示第三行至第五行值相同 需要合并 rowSpanFilter(val, rowtext) { let _this = t...原创 2019-06-20 18:40:45 · 5252 阅读 · 5 评论 -
vue全家桶 (router,vuex)
&lt;!-- --&gt;&lt;template&gt;&lt;div class=''&gt;&lt;/div&gt;&lt;/template&gt;&lt;script&gt;//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)//例如:import 《组原创 2019-03-13 10:41:04 · 248 阅读 · 0 评论 -
vuex
1. vuex是什么github站点: https://github.com/vuejs/vuex在线文档: https://vuex.vuejs.org/zh-cn/简单来说: 对应用中组件的状态进行集中式的管理(读/写)2. 状态自管理应用state: 驱动应用的数据源view: 以声明方式将state映射到视图actions: 响应在view上的用户输入导致的状态变化(包含n...原创 2019-03-06 17:28:43 · 258 阅读 · 0 评论 -
vue基础
1. Vue.js是什么?1). 一位华裔前Google工程师(尤雨溪)开发的前端js库2). 作用: 动态构建用户界面3). 特点: * 遵循MVVM模式 * 编码简洁, 体积小, 运行效率高, 移动/PC端开发 * 它本身只关注UI, 可以轻松引入vue插件和其它第三库开发项目4). 与其它框架的关联: * 借鉴angular的模板和数据绑定技术 * 借鉴react的组件化和...原创 2019-03-06 17:27:33 · 186 阅读 · 0 评论 -
vue 双向数据绑定原理--数据劫持
1. 准备1.[].slice.call(lis): 将伪数组转换为真数组2.node.nodeType: 得到节点类型3.Object.defineProperty(obj, propertyName, {}): 给对象添加/修改属性(指定描述符) configurable: true/false 是否可以重新define enumerable: true/false 是否可以枚举(...原创 2019-03-06 11:59:56 · 1170 阅读 · 0 评论 -
vue全家桶介绍
1. vue脚手架用来创建vue项目的工具包创建项目: npm install -g vue-cli vue init webpack VueDemo开发环境运行: cd VueDemo npm install npm run dev生产环境打包发布 npm run build npm install -g serve ser...原创 2019-03-06 11:56:13 · 651 阅读 · 0 评论