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 lang="en"><head> <meta charset="UTF-8"> <title>员工信息录入</title> <style> .btn1{ color: blue; background: skyblue; text-align: center; } </style></head><body> <div id="div2"> <fieldset> <legend>员工信息录入</legend> ...
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系列——数据请求
数据请求有两个问题，一个是工具选择，一个是代码组织问题（一）工具选择 我看过一些别人写的项目，有直接用jquery提供的ajax接口，有自己封装了一个fetch接口，当然更多的是选择vue的第三方数据请求模块，说的最多的是vue-resource和axios；axios是目前最推荐的，但是我最终还是暂时选择了vue-resou...
2024-01-10
vue长列表优化
写在前面：不知不觉 ～2020年的日子已经过去了3/4，看到微博热搜说：2020年还剩下3个月的时候，心情突然骤降～哈哈哈哈切入正题：什么是长列表优化？我们为什么需要长列表优化？我们怎样进行长列表优化长列表优化 在我们的日常工作中，会越到各种各样的列表，比如，我们通常采用分页...
2024-01-10
vue知识点集锦
1、vue的优点？轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb简单易学：国人开发，中文文档，不存在语言障碍，易于理解和学习双向数据绑定：保留了angular的特点，在数据操作方面更为简单组件化：保留了react的优点，实现了HTML的封装和重用，在构建单页面应用方面有...
2024-01-10
vue通信
组件实例的作用域是孤立的。一、父子通信 父组件通过props向下传递数据给子组件，子组件通过events给父组件发送消息。 要让子组件使用父组件的数据，我们需要通过子组件的props选项。prop是单向绑定的，父组件属性变化时，将传递给子组件，但是不会反过来。 子组件想要和父组件通信...
2024-01-10
vue锚点
第一种：router.js中添加mode: 'history', srcollBehavior(to,from,savedPosition){ if(to.hash){ return {selector:to.hash } } }组件：<template><div><ul class="list"><li><a href="#1" rel="external nofollow" >星期1</a></li><li><a href="#2" rel="external nofollow" >星期2...
2024-01-10
vue的基本介绍
Vue 的基本介绍1. 库(library)和框架(Framework)的区别库: 是一系列函数的集合,如果想要实现某个功能,直接调用库里面的方法即可. 例如(jquery).使用库 : 开发人员起主导作用框架: 是一套完整的解决方案,它制定了一个规则,想要使用框架,就要按照框架的规则来编写代码,框架会在何时的时机执行我们编写...
2024-01-10
vue（三）
组件组件 (Component) 是 Vue.js 最强大的功能之一组件可以扩展 HTML 元素，封装可重用的代组件注册全局注册Vue.component(\'组件名称\', { }) 第1个参数是标签名称，第2个参数是一个选项对象全局组件注册后，任何vue实例都可以用组件基础用<div id="example"> <!-- 2、 组件使用 组件名称 是以HTML标签...
2024-01-10
vue实现横向斜切柱状图
本文实例为大家分享了vue实现横向斜切柱状图的具体代码，供大家参考，具体内容如下实现效果：实现代码：<template> <div class="Consumption"> <div style="width: 350px; height: 180px" ref="ConsumptionChart" /> </div></template><script>import echarts from 'echarts'const myShape = { x: 0, y: 0, width: 10 ...
2024-01-10
