vue
依赖_赖
这个作者很懒,什么都没留下…
展开
-
vue3.0 通过ref 动态绑定与获取 dom
vue3.0动态设置ref并获取dom原创 2023-07-12 11:39:26 · 1657 阅读 · 0 评论 -
解决vue2.7及以后版本不兼容chrome老版本的问题
浏览器兼容browserslist原创 2023-02-28 16:49:27 · 2431 阅读 · 2 评论 -
vue实现气泡运动撞击效果
封装组件<template> <ul id="main"> <li v-for="(item, index) in circleData" :key="index" :class="{'active': item.is_latest_sign_user}"> <div> <span>{{ item.nick_name }}</span> <span>签到</sp原创 2022-03-29 16:45:09 · 2967 阅读 · 2 评论 -
formData 实现文件上传或导入
html部分: 结合input标签<div class="panel-btn btn-box"> <el-button class="audit-btn" size="mini" :loading="importLoading">导 入 </el-button> <input class="import-input-file" :disabled="!manipulatio原创 2021-12-01 11:00:20 · 759 阅读 · 0 评论 -
vue 事件修饰符
.stop修饰符::阻止事件冒泡,不让他向外去执行函数 <div @click="test1"> <div @click.stop="test2"> 测试 </div> </div> //点击内层div,输出:test2.prevent修饰符: 阻止组件本来应该发生的事件,转而去执行自己定义的事件<!-- 不再跳转页面 --><a href="https://www.baidu.c原创 2021-11-23 18:23:37 · 658 阅读 · 0 评论 -
实现验证码登录并记住密码(cookie)
<template> <div class="login" @keyup.enter="submitClick"> <div class="formBox"> <div class="login_title">欢迎登录</div> <el-form :model="fromData" label-width="50px" label-positio原创 2021-08-09 11:24:10 · 511 阅读 · 0 评论 -
vue使用DES模式加密解密,包括Java加密解密
前端加密解密1.安装:npm install crypto-js2.在utils下创建一个cryptoAES.jsimport CryptoJS from 'crypto-js';//与后端约定的keyconst DESKey = 'httt360fusion';//加密export function encryptedDES(data) { const keyHex = CryptoJS.enc.Utf8.parse(DESKey); const srcs = Cryp原创 2021-08-09 11:15:04 · 545 阅读 · 0 评论 -
将HTML转化成图片并导出为pdf(含 domtoimage、html2canvas)
通过html2canvas实现:注意:html2canvas 截图只能截到当前屏幕可视范围内的内容,滚动到屏幕以外的截取不到在index.html中通过引入js文件<script src="https://cdn.bootcss.com/jspdf/1.5.3/jspdf.debug.js"></script><script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js原创 2021-06-01 16:33:45 · 1227 阅读 · 0 评论 -
通过tl-table行合并实现多样化表格
<template> <el-table class="common-table" :data="scoringTableData" :span-method="objectSpanMethod" :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'原创 2021-05-25 17:34:35 · 294 阅读 · 0 评论 -
vue-seamless-scroll实现循环滚动列表,并实现列表点击事件
安装插件npm install vue-seamless-scroll --save使用<template> <div class="scorllBox"> <div class="scrollnameList"> <p v-for="(item, index) in scorllBoxListName" :key="index">{{ item }}</p> </div> <div.原创 2021-04-28 15:28:14 · 1358 阅读 · 0 评论 -
封装头部可拖拽的弹出框
封装组件:<template> <div class="base-popup" v-if="isVisible" v-draggable :style="styleConfig"> <div class="popup-header"> <i></i> <span class="popup-title">{{ popupTitle }}</span>原创 2021-04-16 19:12:42 · 110 阅读 · 0 评论 -
懒加载的el-table在增加、修改、删除后,实现数据刷新
1.加载根节点数据2.实现数据懒加载el-table增加参数 lazy :load="tableLoad" :tree-props="{ children: 'children', hasChildren: 'hasChild' }"3.编辑和新增节点时刷新数据a. 定义maps变量: maps: new Map()b. 加载子节点时赋值:c. 编辑或新增成功时赋值,并调用刷新函数: //编辑或新增 tableEditClick (row, type) {原创 2021-02-06 16:49:59 · 6829 阅读 · 10 评论 -
Hbuilder打包web项目为app时,下载文件失败问题解决
问题描述:vue开发的h5项目,在pc端浏览器和手机浏览器上下载文件没有问题,使用hbuilder打包成apk在手机上运行,下载文件时弹出如下页面:解决方案: downloadPdf (item) { var system = { win: false, xll: false }; //检测平台 let p = navigator.platform; system.win = p.indexOf("Win") === 0; system.x11 =原创 2021-01-12 17:12:49 · 2023 阅读 · 2 评论 -
vue-awesome-swiper实现循环滚动列表
安装指定版本cnpm install vue-awesome-swiper@3 --save-dev在页面中引入插件<template> <div class="scorllBox"> <div class="scrollnameList"> <p v-for="(item, index) in scorllBoxListName" :key="index">{{ item }}</p> </div&g.原创 2021-01-11 16:49:47 · 3182 阅读 · 2 评论 -
解决hbuilder打包app之后点击手机返回键直接退出的问题
新建config.js文件document.addEventListener('plusready', function (a) { let first = null; plus.key.addEventListener('backbutton', function () { //获取地址栏目中的url let urls = location.hash.split('/')[1] if (urls === 'map' || urls === '') {//判断当前是否无后退页 if原创 2021-01-05 18:04:53 · 1268 阅读 · 3 评论 -
vue自定义拖拽指令和函数防抖指令
拖拽1.新建draggable.js文件,代码如下:import Vue from 'vue'Vue.directive('draggable', { inserted: function(el) { el.style.cursor = 'move' el.onmousedown = function(e) { let disx = e.pageX - el.offsetLeft let disy = e.pageY - el.offsetTop原创 2020-12-18 14:01:22 · 616 阅读 · 1 评论 -
vue移动端项目通过HBuilderX打包成app,通过真机运行
通过npm run build将vue的移动端项目打包成dist文件夹打开HBuilderX,新建5+APP项目3.创建完成后,将css,img,js文件夹删除,unpackage文件是存放App图标的,manifest.json是打包成APP的配置文件,将dist文件夹下的内容复制到当前项目下4.连接手机,将手机的开发者模式打开,点击运行到手机或模拟器5.手机将自动安装HBuilder调试基座,安装完成后自动运行项目问题: 运行后,手机出现白屏,无页面展示原因1: 页面中引用的js和c.原创 2020-12-17 14:26:26 · 1200 阅读 · 2 评论 -
xlsx结合file-saver实现纯前端导出excel
1.下载xlsx和file-saver, 并引用 npm install xlsx -s npm install file-saver -simport XLSX from 'xlsx';import FileSaver from 'file-saver'导出方法 exportExcel(){ // 判断要导出的节点中是否有fixed的表格,如果有,转换excel时先将该dom移除,然后append回去, let wb; this.$nextTick(() =原创 2020-11-26 17:48:11 · 3262 阅读 · 2 评论 -
pdf.js结合iframe实现文件(word,pdf)预览,且可通过手势缩放
1.下载pdf.js ,存放在public文件中地址https://download.csdn.net/download/weixin_39150852/131052742.获取需预览的文件信息,存在sessionStorage组件中使用iframe预览文件<template> <div class="main-page-container"> <div>文件名: {{pdfName}}</div> <div class=原创 2020-11-11 17:46:02 · 7539 阅读 · 7 评论 -
RxJS结合vue-rx, Akita的介绍和使用
RxJS介绍: 解决异步事件。它将一切数据包括HTTP请求,DOM事件或者普通数据等包装成流的形式,然后利用强大丰富的操作符(Operators )对流进行处理,使得用户可以用同步编程的方式处理异步数据。基本概念:Observable 类似于函数声明,subscribe类似于函数调用,调用时传入回调函数Observable 对象来执行,执行后的返回值称为Subscription ,可以停止后续Observable 的执行Observable (可观察对象): 。是一可观察序列,简单来说数据就在Obse原创 2020-10-22 16:04:30 · 2188 阅读 · 0 评论 -
结合video.js播放rtmp格式、flv格式、mp4等格式的视频
1.下载相应插件,只能通过npm或者yarn下载, cnpm下载后不可用npm install video.js --save npm install videojs-flash --save //rtmp格式//flv格式npm install flv.js --savenpm install videojs-flvjs-es6 --save2.封装视频播放组件<template> <video ref="videoPlayer" class="vi原创 2020-10-19 11:09:51 · 10466 阅读 · 19 评论 -
vue动态组件的使用
动态组件, v-if,v-show的区别v-if: 动态的向DOM树内添加或者删除DOM元素,切换一次就需要重新渲染一次组件;v-if + v-once: 把组件缓存起来,只渲染元素和组件一次,避免了来回创建销毁耗费的性能,支持 <template> 元素;v-show: 通过设置DOM元素的display样式属性控制显隐,是一开始就渲染的所有组件 , 之后只是样式的显示与隐藏 ,不支持 <template> 元素动态组件: 配合使用时,显示的时候 html上就有.原创 2020-08-26 13:47:20 · 497 阅读 · 0 评论 -
el-tree实现懒加载,并查询显示当前节点及所有子节点
html代码:<el-tree class="common-filter-tree fx-flex-auto mt15 overflow-auto" :props="defaultProps" :filter-node-method="filterNode" :load="loadNode" lazy ref="tree" > <div style="width: 100%;" slot-scop原创 2020-08-25 11:11:35 · 3649 阅读 · 1 评论 -
pdf的预览,实现放大、缩小、翻页、跳转功能
安装vue-pdf插件npm install --save vue-pdf或yarn add vue-pdf引入 pad 文档地址html代码:<!--PDF 预览--> <el-dialog title="" :modal="false" :visible.sync="viewVisible" width="33%" top="39px" .原创 2020-08-07 10:32:57 · 2670 阅读 · 0 评论 -
解决文件流导出为excel无法打开的问题
1.封装请求export function filePost(url, params, config) { let userAuth = JSON.parse(sessionStorage.getItem("userAuth")); return new Promise((resolve, reject) => { axios.create({ baseURL: baseUrl, timeout: 15000,原创 2020-07-23 14:38:36 · 8489 阅读 · 2 评论 -
Vue使用DES模式加密解密,包括Java加密解密
前端加密解密1.安装:npm install crypto-js2.创建一个crypto.ts文件import CryptoJS from 'crypto-js'export default { //加密 encrypt(data){ const key = CryptoJS.enc.Utf8.parse('o08YQii9QF5MuzYj'); ...原创 2020-03-27 10:51:07 · 1007 阅读 · 0 评论 -
vue组件传值
props可以是数组或对象,用于接收来自父组件的数据自上而下的数据传递,即父 =&amp;amp;amp;amp;amp;amp;gt; 子 =&amp;amp;amp;amp;amp;amp;gt; 孙,只能逐级传递props使用方法:在父组件中导入子组件import TableThead from '../components/TableThead'components:{ TableThead }原创 2019-03-08 13:28:22 · 379 阅读 · 0 评论 -
路由嵌套
在router.js中增加子路由拦截{ path:"/inventory", name:"inventoryPage", component:()=>import('./views/inventoryPage'), // 路由嵌套 children:[ { ...原创 2019-03-08 13:13:43 · 144 阅读 · 0 评论 -
vue中animate的使用
1.下载animate.css在github中https://github.com/daneden/animate.css下载animate.css,放入assets文件夹中2.导入animate.css在想要使用animate的style中输入@import "./assets/animate.css"3.使用animate.css <transition mode="out-...原创 2019-03-08 12:54:59 · 5677 阅读 · 0 评论 -
vue随笔
1.数据筛选新数组=原数组.filter(p=>p.name.indexOf(筛选条件)>=0)2.数据排序原数组.sort(function(p1,p2){ return p1.age-p2.age //升序 //降序 return p2.age-p1.age })3.组止事件冒泡<div @click="parent"> <div @...原创 2019-03-14 11:10:41 · 177 阅读 · 0 评论 -
vue实现跨域
1、在项目根目录新建文件vue.config.js(文件名必须是这个)module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:8866/', //对应自己想要访问的另一个域的接口 chan...原创 2019-03-06 18:42:13 · 184 阅读 · 0 评论 -
下载并使用axios
1.在当前项目根目录下打开终端,下载axiosnpm install axios -s2.下载成功后,配置文件出现相应依赖3.在src文件下的main.js文件中导入axiosimport axios from 'axios'Vue.prototype.$axios= axios4.在组件中直接使用axioscreated(){ this.$axios(...原创 2019-03-06 17:03:05 · 26956 阅读 · 0 评论 -
安装并使用vue-cli脚手架
vue-cli是vue.js的脚手架,用于自动生成vue.js+webpack的项目模板安装过程:首先需要安装node.js和npm最新版再安装脚手架1.打开电脑的终端界面,全局安装vue脚手架npm install -g @vue/cli卸载vuenpm uninstall -g @vue/cli2.检查安装情况vue --version3.进入预创建项目的目录文件夹...原创 2019-03-06 13:21:26 · 380 阅读 · 0 评论 -
element-ui的使用方法
1.在项目根目录下载element-uinpm i element-ui -S2.引入 Elementimport Vue from 'vue';import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);new Vue({ el: '...原创 2019-03-12 17:04:31 · 1069 阅读 · 0 评论 -
路由守卫
在跳转之前执行Vue.beforeEach(function(to,form,next){}) to:即将进入的路由对象from:当前导航即将离开的路由next:进行管道中的下一个钩子函数,如果执行完了,则导航的状态就是 confirmed (确认的);否则为false,终止导航。例:在main.js中使用路由的钩子函数,设置登录时的全局路由守卫router.beforeEach((...原创 2019-03-12 20:29:04 · 355 阅读 · 0 评论 -
router-view的使用
1.下载模块npm install vue-router2.在src根目录下新建router文件夹,下面新增一个modules文件夹存放不同模块的路由,再建一个router.js作为路由入口文件import Vue from "vue";import VueRouter from "vue-router";Vue.use(VueRouter);import index from "....原创 2019-03-13 12:44:52 · 7112 阅读 · 0 评论 -
vue上传图片并预览
html代码:<div id="headImg"> <div id="myPhoto"> <div class="viewPhoto" @click="monidianji"> <i cl...原创 2019-03-29 21:51:51 · 11460 阅读 · 0 评论 -
vue-cli3项目兼容ie
1、当我们使用 vue-cli3 搭建的脚手架开发项目时,一般浏览器都可以支持,唯独ie浏览器,运行时页面一片空白2、下载 babel-polyfill 模块npm install babel-polyfill -s3、 配置 polyfill,在根目录下新增babel.config.js文件:module.exports = { presets: [ ['@vue/app...原创 2019-05-21 17:47:50 · 18739 阅读 · 3 评论 -
vue使用外部字体
1、下载字体包链接:https://pan.baidu.com/s/1QS7Ra9-Nr6B0SSqUEa5Q9Q提取码:swvz2、css中引入字体@font-face { font-family: myFont; src: url("../common/font/DS-DIGI.TTF"); }3、直接使用span { ...原创 2019-06-10 11:09:46 · 1515 阅读 · 0 评论 -
vue实现多图循环轮播
定义轮播组件<template> <div class="swiperBox"> <div class="directionIcon"> <div class="imgLeft" @click="clickLeft"></div> <div class="im...原创 2019-06-21 09:32:42 · 7378 阅读 · 1 评论