vue.js确认对话框_vue.js精美的未保存的更改对话框
vue.js确认对话框
Vue未保存的更改对话框 (Vue Unsaved Changes Dialog)
A beautiful unsaved changes dialog, inspired by a component from the Squarespace admin.
一个美丽的未保存的更改对话框,灵感来自Squarespace管理员的组件。
Save, Discard, and Cancel buttons
保存,放弃和取消按钮
On desktop, popup appears precisely underneath the mouse cursor
在桌面上,弹出窗口恰好出现在鼠标光标下方
Smoothly animates in and out
平滑地动画出入
Popup intelligently avoids the window edges and responds to window resizing
弹出窗口可智能地避免窗口边缘并响应窗口大小调整
Full responsive: renders as in full-screen on mobile
全响应:在移动设备上以全屏方式呈现
Keyboard navigable/accessible
键盘可导航/可访问
更多东西 (More goodies)
Includes buttery animations for both desktop and mobile
包括桌面和移动设备的黄油动画
Mouse listener is throttled to avoid performance issues (bundles
lodash.throttle
, an extra 2KB)限制鼠标侦听器以避免性能问题(将
lodash.throttle
捆绑lodash.throttle
,额外增加2KB)All listeners are deactivated when component is torn down
组件拆除时,所有监听器均被停用
Darkens background
使背景变暗
Clicking the background dismisses the dialog (same as cancel button)
单击背景可关闭对话框(与“取消”按钮相同)
Bundles desktop, mobile, popup positioning logic, and all styles and animations in 14KB
将桌面,移动设备,弹出式定位逻辑以及所有样式和动画捆绑在一起,格式为14KB
安装 (Install)
npm i vue-unsaved-changes-dialog
用法 (Usage)
<VueUnsavedChangesDialog:title="Unsaved Changes":subtitle="['You have unsaved changes', 'Would you like to save or discard them?']":show="shouldShowDialog"@cancel="cancelFn"@discard="discardFn"@save="saveFn"/>
画廊 (Gallery)
仍然 (Still)
React灵敏 (Responsive)
现场开发 (Live Development)
You'll need NPM and the Vue CLI.
您将需要NPM和Vue CLI 。
npm install
npm run serve
建造 (Building)
You'll need to install Rollup.js to run the build script. Install it with npm install --g rollup
您需要安装Rollup.js才能运行构建脚本。 用npm install --g rollup
npm run build
Running the build script generate main
(.ssr.js
), module
(.esm.js
), and unpkg
(.min.js
) versions in the dist
directory.
运行构建脚本会在dist
目录中生成main
( .ssr.js
), module
( .esm.js
)和unpkg
( .min.js
)版本。
翻译自: https://vuejsexamples.com/a-beautiful-unsaved-changes-dialog-with-vue-js/
vue.js确认对话框
vue.js确认对话框_vue.js精美的未保存的更改对话框相关推荐
- js在IE下面弹出打开和保存文件的对话框
js在IE下面弹出打开和保存文件的对话框 2010-08-11 13:39:16| 分类: JavaScript | 标签: |字号大中小 订阅 <html> <head> ...
- php 删除 确认,js确认删除方法 js删除确认提示框
摘要 腾兴网为您分享:js确认删除方法 js删除确认提示框,篆刻字典,智慧农业,星球联盟,小番茄等软件知识,以及金山网盾3.6,手机tgp,省钱王,qq隐身,战锤全面战争,qq群签到,格力空调新派工系 ...
- js add方法_Vue.js列表过渡
进入/离开 & 列表过渡 示例一: <style>/* 移动的时间 */.fade-enter-active{transition: all .3s ease;}/* 移动的方向, ...
- vue 上次登录时间_Vue设置长时间未操作登录自动到期返回登录页
Vue设置长时间未操作登录以后自动到期返回登录页 首先我们写在main.js文件中 import routerUtil from "@/utils/routerutil";//先将 ...
- mqtt js 中乱码_Vue.js 中的 v-cloak 指令——Vue学习之路
今天看一篇文档中见到了了v-cloak指令,感觉很新鲜.由于使用的频率不高.但还是想了解下是做什么的. 众所周知,程序的指令一般都是语义化的,然后,我企图从cloak这个单词能找到点线索. 然后发现, ...
- vue表格刷新数据_Vue.js+Layer表格数据绑定与实现更新的实例
一:先使用Vue.js绑定好数据与更新事件 使用v-on绑定好事件,在事件里边直接把该行数据传递进去,在更新方法里边就可以直接取出需要更新的数据 选择 用户名 学号 班级 操作 {{item.User ...
- vue传值到后端_Vue.js快速入门就从这儿开始特别是后端程序员
自从前后端分离开始变成主流后,曾经的Jsp.FreeMarker.Velocity.Thymeleaf貌似慢慢被遗忘了,取而代之的是兴起的前端主流语言,比如Vue.React和AngularJS 介绍 ...
- vue.js表格赋值_vue.js input框之间赋值方法
如下所示: demo.html Index Page 测试 {{ result1 }} 测试 {{ result2 }} demo.js new Vue({ el: "#demo" ...
- json vue 对象转数组_vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
本文实例讲述了vue.js基于v-for实现批量渲染 json数组对象列表数据.分享给大家供大家参考,具体如下: vuejs的出现减轻了对dom的直接操作,同时它提供的 v-for 渲染列表数据也给我 ...
最新文章
- DASH流媒体MPD文件存储
- python excel合并_Python把多个Excel合并成一个Excel
- 京东到家基于netty与websocket的实践
- linux下的nginx+php+mysql
- 爱上MVC~Razor引擎时,在遍历中巧用Output.Write方法
- 学习三分 (概念 + 模板 + 例题:曲线)
- 修改Linux启动后的默认颜色,更改linux目录的默认颜色(我选择了Yellow)
- python random库下载_Python---random库(随机数)
- 利用Scrapy框架爬取落网上的音乐文件
- Linux(CentOS6.4、CentOS6.3)下安装、配置PostgreSQL9.2
- 分区助手合并移动硬盘分区后,无法访问的解决方法
- oracle 12c中文手册,oracle Database12c 官方手册:《Oracle Database12c DBA官方手册(第8版)》.pdf...
- 颜色的前世今生15·CMYK系统(原色的选择)
- 『实践』VirtualBox 5.1.18+Centos 6.8+hadoop 2.7.3搭建hadoop完全分布式集群及基于HDFS的网盘实现...
- 网络推广员的工作职责,如何做好网络推广员
- 计算机3d影视的应用程序,计算机3D技术在电影中的应用
- Python爬取药智网的中药材图谱网页
- input中鼠标点击清楚按钮之后的聚焦回input的方法
- 听见丨HTC发布新款Vive Pro,采用高分辨率OLED屏并内置耳机 高通在CES上发布新芯片,可将蓝牙耳机续航延长3倍
- 嵌入式笔试/面试概念