帆酱的博客

一、前往lodop官网，下载插件，http://www.lodop.net/index.html这里下载的window64位的，将插件安装好，运行，会看到点击‘去了解C-Lodop>>’,会跳转至使用说明页面，在这个页面里，可以打印测试页面，以验证插件正常连接打印机。

【代码】vue监听鼠标与键盘事件。

一、安装插件二、直接导出当前表格数据（配合element-ui使用）三、通过数据插入导出（json转excel格式导出）

二、通过element-ui获取本地文件。

【代码】vue点击鼠标生成24字社会主义核心价值观上浮特效。

1、先使用npm安装vue-esign。2、复用模板signature.vue。h和w是获取的设备可视页面宽度。

二级路由挂载点，由于二级路由页面只有几个基础页面，例如注册登录等，因此全部缓存，如果不缓存的话，会导致切换到二级路由页面后，缓存的三级页面失效。需要注意的是include/exclude绑定的属性是页面中设置的name值 而不是路由中的name值。当在实际项目中 可以运用vuex保存你需要缓存的页面的name值,可以配合tabs使用。当在几个tabs之间来回切换时，不需要更新vuex，直接router跳转就行。下面是配合element-ui的tabs使用。当删除tabs时，同样更新vuex。......

要想给前端页面的每个路由甚至是每个页面的一个按钮都添加相应权限，最好的办法就是将所有页面的路由存储在数据库中上图中step代表了当前权限的层级，up_node代表此权限节点依托于上一个节点的id，一级权限的上级节点默认为-1，role_type代表权限种类，1代表根节点，2代表页面，3代表按钮。唯一标识marks为前端页面判定的唯一依据,与前端路由中meta.marks一致，如下图由此转化为可视化页面为下图：注意：层级关系最好和前端路由关系一致而权限和用户的关系在关系表中，.

<script>import store from '@/vuex/store' // 直接导入store对象export default { data () { return { } }, computed: { count () { return store.state.scroll.user_role_list } }, methods: { }, watch: { count (newCount, .

项目的静态资源全部放到cdn里，其它资源访问正常，可唯独element-icon.ttf文件跨域解决方法：使用外部公开的CDN, 这里推荐unpkgunpkg 是一个快速的全球内容交付网络，适用于npm 上的所有内容。使用它可以使用以下 URL 快速轻松地从任何包加载任何文件首先，在main.js里找到element-ui的静态资源加载路径 然后在node_modules里找到该文件 最后找到element-icont并替换url重新打包上传，此时加载的资源就是u...

1、routers下单index.jsvar _this = ''// 获取原型对象上的push函数const originalPush = Router.prototype.push// 修改原型对象中的push方法Router.prototype.push = function push (location) { // 如果重复点击小说管理，则发送总线 if (location == '/manageindex/storymanage') { let obj = {

库存保有单位 （Stock keeping Unit 或者SKU）是对每一个产品和服务的唯一标示符，该系统的使用SKU的值根于数据管理，使公司能够跟踪系统，如仓库和零售商店或产品的库存情况。在开发商城时，我们需要对商品的sku进行判断，当用户选择完一个规格后，去判断剩下的未选规格是否继续选择，可提高用户体验。线上demo：https://my.weblf.cn/alone_page/pag...

核心思路是将已有的图片通过背景图片定位设置在不同的元素上，给元素添加动画，使之看起来有飘动的感觉。如果米有现有图片，则使用截图工具生成图片。参考博文：https://my.oschina.net/codingDog/blog/1839097一、有现成图片线上demo：https://my.weblf.cn/alone_page/css_ani/flag2.html代码：&lt...

一、Indicator 等待框直接调起后关闭有时不生效，需要加入延时器import { Indicator } from 'mint-ui';Indicator.open('供养中...')setTimeout(()=>{ Indicator.close();})...

如果本文帮助到你，本人不胜荣幸，如果浪费了你的时间，本人深感抱歉。项目线上demo：https://my.weblf.cn/lf_demo/others/rili_list项目结构：rili.vue<template> <div class="rili"> <rili /> </div></templat...

