在公司的项目开发中，涉及到了移动端H5页面的时间轴展示效果。现有的轮子比如ElementUI、iView中，都没有专门的时间轴组件，于是就萌生了自己封装一个的想法。...实现思路 开发一个vue组件，首先要确定好三要素props、slot和event。因为第一版功能比较简单，所以只使用了props。...下一步就是如何实现时间轴的效果，在这里我想到的一个简单的思路是使用div的左边框。 其实大家看到的每条时间轴的竖线，都是一个box的左边框。...将其相对定位一下，将包含icon和标题的p绝对定位在竖线顶端，就实现了时间轴的效果。...至此，时间轴的组件基本上就开发完了。 还可以根据自己的需求，添加标题行内容溢出显示省略号等各种效果。
文件缓存型时间轴归档，后台更新缓存或者发布新文章的时候会自动更新；本站这个代码是使用缓存系统的，是需要修改内核文件的。慎用！
Vue.js插件介绍 这里，官网给出了很全面的介绍以及代码框架。 插件通常会为 Vue 添加全局功能。...插件的范围没有限制——一般有下面几种： 添加全局方法或者属性，如: vue-custom-element 添加全局资源：指令/过滤器/过渡等，如 vue-touch 通过全局 mixin 方法添加一些组件选项...$myMethod = function (methodOptions) { // 逻辑... } } 官网给出了4种编写插件的方式。接下来，我们来尝试编写插件。 编写插件 1....假如我们有一个focus插件，它获取某个元素的焦点，则可以通过以下方式实现： //focus.js export default { install(Vue, options) { Vue.directive...当然，正如官网所述的那样，每种方式并非独立的，需要根据自己的需求，选择一种或多种方式编写插件。
插件通常用来为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.
二、安装插件 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元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
