<commit_before><template lang="md">
# Notice 通知提醒

相对于`Message`, `Notice`通知提醒的方式更加醒目，常用于系统推送、主动通知等。

> XCUI为`Vue.prototype`添加了全局方法`$Notice`, 如果您完整引入了XCUI， 可以直接使用如`this.$Notice.info('some message')`的方式进行通知提示操作。
> 当然，您也可以使用`import Notice from 'xcui/components/notice'` 的单组件方式调用。
> Notice在XCUI中被注册为一个[Vue 插件](https://vuejs.org/v2/guide/plugins.html), 在**单文件引入**时，请使用`Vue.use(Notice)` 挂载，再进行使用。

::: demo 基本使用，默认在4.5s后关闭。如果`desc`选项未填，则仅展示标题。

```html

<tpl>
    <x-button @click="notice0">展示提醒（仅标题）</x-button>
    <x-button type="primary" @click="notice1">展示提醒</x-button>
</tpl>

<script>
    export default {
        methods: {
            notice0() {
                this.$Notice.open({
                    title: '这是通知标题',
                    desc: ''
                });
            },
            notice1() {
                this.$Notice.open({
                    title: '这是通知标题',
                    desc: '这里是通知描述这里是通知描述这里是通知描述这里是通知描述这里是通知描述'
                });
            }
        }
    };
</script>

```

:::


## 不同类型的通知消息

::: demo 通过使用 `.info()`, `.success()`, `.warning()`, `.danger()` 展示不同类型的通知消息

```html

<tpl>
    <x-button type="info" @click="notice2">info</x-button>
    <x-button type="success" @click="notice3">success</x-button>
    <x-button type="warning" @click="notice4">warning</x-button>
    <x-button type="danger" @click="notice5">danger</x-button>
</tpl>

<script>
    export default {
        methods: {
            notice2() {<commit_msg>fix typo in notice demo (#140)<commit_after><template lang="md">
# Notice 通知提醒

相对于`Message`, `Notice`通知提醒的方式更加醒目，常用于系统推送、主动通知等。

> XCUI为`Vue.prototype`添加了全局方法`$Notice`, 如果您完整引入了XCUI， 可以直接使用如`this.$Notice.info('some message')`的方式进行通知提示操作。
> 当然，您也可以使用`import Notice from 'xcui/components/notice'` 的单组件方式调用。
> Notice在XCUI中被注册为一个[Vue 插件](https://vuejs.org/v2/guide/plugins.html), 在**单文件引入**时，请使用`Vue.use(Notice)` 挂载，再进行使用。

::: demo 基本使用，默认在4.5s后关闭。如果`desc`选项未填，则仅展示标题。

```html

<tpl>
    <x-button @click="notice0">展示提醒（仅标题）</x-button>
    <x-button type="primary" @click="notice1">展示提醒</x-button>
</tpl>

<script>
    export default {
        methods: {
            notice0() {
                this.$Notice.open({
                    title: '这是通知标题',
                    desc: ''
                });
            },
            notice1() {
                this.$Notice.open({
                    title: '这是通知标题',
                    desc: '这里是通知描述这里是通知描述这里是通知描述这里是通知描述这里是通知描述'
                });
            }
        }
    };
</script>

```

:::


## 不同类型的通知消息

::: demo 通过使用 `.info()`, `.success()`, `.warning()`, `.error()` 展示不同类型的通知消息

```html

<tpl>
    <x-button type="info" @click="notice2">info</x-button>
    <x-button type="success" @click="notice3">success</x-button>
    <x-button type="warning" @click="notice4">warning</x-button>
    <x-button type="danger" @click="notice5">error</x-button>
</tpl>

<script>
    export default {
        methods: {
            notice2() {
{'fraction_non_alphanumeric': 0.18498478187352047, 'fraction_numerical': 0.009130875887724045, 'mean_word_length': 2.5298329355608593, 'pattern_counts': {'":': 0, '<': 43, '<?xml version=': 0, '>': 49, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5355376', 'n_tokens_mistral': 1358, 'n_tokens_neox': 1391, 'n_words': 151}