Vue常用组件之confirm用法及说明

介绍

confirm组件是Vue中常用的弹窗组件，类似于浏览器内置的confirm函数，它可以方便地呈现一个确认框。该组件由Vuetify提供，它是一个基于Material Design规范的Vue UI库。

安装与使用

你可以使用npm或yarn来安装该组件：

npm install vuetify --save

在Vue组件中，你可以使用该组件来展示一个确认框：

<template>
  <v-btn @click="showConfirm = true">点击弹窗</v-btn>
  <v-dialog v-model="showConfirm">
    <v-card>
      <v-card-title>
        <span class="headline">确认框标题</span>
      </v-card-title>
      <v-card-text>
        <p>确认框内容</p>
      </v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn color="green darken-1" @click="confirm()">确定</v-btn>
        <v-btn color="red darken-1" @click="showConfirm = false">取消</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
export default {
  data() {
    return {
      showConfirm: false,
    };
  },

  methods: {
    confirm() {
      //TODO: 确认操作
      this.showConfirm = false;
    },
  },
};
</script>

在该示例中，我们展示了一个按钮，并在点击该按钮时展示了一个带有标题、内容和两个按钮的确认框。当用户点击“取消”按钮时，弹窗会关闭；当用户点击“确定”按钮时，则会执行confirm()方法。

更多选项

confirm组件支持多种选项，用以控制弹窗的样式和行为。例如，你可以通过width属性来控制弹窗的宽度：

<v-dialog v-model="showConfirm" :width="500">

你还可以通过persistent属性来控制点击弹窗外部时弹窗是否关闭：

<v-dialog v-model="showConfirm" :persistent="true">

更多选项可参考官方文档。

示例

下面我们给出两个进一步的示例：

示例一：删除确认框

在删除某个项目时，我们需要将弹窗的标题和内容替换为对应的项目名称。例如，在删除“项目A”时，确认框的标题应为“删除项目A”，确认框的内容应为“你确定要删除项目A吗？”。

<template>
  <v-btn @click="showConfirm = true">删除项目A</v-btn>
  <v-dialog v-model="showConfirm">
    <v-card>
      <v-card-title>
        <span class="headline">删除 {{projectName}} 项目</span>
      </v-card-title>
      <v-card-text>
        <p>你确定要删除 {{projectName}} 项目吗？</p>
      </v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn color="green darken-1" @click="deleteProject()">确定</v-btn>
        <v-btn color="red darken-1" @click="showConfirm = false">取消</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
export default {
  data() {
    return {
      showConfirm: false,
      projectName: '项目A',
    };
  },

  methods: {
    deleteProject() {
      //TODO: 删除操作
      this.showConfirm = false;
    },
  },
};
</script>

示例二：自定义按钮

在一些情况下，我们需要添加更多的按钮或自定义按钮的样式。例如，我们在确认框中添加一个“不再提示”按钮，点击该按钮后，不再展示该确认框。

<template>
  <v-btn @click="showConfirm = true">点击弹窗</v-btn>
  <v-dialog v-model="showConfirm">
    <v-card>
      <v-card-title>
        <span class="headline">确认框标题</span>
      </v-card-title>
      <v-card-text>
        <p>确认框内容</p>
      </v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn color="green darken-1" @click="confirm()">确定</v-btn>
        <v-btn color="red darken-1" @click="showConfirm = false">取消</v-btn>
        <v-btn color="orange darken-1" @click="neverShow()">不再提示</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
export default {
  data() {
    return {
      showConfirm: false,
    };
  },

  methods: {
    confirm() {
      //TODO: 确认操作
      this.showConfirm = false;
    },

    neverShow() {
      //TODO: 不再提示操作
      this.showConfirm = false;
    },
  },
};
</script>

在该示例中，我们添加了一个“不再提示”按钮，并使用了橙色的按钮样式。当用户点击该按钮时，我们将执行neverShow()方法。