vue 点击图标切换图标_Vue的动画SweetAlert图标

vue 点击图标切换图标

Vue的动画SweetAlert图标 (Animated SweetAlert Icons for Vue)

A clean and simple Vue wrapper for SweetAlert's fantastic status icons. This wrapper is intended for users who are interested in just the icons. For the standard SweetAlert modal with all of its bells and whistles, you should probably use Vue-SweetAlert 2

一个干净简单的Vue包装器，用于SweetAlert的出色状态图标。 该包装器仅适用于仅对图标感兴趣的用户。 对于带有所有铃声的标准SweetAlert模态，您可能应该使用Vue-SweetAlert 2

安装 (Install)

npm install --save vue-sweetalert-icons

进口 (Import)

import SweetAlertIcons from 'vue-sweetalert-icons';

Vue.use(SweetAlertIcons);

If you're using Nuxt, you might need additional steps (read more)

如果您使用的是Nuxt，则可能需要其他步骤(了解更多信息)

用 (Use)

<template>
    <!-- Icon can be one of: "success", "warning", "info", "error" and "loading" -->
    <sweetalert-icon icon="success" />
</template>

替代用法 (Alternative Usage)

If you'd rather not use the package globally, you can import SweetalertIcon for use with a single vue component/instance instead:

如果您不想在全球范围内使用该软件包，则可以导入SweetalertIcon以便与单个vue组件/实例一起使用：

<template>
    <sweetalert-icon icon="success"></sweetalert-icon>
</template>

<script>
    import SweetalertIcon from 'vue-sweetalert-icons';

    export default {
        components: { SweetalertIcon },
    }
</script>

Nuxt的用法 (Usage with Nuxt)

Due to an issue with the way styles are injected into Nuxt, please wrap <sweetalert-icon /> around <no-ssr> tags.

由于样式注入Nuxt的方式存在问题，请在<no-ssr>标记周围包裹<sweetalert-icon /> 。

<no-ssr>
    <sweetalert-icon icon="info" />
</no-ssr>

翻译自: https://vuejsexamples.com/animated-sweetalert-icons-for-vue/

vue 点击图标切换图标