基于 flexible 的 Vue 组件：Toast -- 显示框效果

基于Vue的flexible自适应Toast显示框组件

前言

在当前移动端Vue项目中，我们采用了手淘的适配方案，并结合px2rem自动转换rem。关于lib-flexible和px2rem的配置细节，有兴趣的朋友可以查阅相关资料。使用rem进行适配，确实为移动端开发带来了便利，但也带来了与现有UI框架兼容性的问题。为了项目中的组件复用和提高开发效率，我决定将一些常用的简单组件单独整理。这里分享的Toast显示框组件便是其中之一。

诚挚的请求

此组件是我日常项目中的实践之作，与各位大佬的作品相比，可能在代码质量、复杂程度和复用度上都有所不足。恳请各位不吝赐教，提出宝贵的意见和建议，我将不胜感激。如有任何建议或疑问，欢迎通过GitHub与我联系。

GitHub地址（点击即可访问）

Toast —— 显示框效果展示

让我们先来欣赏一下这个Toast显示框的实际效果。（效果展示图片）

代码

该组件的DOM结构相当简单，主要由一个包含icon小图标和文字说明的div构成。我们利用Vue的props来定义变量值，并通过puted计算属性对传入的值进行解构。我们利用watch来监听弹框的显示状态。结合.sync修饰符，实现双向数据绑定。通过$emit向父组件派发事件，使得父组件能够方便地监听并回调。

组件特点

1. 基于Vue和flexible.js构建，完美适配各种移动设备。

2. 简单的DOM结构和清晰的代码逻辑，便于理解和维护。

3. 通过props传入数据，灵活配置显示内容。

4. 利用puted计算属性和watch监听机制，实现数据的动态更新和弹框状态的实时反馈。

5. 双向数据绑定和事件派发机制，方便与父组件进行交互。

希望这个Toast显示框组件能为你带来便利，同时也期待你的反馈和建议，让我们共同完善和优化这个组件，为移动端的开发带来更多的可能性。dom结构

在前端框架中，我们构建了一个名为“Toast”的通知组件，它以淡入淡出的过渡效果展示给用户。这个组件仅在`toastShow`为真的情况下显示。组件的DOM结构如下：

```html

```

props数据

该组件接受以下几个props数据：

`message`：提示内容，类型为String。

`toastShow`：控制是否显示通知框，类型为Boolean，默认值为false。

`iconClass`：背景图标类名。

`iconImage`：自定义背景图片。

`duration`：定时器，决定通知框显示时长，类型为Number，默认值为1500毫秒。

`position`：弹出框位置，类型为String，默认值为'50%'（表示居中）。

puted

在组件的puted部分，我们定义了几个方法用于处理特定的逻辑：

`positionTop()`：返回通知框的顶部位置样式。

`iconBg()`：根据传入的`iconImage`自定义背景图片样式。

`iconIsShow()`：判断图标是否应该显示，根据`iconClass`的不同值做出决策。

watch

我们监视`toastShow`的变化，当`toastShow`为真时，根据`duration`的值决定是否立即关闭通知框，或者是在定时器结束后关闭。若`duration`小于0，则立即关闭通知框；否则，利用setTimeout在指定时间后关闭通知框，并通过`.sync`实现双向数据绑定更新`toastShow`的值。

使用说明

要使用这个Toast组件，需要将其下载并放入自己的项目中。然后通过import引入组件，在components中注册该组件即可使用。关于props的使用，可以通过传入不同的参数来定制通知框的显示内容、样式和时长等。例如：

```html

```

Vue组件Toast的奥秘：自动关闭与个性化设置

在Vue开发中，Toast组件已经成为许多开发者喜爱的提示工具。今天，我们将深入一个基于flexible设计的Vue Toast组件，带您了解如何轻松实现自动关闭以及个性化设置。

一、Toast组件简介

Toast是一种轻量级的提示框，用于在页面中显示信息、警告或提示用户。它不会占据整个屏幕，而是在短暂的时间内自动消失。基于flexible设计的Toast组件，能够适应各种屏幕尺寸，提供良好的用户体验。

二、默认效果：只有提示信息

使用Toast组件时，最简单的用法是只提供提示信息。例如：

```vue

```

这里，我们使用了`.sync`修饰符来实现自动关闭的效果。这是Vue提供的一种双向数据绑定机制，使得子组件能够修改父组件的状态。

三、增加自带小图标

Toast组件支持添加小图标，以增加提示信息的辨识度。例如：

```vue

```

通过`iconClass`属性，我们可以选择预设的小图标，如“成功”、“警告”和“关闭”等。

四、自定义设置

Toast组件还提供了许多可自定义的属性，如显示位置、显示时间和自定义图标等。以下是一个自定义设置的示例：

```vue

```

在data中，我们需要使用`require`引入自定义图标，并定义相关属性和方法。例如：

```javascript

data() {

return {

isShow5: true,

bg: require('../assets/logo.png') // 图片必须用require进来

}

},

methods: {

isClose5() {

setTimeout(() => {

this.isShow5 = false;

}, 2000);

}

}

```

五、总结与感谢

以上就是我们给大家介绍的基于flexible的Vue组件Toast。希望大家能够更好地理解和使用Toast组件，实现个性化的提示效果。如果您有任何疑问或建议，请留言给我们，我们会及时回复。也非常感谢大家对狼蚁SEO网站的支持！如果您觉得这篇文章对您有帮助，请点赞、分享给更多的开发者朋友。谢谢！