vue.js的简单警报

Vue简单警报 (Vue Simple Alert)

Simple but cool alert(), confirm(), prompt() for Vue.js.

Vue.js简单但很酷的alert()，confirm()，prompt()。

View Demo 查看演示 View Github 查看Github

特征 (Features)

• Provides simple alert(), confirm(), prompt() like DOM Window methods.

  提供类似于DOM Window方法的简单alert() ， Confirm() ， hint() 。

• Based on sweetalert2.

  基于sweetalert2。

• Installed as a Vue.js plugin.

  作为Vue.js插件安装。

• Promise based API.

  基于承诺的API。

• Support typescript.

  支持打字稿。

安装 (Install)

npm i vue-simple-alert

基本用法 (Basic Usage)

安装插件 (install plugin)

// main.js
import Vue from "vue"
import VueSimpleAlert from "vue-simple-alert";

Vue.use(VueSimpleAlert);

警报 (Alert)

// in any component

this.$alert("Hello Vue Simple Alert.");

确认 (Confirm)

// in any component

this.$confirm("Are you sure?").then(() => {
  //do something...
});

提示 (Prompt)

// in any component

this.$prompt("Input your name").then((text) => {
  // do somthing with text
});

高级用法 (Advanced Usage)

You can use sweetalert2's fire() method through $fire(). For detailed usage, refer to sweetalert2 documentation.

您可以通过$ fire()使用sweetalert2的fire()方法。 有关详细用法，请参阅sweetalert2文档。

// in any component

this.$fire({
  title: "Title",
  text: "text",
  type: "success",
  timer: 3000
}).then(r => {
 console.log(r.value);
});

API (API)

警报(消息？，标题？，类型？) (alert(message?, title?, type?))

The alert() method displays an alert box with a specified message and an OK button.

alert()方法显示带有指定消息和“确定”按钮的警报框。

• message: string

  讯息：字串

Optional. Specifies the text to display in the alert box

可选的。 指定要在警报框中显示的文本

• title: string

  标题：字符串

Optional. Specifies title of the alert box

可选的。 指定警报框的标题

• type: 'success' | 'error' | 'warning' | 'info' | 'question'

  类型：“成功” | “错误” | “警告” | '信息'| '题'

Optional. Specifies icon type.

可选的。 指定图标类型。

• returns: Promise<boolean>

  返回：Promise <boolean>

Will be resolved when OK button clicked. If alert box closed by any other reason, this promise will be rejected.

单击“确定”按钮后将解决。 如果由于其他任何原因关闭了警报框，则该承诺将被拒绝。

确认(消息？，标题？，类型？，reverseButton？) (confirm(message?, title?, type?, reverseButton?))

The confirm() method displays a dialog box with a specified message, along with an OK and a Cancel button.

Confirm()方法显示一个对话框，其中包含指定的消息以及“确定”和“取消”按钮。

• message: string

  讯息：字串

Optional. Specifies the text to display in the confirm box

可选的。 指定要在确认框中显示的文本

• title: string

  标题：字符串

Optional. Specifies title of the confirm box

可选的。 指定确认框的标题

• type: 'success' | 'error' | 'warning' | 'info' | 'question'

  类型：“成功” | “错误” | “警告” | '信息'| '题'

Optional. Specifies icon type.

可选的。 指定图标类型。

• reverseButton: boolean

  reverseButton：布尔值

Optional. Set to true if you want to invert default buttons positions.

可选的。 如果要反转默认按钮位置，则设置为true。

• returns: Promise<boolean>

  返回：Promise <boolean>

Will be resolved when OK button clicked. If confirm box closed by any other reason, this promise will be rejected.

单击“确定”按钮后将解决。 如果确认框由于任何其他原因关闭，则该承诺将被拒绝。

提示(消息，defaultText ?、标题？，类型？，reverseButton？) (prompt(message, defaultText?, title?, type?, reverseButton?))

The prompt() method displays a dialog box that prompts the user for input.

hint()方法显示一个对话框，提示用户输入。

• message: string

  讯息：字串

Required. Specifies the text to display in the dialog box

需要。 指定要在对话框中显示的文本

• defaultText: string

  defaultText：字符串

Optional. The default input text

可选的。 默认输入文字

• title: string

  标题：字符串

Optional. Specifies title of the confirm box

可选的。 指定确认框的标题

• type: 'success' | 'error' | 'warning' | 'info' | 'question'

  类型：“成功” | “错误” | “警告” | '信息'| '题'

Optional. Specifies icon type.

可选的。 指定图标类型。

• reverseButton: boolean

  reverseButton：布尔值

Optional. Set to true if you want to invert default buttons positions.

可选的。 如果要反转默认按钮位置，则设置为true。

• returns: Promise<string>

  返回：Promise <string>

Will be resolved with input text when OK button clicked. If the user clicks OK without entering any text, promise will be resolved with an empty string. If dialog box closed by any other reason, this promise will be rejected.

单击确定按钮时，将使用输入文本进行解析。 如果用户单击“确定”而不输入任何文本，则Promise将以空字符串解析。 如果对话框由于任何其他原因关闭，则该承诺将被拒绝。

翻译自: https://vuejsexamples.com/simple-alert-for-vue-js/