vue无缝滚动的插件开发填坑分享
写插件的初衷1.项目经常需要无缝滚动效果，当时写jq的时候用用msClass这个老插件，相对不上很好用。2.后来转向vue在vue-awesome没有找到好的无缝滚动插件，除了配置swiper可以实现但是相对来说太重了，于是自己造了个轮子。3.在这分享下，当时写这个插件的坑,自己也复习下，如果代码上有瑕疵欢迎指出。源码参考vue-seamless-scroll1.简单的实现上下滚动基本版(最初版)html1.solt提供默认插槽位来放置父组件传入的html<template><div@mouseenter="enter"@mouseleave="leave"><divref="wrapper":style="pos"><slot></slot></div></div></template>javascript1.animationFrame
Vue引用第三方datepicker插件无法监听datepicker输入框的值
一、背景在Vue项目中使用了第三方的datepicker插件，在选择日期后vue无法检测到datepicker输入框的变化<labelclass="fl">日期：</label><divclass="input-wrapperfr"><inputclass="daterangepicker"ref="datepicker"v-model="dateRange"/><ahref="javascript:;"></a></div>exportdefault{data(){return{dateRange:''}},watch:{dateRange(newVal,oldVal){console.log(newVal)//选择日期后无法监听dateRange的改变
WPF：数据绑定示例总结（1）
BindConversion绑定转换ps：type.NamepublicobjectConvert(objecto,Typetype,objectparameter,CultureInfoculture){vardate=(DateTime)o;switch(type.Name){case"String":returndate.ToString("F",culture);case"Brush":returnBrushes.Red;default:returno;}}publicobjectConvertBack(objecto,Typetype,objectparameter,CultureInfoculture)=>null;}<TextBlockTe
Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装
1.写在前面最近在学习Vue2，遇到有些页面请求数据需要用户登录权限、服务器响应不符预期的问题，但是总不能每个页面都做单独处理吧，于是想到axios提供了拦截器这个好东西，再于是就出现了本文。2.具体需求用户鉴权与重定向：使用Vue提供的路由导航钩子请求数据序列化：使用axios提供的请求拦截器接口报错信息处理：使用axios提供的响应拦截器3.简单实现1.路由导航钩子层面鉴权与重定向的封装路由导航钩子所有配置均在router/index.js，这里是部分代码importVuefrom'vue'importRouterfrom'vue-router'import{getUserData}from'@/script/localUserData'constMyAddress=r=>require.ensure([],()=>r(require('@/views/MyAddress/MyAddress')),'MyAddress')Vue.use(Router)
Vue 实践过程中的几个问题
前言本篇是我在使用vue过程中，遇到的几个小问题和之前不了解的东西，记录下来，希望能够帮助各位踩坑。如果喜欢的话可以点波赞，或者关注一下，希望本文可以帮到大家。本文首发于我的个人blog：obkoro1.com本篇记录个人遇到的问题如下:路由变化页面数据不刷新问题setTimeout/setIntervalthis指向改变，无法用this访问VUe实例setInterval路由跳转继续运行并没有销毁vue滚动行为(浏览器回退记忆位置)用法vue路由拦截浏览器后退实现草稿保存类似需求v-once只渲染元素和组件一次，优化更新渲染性能vue框架风格指南推荐路由变化页面数据不刷新问题场景：比如文章详情数据，依赖路由的params参数获取的(ajax写在created生命周期里面)，因为路由懒加载的关系，退出页面再进入另一个文章页面并不会运行created组件生命周期，导致文章数据还是上一个文章的数据。解决方法：watch监听路由是否变化watch:{'$route'(to,from){//监听路
分享node-webkit开发的一个简单的todolist桌面应用
分享node-webkit开发的一个简单的todolist桌面应用一、简介日常生活工作中，总是有许多事情要完成，但是很容易遗忘。于是我习惯把要做的事情写在Mac自带的Note上。但是我发现一件事情总有待完成，完成和已完成三种状态，所以觉得Note并不好用。于是趁空余时间，自己用node-webkit开发了一个功能简单的类似于todolist的桌面应用。一方面可以当做demo给node-webkit初学者一些参考，另一方面如果你觉得这个应用有帮助的话也可以直接下载使用哦。二、效果图三、数据存储利用node-webkit提供的LocalStorage来存储数据四、如何使用git地址点这里下载该库后直接双击打开文件夹里面的TodoManager.app文件就可以像Mac中的其它应用程序一样使用了。五、结束项目功能比较基础，后续还会逐步完善。比如说添加文字编辑功能(文字颜色，放大缩小加粗斜体)，背景颜色切换等等。如果大家有什么改进的意见也可以提哈。
# quill-image-extend-module ：实现vue-quill-editor图片上传，复制粘贴，拖拽
quill-image-extend-modulevue-quill-editor的增强模块，功能：提供图片上传到服务器的功能复制插入拖拽插入显示上传进度显示上传成功或者失败支持与其他模块一起使用（例如调整图片大小）Installnpminstallquill-image-extend-module--save-devuseimport{quillEditor,Quill}from'vue-quill-editor'import{container,ImageExtend}from'quill-image-extend-module'Quill.register('modules/ImageExtend',ImageExtend)example<template><divclass="quill-wrap"><quill-editorv-model="content"ref="myQuillEdit
ejsExcel在Vue.js项目中的实际运用
什么是ejsExcel？ejsExcel是一款国人开发的、在Node.js应用程序中使用我们预先设置好的Excel模板导出Excel表格的模板引擎。Excel模板导出后Github地址ejsExcel如果因为众（ni）所（dong）周（de）知的原因打不开github，没有关系，它的语法很简单，都是一些对Excel模板格式的定义：这篇文章是我在工作中因为业务需要，用到了ejsExcel这个模板引擎，觉得很不错，但是坑也不少。而网上相关的资料又太少，所以趁此机会总结了一下我的踩坑经历。我是在Vue.js这个前端框架中用到的ejsExcel，由于我本人并不是专业做前端开发的，我会尽量的说清楚，如果有些地方写的不是太专业的话，还请见谅！第一步：安装ejsExcelnpminstallejsexcel安装完依赖包之后是放在xxx/node_modules/ejsexcel目录下的，核心文件是ejsExcel.js,所以如果想要使用该模板引擎，必须引入该文件：importExcelfrom'exceljs'踩坑一：安装完
深入理解vue中slot与slot-scope
写在前面vue中关于插槽的文档说明很短，语言又写的很凝练，再加上其和methods，data，computed等常用选项使用频率、使用先后上的差别，这就有可能造成初次接触插槽的开发者容易产生“算了吧，回头再学，反正已经可以写基础组件了”，于是就关闭了vue说明文档。实际上，插槽的概念很简单，下面通过分三部分来讲。这个部分也是按照vue说明文档的顺序来写的。进入三部分之前，先让还没接触过插槽的同学对什么是插槽有一个简单的概念：插槽，也就是slot，是组件的一块HTML模板，这块模板显示不显示、以及怎样显示由父组件来决定。实际上，一个slot最核心的两个问题这里就点出来了，是显示不显示和怎样显示。由于插槽是一块模板，所以，对于任何一个组件，从模板种类的角度来分，其实都可以分为非插槽模板和插槽模板两大类。非插槽模板指的是html模板，指的是‘div、span、ul、table’这些，非插槽模板的显示与隐藏以及怎样显示由插件自身控制；插槽模板是slot，它是一个空壳子，因为它显示与隐藏以及最后用什么样的html模板显示由父组件控制。但是插槽显示
WPF：简单的选择目录下的图片显示功能
加载目录下的图片并选择展示实现功能有：选择目录，加载图片选择图片，展示难点：WPF下选择目录，并加载到集合绑定到集合当前项主要思路及关键代码：一个数据模板类Photo，更简单的就利用库里的BitmapFrame类。publicclassPhoto{privatereadonlyUri_source;publicPhoto(stringpath){Source=path;_source=newUri(path);Image=BitmapFrame.Create(_source);//Metadata=newExifMetadata(_source);}publicstringSource{get;}publicBitmapFrameImage{get;
WPF：（5-4）ConcentricRingsDemo同心环动画
源项目地址：https://github.com/Microsoft/...以下是把示例转换为简要说明，同时给出实际运行效果及关键代码剖析：ConcentricRingsDemo同心环动画效果图如下：描述：在一个点附近中不断涌现出不同颜色的圆圈，圆圈不断变大后消散。只有简单的代码，那么具体思路如何实现呢？一种是利用帧数驱动（未设置）。另一种是利用动画循环，本例是使用动画代码设定随机生成源，在中心点、尺寸、透明度上进行动画循环。帧数驱动代码varframeTimer=newDispatcherTimer();frameTimer.Tick+=OnFrame;frameTimer.Interval=TimeSpan.FromSeconds(1.0/60.0);frameTimer.Start();_lastTick=Environment.TickCount;_rand=newRandom(GetHashCode());利用循环方法：CreateCircles();for循环中具体步骤如下：
一步一步创建ASP.NET MVC5程序[Repository+Autofac+Automapper+SqlSugar](九)
前言童鞋们，大家好我是专注.NET开发者社区建设的实践者Rector。首先，为自己间隔了两个星期五再更新本系列文章找个不充分的理由：Rector最近工作，家庭的各种事务所致，希望大家谅解。本文知识要点回到本文的主题，还是关于系列文章：《一步一步创建ASP.NETMVC5程序Repository+Autofac+Automapper+SqlSugar》，本文将为大家分享的主要内容有：响应式网站首页的布局与制作文章列表的展示文章详情页面前端布局与制作响应式网站首页的布局与制作在以本文之前的系列文章的页面中，我们的网站首页以及文章列表页面都没有应用样式，本文将给大家分享首页的制作，其中包含的内容有：头部导航文章列表Bootstrap响应式布局最终的首页效果图如下：CSS样式首先，在项目[TsBlog.Frontend]中创建资源文件夹命名为：resources，在其中创建一个css样式文件夹，并新建一个样式文件，命名为：site.css，此时的目录结构如下：样式代码如下：site.csshtml,
vue计算属性返回一个style对象的正确姿势 (vue学习实践之路)
学习实践vue的路上难免遇见一些小坑，自身水平不高，只是想记录下来，反馈给大家，仅此而已，但愿会帮助到人。计算属性在返回一个style对象的时候，先用一个变量求出值再拼接‘px’单位。1.建议这样做vary=this.now>70?70:this.nowreturn{top:y+"px"}2.不建议这样做return{top:this.now>70?70:this.now+"px"}按道理来说应该是一样的效果，在重复执行第二种方法的代码会发现下面的状况，偶然出现。我的styel属性top值已经变成了70，可是页面上dom元素top属性实际并没有70，在30px左右或更少，而第一种方法始终不会出现这种情况，因为拿到的top值始终是带上单位的。
利用K8S技术栈打造个人私有云（连载之：初章）
我的想法是什么最近在学习Docker技术，相信Docker技术大家都有所了解，Docker类似于虚拟机（但与虚拟机又有本质不同），提供进程级别的隔离。我们可以利用Docker来方便地来做很多事情，比如搭建一个翻墙VPN、搞一个爬虫、弄一个私人博客，部署一个裸机上比较难以安装的环境等等……可以说几乎没有什么目的办不到，这简直是宅男老铁们的福利啊！但话又说回来，单个Docker所能发挥的作用毕竟有限，也不便于批量管理，更满足不了各种量比较大的业务场景所需的高可用、弹性伸缩等特性，所以Docker得组集群来并赋予各种完善的调度机制才能发挥强大的技术优势。既然要组集群那就涉及诸如Docker的资源调度、管理等等一系列问题。Docker集群技术发展得很火热，目前涉及Docker集群的三个主要的技术无外乎DockerSwarm、Kubernetes、Mesos三种主流方案。DockerSwarm是Docker提供的原生集群技术，我只做过一些初步实践（DockerSwarm集群初探），发现还比较容易上手，大家也可以自行去深入学习一下，我就不多说了
vue引入新版 vue-awesome-swiper填坑
关于新版vue-awesome-swiper问题为什么我的vue-awesome-swiper组件pagination小圆点不显示问题?为什么我的swiper不会自动播放？为什么我的swiper没有css？使用引入（前面的步骤和往常一样）npminstallvue-awesome-swiper--save在main,js里引入（全局）:importVueAwesomeSwiperfrom'vue-awesome-swiper'Vue.use(VueAwesomeSwiper)import'swiper/dist/css/swiper.css'(css不显示的问题可能就在这)组件里引入：import'swiper/dist/css/swiper.css'//在全局没引入，这里记得要！import{swiper,swiperSlide}from'vue-awesome-swiper'exportdefault{components:{swiper,
ElementUI中tree控件踩坑记
vhr部门管理模块更新啦！为了让小伙伴们快速理解部门管理模块实现思路，我想通过3篇短文来给大家介绍下大致的实现思路和核心代码。项目地址：https://github.com/lenve/vhr1.SpringBoot+Vue前后端分离，使用SpringSecurity完美处理权限问题(一)2.SpringBoot+Vue前后端分离，使用SpringSecurity完美处理权限问题(二)3.SpringSecurity中密码加盐与SpringBoot中异常统一处理4.axios请求封装和异常统一处理5.权限管理模块中动态加载Vue组件6.SpringBoot+Vue前后端分离，使用SpringSecurity完美处理权限问题(六)7.vhr部门管理数据库设计与编程8.使用MyBatis轻松实现递归查询与存储过程调用本文主要想说说ElementUI中Tree控件。坑不深。一句话总结，就是很好很强大。但是ElementUI中树的加载可以通过load属性一个一个懒加载，在官方的案例中有这种用法
0001 手工构建第一个C#应用程序
前提工作：.NetFramework4.5以上的版本或安装了VS20151.手动编写与运行一个C#控制台程序添加Path环境变量："我的电脑-属性-高级系统设置-环境变量-系统变量-Path-编辑-新建"将C#编译器（csc.exe）所在的目录（C:WindowsMicrosoft.NETFramework64v4.0.30319,这是我机器上相应的目录）添加到系统环境变量Path中。这样的话csc.exe就全局可见了。如下图:测试C#的Path环境变量是否生效?打开命令行程序(cmd.exe)--win+r键输入cmd回车即可。然后输入csc-?回车,看是否有下图内容。如果没有的话，那就是上一步的环境变量没有配置成功。用你喜欢的文本编辑器编写如下文件(TestApp.cs)并保存到指定目录(我的是家目录下的ProCSharp目录):最后是编译与运行这个程序。打开命令行程序，进入上一步程序源文件所在的目录中执行csc/target:exeTestApp.cs来对其进行编译。这时在ProCSharp目录中会生成与
WPF：数据绑定总结（1）
一、概念：什么是数据绑定？WPF中的数据绑定：是在应用程序UI与业务逻辑之间建立连接的过程；扩展：为应用程序提供了一种表示数据和与数据交互的简单而又一致的方法。元素能够以公共语言运行时(CLR)对象和XML的形式绑定到各种数据源中的数据。数据绑定可能还意味着如果元素中数据的外部表现形式发生更改，则基础数据可以自动更新以反映更改。一种典型用法是将服务器或本地配置数据放置到窗体或其他UI控件中。在WPF中，元素的依赖项属性可以绑定到CLR对象（包括ADO.NET对象或与Web服务和Web属性相关联的对象）和XML数据XmlNode。二、具体概念定义：基础模型：如上图所示，数据绑定实质上是绑定目标与绑定源之间的桥梁。每个绑定的四个组件：绑定目标对象、目标属性（依赖项属性）、绑定源、绑定源值路径每个绑定的四个组件：绑定目标对象、目标属性（依赖项属性）、绑定源、绑定源值路径数据流的方向OneWay：绑定导致对源属性的更改会自动更新目标属性，但是对目标属性的更改不会传播回源属性。1.适用
JavaScript ES6 最值得掌握的5个特性
JavaScriptES6最值得掌握的5个特性技术文章来源：众成翻译发布：2018-01-24浏览：194摘要：JavaScriptES6添加了一系列新的语言特性，其中一些特性比其它更具有开创性以及更广的可用性。从在过去的12个月里所从事的不同JavaScript相关项目中，我发现有5个ES6特性是不可或缺的，因为它们真正简化了JavaScript普通任务的完成方式。你心中的前5名可能和我的不一样，如果是的话，我希望你能在结尾的评论区分享它们。本文由Mcbai在众成翻译平台翻译。JavaScriptES6添加了一系列新的语言特性，其中一些特性比其它更具有开创性以及更广的可用性。比如像ES6类这样的特性，虽然新奇，但其实仅仅是在JavaScript中创建类的已有方法之上的一种语法糖。而像生成器（generator）这样的功能，虽然非常强大，但却是为了针对性的任务所保留的。从在过去的12个月里所从事的不同JavaScript相关项目中，我发现有5个ES6特性是不可或缺的，因为它们真正简
自写 zTree搜索功能 -- 关键字查询 -- 递归无限层
自写zTree搜索功能--关键字查询--递归无限层唠叨一哈前两天朋友跟我说要一个ztree的搜索功能，我劈头就是一巴掌：这种方法难道无数前辈还做少了？自己去找，我很忙~然后我默默地蹲着写zTree的搜索方法去了。为什么呢？因为我说了句“找不到是不可能的啊，肯定有很多人早做了无数了，找不到我给你写还请你恰午饭”，然而我也去找了很久也没有找到（泪崩，我的计划，我的午饭~）。绝大多数都是用的API里面的getNodesByParamFuzzy()或者高亮之类的。然而朋友表示需求不符合：1.匹配失败父节点也隐藏；2.能自定义匹配规则，即能匹配name还能匹配属性......（反正就是我想要的不是辣个，小生脸上笑嘻嘻，心里.......那我给你写呗~），下面进入正文：思维导图一般搜索功能只是在“既定范围内（方便称呼）”匹配关键字，“既定范围”即我们已经知道搜索的范围：比如说一个文本库，一个下拉框，换而言之我们匹配的对象集大小已经确定了。然而这一点在ztree上不可行，为什么呢？在我考虑了一下ztree搜索功能实现逻辑的时候问了一句：