一、静态转换使用 Vue 插件language-tw-loader 在打包时把本地的文字转换成繁体，动态加载的文字不会转换。也就是说接口返回的文字不会自动转换。 打包后无法再切换为简体。除非专门打一个简体的包。使用方式1、安装插件npm i language-tw-loader --save2、修改 webpack 配置文件webpack.base.conf.jsm...

dom-to-image是一个可以将任意DOM节点转换为用JavaScript编写的矢量（SVG）或光栅（PNG或JPEG）图像的库。 它基于Paul Bakaus的domvas并且已被完全重写，修复了一些错误并添加了一些新功能（如Web字体和图像支持）。github：点击查看线上demo：点击查看npm安装和引用npm install dom-to-imageimport ...

html2canvas能够实现在用户浏览器端直接对整个或部分页面进行截屏。这个html2canvas脚本将当页面渲染成一个Canvas图片，通过读取DOM并将不同的样式应用到这些元素上实现。它不需要来自服务器任何渲染，整张图片都是在客户端浏览器创建。点击查看：官方文档点击查看：线上demo安装引用html2canvasnpm install html2canvasimport...

如果本文帮助到你，本人不胜荣幸，如果浪费了你的时间，本人深感抱歉。希望用最简单的大白话来帮助那些像我一样的人。如果有什么错误，请一定指出，以免误导大家、也误导我。项目github地址线上demo地址使用步骤：1、安装包cnpm i2、运行devnpm run dev项目目录：自定义农历节日：yinli_festival.json{ "01...

如果本文帮助到你，本人不胜荣幸，如果浪费了你的时间，本人深感抱歉。希望用最简单的大白话来帮助那些像我一样的人。如果有什么错误，请一定指出，以免误导大家、也误导我。项目github地址线上demo地址vue_no_cli_multiple_page根据官方文档修改，不使用vue-cli多页面项目，基于webpack4，热更新超快项目结构：，pages目录：为验证热更新...

文件上传类 vue-upload-componentVuejs文件上传组件 vue-core-image-upload轻量级的vue上传插件 vue-dropzone用于文件上传的Vue组件 vue-image-crop-uploadvue图片剪裁上传组件 vue-cropperjsvue图片裁剪工具 html2canvas屏幕截图...

官方文档：百度地图api SDK线上demo：https://my.weblf.cn/lf_demo/map/baidu一、先引入百度地图插件库，可使用多种引入方式，本文采用cdn引入<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=你自己的密钥"></sc...

tinymce-vue是一款强大的富文本编辑器UI精美，功能模块多，可按需加载配置github地址：tinymce-vuedemo查看一、安装"@tinymce/tinymce-vue": "^3.0.1","tinymce": "^5.0.14",下载的时候可以先在static下面建个目录tinymce，里面可以防止一些插件，语言包什么的二、下载中文语言包...

一、简介：先说一下什么是事件总线，其实就是订阅发布者模式；比如有一个bus对象，这个对象上有两个方法，一个是on（监听，也就是订阅），一个是emit（触发，也就是发布），我们通过on方法去监听某个事件，再用emit去触发这个事件，同时调用on中的回调函数，这样就完成了一次事件触发；在vue被实例化之后，他就具备了充当事件总线对象的能力，在他上面挂了两个方法，是$emit和$on；而...

转自：WebCandy的博客，原文：https://blog.youkuaiyun.com/twodogya/article/details/80223331---对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升，也提高了用户体验。实现方法(使用vue的vue-lazyloa...

注意：此文章使用百度云虚拟主机BCH服务器web内核用Nginx，PHP版本7.0。第一步：再php配置里把URL_MODEL 配置成2，重写模式；第二步：在网站的根目录里面（webroot目录下）新建一个bcloud_nginx_user.conf文件（bch是不允许修改基础配置文件的，所以只能通过加载用户自定义配置文件），写入如下代码:location /hehe { i...

Vue Multiple Pages基于vue-cli3.0 + webpack@4.28.4的多页脚手架项目地址：点击此处线上demo：点击此链接编译速度与热跟新速度要优于webpack2.0、3.0，但相应的消耗内存变大，在node中出现内存溢出现象，如页面过多，使用npm run fix-memory-limit再进行npm run devProject ...

本文转自没睡醒的蛐蛐的博客，原文：https://blog.youkuaiyun.com/meishuixingdeququ/article/details/79393757为什么需要做代码分割（codesplit）在vue单页应用中，若不做任何处理，所有vue文件会打包为一个文件，这个文件非常的大，造成网页在首次进入时比较缓慢。做了代码分割后，会将代码分离到不同的bundle中，然后进行按需加载这些...

一般情况下我们在html中使用锚点时会利用链接方式请求‘#+id名称’，此时会在url后面跟一个#号。但是在单页面中会有路由误判的情况。所以在单页面中锚点可改为参数传递的方式。一、封装一个外部js：anchor.js//锚点跳转function goAnchor(selector) { var anchor = this.$el.querySelector(selector);...

&lt;template&gt; &lt;div class="box"&gt; &lt;div class="con" v-html="cont"&gt; &lt;/div&gt;&lt;/template&gt;当我们使用v-html渲染页面，使用下面这种方式去修改样式并没有效果，&lt;style scoped lan

本文转自xenowei的文章，原为地址：https://segmentfault.com/a/1190000013044682版本选择swiper是个常用的插件，现在已经迭代到了第四代：swiper4。常用的版本是swiper3和swiper4，我选择的是swiper3。安装安装swiper3的最新版本3.4.2:npm i swiper@3.4.2 -S这里一个小知识...

我们一般情况下将vue项目开发完成后会进行打包上线，本文介绍多种部署情况。一、Apache服务器1、vue路由mode:'hash'模式（带#号模式）hash模式打包后可以直接丢到服务器上去，不会有路由上的问题，接口的话根据项目的路径写个全局配置就行了，这里不详细说。2、vue路由mode:'history'模式（不带#号模式）vue在history模式打包时，如果项目为二级目...

转自：https://www.cnblogs.com/webbest/p/6722780.htmlVue所有的生命周期钩子自动绑定在this上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法。这是因为箭头函数绑定了父上下文，因此this与你期待的Vue实例不同。1、beforeCreate　　在实例初始化之后，数据观测和event...

在vue中使用拼接图片时，会出现图片无法识别的情况&lt;img :src="item=='seat' ? '../../statices/img/text1.png' : ' ../../statices/img/text2.png' " /&gt;此时图片有可能无法识别，需要将图片单独引入。首先给图片地址绑定变量&lt;template&gt;    &lt;img :sr...

Vue通信、传值的多种方式，详解（都是干货）：本文转载自 飞歌Fly原文地址:https://blog.youkuaiyun.com/qq_35430000/article/details/79291287&amp;nbsp;&amp;nbsp;一、通过路由带参数进行传值①两个组件 A和B,A组件通过query把orderI...

1、安装node.js,在官网下载，直接下一步，完成。nodejs里默认包含npm环境。国内安装包的速度太慢，建议使用cnpm淘宝镜像。npm install -g cnpm --registry=https://registry.npm.taobao.org2、vue-cli构建SPA应用安装vue：npm install vue -g安装vue-cli：npm install ...

在一个单页面应用里使用二级套嵌路由目录结构如下：其中main.js为全局配置文件，App.vue为项目入口。main.js中路由配置如下import Vue from 'vue'//引入vueimport App from './App'//引入主模板import Router from 'vue-router'// 引入router路由// 引入项目的模块组件imp...

1、首先vue开发环境已经安装成功2、安装less依赖，npm install less less-loader --save    less-loader的作用是使webpack能够识别更多的文件类型，比如vue编译后成为js文件就需要less-loader才能正常使用less。3、修改webpack.config.js（webpack3.6版本为webpack.base.conf....

1、写一个提示框组件：message.vue&lt;template&gt; &lt;div&gt; &lt;!-- 全局提示框 --&gt; &lt;div v-show="visible &amp;&amp; type==1" class="dialog-tips dialog-center"&gt; &lt;div

一、在百度统计网站中添加自己的网站1、官网地址：https://tongji.baidu.com/web/welcome/login。2、在’管理‘一栏中选择‘网站列表’，然后选择新增网站，添加成功后点击代码获取，可以获取统计代码。二、在maim.js下百度统计代码添加var _hmt = _hmt || [];window._hmt = _hmt; // 必须把_hmt...