qq_37899792的博客

vue项目，执行打包命令后，会在项目的根目录中自动创建一个文件夹。,dist中的文件就是打包后的文件，只需要放到服务器中即可。【默认情况下，用的绝对路径，需要放到服务器的根目录打开。经过 publicPath：'./' 配置之后。默认情况下打包后的index.html引入情况如下。

css vue

下载qrcoddenpm i qrcode -S下载复制的插件npm i vue-clipboard2 -SQRcode.vue组件<comment> # 组件注释 这是一个公用组件 v-clipboard：下载的一个插件</comment><template> <div id="QRCode" :style="{'width':width, 'height':height}"> &...

父组件HTML<template><div> <subTable ref="subTableInParent" :tableRules="tableRules" @current-change="onCurrentChange" @selection-change="onSelectionChange" @on-query="refreshTable"&g...

场景：有时候两个组件也需要通信（非父子关系）。当然Vue2.0提供了Vuex，但在简单的场景下，可以使用一个空的Vue实例作为中央事件总线。Bus.jsimport Vue from 'vue'const Bus = new Vue()export default Bus组件调用时先引入组件1import Bus from './Bus'expor...

什么是vuex？ vuex官网的解释是：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。下面介绍在vue脚手架中简单应用vuex来实现组件之间传递数据，当然组件之间传递可以使用emit，但页面组件越来越多涉及到数据传递就越来越麻烦，vuex的便利性就体效果演...

安装moment.jsnpm install moment --save全局过滤器main.js中import moment from 'moment'//定义一个全局过滤器实现日期格式化Vue.filter('datrfmt',function (input,fmtstring) {//当input为时间戳时，需转为Number类型 // 使用momentjs这个日期...

（1）取一个class<div v-bind:class="isRed?'colorRed':'colorGreen'"> hello world</div>（2）取多个class<div :class="{'red':true,'big':true}"> hello world</div>（3）一个学生列表，...

npm安装地址https://www.npmjs.com/package/vue-seamless-scroll命令行执行:npm install vue-seamless-scroll --save然后在main.js文件里面引入使用：import scroll from 'vue-seamless-scroll'Vue.use(scroll)在页面使用参考地址：h...

一. 下载swiper：npm install swiper -S二. css：在main.js里引入cssimport Vue from 'vue'import 'swiper/dist/css/swiper.css';三. js：在需要使用swiper的组件里引入swiper，swiper的初始化放在mounted里（可以把官网例子的启动var mySwiper...

使用elementUI的Upload 上传组件时当删除图片时想要找到图片所在的数组对象中的index,需要在删除的钩子函数中(before-remove)传递index参数以下是elementUI的upLoad组件的一下钩子函数那么如何传递自己想要的参数呢？答案如下 回调再回调<template> <div class="sub-box su...

