vue
文章平均质量分 55
qq_33203555
这个作者很懒,什么都没留下…
展开
-
使用动画实现滚动表格
一、需求在一些大屏项目中,需要使用到表格行数据滚动。本文介绍在vue项目中使用动画实现滚动表格。vue代码如下<template> <div style="cursor: default;margin:9px 10px 18px"> <div class="table-header table-row"> <div class="table-cell" style="width: 25%">计划名称</div>原创 2022-02-21 15:24:06 · 1176 阅读 · 0 评论 -
微前端项目搭建
本文主要介绍基于single-spa的微前端项目搭建一、涉及技术及框架single-spa:连接主项目与子应用的桥梁systemjs:浏览器端异步加载模块single-spa-vue:vue子应用连接主应用插件二、主应用工程搭建vue-cli搭建vue项目vue create root-web改造root项目使用systemjs加载子应用,以下是index.html的改造<!DOCTYPE html><html lang=""> <head&g原创 2021-01-28 15:21:11 · 574 阅读 · 1 评论 -
使用cancelToken取消请求
本文介绍使用cancelToken取消axios的请求使用方法import Vue from 'vue';import Axios from 'axios';import { Promise } from 'es6-promise';import user from '../store/modules/user'import server from '../config/hostConfig'Axios.defaults.timeout = 45000; // 45s// Axios.原创 2020-12-20 10:48:35 · 2877 阅读 · 1 评论 -
html2canvas与jspdf实现下载图片以及打印PDF
本文分享使用html2canvas实现绘制页面成图片。使用jspdf实现将图片打印成pdf代码如下:<template> <div class="s-receipt"> <Modal v-model="modal" class-name="s-receipt vertical-center-modal" :mask-...原创 2019-08-31 18:04:08 · 1307 阅读 · 0 评论 -
Hybrid App混合开发通信
混合app即外壳为原生开发,安卓或者ios。业务为H5的APP。这样的APP可以减少开发成本。也可以热更新,用户不用更新app即能使用新功能。其中混合开发涉及一个通信的问题。即业务系统需要使用一个app功能时,需要H5调用native的功能。native完成一些操作也需要通知到业务系统,即native需要调用H5。通信原理:1、native通过注入方法到window对象上让js调用,实现H5...原创 2019-08-30 16:49:10 · 813 阅读 · 0 评论 -
vue联系人组件
本文分享一个基于bscroll封装一个类似于联系人得组件//组件代码<template> <div class="ylw-indexList-wrapper"> <div class="ywl-index-list"> <label>{{title}}</label> <input type...原创 2019-07-23 16:47:45 · 1762 阅读 · 0 评论 -
vue中使用指令限制input输入
在项目中限制输入框的输入字符是一个很常见的场景。常见做法如下:1.监听@input事件在方法中处理2.封装input组件在组件中处理如下是监听@input事件的方法<inputtype=“text”placeholder=“备注信息”class=“order_input”v-model=“review_note”maxlength=“15”@input=“vaidate...原创 2019-07-06 12:20:31 · 4201 阅读 · 0 评论 -
vue组件开发
本文介绍开发一个弹框组件//组件代码<template> <div class="yui-wrapper"> <transition name="fade"> <div class="mask" v-show="showModal"></div> </transition> <...原创 2019-07-10 22:13:07 · 188 阅读 · 0 评论 -
keep-Alive遇到的一个坑
在vue中,有时候我们需要缓存一个页面,这个时候会用到keep-Alive。触发场景:在引用同一个子组件得两个页面,且该子组件会使用到dom元素得时候。例如子组件<template> <div class="yd-dialog-black-mask" v-show="showMask"> <div class="layer-wraper">...原创 2019-06-11 10:38:33 · 742 阅读 · 0 评论 -
vue源码解读-dom挂载1
vue框架是一款双向数据绑定的框架,能大大提高我们的开发效率。那么vue是如何将模板生成dom的呢,通过阅读源码可以知道这一过程。&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt;原创 2018-09-18 17:24:10 · 624 阅读 · 0 评论 -
VueRouter源码浅析
路由原理前端路由原理主要是监听浏览器的url变化来达到根据不同url渲染不同页面的目的。 VueRouter主要有三种实现方式:history模式hash模式abstract模式 本文主要讨论hash模式。使用先看VueRouter的构造函数var VueRouter = function VueRouter (options) { if ( options...原创 2018-09-10 23:13:10 · 824 阅读 · 0 评论 -
vue-cli项目webpack打包后iconfont文件路径问题解决
在使用vue-cli创建vue项目时,可以自动生成webpack文件。使用npm run build即可打包发布生产文件,打包后的文件 可以看到使用url-loader处理后的文件是在static目录下生成fonts目录下的文件。全部样式文件打包在css目录下app.hash.css文件中。 但我们会发现发布后,会存在字体文件找不到的问题,查看css文件发现是iconfont字原创 2018-01-11 23:01:49 · 12119 阅读 · 7 评论 -
vue步骤型表单缓存上一步页面
在移动端开始时,在步骤型表单时比如A->B->C,我们经常需要缓存上一步的页面级数据。本文介绍通过路由元信息以及vue的keep-alive来实现。{ name: 'cwkjzdbgs_step1', //财务会计制度及核算软件备案报告书 path: '/cwkjzdbgs_step1', component: resolve => require(['../vi原创 2017-10-19 18:46:03 · 6644 阅读 · 0 评论 -
vue组件间通信
随着vue等框架盛行,组件开发已然成为一种趋势,组件开发中我们经常遇到的就是父子组件通信了。下面简单介绍下vue中父子组件如何通信:一、使用props传递数据组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据,我们需要通过子组件的 props 选项。 子组件要显式地用 props 选项声明它期待获得的数据:<template>原创 2017-09-05 16:38:56 · 578 阅读 · 0 评论 -
vue表单校验vee-validate
下面介绍一款vue中的表单校验插件。一、安装npm install vee-validate --save-dev二、配置vee-validate默认是英文提示的校验,我们需要把它配置成中文的。可以使用如下方法://validate.jsimport Vue from 'vue';import VeeValidate, { Validator} from 'vee-validate';i原创 2017-08-25 22:13:50 · 1867 阅读 · 4 评论 -
Vue开发公共模块封装(msg)
本文介绍基于vux简单封装msg模块。 *主要利用vue.use()方法来安装插件,安装 Vue.js 插件。如果插件是一个对象,必须提供 install 方法。如果插件是一个函数,它会被作为 install 方法。install 方法将被作为 Vue 的参数调用。 当 install 方法被同一个插件多次调用,插件将只会被安装一次。*import Vue from 'vue'import {原创 2017-08-17 18:02:16 · 1912 阅读 · 0 评论 -
vue开发公共模块封装(http)
本文主要分享基于vue的移动端ui框架vux简单封装Axios作为我们项目的公共http模块。代码如下:import Vue from 'vue';import Axios from 'axios';import { Promise } from 'es6-promise';import user from '../store/modules/user'import server from原创 2017-08-16 10:09:10 · 5758 阅读 · 0 评论 -
vue移动端图片上传
一、服务端环境准备本文服务端主要为nodejs,利用multer中间件完成图片上传功能。服务端安装express框架和multer。npm install express --savenpm install multer --save服务端启动文件代码:var express = require('express');var app = express();var fileRouter = r原创 2017-08-16 09:39:07 · 4852 阅读 · 0 评论