vue 组件ui_Vue UI组件，用于显示通知

最新推荐文章于 2021-05-17 14:42:55 发布

cuk5239

最新推荐文章于 2021-05-17 14:42:55 发布

阅读量800

点赞数

文章标签： vue java svg opencv css ViewUI

原文链接：https://vuejsexamples.com/a-vue-ui-component-for-showing-notifications/

版权

vue 组件ui

通知铃 (vue-notification-bell)

Vue.js notification bell component.

Vue.js通知铃组件。

View demo 查看演示 Download Source 下载源

如何安装 (How To Install)

npm install vue-notification-bell --save

如何使用 (How to use)

Inside your vue files:

在vue文件中：

<template>
  <div id="your-component">
    <notification-bell /> <!-- Using Component -->
  </div>
</template>
<script>
// Importing Component
import NotificationBell from 'vue-notification-bell'

export default {
  name: 'YourComponentName',
  // ...
  components: {
    NotificationBell  // Registering Component
  }
  // ...
}
</script>

道具列表 (List of component props)

:warning: Warning: You have to v-bind custom icon path with require function:

：warning：警告：您必须将v绑定自定义图标路径与require函数：

v-bind:icon="require(@/assets/path/to/icon.svg)" :heavy_check_mark:

v-bind:icon="require(@/assets/path/to/icon.svg)" ：heavy_check_mark：

:icon="require(@/assets/path/to/icon.svg)" :heavy_check_mark:

:icon="require(@/assets/path/to/icon.svg)" ：heavy_check_mark：

icon="@/assets/path/to/icon.svg" :x:

icon="@/assets/path/to/icon.svg" ：x：

icon="require(@/assets/path/to/icon.svg)" :x:

icon="require(@/assets/path/to/icon.svg)" ：x：

propName	description	default value
`size`	size of component in px	30
`count`	number of notifications. (zero or below not shown)	0
`upperLimit`	if `count` is bigger than this number notification shown as `+upperLimit`	99
`counterLocation`	position of counter box in component. can be one of: `upperRight`, `lowerRight`, `upperLeft`, `lowerLeft`, `top`, `left`, `bottom`, `right` and `center`. If you set `top` or `left` prop, this prop will be disabled	`upperRight`
`top`	If you want to set a custom location for counterBox, you can set top distance by this prop. You have to pass value with dimension (e.g. `10px` or `20%`). If you set this prop the `counterLocation` prop will be disabled	`null` (Location is calculated by `counterLocation`)
`left`	If you want to set a custom location for counterBox, you can set left distance by this prop. You have to pass value with dimension (e.g. `10px` or `20%`). If you set this prop the `counterLocation` prop will be disabled	`null` (Location is calculated by `counterLocation`)
`fontSize`	Custom font size for counter. You have to pass value with dimension. e.g. 20px or 1.5em	`null` (Font size is calculated by `size`)
`counterPadding`	Custom padding for counter. You have to pass value with dimension. e.g. 20px or 1.5em	`null` (Padding is calculated by `size`)
`icon`	custom notification icon. you have to pass your SVG icon location by `require` function	`null` (showing the default bell icon)
`iconColor`	color of the bell icon. This property only works with default icon. if you are using custom `icon`, you have to handle color of the icon in your SVG file	`black`
`disabledIcon`	If you want to show a different Icon when you have zero notification. you can use this prop. pass SVG icon location by `require` function. this prop only works if you are using custom `icon` too	`null` (showing the default bell icon)
`counterStyle`	shape of counter box. can be one of: `roundRectangle`, `rectangle`, `round`	`roundRectangle`
`counterBackgroundColor`	background color of counter box	`red`
`counterTextColor`	counter text color	`white`
`animated`	if true, counter increase/decrease by animation	`true`
`prefixPlus`	if true, upper limit plus sign is shown as a prefix, otherwise it is shown as a postfix	`false`

propName	描述	默认值
`size`	组件大小(以像素为单位)	30
`count`	通知数。 (零或以下未显示)	0
`upperLimit`	如果`count`大于此数字，则通知显示为`+upperLimit`	99
`counterLocation`	计数器盒在组件中的位置。可以是一个： `upperRight` ， `lowerRight` ， `upperLeft` ， `lowerLeft` ， `top` ， `left` ， `bottom` ， `right`和`center` 。如果您设置`top`或`left`道具，则该道具将被禁用	`upperRight`
`top`	如果要为counterBox设置自定义位置，则可以使用此道具设置最远距离。您必须传递带有尺寸的值(例如`10px`或`20%` )。如果设置此道具，则`counterLocation`道具将被禁用	`null` (位置由`counterLocation`计算)
`left`	如果要为counterBox设置自定义位置，则可以通过此道具设置左距。您必须传递带有尺寸的值(例如`10px`或`20%` )。如果设置此道具，则`counterLocation`道具将被禁用	`null` (位置由`counterLocation`计算)
`fontSize`	计数器的自定义字体大小。您必须通过维度传递价值。例如20px或1.5em	`null` (字体大小由`size`计算)
`counterPadding`	自定义填充计数器。您必须通过维度传递价值。例如20px或1.5em	`null` (填充是通过`size`计算的)
`icon`	自定义通知图标。您必须通过`require`函数传递SVG图标位置	`null` (显示默认的响铃图标)
`iconColor`	响铃图标的颜色。此属性仅适用于默认图标。如果使用自定义`icon` ，则必须处理SVG文件中图标的颜色	`black`
`disabledIcon`	如果要在零通知时显示其他图标。你可以使用这个道具。通过`require`函数传递SVG图标位置。该道具仅在您也使用自定义`icon`时才有效	`null` (显示默认的响铃图标)
`counterStyle`	计数器盒的形状。可以是以下之一： `roundRectangle` ， `rectangle` ， `round`	`roundRectangle`
`counterBackgroundColor`	计数器框的背景色	`red`
`counterTextColor`	柜台文字颜色	`white`
`animated`	如果为true，则通过动画增加/减少计数器	`true`
`prefixPlus`	如果为true，则上限加号显示为prefix ，否则显示为后缀	`false`