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确认对话框