# optimat-vue-toast

> Toast提示

Latest version **0.1.3** (published 2018-12-11) · ISC license · 0 weekly downloads

## Install

```sh
npm install optimat-vue-toast
pnpm add optimat-vue-toast
yarn add optimat-vue-toast
bun add optimat-vue-toast
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2018-12-11 |
| First published | 2018-04-12 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 709.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Changeden |
| Maintainers | changeden, esang13, fly2688, unizonetech |
| Keywords | vuejs, webpack, nodejs, pageSelector |

## Links

- npm: https://www.npmjs.com/package/optimat-vue-toast
- Repository: https://github.com/ChangedenCZD/optimat-vue-base-component-framework
- Homepage: https://github.com/ChangedenCZD/optimat-vue-base-component-framework#readme
- Issues: https://github.com/ChangedenCZD/optimat-vue-base-component-framework/issues
- npm.io page: https://npm.io/package/optimat-vue-toast

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 0.1.3 (latest) — 2018-12-11
- 0.1.2 — 2018-04-25
- 0.1.1 — 2018-04-23
- 0.1.0 — 2018-04-23
- 0.0.20 — 2018-04-23
- 0.0.19 — 2018-04-23
- 0.0.18 — 2018-04-16
- 0.0.17 — 2018-04-12
- 0.0.16 — 2018-04-12
- 0.0.15 — 2018-04-12
- 0.0.14 — 2018-04-12
- 0.0.13 — 2018-04-12
- 0.0.12 — 2018-04-12
- 0.0.11 — 2018-04-12
- 0.0.10 — 2018-04-12
- … 9 more at https://npm.io/package/optimat-vue-toast/versions

## README

# Toast提示
## 使用方式（Usage）
### 安装（Install）
``
npm install optimat-vue-toast -save
``

### 导入（Import）
#### *.js
```javascript
import {mapActions, mapGetters} from 'vuex';
import ToastLayout from 'optimat-vue-toast'
```
#### *.vue
```vue
<script>
    import ToastLayout from 'optimat-vue-toast'
    import {mapActions, mapGetters} from 'vuex';
    {
        methods: {
            ...mapActions(['showToast']),
            action () {
                this.showToast('content' || {content:'message', duration:1000});
            }
        }
    }
</script>
```
### 标签（Target）
#### *vue
```html
<ToastLayout></ToastLayout>
```

### 引入Vuex（Use Vuex）
[如何引入Vuex](https://vuex.vuejs.org/zh-cn/)
#### actions.js
```js
export const showToast = ({commit}, options) => {
  commit(SHOW_TOAST, options);
};
export const hideToast = ({commit}) => {
  commit(HIDE_TOAST);
};
```
#### getters.js
```js
export const toastOptions = state => state.toastOptions;
```
#### index.js
```js
import Vue from 'vue';
import Vuex from 'vuex';
import * as actions from './actions';
import * as getters from './getters';
Vue.use(Vuex);
const TOAST_DEFAULT_OPTIONS = {
  isShow: false,
  content: '请稍等...',
  duration: 1000
};
let state = {
  toastOptions: TOAST_DEFAULT_OPTIONS
};
let mutations = {
  [SHOW_TOAST] (state, options) {
    let defaultOptions;
    if (typeof options === 'string') {
      defaultOptions = clone(TOAST_DEFAULT_OPTIONS);
      defaultOptions.content = options;
    } else {
      defaultOptions = clone(options || TOAST_DEFAULT_OPTIONS);
    }
    defaultOptions.isShow = true;
    state.toastOptions = defaultOptions;
  },
  [HIDE_TOAST] (state) {
    state.toastOptions = TOAST_DEFAULT_OPTIONS;
  }
};
export default new Vuex.Store({
  actions,
  getters,
  state,
  mutations
});
// clone 方法请查看 optimat-vue-utils 中的 ObjectSupport 工具
```

| Options         | Type     | Description                 | Default |
|-----------------|:--------:|:---------------------------:|:--------:|
| content  | string | 显示内容 | 60000 |
| duration  | number | 显示时长（ms），为300~60000之间 | 1000 |

---
_Source: https://npm.io/package/optimat-vue-toast · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._