上篇:vue基于vant的popup组件封装confirm弹框 为什么用到popup呢?主要是用到了其中的动画,其实这个动画可以通过transition标签实现 效果等同于前篇: step: 1、components文件夹下新建MyConfirm文件夹,分别新建index.vue和index.js
原创
2021-07-13 16:15:41
378阅读
如果不是用vant组件库,推荐看:vue封装confirm弹框,通过transition设置动画 效果: step: 1、components文件夹下新建MyConfirm文件夹,分别新建index.vue和index.js index.vue: <template> <van-popup v-mo
原创
2021-07-13 16:07:16
2003阅读
点赞
看API中this.$confirm弹窗使用不对 讲的也不明确,在此记录下正确的用法 this.$confirm("确认删除文件?",{ type:'error'}).then(()=>{ console.log("确认操作"); }).catch(()=>{ console.log("取消操作") ...
转载
2021-10-13 17:02:00
3814阅读
2评论
vue组件的定义● 组件(Component)是Vue.js最强大的功能之一● 组件可以扩展HTML元素,封装可重用代码● 在较高层面上,组件是自定义元素,Vue.js的编译器为他添加特殊功能● 有些情况下,组件也可以表现用 is 特性进行了扩展的原生的HTML元素● 所有的Vue组件同时也都是Vue实例,所以可以接受相同的选项对象(除了一些根级特有的选项),并提供相同的生命周期钩子vue组件的功
转载
2024-02-04 02:10:19
72阅读
在使用element的confirm时,没有可以勾选“不在提示”的功能,现在的需求是可以根据需求关闭confirm的提示 confirm组件hasDConfirm.vue 1 <template> 2 <div class="YConfirm"> 3 <el-dialog :title="conte ...
转载
2021-09-29 16:40:00
82阅读
2评论
关键词:SDK,VUE,单例模式,代码复用本文旨在分享一个前端 sdk 的开发方式。即使用 vue 直接开发1.项目背景需求描述:1.开发一个集团通用 SSO 单点登录页面,大致如下图: 2.开发一个对应 sdk,给接入方使用,页面效果和 web 保持一致。如下图: SDK 需求: 提供调用方式给用户,可以传递参数,调用方法,直接生成登录弹框和背景半透明的蒙层在弹框成功
转载
2024-07-02 19:52:59
139阅读
1.复习jQuery的常用方法,复习js原生的方法,了解jQuery的大概实现,锻炼编码能力。
2.jquery对外暴露的两个方法:jQuery和$,这两种方式实际上是同一个方法,通过调用这两个方法,可以得到一个jQuery实例对象
◆jQuery实例对象是一个伪数组对象【
//验证实例是伪装数组对象
console.log(({}).toString.cal
一、安装axios和confignpm install axios --Savenpm install config --Save二、封装config文件在src目录下创建config文件夹,config内创建index.js文件//网络请求地址 例如: http://wwww.baidu.com 本地开发时,可直接填写后端测试接口地址(需要设置浏览器允许跨域请求,或后端设置Cross-orig
转载
2024-02-24 23:02:38
37阅读
之前我发布了一篇是有关于uniapp的接口简单封装,这次我发布的是vue的接口简单封装,这次有涉及到几个依赖,需要提前安装好,一个是axios依赖,一个是qs依赖,以下是安装方法:npm install axios -S
npm install qs安装完之后,就可以直接再也没中引入了,这次涉及到三个文件,一个是对axios的封装文件,即axios.js,一个是对接口的封装文件,即index.js
转载
2024-04-18 13:32:44
224阅读
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。 https://www.electronjs.org/ 目录01.打包封装1.创建v
转载
2023-12-29 22:14:20
17阅读
1、校验数据类型export const typeOf = function(obj) {
return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase()
}示例typeOf('vue') // string
typeOf([]) // array
typeOf(new Date()) // date
typeO
转载
2024-03-18 09:00:44
36阅读
问题背景前端交互中经常使用确认框。在删除、修改等操作时,调用后端接口之前,先跳出弹框显示提示信息,提示用户确认,避免用户误操作。 项目中全局引入了Element,提供了一套模态对话框组件,用于消息提示、确认消息、提交内容,使用起来也非常简便。以下来自于element官网文档:如果你完整引入了 Element,它会为Vue.prototype添加如下全局方法: $msgbox, $alert, $c
转载
2024-10-27 11:30:05
137阅读
在使用this.$confirm过程中经常会遇到将取消按钮修改成其他的按钮去执行,如果直接使用catch会出现右上角以及遮罩层关闭也会执行,所以需要做个区分
如遇到两个按钮可以用取消按钮作为第二个按钮如果是出现多个按钮就不支持了vue使用 this.$confirm时区分取消与右上角关闭和弹窗关闭html代码<template>
<el-button type="text"
目录前言一、为什么要封装请求二、创建axios实例并导出三、接口的封装四、接口在页面的调用五、补充内容(跨域请求需配置代理) 前言此封装没有什么复杂的内容都是一些基本操作,因此较适合小白,复制黏贴即可用。一、为什么要封装请求小型的项目是完全可以不封装的,中大型项目非常建议封装一下,有些接口是重复调用的,那样你就需要重复去写,而且当接口修改时,你就需要去找n个调用了这个接口的页面,然后一个个的重复
转载
2023-09-19 21:11:00
216阅读
文章目录一、axios是什么特性基本使用二、为什么要封装三、如何封装设置接口请求前缀# 设置请求头与超时时间封装请求方法请求拦截器响应拦截器小结参考文献 一、axios是什么axios 是一个轻量的 HTTP客户端基于 XMLHttpRequest 服务来执行 HTTP 请求,支持丰富的配置,支持 Promise,支持浏览器端和 Node.js 端。自Vue2.0起,尤大宣布取消对 vue-re
转载
2024-06-29 21:16:38
48阅读
前言: 什么是axios,简单的来说就是axios 是一个基于 promise 的 HTTP 库,简单的讲就是可以发送get、post等请求。axios 是一个轻量的 HTTP客户端,它基于 XMLHttpRequest 服务来执行 HTTP 请求,支持丰富的配置,支持 Promise,支持浏览器端和 Node.js 端。自Vue2.0起,尤大大(Vue作者尤雨溪)宣布取消对 vue-resour
转载
2023-08-23 12:25:48
297阅读
什么样的内容需要封装
一段代码在项目中出现两次就开始考虑是否应该进行封装,出现三次就肯定要封装,大到一个页面,一个组件,小到一个function和一个css样式。封装原则
以下将封装出来的通用组件叫做子组件,引用通用组件的界面叫做父组件。封装出来的组件必须具有高性能,低耦合的特性,主要从以下几点入手:1.数据从父组件传入子组件本身不要生成数据,如果需要生成数据,只能在组件内部进行使用,不要
转载
2024-06-09 19:32:13
134阅读
概述本文主要进行描述一种在vue中封装表格的方法。目标是达成类似于element-plus中的使用方式。element-plus中表格用法如下:<template>
<el-table :data="tableData">
<el-table-column prop="id" label="Id" />
<el-table-column prop
转载
2024-04-09 12:38:50
436阅读
首先先查阅官方微信js-SDK,根据官方提示引入sdk,使用sdkvue npm 引入微信sdk,这个是优化封装。修正了微信js-sdk官方1.6.0的bug,并针对iOS系统url验证签名错误进行优化。npm i jweixin-1.6.0在需要分享的页面引入import wx from 'jweixin-1.6.0'这里我做了sdk请求的封装,就不用每个页面都去请求config配置的写法了,直
转载
2023-09-25 18:29:47
273阅读
组件的prop双向绑定于vue2废除,vue2的prop只限于父->子的单向流动,不能修改外层传来的数据,如果需要得自己来实现。实现方法步骤: 1.在组件内得data对象中创建一个props属性的副本data: function () {
return {
myResult: this.result(props中得值)//data中新增字段
}; 2.创建针对props
转载
2023-06-14 14:59:26
159阅读