vue弹框修改
根据表ID 修改索引：弹框效果实现的代码：<el-table-column label="操作" width="200" align="center"> <template slot-scope="scope"> <div> <el-button size="mini" type="text" @...
2024-01-10
vue.js实现只弹一次弹框
核心代码是 getCookie()部分,控制弹框的显示隐藏则在 created()中。<template> <div v-if="isShow"> <!--最外层背景--> <div class="popup_container"> <!--居中的容器--> <img @click="noPopup" src="delete.png" alt=""> <!--关闭弹框--> <div class="popup_text"> <!--内容部分--> Lorem ipsum dolor sit ...
2024-01-10vue 弹框产生的滚动穿透问题的解决
最近开发过程中遇到一些小问题(似乎问题总是那么多)，但一直没什么时间去优化与解决。程序员不能被业务绑架，有时间还是花点在代码，开始这次的vue尝试吧。首先定义一个全局样式：.noscroll{ position: fixed; left: 0; top: 0; width: 100%;}创建一个dom.js文件，定义几个方法：export function hasClass(el, ...
2024-01-10
如何优雅的写一个Vue 的弹框
写Vue或者是react 都会遇见弹框的问题。也尝试了多种办法来写弹框，一直都不太满意，今天特地看了一下 Element UI 的源码，模仿着写了一个简易版。大概有一下几个问题：1、弹框的层级问题，如果在嵌套的组件里面使用了弹框，可能会出现弹框的层级不够高2、弹框的函数调用方式首先第一点：弹框...
2024-01-10通过vue.extend实现消息提示弹框的方法记录
前提回顾在项目开发中我们经常使用的组件注册分为两种，一个是全局注册和另一个是局部注册，假设我们的业务场景是用户在浏览注册页面时，点击页面中的注册按钮后，前端根据用户的注册信息先做一次简单的验证，并根据验证弹出一个对应消息提示弹框我们拿到这个需求后，便开始着手准备要...
2024-01-10
vue中超简单的方法实现点击一个按钮出现弹框，点击弹框外关闭弹框
效果图展示：View层<template> <div> <div class="mask" v-if="showModal" @click="showModal=false"></div> <div class="pop" v-if="showModal"> <button @click="showModal=false" class="btn">点击出现弹框</button> </div> <button @click="showModal=true" class=...
2024-01-10
vue实现带放大镜的搜索框
本文实例为大家分享了vue实现带放大镜的搜索框，供大家参考，具体内容如下字体图标在input单标签中的用法：第一步，先在main.js 中全局引入iconfont图标；第二步，给input 标签动态绑定一个属性，设置值为data中的变量；第三步，将字体图标代码中的 &#x 改为 \u代码如下：<template> <div class="logi...
2024-01-10
基于vue的前端测试框架
1、Vue Test Utils 官网https://vue-test-utils.vuejs.org/zh/2、推荐Jest库Jest特点有：一站式测试方案DOM API断言库Mock库快照覆盖率3、实践（待更新）...
2024-01-10
前端框架vue
现代前端框架大行其道，讲前端思想从操作dom的阶段，升级到操作数据的阶段。vue作为三大前端框架之一，其中平缓的学习曲线，让好多前端新手非常喜欢，应用也越来越广泛。虽然其他两个框架有facebook，和google撑腰，但是vue已然是不可小觑的对手了。无论你去做前端面试还是公司新项目技术选型，v...
2024-01-10
vue实现骨架屏的示例
目录骨架屏用途Vue架构骨架屏思路大纲定义一个抽象组件获取插槽并初始化操作骨架屏循环slots操作类名操作vnode的静态类名使用方法传值效果如下完整地址骨架屏用途作为spa中路由切换的 loading, 结合组件的生命周期和ajax请求返回的时机来使用.（ 作为loading 使用）。作为与用户联系最为密切的前端...
2024-01-10使用vue的框架，首次渲染非常慢，如何优化？
不使用nuxt等，vue首次渲染还可以怎么优化呢？回答：先通过 DevTools 的 Lighthouse 分析一下。一般来说都是 JS 包太大了导致的。所以引入 webpack-bundle-analyzer 来分析以下构建完之后的包哪些部分占用的比较多。大多数情况都是 momentjs 这种类库重复引入了。提出来成为公共JS能减少很大空间。VueCLI 构建的项目，直接在构建在构建命令后面增...
2024-02-13
年最火vue的UI框架
在做vue项目开发的时候遇到了一个问题，如何选择自己的技术栈？随着vue的开发者越来越多，各种框架也渐渐多起来，面对众多的框架，如何选择一款适合自己业务的框架，还是一件比较纠结的事情，今天总结了一下2020年GitHub上面比较受欢迎，star较高的几个UI框架。1：饿了么ElementUI推荐指数：star:45...
2024-01-10
vue的UI框架集锦
前端框架百花齐放、争奇斗艳，令人眼花缭乱。大神们一言不合就整一个框架出来，另小白们无所适从。下面罗列了一些比较优秀的UI框架，Star多的大都是老牌劲旅，Star少的许多是后起之秀。适用PC端1、elementUI支持vue2.x， 饿了么前端团队打造2、iView支持vue2.x4、N3支持vue2.x5、AliTelecom UI支持vue2.x...
2024-01-10
Vue常见的框架
1. Element：一套为开发者，设计师和产品经理准备的基于Vue 2.0的桌面端组件库 地址：https://element.eleme.cn/#/zh-CN2.iview：主要服务于PC界面的中后台产品 地址：https://www.iviewui.com/3.Vue Material：设计强大的和美观的web应用并适用于不同的屏幕。 地址：http://vuematerial.materializecss.cn/4.Vux：移动端 UI...
2024-01-10
Vue基础框架搭建
# 全局安装 vue-cli$ npm install --global vue-cli# 创建一个基于 webpack 模板的新项目$ vue init webpack my-project# 安装依赖，走你$ cd my-project$ npm run dev...
2024-01-10
vue ui框架
Element ui：PC端用得https://element.eleme.cn/#/zh-CN/component/installationiView：vue web ui，个人感觉非常好用，组件说明和功能相当集全，还好看，电脑端web推荐用。https://www.iviewui.com/docs/introduceVant：移动端web ui，网站形式的手机端可以用这个，说明功能还算齐全，最适合做手机网页端商城。https://vant-contrib.git...
2024-01-10
vue实现右侧滑出层动画
本文实例为大家分享了vue实现右侧滑出层动画的具体代码，供大家参考，具体内容如下效果图：代码：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <meta name="flexible" content="initial-dpr=2" />...
2024-01-10
vue部分
watch、computed、methods区别是什么watch是侦听属性；computed是计算属性；methods是方法。computed有缓存；如果computed属性依赖的属性没有发生变化，计算属性会立即返回之前的计算结果。而methods里面的函数在每次调用时都要执行。watch和computed都是以Vue的依赖追踪机制为基础的。methods里面是用来定义函数...
2024-01-10
vue实现树形表格
本文实例为大家分享了vue实现树形表格的具体代码，，供大家参考，具体内容如下效果如下：居中的图片：代码如下：<template> <div class="treeTable"> <table> <tr> <th>设备类型</th> <th>产品名称</th> <th>版本</th> <th>检查项</th> <th>检查子项</th> <th>检查大类</th> ...
2024-01-10
vue实现购物车案例
本文实例为大家分享了vue实现购物车的具体代码，供大家参考，具体内容如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>购物车案例</title> <script src="...
2024-01-10
vue实现登录类型切换
本文实例为大家分享了vue实现登录类型切换的具体代码，供大家参考，具体内容如下运行效果代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>登录类型切换</title> <script src="../js/vuejs-2.5.16.js"></script></head><body><div id="app"> <span v-if="isUser"> <label for="userAccount">用户...
2024-01-10
vue总结
<!-- 1. MVC 和 MVVM 的区别 --><!-- 2. 学习了Vue中最基本代码的结构 --><!-- 3. 插值表达式 v-cloak v-text v-html v-bind（缩写是:） v-on（缩写是@） v-model v-for v-if v-show --><!-- 4. 事件修饰符 ： .stop .prevent .capture .self .once --><!-- 5. el 指定要控制的区域 data 是个对象，指定了控制的区域内要用到的数据 methods 虽然带个s...
2024-01-10
vue知识点（1）
v-on指令添加一个事件监听器div > <p>{{ message }}</p> <button v-on:click="reverseMessage">逆转消息</button></div>var app5 = new Vue({ el: '#app-5', data: { message: 'Hello Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message.sp...
2024-01-10
vue通信
组件实例的作用域是孤立的。一、父子通信 父组件通过props向下传递数据给子组件，子组件通过events给父组件发送消息。 要让子组件使用父组件的数据，我们需要通过子组件的props选项。prop是单向绑定的，父组件属性变化时，将传递给子组件，但是不会反过来。 子组件想要和父组件通信...
2024-01-10
vue实现底部弹窗多选
本文实例为大家分享了vue实现底部弹窗多选的具体代码，供大家参考，具体内容如下代码：<template> <div class="release-post"> <div class="resume_main"> <div class="resume_content"> <van-form> <div class="table_list post_welfare"> <p class="name_title">岗位福利<span clas...
2024-01-10
