vuejs 组件_一个Vuejs组件，要求用户在执行操作之前进行确认

vuejs 组件

Vue确认按钮 (VueConfirmationButton)

A Vue.js single file component that will generate a button that requires the user to press it multiple times in order to confirm a designated action

Vue.js单个文件组件，该组件将生成一个按钮，要求用户多次按下该按钮才能确认指定的操作

View demo 查看演示 Download Source 下载源

我为什么需要那个？ (Why would i need that?)

Think of a sensitive scenario, something like deleting data. Having the user read multiple warning messages before performing an action will help prevent unwanted deletions.

考虑一个敏感的情况，例如删除数据。 在执行操作之前，让用户阅读多条警告消息将有助于防止不必要的删除。

安装 (Install)

纱 (Yarn)

yarn add vue-confirmation-button

yarn add vue-confirmation-button

手册 (Manual)

Manually download the .vue component (located in the dist) folder and add that to your project.

手动下载.vue组件(位于dist中)文件夹，并将其添加到您的项目中。

JS (JS)

import vueConfirmationButton from 'vue-confirmation-button';

const demo = new Vue({
  el: '.app',
  components: {
    'vue-confirmation-button': vueConfirmationButton,
  },
  data: {
    customMessages: [
      'Delete User',
      'Are you sure?',
      'Ok!'
    ],
  },
  methods: {
    deleteUser() {
      // Your Logic Here 
    },
  },
});

HTML (HTML)

<div class="confirmation__button">
  <vue-confirmation-button
    :messages="customMessages"
    v-on:confirmation-success="deleteUser()">
  </vue-confirmation-button>
</div>

细节 (Details)

道具 (Props)

This component supports 2 props

该组件支持2个道具

1. messages: An array of strings that will be displayed to the user. The last message being shown after confirmation has succeeded

   messages ：将显示给用户的字符串数组。 确认成功后显示的最后一条消息

2. css: A string representing the css style that will be applied to the <button> element

   css ：一个字符串，代表css样式，将应用于<button>元素

大事记 (Events)

This component emits 3 events

该组件发出3个事件

1. confirmation-success: The user has clicked the button all the way through and has successfully confirmed the action

   确认成功 ：用户一直单击按钮并成功确认了操作

2. confirmation-incremented: Fired everytime the user clicks the button

   确认递增 ：每次用户单击按钮时触发

3. confirmation-reset: The button has been reset (see below)

   确认重置 ：按钮已重置(参见下文)

Also there's a reset method in case you need to reset your button status. To use it you'll need to add a ref to your button and call it from there.

还有一种reset方法，以防您需要重置按钮状态。 要使用它，您需要在按钮上添加一个ref并从那里调用它。

e.g.:

例如：

In your template:

在您的模板中：

<vue-confirmation-button ref="confirmationButton"></vue-confirmation-button>

In your method:

在您的方法中：

resetButton() {
  demo.$refs.confirmationButton.reset()
  // Your Logic Here
},

翻译自: https://vuejsexamples.com/a-vuejs-component-that-asks-uses-to-confirm-before-performing-an-action/

vuejs 组件