vue 实现(抄袭)一个简单的栅格组件 参考iview， ant-design 的栅格组件，发现两者的基础思路是一致的。 这里通过实现一个简化版的栅格组件做总结....目标 实现24格栅格布局，包括组件 Row(行), Col(列) 组件可嵌套, 容器大小自适应 响应式布局 基本原理 栅格组件，可以看成对横向宽度的分割。...width: 50%; height: 100px; } .left{ background: blue; } .right{ background: orange; } 实现栅格组件的基本思路与二等分基本一致...，既是根据 Col组件不同的 span 值，动态的切换对应的等分样式, 所以重点在css配置及如何切换 实现 这里基础布局会借用flex, css使用less编写，组件样式使用前缀做区分。...一种实现是通过js计算单个组件所占的比例，设置到容器行内样式上。
哈喽,我是老鱼，一名致力于在技术道路上的终身学习者、实践者、分享者！...Vue Grid Layout是一个类似于Gridster的栅格布局系统, 适用于Vue.js，灵感来源于React Grid Layout。...特性 可拖拽 可调整大小 静态部件（不可拖拽、调整大小） 拖拽和调整大小时进行边界检查 增减部件时避免重建栅格 可序列化和还原的布局 自动化 RTL 支持 响应式 安装 Npm npm i vue-grid-layout...Yarn yarn add vue-grid-layout 浏览器 使用 引入 import...VueGridLayout from 'vue-grid-layout'; 加入到组件中 export default { components: { GridLayout
前言 在日常工作中弹窗组件是很常用的组件，但用得多还是别人的，空闲时间就自己来简单实现一个弹窗组件 涉及知识点：extend、$mount、$el 使用方式： this....index.vue：组件布局、样式、交互逻辑 index.js：挂载组件、暴露方法 知识点 在此之前，了解下涉及的知识点 1. extend ?...使用这个api，可以将引入的vue组件变成vue构造函数，实例化后方便进行扩展 2. $mount ? 我们希望弹窗组件是在使用时才显示出来，那么就需要动态的向body中添加元素。...使用$mount方法可以手动挂载一个vue实例，和 extend 刚好搭配使用，这个也是弹窗组件命令式的关键。 3. $el ?...既然要添加dom元素，通过实例的$el属性，正好可以取到dom元素，之后就是使用原生方法进行添加节点啦~ 代码实现 index.vue
一个弹窗组件通常包含两个部分，分别是遮罩层和内容层。 遮罩层是背景层，一般是半透明或不透明的黑色。 内容层是放我们要展示的内容的容器。...另外还有两个方法，分别是点击取消和确认的回调函数，它们的作用是触发对应的事件。 到这里，一个简单的弹窗组件已经完成了（样式后面再说）。 如何调用 一个组件写完了，要怎么调用呢？...假设这个组件的文件名为 Modal.vue，我们在父组件里这样调用 （假设父组件和弹窗组件在同一文件夹下）。...一个简单的弹窗组件就这样完成了。 改进 样式 现在市面上的 UI 库特别多，所以一些通用的组件样式不建议自己写，直接用现成的就好。在这个组件上，我们可以使用 element-ui，改造后变成这样。...看起来只有两个按钮变化了，不过没关系，后面的内容部分肯定还有用得上的时候。 功能 看起来这个简单的弹窗组件真的是非常简单，我们可以在此基础上适当的增加一些功能，例如：拖拽。
最近新项目遇到一个需求，在输入错误的时候，使用toast弹窗提示，在此之前，我使用的弹窗都是只写在单个页面上，需要的时候写一个，虽然也可以，但是对这个项目来说就太过麻烦了，于是想要写一个toast弹窗组件...参考了从零开始徒手撸一个vue的toast弹窗组件这篇博文，我写了一个自己的弹窗组件。.../toast.vue' // 返回一个扩展实力构造器 const ToastConstructor = vue.extend(toastComponent) // 定义弹出组件的函数 两个参数 显示文本和显示时间...setTimeout(() => { toastDom.showWrap = false; }, showtime) } // 注册为全局组件的函数 // 将组件注册到 vue 的 原型链里去,...$toast = showToast } export default registryToast 这时候已经完成了一个可以全局注册和动态加载的toast组件 之后在入口文件main.js中注册组件
Vue组件基础–简单了解vue组件 Vue组件是什么？...组件就像是提前做好的模具，使用时拿出来就行，可以重复调用，它跟普通的Vue有一样的属性： data （数据存放） computed（计算属性） watch（监听属性） methods（方法存放）...组件的data必须是一个函数，这样多个组件才不会相互影响。...: '这是第三个' } ], size:14 } }) 组件中v-model的实现 当input事件触发时,通过$emit对数据进行抛出 <!...({ el:"#app", data:{ myText:'' } }) 动态组件 通过:is实现tab切换效果 <button v-for="item in
，通过几步简单配置就实现分享共享功能啦。...组件的思想，现在封装成一个组件，方便将来在其他项目中使用。...如果是vue-cli，新建一个Share.vue，内容如下很简单。...template为空，因为可能是自定义需要外部传入，组件必须带一个config属性，是配置项对象，我把config挂到了window下，这样可能有风险。但是目前找不到更好的办法。...template内，注意 inline-template，这样会把组件将把它的内容当作它的模板，这部分需要自定义不能写死在share组件内。
前言 技术需要积累，有时间我把我之前写的还不错的组件都开源出来。并尝试vue和react 两种方式的组件封装。今天简单写下鼠标框选div选中效果的封装吧。...div框选实现 div框选效果，其实没有什么好的方法，就是获取鼠标事件，根据鼠标的位置，动态创建一个跟随鼠标的div。...其实总结起来就两步： 鼠标左键按下不放，移动鼠标出现矩形选框； 鼠标左键松开，根据上边出现的矩形选框统计选框范围内的DOM元素； 创建一个跟随鼠标的div，代码如下： // 创建选框节点...代码发布到npm 这个组件，包括我之前写的vue移动端下拉加载下一页数据的组件,都发布到了npm， npm地址：https://www.npmjs.com/package/timedivselect 使用...顺便说说npm发布遇到的一个小问题吧 之前我npm也发布过一些，关于如何发布npm包，我博客之前虽然没有写，但是网上很多。
用VUE实现的一个分页。...var myMsgTable = new Vue({ el: '#myMsgTable', data: { list: [],
Vue组件基础–简单了解vue组件 Vue组件是什么？...组件就像是提前做好的模具，使用时拿出来就行，可以重复调用，它跟普通的Vue有一样的属性： 1、data （数据存放） 2、computed（计算属性） 3、watch（监听属性） 4、methods...组件的data必须是一个函数，这样多个组件才不会相互影响。...: '这是第三个' } ], size:14 } }) 组件中v-model的实现 当input事件触发时,通过$emit对数据进行抛出 <!...({ el:"#app", data:{ myText:'' } }) 动态组件 通过:is实现tab切换效果 <button v-for="item in
前言 分页组件，无非就是上一页，下一页，到具体页面。没有那么复杂。 ? 想要快速开始的，请向下看。...如果想理解源码的，可以直接跳过“快速开始”， 到“源码解读” 快速开始 安装 npm install vue-c-page -S 引入 import CPage from 'vue-h5-page' Vue.use...this.pageOption.pageNo = parseInt(pageNo); console.log('当前是第' + pageNo + '页'); // do something } github地址： vue-c-page...npm地址： vue-c-page 源码解读 结构部分，判断总页数小于等于6时，把所有页码全部展示，大于6的用更复杂的逻辑。...是写在父页面的一个方法。
使用vue实现一个电子签名组件 在生活中我们使用到电子签名最多的地方可能就是银行了，每次都会让你留下大名。...今天我们就要用vue实现一个电子签名的面板 想要绘制图形，第一步想到的就是使用canvas标签，在之前的文章里我们使用canvas实现了一个前端生成图形验证码的组件，被吐槽不够安全，那么这个电子签名组件想必不会被吐槽了吧...： beginPath() ：开始一条路径或重置当前的路径 moveTo()：把路径移动到画布中的指定点，不创建线条 lineTo()：添加一个新点，然后在画布中创建从该点到最后指定点的线条 stroke...()：绘制已定义的路径 closePath()：创建从当前点回到起始点的路径 事件 想要在canvas中绘图，还需要绑定几个特定的事件，而这些事件在pc端和手机端不尽相同 pc端事件 mousedown...剩余的高，this.
按钮，一个button，一个div,一个a标签，都可以做成按钮。现在要把它做成一个前端组件，那前端组件是什么？ 定义很多，我随便网上查一个，“指一些设计为通用性的，用来构建较大型的web应用的”。...5、update，数据更新 6、destroy [dɪˈstrɔɪ]，解除所有事件监听，删除所有组件节点 前端的完整的生命周期，我们自己手动现实现很困难，也没必要。...但为了学习前端组件的开发，我们可以把组件的生命周期“简单粗暴”化的理解，就是“在不同阶段执行的js方法”。 怎么样，这个理解够简单粗暴吧。但它的好处在于，我们可以手动实现了。...然后用我最喜欢的工厂模式：“构造器 + prototype”，来进行js的填空游戏。就这样的， ? 把那些方法分别挂在prototype上，这样，就实现了一个简单粗暴的前端组件。...//////// 不管怎么样，从结构上它至少是有一些通用性的，不是么？刚开始的时候，不要追求精致与宏大。先实现一个小目标，写一个东西出来再说。
不喜就喷哈~ 参数 分页需要的字段：当前页(curPage)，每页大小(pageSize)，总页数(total) 作为一个组件，所以以上这些参数最好是从父组件传递过来，可以如下定义： ... props...black; font-weight: bold; text-decoration: none; } .pager a:hover{ color: green; } 好了，以上就是组件的全部代码...嘿嘿 分页组件的调用 template ... <Pager v-if="!... 其中dataChanged用来刷新<em>组件</em><em>的</em>，参考：<em>vue</em>强制刷新<em>组件</em> 其中setPage和setRowNum分别对应父<em>组件</em><em>的</em>方法：gotoPage，changeRowNum，参考：...<em>vue</em>2.0父子<em>组件</em>以及非父子<em>组件</em>如何通信 script import Pager from '@/components/Pager' ... export default{ ...
vue的使用相信大家都很熟练了，使用起来简单。但是大部分人不知道其内部的原理是怎么样的，今天我们就来一起实现一个简单的vue。...Object.defineProperty() 实现之前我们得先看一下Object.defineProperty的实现，因为vue主要是通过数据劫持来实现的，通过get、set来完成数据的读取和更新。...只需要把当前需要订阅的数据push到watcherTask里面，然后到时候在设置值的时候就可以批量更新了，实现双向数据绑定，也就是下面的操作 that.watcherTask[key].forEach(...task => { task.update() }) 然后push的值是一个Watcher的实例，首先他new的时候会先执行一次，执行的操作就是去把纯双花括号 -> 1，也就是说把我们写好的模板数据更新到模板视图上...完整代码 地址：https://github.com/wclimb/MyVue 参考 1、剖析Vue原理&实现双向绑定MVVM 2、仿Vue实现极简双向绑定 来源：wclimb 链接：https:/
一、Map Map是OpenLayers的核心组件。要渲染地图需要一个View，一个或多个layers以及一个目标容器target。...二、定义Overlay Overlay是要在地图上显示并附加到单个地图位置的元素。像一样module:ol/control/Control~Control，叠加层是可见的小部件。...与“控件”不同，它们不在屏幕上的固定位置，而是绑定到地理坐标，因此平移地图将移动“叠加层”，但不会移动“控件”。...overlay.setPosition(e.coordinate); map.addOverlay(overlay); }); 四、关闭弹窗 将Overlay绑定的地理坐标置为...undefined，popupCloser Dom元素失去焦点，从而达到关闭弹窗的效果。
封装组件的v-model 再看组件的时候，不如elementui等等，我们时常看到它们的组件都是直接通过v-model双向绑定的，而不是通过我们常用的属性(prop)传递过去,子组件修改通过$emit,...或者通过vuex等等来返回父组件，这样的方法也不是说不行，但是总感觉没有elementui那样的写法高级。...所以我们也来简单的封装一个看起来高级一点点的组件。...简单的借用elementui的组件做一个二开 <div v-if="imageUrl" class="upload-success...transform: rotate(-45deg); } } .el-icon-delete { font-size: 20px; color: #fff; cursor: pointer; } } 这样使用<em>的</em>时候就可以直接引入<em>组件</em>使用了
整篇分两个部分： 思路部分：讲解怎么实现分页器组件【大把时间看-建议】 后面部分：按照步骤，直接引入组件【没有时间看-建议】 思路：基于连续页码进行判断 需要添加分页器的组件（Search组件）中...【当前页码pageNo】、【每页展示的数据pageSize】、【总的数据total】、【连续的页码（重要）】，定义一个【自定义事件getPageNo】把用户点击的【当前页码pageNo】传递回来，并进行数据请求...注意：一般使用分页器组件的地方有很多，所以我把他注册为了全局组件 在vue脚手架的main.js中配置 2、挂载组件 挂载并传参 【当前页码pageNo】、【每页展示的数据pageSize...5，但是你的总页数一定是大于5的】 parseInt()返回一个十进制的整数【一个数字的参数可同Math.floor】 start = pageNo - parseInt(continues...框架的分页器 ： django数据库版分页实现_打不着的大喇叭的博客-CSDN博客_django 分页 数据库
Toast 是Android中常见的轻量级提示\ 本文将介绍如何使用Compose技术实现一个Toast组件 不是一个简单的toast 优雅-简洁-动画 才是我的风格 \ 系统原生的Toast默认是在底部弹出...，配合kotlin语音的特性，简单封装一下，使用方法非常简洁 inline fun Context.toast(text: CharSequence) = Toast.makeText(this..., text, Toast.LENGTH\_SHORT).show() 在github上看到一个很棒的实现方式，现在要丢弃原生的Toast\ 使用Compose组件来实现一个 **优雅-简洁-动画**...的 Toast 分享一个 我用Compose写了个笔记App，代码开源~里面用到了这个超级好看的Toast 使用方法 val toastState = remember { ToastUIState()...>//动画时长 } 直接用 material3 提供的图标 ，当然可以用drawable，为了简洁而且 material3 提供的图标基本满足大部分场景的使用 图片 接口的实现 ToastData接口的实现
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
