vue - 自定义吸附窗口
摘要：业务需求 以共享单车界面为例，地图上分布着大量的共享单车，鼠标悬浮在单车上，弹出一个吸附弹窗，内容显示单车详细信息。 分析 很明显，因为单车的数量可能非常多，我们不可能用显示隐藏的方式实现； 合理的做法是，所有单车公用一个弹窗面板，悬浮的时候刷新面板上的数据。 方案 看着改吧，element-ui里
阅读全文
posted @ 2024-10-24 15:19
随笔分类 - vue
vue - 选项卡右击下拉框
摘要：在 element-ui 环境下，给选项卡添加右击事件，是相当麻烦的一件事情， 主要是麻烦，很多东西都需要注意，并没有太多难点。 注意项 el-tabs 的右击事件 事件的名称是 contextmenu.prevent.native，这个很快就能找到，需要注意的是： 选项卡整个头部都能触发右击事件，
阅读全文
posted @ 2024-10-24 15:18
vue - 菜单栏联动选项卡
摘要：在 vue 环境下，制作一个与菜单联动的选项卡（el-tabs）。 能看到这个文章，大体是有自己动手的打算了，这里给一下关键思路。 关键点 路由的设计 传统的选项卡设计，一般通过 iframe 实现，在 vue 环境中，则是使用 router-view。 问题是，一个界面上，同时存在多个 route
阅读全文
posted @ 2024-10-24 15:06
vue - 浏览器不兼容finally语法
摘要：最近项目框架换成了vue，http 请求库使用 axios，Promise 对象有一个 finally 方法， 但是在低版本浏览器不支持（包括谷歌浏览器）。 先安装 promise.prototype.finally 包 npm i promise.prototype.finally 在 main.
阅读全文
posted @ 2024-06-14 17:30
vue - 获取对象类型
摘要：相比于传统的 jquery，vue 更加关注对象的类型，那么我们该如何判断一个对象的类型呢？ 为了更高的健壮性，推荐 typeof 和 isPrototypeOf() 同时使用，确保任何情况下都不会出现问题。 /** * 判断是不是字数字 * * @param obj {*} 需要判断的值 * @r
阅读全文
posted @ 2022-07-05 15:45
vue - fragment
摘要：注：在 vue3 中，已经直接引入了 fragment。 业务场景如下： <div class=""> <fragment v-for="(item in list)"> <span v-if="item.a=1">男</span> <span v-if="item.a=0">女</span> </
阅读全文
posted @ 2022-06-16 10:31
vue - AsyncValidator汉化
摘要：业务需求 使用 el-form 校验表单数据的时候，需要写一个校验规则，格式如下： rules: [{min: 3, max: 5, type: 'string', message: '长度大于3小于5'}] 很明显，3、5 这两个数字出现 2 次，存在配置冗余，讲道理 message 可以省略，
阅读全文
posted @ 2021-12-22 11:59
vue - 父子组件传参
摘要：子组件向父组件传参 业务场景 设计一个年龄输入框，我们使用 v-model 绑定年龄字段，显然，年龄输入可能无效，不可能超过 200，因此还有个校验位，校验位如何回传给父组件？ 首先排除 ref 方案 就和 html 一样，不到万不得已你不会使用 id，因此也不考虑 ref 的使用。 解决方式 因为
阅读全文
posted @ 2021-12-21 16:34
vue - 自定义组件实现v-model
摘要：业务场景： 对于一个输入框，要实现双向绑定，要用 v-model， 如果想要自己封装一个输入框，该如何实现？ 基本语法如下： 注意，使用 computed 只是一种方式，也可以使用 watch，甚至是自己组织代码逻辑进行数值侦听，重点是 $emit() 函数 <template> <!--注意此处的
阅读全文
posted @ 2021-12-17 11:17
vue - 绑定值
摘要：观察下面这个标签，标签的名称是 button，除此之外还有 3 个部分： 组件的属性（style）， 显示文字内容（btn）， 还有事件（click）。 <button style:"color:gray" click="">btn<button> 这 3 个部分绑定的语法是不一样的。 <templ
阅读全文
posted @ 2021-12-17 09:38
vue - 框架推荐
摘要：用了几年 vue，还是比较推荐 element-ui，除了对表单部分不大满意，整体上体验还可以。 不满足的部分，可以参考 bootstrap，不推荐直接导入 bootstrap，但是有很多组件可以借鉴， element-ui 自带的，自己再扩展一些，基本满足大部分开发需求了。 el-form 对于下
阅读全文
posted @ 2018-03-21 21:46
vue - 自定义指令
摘要：vue 虽然提供了自定义组件，如果仍然希望进行一些 DOM 操作，那么可以通过自定义指令来实现。 没什么实践机会，能够想到的应用： element-ui 的 v-loading，数据加载的时候，面板显示为滚动条； 界面鉴权，如果用户无权限，则隐藏面板，可以考虑用指令的方式实现。 钩子函数 通过钩子函
阅读全文
posted @ 2018-03-21 20:09
vue - 自定义组件
摘要：参数设置 自定义组件的时候，需要告诉别人，调用我们的组件，需要传递什么参数。 使用 props（Property的缩写）为组件设置传值参数。 参数可以指定类型，分为：String、Number、Boolean、Function、Object、Array， 除此之外，还可以指定是否必传，设置默认值。
阅读全文
posted @ 2018-03-20 21:34
vue - 计算属性
摘要：computed（计算属性） 应用场景一 最常见的应用，就是用于处理数据字典。 比如：数据库用数字 0 和 1 表示男女，前端代码中，需要将数字 0 和 1，转换成汉字。 computed 非常适合数据格式化，当数值发生变化，数据也会重新格式化。 要实现这个效果，filter 也能做到，但是 com
阅读全文
posted @ 2018-03-19 21:22
vue - 流程控制
摘要：流程控制语法，只有 2 个：“for循环” 和 “if判断”。 不要怀疑，确实就只有 2 个。 vue 不需要做的像 freemarker、jsp 那样高级，因为前端代码还有 javascript 存在，如果需要额外的逻辑运算，可以通过 javascript 进行补充处理. 条件判断 控制显示隐藏的
阅读全文
posted @ 2018-03-18 22:20
vue - 框架特点
摘要：我本身属于后端程序员，学习 vue 的方式，可能会有所区别，但是不用怕，我也是有开源项目的。 简介 vue 具备这几个特点：模块化开发，MVVM 模式、模版引擎。 这些技术，很多都独立存在过，将这些功能全部整合，最终就产生了 vue， 我们学习的时候，根据这些特点，结合我们熟悉的技术，可以很快完成技
阅读全文
posted @ 2018-03-17 13:28
