参考:https://blog.csdn.net/weixin_43905402/article/details/106074435 我的问题:vue项目中使用ant-design-vue,表单中输入框输入很卡顿 原因:vue在进行输入时,进行了多次的render刷新渲染操作,导致了input框输入时发生的卡顿现象 解决方法:在表单上添加属性-selfUpdate为true(用于使form-item项的更新不会波及到其他item项) 页面:

由于业务需要,需要一个可输入也可下拉的组件,看了iview没有现成的组件用,就自己封装了个小组件~~ 组件input-select.vue代码: <template> <div class="input-container"> <!-- 显示的输入框,用v-model绑定数据,并且绑定focus事件 --> <Input class="input-number" v-model="inputData" @

<template> <div id="parti-info"> <div> <span>您的姓名:</span> <input v-model="username" type="text" placeholder="请输入您的姓名" > </div> <div> <span >手机号码:</span> &l

vue项目中,用户输入关键字搜索,并且手机端做无限下拉 watch: { 'getListForm.searchKey'(val) { this.radioChange(); // 还有其他逻辑,内部调用getDeviceList } } getDeviceList() { apiGetDeviceList(Qs.stringify(this.getListForm)).then(res => { if (this.getListForm.pageNumber === 1) { // 搜索第一页

VUE表情包输入组件,先来张成品图看看. 年底了没事干,把以前做过的项目中的组件拿出来再复习一下, 先说说思路吧. 注意: 1. 项目是用vue-cli3.0搭建起来的项目, 参考cli3.0官网地址 2.样式是用scss需要安装依赖: npm install node-sass sass-loader -D 思路: 页面内容总体分为三块区域(内容区,表情区,输入区),引入JSON文件表情库渲染到页面,给每个表情绑定点击事件并传递下标,将用户点击过的表情存放到一个数组中,赋值给input标签的v

(本人想封装一个带有input输入框的组件) 之前使用vue开发组件的时候,在遇到子组件向父组件传递值时我采用的方法是这样的: 比如子组件是一个输入框,父组件调用时需要获取到子组件输入的值,子组件通过watch监听输入框的值然后通过this.$emit给父组件,再在父组件v-on绑定相应方法获取到从子组件传入的值,再将传入的值给对应的data: childInput.vue: <template> <input type="text" v-model="in

一.watch方法: <input v-model="textareaValue" type="textarea" placeholder="请输入..." style="width:100%; height:100px;"> <p>还可以输入<span>{{10 - textareaValue.length}}</span>个字符</p> watch: { text

是时候告诉你重要文件是哪些了,这是一个陆游,所以 需要路由配置 index.js 路由配置文件是index.js注意这个文件最开始就在集成路由了 然后最开始集成路由的地方可以不写后缀名字,因此注意这个文件夹里的文件即使文件类型不同也不要使用同一个名字,如果名字重复可能会造成一些不必要的麻烦,文件夹也不要重名,文件夹后缀本来就没有,因此可以不写,但其它的文件还是建议写一下后缀名. 然后这里可以import别名的 import 别名 from '资源' views 有点像我们django中的view

前置 大小 vue 项目都离不开组件通讯, 在这里总结一下vue组件通讯方式并列出, 都是简单的例子. 适合像我这样的小白.如有错误,欢迎指正. 温馨提示: 下文没有列出 vuex, vuex 也是重要的组件通讯方式. props 最常用的组件通讯方式 值可以是数组或对象,使用对象时可以配置高级选项,如类型检测.自定义验证和设置默认值 方向:父 -> 子 Son.vue export default { props: { text: { type: String, required: true,

最近需要把上传的图片信息存储到数据库,以base64的方式,需要重新封装一下antd的upload组件 1. 使用方法 引入组件然后配置一下即可使用,配置项包括 defaultImageList,需要回显的图片(必传),[ url1, url2 ] fileTypeList ,文件格式(可选),默认不做限制 limitSize ,单个图片大小限制(可选),单位MB limitNum ,上传图片个数限制(可选),默认200个 multiple ,是否可以多选(可选),默认否 disabled ,是

问题代码: const tempFieldsValue = this.form.getFieldsValue() Object.keys(tempFieldsValue).map((k) => { if(typeof(tempFieldsValue[k]) === 'string' && tempFieldsValue[k].indexOf('---') !== -1) { this.form.setFieldsValue({ k: undefined }) } }) 原因是 &qu

1.table列宽问题 在滚动列时,如果要指定列宽,不要指定所有列宽,至少预留一列不执行列宽. 同时:scroll="{ x: width}", width的值要是所有列的宽度之和(包括固定列的宽度和没有指定列宽的列的宽度(本来要指定的宽度)) 同时:既然指定的列宽,就一定要强制换行,否则,指定的列宽在遇到英文不换行时还是会失效. th{ word-wrap:break-word; word-break:break-all; } td{ word-wrap:break-word; wo

问题描述 实现一个折叠面板点击展开,但是必须点击两次才能展开,第一次无效 <a-collapse-panel v-for="(item, index) in dataMap" :key="index" :show-arrow="false" > <p>{{ text }}</p> <template slot="header"> {{ item.name }}</templ

前言 哈喽大家周五好,马上又是一个周末了,下周就是中秋了,下下周就是国庆啦,这里先祝福大家一个比一个假日嗨皮啦~~转眼我们的专题已经写了第 23 篇了,好几次都坚持不下去想要中断,不过每当看到群里的交流,看到博客下边好多小伙伴提出问题,我又燃起了斗志,不过这两天感冒了,所以更新的比较晚,这里也提醒大家,节日要照顾好自己哟~~~,好多人说我写的上不了台面,哈哈这里表示赞同,本系列的宗旨就是,给大家一个学习的点,让大家去自学一个面,然后大家一起学,把面交流成一个立体,就达到一个体系了.好啦,言归正传

vue 动态渲染数据很慢或不渲染 原因是因为vue检测速度很慢,因为多层循环了,在VUE 2.x的时候还能渲染出来,1.x的时候压根渲染不出来.解决方式:在动态改变数据的方法,第一行加上 this.$forceUpdate(); 就可解决渲染慢or渲染不出来的问题

我们前端做项目时,难免会遇到地址输入,多数情况下,我们都是提供一个省市三级联动,加上具体地址输入的Input输入框给用户,用以获取用户需要输入的真实地址.在需要对用户输入的数据进行校验的时候,我们会单独针对省市的三级联动和具体地址栏单独校验.也基本上能够完成项目需求. 然而当我们转向vue+element做项目时,会产生一个比较尴尬的问题.在element组件库当中,对需要校验的字段是通过在el-form-item这一组件标签名上添加prop属性来校验的,如果依然按照以前的方法对省市联动和地址栏

本文所用组件传送门:vue-org-tree 本文基于antd (其他前端组件框架操作基本都类似的: iview,elementui,boostrap-vue...) 当然,github上还有其他类似的组件,实现方法各有不同,显示效果也有差异,但都是很方便的组件. 看到网上有很多相关的使用教程,github上也写得很清楚,这里恕不在重复,本文主要实现增删节点. 场景:我们通常展示部门树的时候,简单的直接就是一个下拉框展示,为了显示明显,可能会使用一些树.    图片截至:(antd vue文档)

前言 在对着产品高举中指怒发心中之愤后,真正能够解决问题的是自身上的改变,有句话说的好:你虽然改变不了全世界,但是你有机会改变你自己.秉承着“不听老人言,吃亏在眼前”的优良作风,我还是决定玩火自焚. 问题所在 之前的项目总结为以下内容: 1.AMD模块规范开发,使用requirejs实现,使用rjs打包,最终导致的结果是,输出的项目臃肿,肿的就像一坨狗不理……不忍直视2.使用gulp进行打包,这一点貌似没有可吐槽的地方,毕竟都是被grunt折磨过来的……3.数据的渲染使用模板引擎,这就意味着你要

最近在自己摸索vue的使用,因为相对于只是去看教程和实例,感觉不如自己动手写一个demo入门来的快.刚好看到小程序中有一个简单但是很精致的应用极简汇率,而且它的表现形式和vue的表现形式很像,于是想着自己搞一个简单的应用来试试. 第一步是搭好简单的Html结构 <div id="demo"> <h1>汇率转换</h1> <div class="moneyBox"><span>cny</span>

大早起的,没想自己起来那么早,既然起来了,就写点东西吧~最近在看Vue的东西,发现网上也是好多的资源,包括博客和视频 , 我是看的慕课网上的vue ,名字忘记了,价格148的,看了,也整理了笔记,看了好多人博客去学习语法,知识,自己练习,但还是会忘,脑子真的老了,老想着整理到博客上,一直想,从来没开始,哈哈哈~今天算是开始了,也是给自己个目标吧,言归正传,说我们的vue 这个文章呢,不涉及具体的vue语法,个人感觉官网上非常的详细,可以反复学习,练习,连接奉上https://cn.vuejs.o