本文将帮助：将自己写的Vue组件打包到npm进行代码托管，以及正常发布之后如何使用自己的组件。本文讲述的仅仅是最基础的实现，其他复杂的操作需要非常熟悉webpack的相关知识，作者将继续学习。按照大佬文中写的一步步操作，够细心的话基本可以一步到位。下面总结一下发布步骤：1. 利用Vue的脚手架新建一个简易版的Vue项目my-project：vue init webpack-simple my-project -> cd my-project -> npm i -> npm run dev2. 编写组件：sr...
最近项目中做表格比较多，对element表格的使用，只需要传递进去数据，然后写死表头即可渲染。 但现实中应用中，如果写死表头，并且每个组件中写自己的表格，不仅浪费时间而且消耗性能。这个时候需要动态渲染表头。 而官方例子都是写死表头，那么为了满足项目需求，只能自己来研究一下。 1、自定义表头代码如下，其实就是分了两部分，表格主数据是在TableData对象中，表头的数据保存在headerDatas，headerDatas.label其实就是表头的...
偶尔还是会陷入到DOM操作上面去，其实你应该关心的是数据传递，而不是操作DOM。如果你是想获取data-num的数据，可以这样写： <span @click="getData($event,21)">55</span>getData:function (e,num) {console.log(num) }这样就可以取到这个值了，如果你是确实想操作DOM，那你可以这样写： <span data-num="21" ref="dataNum" @click="getData($event)">55</span>getData:function (e) {console.log(this.$refs.dataNum.dataset.num...
1. 将下载好的字体放到本地目录 分别是两种字体放到项目的 assets 目录中2. 引入字体文件 首先创建一个 styles 文件夹，之后也可以用于存放一些公共的样式文件。再新建一个 index.less 文件，引入字体。@font-face {font-family: Snickles;src: url(../assets/Snickles-webfont.ttf); } @font-face {font-family: Ronda;src: url(../assets/RondaITCbyBT-Roman.otf); }3. 在项目中（main.js）引入刚刚加载进来的字体4. 测试效果图：...
本文旨在给大家提供一种构建一个完整 UI 库脚手架的思路：包括如何快速并优雅地构建UI库的主页、如何托管主页、如何编写脚本提升自己的开发效率、如何生成 CHANGELOG 等 前言 主流的开源 UI 库代码结构主要分为三大部分： 组件库本身的代码：这部分代码会发布到 npm 上预览示例和查看文档的网站代码：类似 Vant、ElementUI 这类网站。配置文件和脚本文件：用于打包和发布等等编写此博文的灵感 UI 框架库（ vue-cards ）,PS:此 UI框...
定义一个banner.js文件，代码如下 ;window.requestAnimationFrame = window.requestAnimationFrame||function(a){return setTimeout(a,1000/60)}; window.cancelAnimationFrame = window.cancelAnimationFrame||clearTimeout; var FragmentBanner = function(option) {//实例化时，可传的参数this.whiteList = [container,controller,size,imgs,size,grid,index,fnTime,boxTime,type];//容器将包容控制器this.container = .banner;...
思路 实现该组件有两个思路，一个使用v-model进行双向绑定，一个是使用prop的.sync修饰符、父子组件通信。 1.v-model形式 v-model的实现需要在自定义组件中自定义一个inputvalue值，因为vue中的父子组件传递机制问题，在组件中直接修改props注入的key字段时，vue会给出错误。子组件中定义inputvalue字段，用于子组件中input元素的值的双向绑定，子组件中的input数据绑定可以使用v-model，也可以使用实现v-model的原理语法糖，下面两...
如果我们的Vue项目中没有用到任何UI框架的话，为了更好的用户体验，肯定会用到loading和toast。那么我们就自定义这两个组件吧。 1、Toast组件 首先，在common下新建global文件夹，存放我们的toast.vue和toast.js两个文件（当然文件的具体位置你可以自行安排）。 (1). toast.vue <template lang="html"><div v-if="isShowToast" class="toast-container" @touchmove.prevent><!-- 这里content为双花括号 --><span class="loading-tx...
v-module 双向绑定实际上就是通过子组件中的 $emit 方法派发 input 事件，父组件监听 input 事件中传递的 value 值，并存储在父组件 data 中；然后父组件再通过 prop 的形式传递给子组件 value 值，再子组件中绑定 input 的 value 属性即可。 我们着手实现一遍： 子组件传值 首先子组件需要一个 input 标签，这个 input 标签需要绑定 input 事件，$emit 触发父组件的 input 事件，通过这种方法子组件传递值给父组件 <input type="t...
小白我用的是vue-cli的全家桶,在标签中加入v-drap则实现元素拖拽， 全局指令我是写在main.js中 Vue.directive(drag, {inserted: function (el) {el.onmousedown=function(ev){var disX=ev.clientX-el.offsetLeft;var disY=ev.clientY-el.offsetTop;document.onmousemove=function(ev){var l=ev.clientX-disX;var t=ev.clientY-disY;el.style.left=l+px;el.style.top=t+px;};document.onmouseup=function(){document.onmousemove=nu...
前言在指令里获取的this并不是vue对象，vnode.context才是vue对象，一般来说，指令最好不要访问vue上的data，以追求解耦，但是可以通过指令传进来的值去访问method或ref之类的。 vue指令官方文档其实已经解释的蛮清楚了，这里挑几个重点的来讲。 1、arguments el: 当前的node对象，用于操作dom binding：模版解析之后的值 vNode: Vue 编译生成的虚拟节点,可以在上面获取vue对象 oldVnode: 使用当前指令上一次变化的node内容 2、 生...
先上效果图：（1） 看起来可能有点卡顿，但是实际上页面上看起来挺顺畅的。 （2） 思路就是获取每一个列表的宽度，设置定时器移动列表，当移动的距离达到一个列表的宽度的时候，把这个距离放到数组的最后。这样就能达成无缝循环滚动了。 大致的情况就是下面这样： 接下来就是代码的实现： index.vue 引入组件 <template><div><marqueeLeft :send-val=send></marqueeLeft ></div> </template> <script>import marqueeLeft from ....
Vue中内置了很多的指令，如v-model、v-show、v-html等，但是有时候这些指令并不能满足我们，或者说我们想为元素附加一些特别的功能，这时候，我们就需要用到vue中一个很强大的功能了—自定义指令。 在开始之前，我们需要明确一点，自定义指令解决的问题或者说使用场景是对普通 DOM 元素进行底层操作，所以我们不能盲目的胡乱的使用自定义指令。 如何声明自定义指令？ 就像vue中有全局组件和局部组件一样，他也分全局自定义指令和局...
一、什么是全局API？ 全局API并不在构造器里，而是先声明全局变量或者直接在Vue上定义一些新功能，Vue内置了一些全局API，比如我们今天要学习的指令Vue.directive。说的简单些就是，在构造器外部用Vue提供给我们的API函数来定义新的功能。 二、Vue.directive自定义指令 我们在第一季就学习了内部指令，我们也可以定义一些属于自己的指令，比如我们要定义一个v-jspang的指令，作用就是让文字变成绿色。 在自定义指令前我们写一个小功...
本文介绍了vue v-model进行数据绑定，分享给大家，具体如下 官方例子https://vuefe.cn/v2/api/#model 有这么一句话： 默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event。 示例： 先来一个组件，不用vue-model，正常父子通信<!-- parent --><template><p class="parent"><p>我是父亲, 对儿子说： {{sthGiveChild}}</p><Child @returnBack="turnBack" :give="sthGiveChild"></Child></p></template><sc...