本方法通过vue.js filter实现将unix时间戳转换为自定义标准时间格式<!-- js代码 --> $().ready(function() { <!-- 自定义filter名称为time -->Vue.filter(time,<!-- value 格式为13位unix时间戳 --><!-- 10位unix时间戳可通过value*1000转换为13位格式 -->function(value) {var date = new Date(value);Y = date.getFullYear(),m = date.getMonth() + 1,d = date.getDate(),H = date.getHours(),i = date.getMinutes(),s = date.ge...
vue-touch基于hammer，对于普通简单手势的页面来说过于庞大！于是想自己实现一个最常用的手势tap。顺着自定义指令和插件文档，昨晚实现了一个v-tap指令，丢出这篇干货。指令与插件介绍自定义指令和插件官方文档中也介绍比较简单详细，就不过多介绍。我先说下本插件就用了三个API，如果大家不了解最好先事先看下文档避免后面的代码看的迷糊。指令部分1.update(nVal,oVal)2.acceptStatement插件部分Vue.use()接着我们需要像写jQuery插...
过滤器，本质上就是一个函数。其作用在于用户输入数据后，它能够进行处理，并返回一个数据结果。Vue.js 与 AngularJS 中的过滤器语法有些相似，使用管道符（|）进行连接，代码示例如下：{{abc | uppercase}} abc => ABC这里使用了Vue.js 内置的过滤器 uppercase，将字符串中的字母全部转换成大写形式。Vue.js 支持在任何出现表达式的地方添加过滤器，除了上面例子中的 双大括号 表达式之外，还可以在绑定指令的表达式后调用，代...
前言众所周知，在使用vue做项目的时候，微信自定义分享一直是一个坑，只是ios上坑明显的多。然后每次遇到问题都要度娘很久。奇怪的是貌似和很多人遇到的问题一样，但是他们写的解决方案都没办法直接解决我遇到的问题。这里就记录一下遇到过的一些坑，和解决方式。目前项目里面，安卓和ios上面的自定义分享已经没有什么问题了。问题及解决方式hash模式在微信的官方文档中，提到关于jsapi_ticket的签名算法中，生成签名的时候，当前网...
增加一个自定义滚动条插件： //插件采用jsx语法，使用前需要安装vue-jsx插件 npm install babel-plugin-syntax-jsx --save-dev npm install babel-plugin-transform-vue-jsx --save-dev npm install babel-helper-vue-jsx-merge-props --save-dev npm install babel-preset-es2015 --save-dev //更改.babelrc文件 {"presets": [["es2015", { "modules": false }],["env", {"modules": false,"targets": {"browsers": ["> 1%", "las...
本文实例讲述了VUE 自定义组件模板的方法。分享给大家供大家参考，具体如下： 先说下需求吧，因为客户的用户群比较大，如果需求变动，频繁更新版本就需要重新开发和重新发布，影响用户的体验，考虑到这一层就想到，页面展示效果做动态可配，需求更新时，重新配置一份模板录入到数据库，然后根据用户选择的模板进行展示。 关于页面展示做的动态可配，我是参考vue的Component组件方式，开始时可能会遇到组件定义后不能加载的情况，并...
本文为大家分享了Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义，供大家参考，具体内容如下 1.安装 npm install vue-quill-editor --save2.在main.js中引入 import VueQuillEditor from vue-quill-editor import quill/dist/quill.core.css import quill/dist/quill.snow.css import quill/dist/quill.bubble.cssVue.use(VueQuillEditor);3. template<div><!-- 图片上传组件辅助--><el-uploadclass="avatar-upload...
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知 使用element-ui中的Notification，只有一个message属性是有很大的操作空间，其余的都是写死的，无法进行扩展，达不到想要的效果。所以只能在message上下功夫。 在element-ui官方文档中可以看到Notification中的message属性是可以处理VNode的所以我们可以使用VNode来达到我们需要的效果。 如何关闭通知呢？ 当创建通知的时候，会返回该通知的实例，通...
介绍form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器。并且支持生成任何 Vue 组件。结合内置17种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。 文档 | github 演示项目: 开源的高品质微信商城功能自定义组件可生成任何Vue组件自带数据验证轻松转换为表单组件通过 JSON 生成表单通过 Maker 生成表单强大的API，可快速操作表单双向数据绑定事件扩展局部更新数据验证栅格布局内置...
需求背景，工作中需要实现一个自定义打印模板的需求，能够实现单个及多个dom元素的同时拖拽，也能通过外部的input元素修改dom元素的样式。在npm和GitHub上找了各种已有的vue组件，不够灵活，效果都不是自己想要的 1.vue自定义指令 Vue.directive(dragx, (el, binding, vnode) => {// 默认参数let defaultOpts = {dragDirection: n, e, s, w, ne, se, sw, nw, all,dragContainerId: , //dragBarClass: , // 类选择器canDrag: true,c...
这次接到一个需求，要在浏览器的 IDE 中支持自定义提示功能，如下所示：可以看到，它可以根据用户输入的内容来一项一项排除，只显示完全匹配的那一项。 项目的框架是 Vue ，编辑器用的是 Monaco Editor 。 什么是 Monaco Editor vscode 是我们经常在用的编辑器，它的前身是微软的一个叫 Monaco Workbench 的项目，而 Monaco Editor 就是从这个项目中成长出来的一个 web 编辑器，他们很大一部分的代码都是共用的，所以 Monaco Edito...
前言 前段时间基于vue写了一个自定义的video播放器组件,踩了一些小坑, 这里做一下复盘分享出来,避免日后重复踩坑... 设计阶段 这里就直接放几张完成后的播放状态图吧,界面布局基本就是flex+vw适配一把梭,也比较容易.需要实现的几个功能基本都标注出来了; 除了还有一个视频加载失败的...下面就这届上代码了;刚开始构思的时候考虑了一下功能的实现方式: 一是用原生的DOM操作,获取video元素后,用addEventListener来监听; 二是用vue的方...
最近vue不是特别火，自己想写一个vue 的底部菜单栏，然后试着开始写，起来还是听痛苦的，但是还是写出来，这个过程重查询了一些资料和看了一些视频。1 写好界面这是我写好的四个界面2 在router.js重定义路由在一级路由下面定义自己tabbr的子路由。 routes: [{path: /,name: index,component:()=>import(./views/index), //懒加载引入，路由children:[{path:,redirect:/charts},//重定项{path:/charts,name:charts,component:()=>im...
本文实例为大家分享了vue swipe自定义组件实现轮播效果的具体代码，供大家参考，具体内容如下 <template><layout-div :style="getStyle" class="over-h posi-r"><layout-div :style="getChildStyle" class="flex" @load="loadHandle"><slot/></layout-div><layout-div class="flex-center flex posi-a b0 l0 r0" :height="40" :unit="unit" v-if="!$slots.point"><layout-div class="flex"><layout-div v-for="i in this.length" :...
之前写了一篇周和月日历，但感觉体验不是太好，所以有重新做了一遍，加上了动画。还可以自定义显示日历里的内容。 现在贴出项目源码,我现在是放在CSDN里的下载资源,这里哦 现在我上传带了GitHub上了,可以去这里下载哦,如果觉得好的话希望能给个star,谢谢支持 1.总共分为两个组件（父组件calendar.vue） <template><div class="calendar-box"><ul class="calendar-head"><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><l...