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框架导入百度地图API接口的方法
百度请求API接口： 在index.html头部导入：<!--导入百度API接口通过<script src='http://api.map.baidu.com/api?v=2.0&ak=你的密钥'>中访问src链接获取一个关于 script请求模式的链接即如下的api接口进行访问（这种方式就是模拟浏...
2024-01-10
vue下拉框如何点击其他区域收起
一个下拉组件，如图，想要点击除这个组件的任何其他区域收起这个菜单，vue该怎么做？回答：ready() { document.addEventListener('click', (e) => { if (!this.$el.contains(e.target)) this.show = false })}回答：这个下拉框是个div或其他什么吧，应该有个用于展示的class吧，这个class应当对应data里面的一个数据吧，修...
2024-01-10
vue穿梭框实现上下移动
本文实例为大家分享了vue穿梭框实现上下移动的具体代码，供大家参考，具体内容如下使用elementUI的树形组件 tree组件功能需求：1、左侧的子节点移动到右侧的表格中2、右侧选中的内容移动到左侧树中，单一移动和全部移动3、点击右侧节点实现上下移动首先会遇到的问题可能是如何实现左侧只让...
2024-01-10
Vue中常用的UI框架 - 猿人阿梅
Vue中常用的UI框架 vue现在使用的人越来越多了，这篇文章主要整理一些比较优秀的移动端ui框架，推荐给大家，例如：mint UI、vux、vonic、vant、cube-ui、Muse-ui、Vue-Carbon、YDUI；连接地址：http://www.fly63.com/article/detial/166...
2024-01-10
vue框架:
路飞项目1.vue框架: 前台html+css+js框架,是不同于js与jq的数据框架 指令| 实例成员| vue项目 2.drf框架: django的插件,完成前后台分离项目后台接口编写的框架 序列化组件| 三大认证组件| 分页,筛选,过滤,排序|请求,解析,响应 3.路飞项目: 前台vue完成,后台由drf框架完成前后台分离项目...
2024-01-10
vue实现骨架屏的示例
目录骨架屏用途Vue架构骨架屏思路大纲定义一个抽象组件获取插槽并初始化操作骨架屏循环slots操作类名操作vnode的静态类名使用方法传值效果如下完整地址骨架屏用途作为spa中路由切换的 loading, 结合组件的生命周期和ajax请求返回的时机来使用.（ 作为loading 使用）。作为与用户联系最为密切的前端...
2024-01-10
Vue框架快速入门
Vue是现在最流行的前端框架之一，而且相对于其他两个框架React和Angular来说也更加易学，而且它的作者是国人，中文文档也很完善。当然Vue框架算是比较高级的框架，所以在使用过程中还需要JavaScript、JavaScript 2015、WebPack、NodeJS、npm、ESLint、JavaScript单元测试框架等其他知识和框架的使用方法。在学习Vue...
2024-01-10
vue 二三倍图适配，1像素边框
//文件名为mixin.scss// 2,3倍图适配@mixin bg-image($url){ background-image: url("~imgs/icon/" + $url + "@2x.png"); @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){ background-image: url("~imgs/icon/" + $url + "@3x.png"); }}//一像素边框@media...
2024-01-10
vue框架整体流程
1、整体流程（1）模板解析成render函数（2）响应式监听（3）首次渲染，显示页面，绑定依赖（4）data属性变化，触发rerender2、模板解析为render函数参考上一篇博客。模板的所有信息都被render函数包含。模板中用到的data属性，都变成了js变量模板中的v-for等都变成了js逻辑render函数返回vnode3、响应...
2024-01-10
搭建vue框架
1到网上下载node.js,安装，（新版node，包括了npm ）。2下载Git安装。3.你需要的地方建一个文件夹。打开cmd,跳转到这个文件夹输入npm install -g vue-cli 完成安装。输入vue出来信息说明成功了。4.vue init webpack vue_project，...
2024-01-10
vue渲染错误
vue 报错：[Vue warn]: Error in render: “TypeError: Cannot read property ‘1’ of undefined”原因：组件中，使用异步加载数据渲染组件。在组件第一次渲染时，数据对象还没有被赋值，此时组件渲染会因为缺少数据报错。解决：用v-if控制，在异步拿到数据之前，不渲染该组件。...
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菜鸟，第一次用vue做项目，写一些自己的理解，可能有些不正确，欢迎纠正。vue开发环境要配置本地代理服务。把config文件加下的index.js里的dev添加一些内容，dev: { env: require(\'./dev.env\'), port: 8090, autoOpenBrowser: true, assetsSubDirectory: \'static\', assetsPublicPath: \'/\', proxyTable: { \...
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小白快速入门
一、vue是什么Vue 是一套用于构建用户界面的渐进式框架。压缩后仅有17kb二、vue环境搭建你直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。但在用 Vue 构建大型应用时推荐使用 NPM 安装。这里推荐一下是用淘宝的cnpm，非常的快npm install -g cnpm --registry=https://registry.npm.taobao.org然后进行...
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
