![](https://img-blog.csdnimg.cn/4e6686ffda95433cbe481fba2fff4869.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue2
关于vue的帮助文档
Sunshine_Jian
这个作者很懒,什么都没留下…
展开
-
ElementUI图片上传 缩略图 picture-card 数量限制
ElementUI图片上传 缩略图 picture-card 数量限制,问题描述:在图片上传列表中,需要对图片上传的个数进行限制,在增加图片到最大数量限制时,就将上传框隐藏掉;在删除后,就再次显示出来;如果仅仅用 limit 是 可以实现功能的,但是会在后面发现下图最后面的框,还能选取文件,只是上传不了;原创 2022-11-09 10:03:14 · 2130 阅读 · 0 评论 -
Vue 强制更新数据
Vue 强制更新数据原创 2022-10-27 16:15:16 · 1241 阅读 · 0 评论 -
vue 使用 screenfull.js 页面全屏功能
用 screenfull 来实现一个全屏的功能,通过点击放大和缩小按钮去操控这个全屏效果,里面会需要的图标需要自己下载 iconfont。原创 2022-09-15 14:44:46 · 1621 阅读 · 3 评论 -
Vue 登录密码验证 MD5加密
登录密码验证,密码加密,登录页面的密码,利用MD5加密及二次密钥加密,使得密码更加的安全;原创 2022-08-12 11:42:06 · 1987 阅读 · 2 评论 -
el-table 列内容溢出 显示省略号 悬浮显示文字
el-table 表格列内容溢出,文本溢出,显示省略号,单行、多行省略;鼠标悬浮hover(点击click等其他其他事件)显示文字,包括el-tooltip、el-popover、show-overflow-tooltip、title等其他的一些实现方法的总结,以及一些想法的分享!...原创 2022-08-03 11:19:47 · 10745 阅读 · 2 评论 -
Vue 引入高德地图 vue-amap
高德开发者平台—链接地址1、控制台——我的应用——创建应用——添加key 创建应用 新建应用 选择web端(JS平台) last:到这里的 key 就有了,还得到了一个安全密钥;1、安装 2、在 main.js 里引入其中更多的插件,请参考: 插件的使用-入门-教程-地图 JS API | 高德地图API (amap.com)3、HTML部分:编写容器4、Script 部分:引入 AMapManager5、Style部分(自己根据实际场景调试) 最后的效果图: 文章原创 2022-07-12 10:05:23 · 4927 阅读 · 1 评论 -
【ElenmentUI el-date-picker日期选择器,结束时间不得早于开始时间,且只能选择距开始时间指定天数的日期】
场景:1、开始时间不得晚于结束时间;结束时间不得早于开始时间;2、开始时间与结束时间之间,有可选择的天数间隔,只可选择间隔日期内的日期;例如:设置间隔时间为5天;日期的取值范围,如下:2022-05-26 00:00:00——2022-05-30 23:59:592022-05-26 10:00:00——2022-05-31 10:00:00效果:完整代码:<template> <div> <el-but...原创 2022-05-26 16:56:58 · 3251 阅读 · 1 评论 -
vue2.0 引入Swiper
安装配置名称 版本号 swiper 5.x vue-awesome-swiper 3.1.3 安装命令:npm install swiper@5.x vue-awesome-swiper@3.1.3 --save-dev在main.js里引入:加入以下代码:import VueAwesomeSwiper from 'vue-awesome-swiper'import 'swiper/css/swiper.css';Vue.use(VueA原创 2022-04-27 17:39:45 · 1484 阅读 · 0 评论 -
解决vue报错-Syntax Error: TypeError: this.getOptions is not a function
场景:项目中写了一段less代码,但是没有下载安装 less 和 less-loader;安装命令:(同时安装 less 和 less-loader,默认最新版本)npm install less less-loader --save-dev安装时版本如下:(在package.json里查看)"less": "^4.1.2","less-loader": "^10.2.0",错误示例:*解决方案:一般都是因为less-loader的版本太高,需要降低less-loa.原创 2022-04-24 14:37:14 · 1754 阅读 · 0 评论 -
vue2.0 全局挂载自定义指令和组件
一、在src>components下新建index.js二、在这个 index.js 里引入组件及自定义指令// 引入自定义分页组件import paging from "@/components/common/paging.vue";export default { // 全局挂载 install(Vue) { // 挂载为全局组件 Vue.component("paging", paging); // 自定义拖拽指令 Vue.d.原创 2022-04-20 17:37:54 · 2212 阅读 · 0 评论 -
Vue2.0 自定义指令
一、除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。directive二、全局指令与局部指令1、全局自定义指令// 注册一个全局自定义指令`v-focus` Vue.directive('focus', {// 当被绑定的元素插入到 DOM 中时……inserted: function (el) {// 聚焦元素el.focus...原创 2022-04-20 16:56:36 · 541 阅读 · 0 评论 -
在main.js中Vue.config.productionTip的作用
背景:当 没有设置这行代码 或 设置为TRUE 的时候控制台输出:Vue.config.productionTip 阻止启动生产消息,常用作指令开发环境下,Vue 会提供很多警告来帮你对付常见的错误与陷阱。而在生产环境下,这些警告语句却没有用,反而会增加应用的体积。此外,有些警告检查还有一些小的运行时开销,这在生产环境模式下是可以避免的。在main.js中设置Vue.config.productionTip = false;import Vue from 'vue'i原创 2022-04-20 10:47:44 · 508 阅读 · 0 评论 -
Vue 制作滚动字幕,用于展示通知内容
1、场景:用于展示一些通知内容;2、效果图:3、步骤:第一步:引入 jQuery 和 jquery.marquee.js ;<script> import $ from "@/views/test/components/jquery-3.2.1.min.js"; import "@/views/test/components/jquery.marquee.min.js";</script>第二步:准备一个内容展示容器,并绑定数据..原创 2022-03-28 14:06:32 · 1736 阅读 · 0 评论 -
解决Vue报错:This dependency was not found
This dependency was not found:* vue in ./src/main.jsTo install it, you can run: npm install --save vue原创 2022-03-02 09:44:06 · 18999 阅读 · 7 评论 -
Vue项目中el-table导出Excel
1、安装相关的依赖;(xlsx,file-saver)npm install --save xlsx file-saver2、在main.js里引入import FileSaver from 'file-saver'import XLSX from 'xlsx'Vue.prototype.$FileSaver = FileSaver; //设置全局Vue.prototype.$XLSX = XLSX; //设置全局3、设置表格的id<el-table原创 2022-03-01 14:41:41 · 4343 阅读 · 9 评论 -
vue组件传参--简单运用
首先建立关系:父组件中做以下操作:1、父组件中引入子组件import Child from "@/components/Child.vue";2、注册组件<script>import Child from "@/components/Child.vue";// 1、引入组件export default { components:{ Child// 2、注册组件 }, data(){ return {} }.原创 2022-01-19 16:15:22 · 1078 阅读 · 0 评论 -
Vue-根据不同的路由-设置不同的title标题
根据不同的路由-设置不同的title标题;原创 2021-12-29 11:00:17 · 2622 阅读 · 2 评论 -
解决vue项目中 el-table 的 @row-click 事件与行内点击事件冲突
场景:点击行内按钮事件的时候,同时也出发触发了行的事件;因为行内按钮的父元素是单元格,而单元格的父元素是行;最里层子元素接收到事件后,再层层向上传递给父元素;原创 2021-12-22 09:43:46 · 12947 阅读 · 5 评论 -
ElementUI-分页-自定义文字-共计-跳至
场景:有时候需要使用自己去改显示的内容;包括共计 ,跳转等效果图:HTML代码:<!-- 分页 --> <div style="display: flex; justify-content: center; padding: 10px 0"> <span style="line-height: 28px; font-size: 13px" >共 {{ currentTot...原创 2021-11-23 15:15:34 · 4199 阅读 · 1 评论 -
Restful快速上手
-------------------测试模板--------------------------列表接口export const get = data => { return axios.get(``, { params: { ...data } });};//添加接口export const post = data => { return axios.post(``, { ...da.原创 2021-11-11 17:28:49 · 101 阅读 · 0 评论 -
vue 项目打包 报错
再执行 npm run build 之后,会生成一个dist文件夹,打开index.html,控制台报错如下图所示:这里是因为找不到正确的路径,导致报错。解决办法:1、在根目录下,新建vue.config.js文件,当然有的话,就忽略此条;2、在vue.config.js里 将publicPath: "/" 改为publicPath: "./" ,之后重新打包,npm run build 即可。publicPath: "/" =====>>...原创 2021-10-26 15:10:21 · 5694 阅读 · 3 评论 -
Vue——Echarts实现折线图
一、在项目里安装npm install echarts -S二、新建test.vue<template><divid="test_app"><!--为echarts准备一个具备大小的容器dom--><divid="main"style="width:100%;height:520px;background:#fff"></div></div></temp...原创 2021-07-21 11:18:01 · 8680 阅读 · 0 评论 -
vue路由的基本使用
一、创建路由文件import Vue from "vue" //导入 vueimport router from "vue-router" //导入 vue-routerVue.use(router) //安装插件import Index from '../components/Index.vue'var rou = [ { path: "/" component: Index }]const router = new Router({原创 2021-07-16 09:12:08 · 96 阅读 · 0 评论 -
安装VUEX及使用
vuex是基于vue框架的一个状态管理工具vuex的作用: 管理需要在多个组件中共享的数据一、安装npm i vuex -S二、使用1、main.js里写入下面的代码:2、创建vuex.js文件夹并写入下面的代码:import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default store3、工作原理4、使用流程=>>&g...原创 2021-07-15 18:52:16 · 148 阅读 · 0 评论 -
vue路由滚动行为
由于vue是单页面开发,组件跳转采用的是a标签的锚点逻辑,跳转之后,没有刷新页面,导致,在a页面的滚动条状态会保留到跳转到b页面的时候。const router = new VueRouter({ routes, scrollBehavior(){ //函数拥有 to和from参数 //可以通过 return {x:0,y:0} 来控制滚动条 //console.log(arguments) return ...原创 2021-07-17 15:42:57 · 518 阅读 · 0 评论 -
Vue——路由的懒加载
将导入路由组件的语句放到函数当中,在函数没有被调用的时候,导入语句不执行,来节省批量导入导致的运行压力。import Index = () => import('../components/Index.vue');/*const Index = function(){ return import('../components/Index.vue');}*/...原创 2021-07-17 15:35:12 · 88 阅读 · 0 评论