在公司的项目开发中,涉及到了移动端H5页面的时间轴展示效果。现有的轮子比如ElementUI、iView中,都没有专门的时间轴组件,于是就萌生了自己封装一个的想法。...实现思路 开发一个vue组件,首先要确定好三要素props、slot和event。因为第一版功能比较简单,所以只使用了props。...下一步就是如何实现时间轴的效果,在这里我想到的一个简单的思路是使用div的左边框。 其实大家看到的每条时间轴的竖线,都是一个box的左边框。...将其相对定位一下,将包含icon和标题的p绝对定位在竖线顶端,就实现了时间轴的效果。...至此,时间轴的组件基本上就开发完了。 还可以根据自己的需求,添加标题行内容溢出显示省略号等各种效果。
文件缓存型时间轴归档,后台更新缓存或者发布新文章的时候会自动更新;本站这个代码是使用缓存系统的,是需要修改内核文件的。慎用!
插件通常用来为Vue添加全局功能,插件功能范围没有严格的限制---一般有如下几种 1、添加全局方法或者property 2、添加全局资源:指令、过滤器、过渡等 3、通过全局混入来添加一些组件选项。...4、添加Vue实例方法,通过把他们添加到Vue.prototype上实现 5、一个库,提供自己的API , 同时提供上面提到的一个或多个功能 使用插件 通过全局方法Vue.use()使用插件,它需要你调用...会自动阻止多次注册相同的插件,届时即使多次调用也只会注册一次该插件。...开发插件 Vue.js的插件应该暴露一个install 方法,这个方法的第一个参数是Vue构造器,第二个参数是一个可选的选项对象 MyPlugin.install = function (Vue, options...$myMethod([1,2,3])) // 全局方法 1-2-3 }, 总结: 在插件中注册的全局属性和方法在任何vue页面中都可以使用; 如果在插件中注册全局组件可以通过this.
Vue.js插件介绍 这里,官网给出了很全面的介绍以及代码框架。 插件通常会为 Vue 添加全局功能。...插件的范围没有限制——一般有下面几种: 添加全局方法或者属性,如: vue-custom-element 添加全局资源:指令/过滤器/过渡等,如 vue-touch 通过全局 mixin 方法添加一些组件选项...$myMethod = function (methodOptions) { // 逻辑... } } 官网给出了4种编写插件的方式。接下来,我们来尝试编写插件。 编写插件 1....假如我们有一个focus插件,它获取某个元素的焦点,则可以通过以下方式实现: //focus.js export default { install(Vue, options) { Vue.directive...当然,正如官网所述的那样,每种方式并非独立的,需要根据自己的需求,选择一种或多种方式编写插件。
二、安装插件 npm install vue-baberrage -D 官方链接:https://blog.chenhaotaishuaile.com/vue-baberrage/ 中文文档:https...://github.com/superhos/vue-baberrage/blob/master/docs/zh/README.md 三、演示效果 test.vue ... <vue-baberrage :isShow="barrageIsShow" :barrageList="barrageList" :maxWordCount...> import Vue from 'vue'; import { vueBaberrage, MESSAGE_TYPE } from... 'vue-baberrage'; Vue.use(vueBaberrage); export default { name: 'Barrages', data() {
1.安装 better-scroll 托管在 Npm 上,执行如下命令安装: npm install better-scroll --save; 2.引入 i...
结合Vue实现横向排列表单项 前言 默认的,ElementUI的Form表单项(控件)是垂直排列,即一行显示一个表单项。但是在实际应用中,有时候会需要一行显示多个表单项。...important; 因为默认的,表单项为块元素,这样设置以后,可以让表单项变成内联元素,这样表单项就可以横向排列在一起了 .el-form-item { display: inline-block
相对组件来说,Vue 的插件开发受到的关注要少一点。但是插件的功能是十分强大的,能够完成许多 Vue 框架本身不具备的功能。...大家一般习惯直接调用现成的插件,比如官方推荐的 vue-router、vue-touch 等。 下面就看一下 Vue 的插件开发如何入门。...首先我们简单回顾一下 Vue.js 官方文档中对于插件开发的描述。...Vue 的插件必须提供一个公开方法 install,该方法会在你使用该插件,也就是 Vue.use(yourPlugin) 时被调用,相当于是一个插件的注册或者声明。...第二种实际上是插件本身帮你完成了 Vue.use()的调用。 这种情况下,插件会去检测是否存在 Vue 全局变量,如果存在,就自动调用 Vue.use()。
背景: 最近需要加个统计日志功能,想着能把当前版本和上一版本列出来做比较,所以想到了找个对比插件,期间试过自己通过js实现,但很费事效果不理想,之后找了 https://github.com/ddchef.../vue-code-diff 这个感觉也不是很合适。...首先安装插件:codemirror、diff-match-patch HTML部分: JS部分: import CodeMirror from 'codemirror
众所周知,在 Vue 开发中,实现一个功能可以有很多种方式可以选择,这依赖于 Vue 强大的功能(指令、混合、过滤、插件等),本文介绍一下插件的开发使用。...Vue 插件 插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种: 添加全局方法或者 property。...如 vue-router 添加 Vue 实例方法,通过把它们添加到 Vue.prototype 上实现。 一个库,提供自己的 API,同时提供上面提到的一个或多个功能。...如 vue-router 使用插件 vue引入的插件,如 element , 都需要提供 install 方法,因为 Vue.use() 方法会调用插件里的 install 方法 import Vue.../libs/customFn"; Vue.use(customFn) 开发插件范式 来源 Vue.js 的插件应该暴露一个 install 方法。
一、插件的安装 : npm install vue-drag-verify --save 二、安装字体图标 font-awesome npm install font-awesome --save...:success-icon="successIcon" ref="Verify" > import dragVerify from 'vue-drag-verify
使用方法: 1.安装插件 npm install vue-video-player -S 2.配置插件 在main.js里 import VideoPlayer from 'vue-video-player...' require('video.js/dist/video-js.css') require('vue-video-player/src/custom-theme.css') Vue.use(VideoPlayer...) 3.使用插件 在vue的组件页面里 <video-player class="video-player vjs-custom-skin"...调用视频播放插件:https://blog.csdn.net/believeXin/article/details/79269718 2.vue-video-player插件官方例子:https:/.../github.com/surmon-china/vue-video-player/blob/master/examples/01-video.vue 3.vue使用vue-video-player在直播中的应用
如何使用vue实现一个掘金插件基础功能 正文开始... manifest.json 这是一个插件基础配置,插件配置必要的一个配置 { "manifest_version": 3, "version...,他是有用到vue-router,根据不同路由显示不同的内容,不过我们这里并不打算用这个路由插件 我们在根目录下新建一个index.html,然后引入vue3,但是此时会报错 vue.global.min.js...查询资料所得,原来manifest_version: 3已经禁用了evel与new Function,所以只能弃用vue3,看掘金插件源码里有用到vue的组合式API源码里也有new Function,...这个版本不准备用工程化方式去构建,我准备用最原始的方式去模仿写个插件,而且也会vue版本,不过此时vue的版本是csp版本 默认打开首页 当我们安装插件时,此时导航栏默认变成掘金的了,那这个是怎么实现的呢...总结 我们自己尝试写一个chrome掘金插件,明白插件如何修改默认导航页的 知道如何换肤主题,主要利用css变量 如何EazyMock在线模拟接口数据 原始方式利用vue构建应用 本文示例源码 code
前言 我当时学习开发 Chrome 插件的时候,还不会 Vue,更别说 Webpack 了,所以使用的都是原生的 html 开发,效率就不提了,而这次就准备使用 vue-cli 来进行编写一个某...B 站获取视频信息,评论的功能(原本是打算做自动回复的),顺便巩固下 chrome 开发(快一年没碰脚本类相关技术了),顺便写套模板供自己后续编写 Chrome 插件做铺垫。...相关模板 vitesse-webext plasmo 整体体验 当时写 Chrome 插件的效率不能说慢,反正不快就是了,像一些 tips,都得自行封装。...用过 Vue 的都知道写网页很方便,写 Chrome 插件未尝不是编写一个网页,当时的我在接触了 Vue 后就萌发了使用 vue 来编写 Chrome 的想法,当然肯定不止我一个这么想过,所以我在 github...如果有涉及到爬取数据相关的,我肯定是首选使用 HTTP 协议,如果在搞不定我会选择使用 puppeteerjs,不过 Chrome 插件主要还是增强页面功能的,可以实现原本页面不具备的功能。
工欲善其事,必先利其器 以下就是开发Vue必备插件: Vetur —— 语法高亮、智能感知、Emmet等 包含格式化功能, Alt+Shift+F (格式化全文),Ctrl+K Ctrl+F(格式化选中代码...Tag —— 自动完成另一侧标签的同步修改 JavaScript(ES6) code snippets —— ES6语法智能提示以及快速输入,除js外还支持.ts,.jsx,.tsx,.html,.vue...image.png HTML CSS Support —— 让 html 标签上写class 智能提示当前项目所支持的样式 image.png Beautify——格式化代码,值得注意的是,beautify插件支持自定义格式化代码规则
highcharts> bar类型 // #ifdef H5 import {Chart} from 'highcharts-vue..."> // #ifdef H5 import {Chart} from 'highcharts-vue
插件描述:vue文件上传插件,可配置 更新时间:2020-12-23 10:17:13 1、本插件基于vue+element,使用前请先使用npm install安装相关依赖 2、运行项目 npm run...serve 3、打包项目 npm run build 4、dist文件夹内为打包后的文件 5、src内components组件为组件的源码 6、因为是本地项目,因此不支持预览,但可在本插件基础上进行修改...7、element主要利用样式和相关便利组件,可自行修改 8、上传相同文件不会对数据产生变化 9、src内views内的index.vue已经引入组件,并有相关设置{ fileType: “file...为所有文件 isMultiple: true, //是否可以多选 isClear: false, //每次上传是否需要清空已选择的文件 fileData: [], //每次选择文件后会更新该数据 } 10、本插件支持
目录 使用位置 创建一个插件文件 使用插件 输出 作用 总结 使用位置 我们定义完成插件之后,这个插件就是一个js文件,里面的东西就是一个对象,之后需要在main.js里面引入,因为插件需要在vue对象创建之前进行使用...创建一个插件文件 使用插件 输出 输出的是vue的构造函数 作用 总结 以后网上下载的插件,直接在我们的项目里面引入就可以使用
最近自己在自学vue2.0,然后就自己摸索做一个简单的后台管理系统,在做的过程中,总感觉不同浏览器自带的滚动条样式不统一,也很难看,所以就在网上找一些使用vue的滚动条插件。...最开始用的是Easy-scroll插件,可是在使用过程中,发现一个问题——由于在开发过程中,需要经常打开开发者选项进行调试,可是只要一开启这个选项,Easy-scroll插件就会出现debugger断点...后来就找到了今天要说的这款插件:vue-happy-scroll。...先张贴一张效果图: 1.jpg 说明:这里会出现横向滚动条,是因为默认是开启横向滚动条的,并且内容区域高度超出了外层盒子的宽度 下面介绍使用方法: 1、安装vue-happy-scroll 推荐使用npm...(当然如果当内部盒子宽度超出外层盒子,就会出现横向滚动条了),效果图如下: 2.jpg 4、常用属性说明 该插件可以配置常用的滚动条颜色、粗细、竖向滚动条是左还是右边显示、横向滚动条是上还是下边显示、滚动条是否开启监听容器大小变化等属性
之前在工作中有需要用到图片预览的地方,当初没有找到合适的图片插件,于是就自己写了一个,并发布到了github,没想到的是竟然一直有人使用,不知不觉的小星星也达到了一百多个,每天文档也还有人访问,于是抽时间给兼容了...vue3一下,特来记录一下,由于业务部分的代码和vue3兼容,所以主要记录一下关于vue2和vue3插件部分的区别 首先附上插件的地址 github: https://github.com/heyongsheng...(_vue); imgApp = _vue.extend(VueToast) _vue.prototype....$hevueImgPreview = ImgPreview; } }; 在vue3中,同一插件将不能重复注册 官方的原话是这样的 Vue.use 会自动阻止多次注册相同插件,届时即使多次调用也只会注册一次该插件...,另外此插件也会持续更新,欢迎有需要的朋友自取
领取专属 10元无门槛券
手把手带您无忧上云