vue
路人甲小码
这个作者很懒,什么都没留下…
展开
-
vue 中使用图片编辑器 tui-image-editor
使用HTML Canvas实现的全功能图片编辑器。原创 2022-11-08 16:15:00 · 1656 阅读 · 2 评论 -
vue项目使用vue2-org-tree (避免踩坑)
vue使用vue2-org-tree原创 2022-06-08 00:22:40 · 2576 阅读 · 1 评论 -
Vue3.0快速上手
文章目录一、Vue3简介二、Vue3带来了什么1.性能的提升2.源码的升级3.拥抱TypeScript4.新的特性三、创建Vue3.0工程1.使用 vue-cli 创建2.使用 vite 创建一、Vue3简介2020年9月18日,Vue.js发布3.0版本,代号One Piece(海贼王)耗时两年多、2600+次提交、30+RFC、600+次PR、99位贡献者二、Vue3带来了什么1.性能的提升打包大小减少41%初次渲染快55%,更新渲染快133%内存减少54%…2.源码的升级原创 2021-12-22 10:39:11 · 208 阅读 · 0 评论 -
vue中使用form-create实现动态表单
文章目录前言一、form-create是什么?二、使用步骤1.引入库2.组件中使用3.页面效果三、总结前言项目中需要实现动态生成表单,经过调研,决定使用form-create插件来实现,非常简单,带大家了解一下一、form-create是什么?form-create是一个通过JSON生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。支持element-ui、iview、ant-design3个UI框架,并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件,再复杂的表单都可以原创 2021-11-12 15:33:04 · 4327 阅读 · 0 评论 -
iview实现表格行编辑
一、效果图二、实现思路1.写两个按钮,编辑和保存,用一个状态isEdit判断显示和隐藏<Button v-if="row.isEdit" type="success" @click="edit(row)">编辑</Button><Button v-else type="primary" @click="save(row)">保存</Button>2.使用render函数渲染两个组件,input和div,根据isEdit判断显示与隐藏{ t原创 2021-07-15 15:25:25 · 804 阅读 · 0 评论 -
使用node.js+express搭建服务器,将vue打包后生成的dist目录在本地运行
文章目录前言一、nodejs+express搭建服务器二、搭建好的服务器中运行本地dist目录前言 vue项目打包后生成的dist目录如果直接在本地打开index.html,在浏览器中会报错,无法运行起来。如果想在本地运行,我们可以借助node.js+express搭建一个服务器,将打包后的文件部署在服务器上,就可以运行起来了。一、nodejs+express搭建服务器Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,原创 2021-04-29 17:04:50 · 2295 阅读 · 0 评论 -
vue中使用代码编辑器 Ace editor
一、介绍Ace是一个用JavaScript编写的可嵌入代码编辑器。它与Sublime,Vim和TextMate等本地编辑器的功能和性能相匹配。它可以轻松地嵌入任何网页和JavaScript应用程序中。二、安装npm install --save-dev vue2-ace-editor三、引入插件// 全局引入 main.jsimport Editor from 'vue2-ace-editor';Vue.use(Editor)//组件中引入import Editor from '原创 2021-03-25 19:32:06 · 5642 阅读 · 3 评论 -
vue项目将json转化为格式化的json,展示在界面中,可展开
一、安装插件npm install vue-json-viewer --save二、组件中引入<script>import JsonViewer from 'vue-json-viewer'export default { components:{ JsonViewer }}</script>三、示例<template> <div class="testBox"> <div class="box"&g原创 2021-02-25 09:58:11 · 3120 阅读 · 4 评论 -
vue刷新页面的三种方法
一、使用location对象的reload()方法reload()方法用于刷新当前文档,类似于你浏览器上的刷新页面按钮。location.reload();二、使用编程式导航router.go 被用来作为后退/前进导航this.$router.go(0); //表示跳转到当前页面三、使用provide与inject1.在app.vue中写入如下代码<template> <div id="app"> <router-view v-if="isSho原创 2021-01-05 10:35:37 · 1616 阅读 · 1 评论 -
vue 汉字转拼音字母
一、安装npm install js-pinyin --save二、使用script标签中引入<script>let pinyin = require('js-pinyin');export default { data(){ return{ } }, mounted(){ console.log(pinyin.getFullChars('博客'));//BoKe console.log(pinyin.getCamel原创 2020-12-09 16:25:13 · 4512 阅读 · 1 评论 -
vue阻止浏览器右键默认行为
一、在需要阻止的区域添加**@contextmenu.prevent**事件<div @contextmenu.prevent></div>二、如果存在父子级关系需要添加 @contextmenu.prevent.capture 事件修饰符capture给元素添加一个监听器,当元素发生冒泡时,先触发带有该修饰符的元素<div @contextmenu.prevent.capture> <p onclick="func2"> <s原创 2020-12-09 16:04:36 · 4727 阅读 · 3 评论 -
iview-admin三级菜单之间切换页面无法缓存
前言今天在使用iview-admin开发三级菜单的时候发现三级菜单之间切换页面无法缓存,于是去github上查看源码发现作者修复了相关的bug解决方案将src\components\parent-view\parent-view.vue代码修改为:<template> <keep-alive :include="cacheList" :exclude="notCacheName"> <router-view ref="child"/> </原创 2020-10-29 11:25:50 · 547 阅读 · 2 评论 -
vue div高度自适应
1.动态style绑定<div :style="styObj"></div>2.data定义data(){ return{ styObj:{ height:0 } }}3.mounted执行window.addEventListener('resize', ()=>{ this.styObj.height=window.innerHeight-255+'px';});原创 2020-09-14 19:43:40 · 3080 阅读 · 0 评论 -
iview 表格高度自适应
1.动态设置height<Table :columns="columns" :data="tableData" highlight-row ref="table" :height="tableHeight"></Table>2.data中定义data(){ return{ tableHeight:0 }}3.monted执行mounted(){ this.tableHeight = window.innerHeight - this.$refs.table.原创 2020-09-14 18:46:46 · 2005 阅读 · 0 评论 -
vue 数字金额转大写(封装好的直接调用)
1.新建tools.js文件// 数字金额转大写export const numToCny=(money)=>{ // 汉字的数字 var cnNums = new Array('零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'); // 基本单位 var cnIntRadice = new Array('', '拾', '佰', '仟'); // 对应整数部分扩展单位 var cnIntUnits = new Array('',原创 2020-09-14 15:52:23 · 2228 阅读 · 5 评论 -
iview实现表格可编辑
iview要实现table可编辑,使用render函数进行渲染,非常简单,希望对大家有所帮助。一、效果图如下:二、render函数使用方法h: vue Render函数的别名(全名 createElement)即 Render函数params: table 该行内容的对象props:设置创建的标签对象的属性style:设置创建的标签对象的样式on:为创建的标签绑定事件三、使用方法//创建一个表格<Table border :columns="columns" :data="原创 2020-09-11 20:06:19 · 3664 阅读 · 0 评论 -
iView表格(table)渲染(render)
点击这里原创 2020-09-09 17:39:48 · 592 阅读 · 0 评论 -
解决vue两个表单切换时,校验规则失效问题
问题:两个表单切换,分别使用不同校验规则,校验规则失效解决思路:1.切换时使用resetField对该表单项进行重置,将其值重置为初始值并移除校验结果问题本质:即使两个表单绑定的值不同,但是浏览器在解析时,先解析第一个表单,此时表单上是没有绑定ref,之后再解析第二个表单时,浏览器发现这它的prop和第一个表单的prop一样,所以就认为这两个表单是同一个表单,就没有重新渲染,而ref本身是作为渲染结果被创建的,所以第二个表单没能成功绑定ref,验证就无法生效。loginTypeFlag() {原创 2020-07-01 11:37:48 · 3004 阅读 · 2 评论 -
element-ui el-upload组件,上传完成后隐藏上传按钮
项目开发中要求最多只能上传3张图片,最后一张图片上传完成后隐藏上传按钮,解决方法如下:<el-upload :class="{uoloadSty:showBtnDealImg,disUoloadSty:noneBtnDealImg}" :action="dealImgUrl" list-type="picture-card" :on-preview="handleDealImgPreview" :on-remove="handleDealImgRemove" :on-success="s原创 2020-05-12 16:53:00 · 18162 阅读 · 8 评论 -
element-ui 月份选择器,选择月份获取当前月的第一天和最后一天
1.html代码<el-date-picker class="pickerStyle" v-model="times" type="month" size="small" @change="changeMonth" placeholder="选择月"></el-date-picker>2.js代码changeMonth(value){ ...原创 2020-03-11 19:17:33 · 6358 阅读 · 2 评论 -
vue项目引入全局css
1.在assets文件夹中创建全局样式表css文件2.在global.css文件中写入全局样式/* 全局样式表 */html,body{ width:100%; height:100%; margin:0; padding:0;}body,p,dl,dd,ul,ol,li,div,h1,h2,h3,h4,h5,h6,form,input,table,tr...原创 2019-11-18 14:02:40 · 4267 阅读 · 0 评论 -
vue项目中搭建脚手架
一、安装1.安装nodejs(自带npm)2.安装cnpm命令窗口:npm install -g cnpm --registry=https://registry.npm.taobao.org;3.全局安装webpack命令窗口:npm install webpack –g;4.安装vue-cli脚手架构建工具命令窗口:npm install vue-cli –g;二...原创 2019-04-28 09:54:47 · 274 阅读 · 0 评论 -
vue中引入echarts
一、全局引入1.npm i echarts --save2.main.js中引入echarts 和组件二、按需引入原创 2019-04-30 00:36:32 · 1680 阅读 · 0 评论 -
vue中如何搭建JSON-server
第一步:初始化项目: npm init -y;第二步:安装 json-server : npm i json-server -D ;第三步: 在项目根目录下创建db.json,并写上合法的json数据,如下:测试数据:{“books”:[ {“id”:“878911”,“name”:“三国”,“author”:“罗贯中”}, {“id”:“878912”,“name”:“水浒”,“au...原创 2019-04-30 00:41:52 · 658 阅读 · 0 评论 -
vue中使用Element-UI----如何修改环形进度条尺寸
官网文档中默认尺寸是width:126px,height:126px;直接给放进度条的盒子设尺寸是不会起作用的,需要如下设置原创 2019-05-01 00:50:34 · 10184 阅读 · 2 评论 -
vue项目中用element-ui实现Table与分页器连接起来
1.第一步引入Table2.第二步引入分页3.第三步4.第四步原创 2019-07-26 14:44:04 · 730 阅读 · 0 评论 -
Element-ui导航组件NavMenu页面刷新后导航高亮问题
文件navMenu.vue,部分代码只需设置:default-active="$route.path"和router,不需要改动其它地方原创 2019-08-07 14:30:42 · 1823 阅读 · 2 评论 -
vue单页面应用刷新网页后vuex的state数据丢失的解决方案
最近在用vue写pc端项目,用vuex来做全局的状态管理, 发现当刷新网页后,保存在vuex实例store里的数据会丢失。1. 产生原因2. 解决思路3. 解决过程1. 产生原因其实很简单,因为store里的数据是保存在运行内存中的,当页面刷...转载 2019-09-20 16:55:33 · 178 阅读 · 0 评论 -
echarts 图表大小随窗口变动而自适应变动(无需刷新浏览器调整)
现象:相信很多童鞋在应用echarts进行统计图制作时候会遇到这样的问题,进入渲染页面统计图比例显示ok,但是当主动调整浏览器大小时候,统计图比例并没有随窗口大小改变而自动调整到最佳视觉效果,比如下图,缩小窗口就会出现溢出的情况这也是个奇葩的需求,但既然产品指出这个问题的存在,开发只能想办法去解决。造成原因:...转载 2019-10-08 10:33:13 · 2129 阅读 · 0 评论 -
vue项目中使用swiper框架
第一步:安装swiper在项目目录下打开命令窗口输入命令:npm install swiper第二步:引入js文件第三步:引入css文件在main.js文件中引入css文件原创 2019-04-27 17:09:20 · 334 阅读 · 0 评论