vue - 随笔分类 - zhongfang99

如何在vue项目中使用两个版本的npm包依赖

摘要：最近在开发新需求时遇到一个问题，页面是图表可视化，使用的是echarts。在页面中包含一个地图和一个词云图。一开始echarts默认安装的是5.0+版本，可以地图的鼠标点击地图时总是会出现同时高亮两个省市且鼠标悬浮展示的框中内容不变。问题改了许久也没有得到解决，最终发现是因为版本过高导致的不稳定性。阅读全文

posted @ 2021-08-01 20:59 zhongfang99 阅读(930) 评论(0) 推荐(0)

v-for与v-if

摘要：当在项目中使用v-for循环列表时，需要对列表中的数据进行判断是否展示，但是在vue中v-for的优先级比v-if高，会有性能问题，此时可以使用computed计算属性解决问题。 <template> <div class="data-show"> <ul> <li v-for="item in f 阅读全文

posted @ 2021-05-31 14:47 zhongfang99 阅读(258) 评论(0) 推荐(0)

实现鼠标悬浮时边框上面有一条线动画出现

摘要：// 鼠标悬浮时候，可以有线条从左到右出现的动画效果，移开时从右到左消失的效果 <template> <div class="animation"> <div class="box" @mouseenter="enterTop" @mouseleave="leaveTop"> <div class= 阅读全文

posted @ 2021-05-25 17:17 zhongfang99 阅读(338) 评论(0) 推荐(0)

vue中使用bus进行组件间的通信

摘要：在小项目中如果组件间层级嵌套很深的时候可以使用bus来调用其他组件的方法代码实现： 1、新建一个bus.js文件，如下代码 import Vue from "vue"; export default new Vue(); 2、在组件1中 <template> <div class="bus-bro 阅读全文

posted @ 2021-05-19 15:45 zhongfang99 阅读(224) 评论(0) 推荐(0)

vue项目中使用sass

摘要：cnpm install node-sass --save-dev //安装node-sass cnpm install style-loader --save-dev //安装style-loader cnpm install sass-loader@7.3.1 --save-dev // 安装s 阅读全文

posted @ 2021-05-17 15:03 zhongfang99 阅读(649) 评论(0) 推荐(0)

vue 插槽

摘要：vue的slot插槽分成默认插槽、具名插槽、作用域插槽；插槽是存在于父子组件中使用，在子组件中决定插槽的位置，同时子组件也可以给插槽默认信息，当父组件中没有需要给子组件插槽插入信息时，显示的是子组件插槽定义的默认信息。默认插槽父组件 <template>  <div> < 阅读全文

posted @ 2020-06-08 10:24 zhongfang99 阅读(179) 评论(0) 推荐(0)

element-ui上传附件和下载附件

摘要：上传附件 <el-upload ref="upload" class="upload-demo" :action="uploadUrl()" :auto-upload="false" :limit="1" :headers="headers" :on-exceed="handleExceed" :f 阅读全文

posted @ 2020-06-05 15:18 zhongfang99 阅读(5013) 评论(0) 推荐(0)

vue项目中表格中的某一列使用Tag标签来展示不同的状态

摘要：描述：在table中使用Tag标签来展示不同的状态（Tag标签是不同的颜色），后台获取到状态的id。通过id来设置不同的颜色。 <div class="table-changes-column-color">  <el-table 阅读全文

posted @ 2020-06-05 15:04 zhongfang99 阅读(3233) 评论(0) 推荐(0)

dialog关闭未保存的数据会修改表格中的数据

摘要：vue项目，在dialog里面写的表单，点击表格中某一行修改按钮时，这一行的数据会渲染到表单中。当修改表单中的数据时，未保存未提交给后台，关闭dialog时，发现表格中的这一行的数据也被更改了，需要刷新页面才可还原。 this.$refs.ArticleDialog.addDialog.title 阅读全文

posted @ 2020-06-02 13:41 zhongfang99 阅读(546) 评论(0) 推荐(0)

vue computed计算属性

摘要：在实际的项目开发过程中，前端需要展示的数据往往需要经过一些处理。为了避免在模板中加入许多的业务逻辑，保证模板的解构清晰和可维护性，Vue.js提供了计算属性这个方法。 1 实例此时对和`vm.lastName vm.fullName`。 Setter 计算属性的Setter方法，可以在更新属性时阅读全文

posted @ 2020-05-21 10:25 zhongfang99 阅读(239) 评论(0) 推荐(0)

vue tabs标签页的使用

摘要：```html ``````js``` 阅读全文

posted @ 2020-05-13 08:55 zhongfang99 阅读(3722) 评论(1) 推荐(0)

vue自定义指令

摘要：V-Hotkey 仓库地址： https://github.com/Dafrok/v-hotkey 安装： npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。例如，通过按下ESC键后隐藏某个组件，按住Control和回车键再显示。 <template> 阅读全文

posted @ 2020-01-14 15:38 zhongfang99 阅读(342) 评论(0) 推荐(0)

vue修饰符

摘要：表单修饰符 .lazy 在input表单输入时光标还在时，下面的值就已经出来了，但是有时我们希望输入完所有的东西时，光标离开时才更新视图。这样只有在我们光标离开输入框的时候，它才会更新视图，相当于事件触发触发更新。 .trim 在输入框输入时，需要过滤一下一些输入密码不小心多敲了一下空格的内容。阅读全文

posted @ 2020-01-12 21:58 zhongfang99 阅读(165) 评论(0) 推荐(0)

vue使用定时器

摘要：```js methods:{ timeToRefresh(){ this.timer = setInterval(()=>{ // 调用的方法 },1000) } }, // 清除定时器 beforeDestroy(){ clearInterval(this.timer) this.timer = null } ``` 阅读全文

posted @ 2020-01-10 16:23 zhongfang99 阅读(796) 评论(0) 推荐(0)

zhongfang99

随笔分类 - vue

公告