将文件自动上传改为false :auto-upload="false"点击保存的时候，调用el-upload的上传方法代码如下（封装的上传方法）export function mpp(data) { return new Promise(function(resolve, reject) { let data = { method: "POST",...

封装方法function getExel(url, params, index) {+ return new Promise(function(resolve, reject) { let data = { method: "GET", url:url, headers: { 'token': gettoken("token"...

要求①出一个日历组件②只显示当前月份③点击日期和右边列表联动，④当前天有预警时，日历出现小红点按照我的思路来看必须要求当前月有几周啊，代码如下 //获取当前月有几周 百度的别人的代码 但是它从第一个周一开始算该月第一周，所以下面有处理 getWeeks(year, month) { var d = new Date(); /...

focus 改成 click 加 stop 加 native。<input @click.stop.native="stopstop">

./这是相对路径的意思，同级目录。../上级目录。@/这是webpack设置的路径别名。在build/webpack.base.conf这个文件里面设置了@具体指的是什么在build/webpack.base.conf里找到如下resolve: { extensions: ['.js', '.vue', '.json'],//取消后缀 引入文件路径就不用加文件后缀了 a...

效果如下关键代码:下图红框所圈完整代码如下<el-table-column prop="meetingPositionName" label="会场" ></el-table-column><el-table-column > <!-- 自定义表头 --> <template slot="header" ...

https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-default

邀请链接为:<input id='ipt' v-model='lianjie' style="border:none;display:inline-block"><el-button size="mini" @click="copyLink" plain type="success">复制</el-button><p style="height:...

场景如下图所示切换主页面中的组织（即：改变组织id orgid),需要刷新组件中的列表当vuex中state变化时，子组件需要进行更新，怎么做？（三种方法）第一种：通过改变router-view中的key来达到刷新组件的目的（野路子，推荐第三种）当改变state中的值时，改变router-view中的key,这个key为时间戳<router-view :k...

element:https://element.eleme.cn/#/zh-CN/component/quickstartant-design-vue:https://vue.ant.design/docs/vue/introduce-cn/

1、创建collapse.js文件const elTransition = "0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out";const Transition = { "before-enter"(el) { el.style.transitio...

NProgress是页面跳转是出现在浏览器顶部的进度条官网：http://ricostacruz.com/nprogress/github：https://github.com/rstacruz/nprogress文章地址：https://blog.youkuaiyun.com/wn1245343496/article/details/82151273...

<template> <div id="Home" class="m-20"> <div v-if="showInput"> <input ref="input" /> </div> </div></template><script&...

import Vue from 'vue'import Home from './Home'import router from './router'new Vue({ el: '#hompage', router, components: { Home }, template: '<Home/>', store})第一步：引入vue-ro...

一、前言1、简介：provide与inject是Vue组件开发当中较为实用的功能。2、用途：主要用于vue高阶组件的开发，本文将介绍一些provide与inject的一些实用技巧。3、原理：provide用于向子组件(或子组件中的子组件，无限嵌套)提供自身的一些数据，或者将自身所有属性全部提供，但是提供的数据均为非响应式数据。...

场景如下下面的图片（图1）：后退时，不刷新的页面。（需要保证左侧列表中的active状态）下面的图片（图2）：点击“返回”，返回到上图（图1）所示的页面，此时要保证（图1）的页面不刷新那么如何实现 ？step1在不需要刷新的路由元信息meta中,增加keepAlive:true属性step2在App.vue模板中改写<router-vie...

如下图所示：点击某个col里面的【编辑】图标时，其他col里面的“表单操作”要变为“普通文本”，即：其他col的表单操作默认走了【取消】这个动作下面为详细代码

在浏览器查看HTML4的本地存储 cookie浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式，可以利用cookie,session等跟服务端进行数据交互。一、cookie和sessioncookie和session都是用来跟踪浏览器用户身份的会话方式。区别：1、保持状态：cookie保存在浏览器端，session保存在服务器端2、使用方式：（1）coo...

api 参考http://lbsyun.baidu.com/cms/jsapi/class/jsapi_reference.html#a3b26两种使用方式：vue特定的VueBaiduMap /原生js第一种使用Vue Baidu Map网址：https://dafrok.github.io/vue-baidu-map/#/zh/index实例如下<...

场景一：将项目中的图片资源转为base64function convertImgToBase64(url, callback) { let canvas = document.createElement('canvas'), ctx = canvas.getContext('2d'), img = new Image(); im...

需引入：import html2canvas from "html2canvas";import JsPDF from "jspdf";注意：图片资源跨域时，将图片转为base64格式：https://blog.youkuaiyun.com/qq_37899792/article/details/102600293/*** Created by LiChenGuang on 2019...

.doc / .xls / .ppt都可以用微软提供的在线预览微软提供了一个在线预览的页https://view.officeapps.live.com/op/view.aspx?srcsrc后面填写你上传的文件地址 <!--doc xls ppt--> <iframe v-if="type == 'office'" ...

a-table组件中加入以下两个属性:customRow="rowClick":rowClassName="rowClassName"/*** @Author: 路博欢* @Date: 2019/8/22* @Version: 1.0* @Last Modified by: 路博欢* @Last Modified time: 2019/8/22**/<comm...

需要配合a-table组件的一个属性一个方法，如下:expandedRowKeys="table.expandedRowKeys" //属性@expand="expand" //方法/*** @Author:一个帅小伙* @Date: 2019/8/19* @Version: 1.0* @Last Modified by: 一个帅小伙* @Last Modified ti...

this.expandKeys = Util.getIds(this.treeResultData); //默认展开三级/*** @Author: 路博欢* @Date: 2019/8/19* @Version: 1.0* @Last Modified by: 路博欢* @Last Modified time: 2019/8/19**/<comment> ...

import axios from 'axios'import { message } from 'ant-design-vue'import Cookie from 'js-cookie'let isFormData = (v) =&g...

<comment> # 组件注释 iframe组件，为了引入外部链接 ——决策系统用，嵌入ProjectBI</comment>...

vue异步组件懒加载(按需加载)利用webpack对代码进行分割是懒加载的前提，懒加载就是异步调用组件，需要时候才下载（按需加载）。为什么需要懒加载?在单页应用中，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加...