vue.js谷歌插件_基于Google Material的Snackbars的Vue.JS插件-CSDN博客

vue.js谷歌插件

Vue Snackbar (Vue Snackbar)

A Vue.JS plugin for creating and displaying snackbars following the material design policies created by Google.

一个Vue.JS插件，用于遵循Google创建的材料设计策略来创建和显示小吃店。

安装 (Install)

Install from npm:

从npm安装：

npm install --save vue-snack

import Vue from 'vue'
import VueSnackbar from 'vue-snack' 

Vue.use(VueSnackbar, options = {})

Or from CDN:

或从CDN：

<head>
  <link rel="stylesheet" href="https://unpkg.com/vue-snack/dist/vue-snack.min.css">  
  <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
  <script src="https://unpkg.com/vue-snack/dist/vue-snack.min.js"></script>
</head>

用 (Use)

The plugin provides the $snack property in all components, this property contains all the methods configured to display the desired snackbar.

该插件在所有组件中都提供$snack属性，该属性包含配置为显示所需小吃栏的所有方法。

By default, the plugin contains three main display methods: success,danger and show. These methods present snackbars with preconfigured colors for success messages, error messages and standard messages, respectively. The text of the message in all cases have the same color, but the action button present in the snackbar varies in color depending on the method called.

默认情况下，该插件包含三种主要的显示方法： success ， danger和show 。这些方法分别为小吃店提供用于成功消息，错误消息和标准消息的预配置颜色。消息的文本在所有情况下都具有相同的颜色，但是小吃栏中显示的操作按钮的颜色会根据所调用的方法而有所不同。

Each method receives as a parameter a message string, or a configuration object. In case a string is received, the snackbar is only displayed with the text entered, without displaying an action button.

每种方法都将消息字符串或配置对象作为参数接收。如果接收到字符串，则小吃店仅显示输入的文本，而不显示操作按钮。

/**** Using ****/

vm.$snack.metodo('My Message') // Displays a snackbar without action button

vm.$snack.metodo(config) // Displays a snackbar according to the given object

配置 (Configure)

The configuration object used in the presentation is simple and has the following structure:

演示文稿中使用的配置对象很简单，并具有以下结构：

config = {
  text: String, // default ''
  button: String, // Default null
  action: Function // default null
}

个性化 (Personalize)

创建方法 (Creating methods)

During the installation of the plugin, a configuration object is optional. The object in question can contain the "methods" key, which has the methods that can be executed from the $snack in each component. Each method in array must contain an associated color.

在插件安装期间，配置对象是可选的。有问题的对象可以包含"methods"键，该方法具有可以从每个组件中的$snack执行的方法。数组中的每个方法都必须包含关联的颜色。

In addition, it is possible to inform the location that the snackbar will appear. Another configuration parameter is "time", which specifies how many milliseconds the snackbar should be displayed. According to Google, a snackbar should last at least 5 and at most 10 seconds. The default value is 7.5 seconds.

另外，可以通知位置小吃店将出现。另一个配置参数是"time" ，它指定快餐栏应显示多少毫秒。根据Google的说法，小吃店应至少持续5秒，最多10秒。默认值为7.5秒。

The following is an example of a configuration object. If the "methods" key is undefined, the available methods are show, success anddanger, as previously stated.

以下是配置对象的示例。如果未定义"methods"键，则如前所述，可用的方法为show ， success和danger 。

{
  // Possible values: 'top', 'top-left', 'top-right', 'bottom', 'bottom-left'
  // default 'bottom'
  position: String,
  // default 7500
  time: Number,
  // default []
  methods: [
    {
      // default ''
      name: String,
      // Any valid HTML color
      // default '#ecf0f1'
      color: String
    }
  ]
}

演示版 (Demo)

The following is what is needed to display snackbars for success, error, and default messages, in addition to a custom created by the user. It is noteworthy that only one snackbar is displayed at a time, as is the snackbar directive created by Google:

除了用户创建的自定义之外，以下是显示小吃店的成功，错误和默认消息的内容。值得注意的是，一次只显示一个快餐栏，就像Google创建的快餐栏指令一样：

online demo

在线演示

In plugin installation:

在插件安装中：

import Vue from 'vue'
import VueSnackbar from 'vue-snack' 

Vue.use(VueSnackbar, {
  methods: {
    name: 'myMethod',
    color: 'hotpink'
  }
})

export default {
  methods: {
    ok () {
      this.$snack.success({
        text: 'Conversa arquivada',
        button: 'desfazer',
        action: this.clickAction
      })
    },
    notOk () {
      this.$snack.danger({
        text: 'Erro ao salvar fotos',
        button: 'refazer',
        action: this.clickAction
      })
    },
    potato () {
      this.$snack.show({
        text: 'Usuário adicionado',
        button: 'desfazer',
        action: this.clickAction
      })
    },
    creamCheese () {
      this.$snack.myMethod({
        text: 'Esse site utiliza cookies bauducco',
        button: 'Entendi'
      })
    }
  }
}

Snackbars generated success, error, standard and customized, successively: