How to implement the display box effect in the Vue component Toast

This article mainly introduces the Vue component based on flexible: Toast - display box effect, friends who need it can refer to

Vue component based on flexible.js

Foreword:

• The current mobile Vue project at hand is adapted by lib-flexible from Taobao, and px2rem is used to automatically convert it into rem . For the configuration of lib-flexible and px2rem, please go to vue-cli configuration flexible.

• Due to the use of rem for adaptation, many existing mobile UI frameworks cannot cooperate well with them. It is often necessary to go to great lengths to change the style of the UI framework, which deviates from the use of UI frameworks. Achieve the original intention of rapid development.

• In order to reuse components in future projects and improve the ability to develop reusable components, we have isolated the commonly used and simple components in daily projects.

• This is the work of a novice. In terms of code quality, difficulty, and reusability, it is far inferior to the masterpieces of all the masters. Please give me some credit. At the same time, we also sincerely invite you to give us your comments and suggestions, which will be greatly appreciated!

• GitHub address: vue-flexible-components

##Toast -- Display box

Effect display

Code analysis

p contains icon small icon and text description , forming a simple dom structure, using props to define variable values, using computed properties to deconstruct the incoming values, watch to monitor the pop-up display, and combine with the .sync modifier to achieve two-way data binding, and use $emit to the parent component Dispatch events so that parent components can listen for callbacks.

dom structure

<transition name="fade">
 <p class="Toast" v-if="toastShow">
 <p
 class="box"
 :style="positionTop"
 >
 <span
 :class="iconClass"
 :style="iconBg"
 v-if="iconIsShow"
 ></span>
 <p
 v-if="message"
 >{{message}}</p>
 </p>
 </p>
</transition>

props data

props: {
 message: { // 提示内容
 type: String,
 },
 toastShow: { // 是否显示
 type: Boolean,
 default: false
 },
 iconClass: { // 背景图片
 type: String,
 },
 iconImage: { // 自定义背景图片
 },
 duration: { // 定时器
 type: Number,
 default: 1500
 },
 position: { // 弹出框位置
 type: String,
 default: '50%'
 }
},

computed

computed: {
 // 用于判断显示框位置
 positionTop() {
 return {
 top: this.position
 }
 },
 // 自定义父组件传过来的背景图片
 iconBg() {
 if (this.iconImage) {
 return {
 backgroundImage: `url(${this.iconImage})`
 }
 } else {
 return;
 }
 },
 // 用于判断icon是否显示
 iconIsShow() {
 if (this.iconClass == 'success') {
 return true;
 } else if (this.iconClass == 'close') {
 return true;
 } else if (this.iconClass == 'warning') {
 return true;
 } else if (this.iconImage) {
 return true;
 } else {
 return false;
 }
 }
},

watch

watch: {
 toastShow() {
 // 监听toast显示，向父组件派发事件
 if (this.toastShow) {
 if (this.duration < 0) {
 this.$emit(&#39;toastClose&#39;);
 } else {
 setTimeout(()=>{
  this.$emit(&#39;update:toastShow&#39;, false) // 利用了.sync达到双向数据绑定
  this.$emit(&#39;toastClose&#39;);
 }, this.duration)
 }
 }
 }
}

Instructions for use

Component address: src/components/Toast.vue (cannot npm, can only be downloaded and used manually)

Download and put it into your own project - import the component - register the component in components - use

props

props	Description	Type	Optional value	Default value
toastShow	Control the display box to show and hide. You need to add the .sync modifier to automatically close, see example	Boolean	false true	false
message	Prompt message	String
iconClass	icon small icon	String	success warning close
iconImage	Customized small icon (image needs to be imported by require)
duration	Timer (milliseconds), controls the pop-up display time, a negative number means not to execute the scheduled task	Number		1500
position	Bomb position (from top)	String		'50%'

$emit

$emit	说明	参数
toastClose	弹框关闭回调

示例

// 默认效果，只有提示信息
 <toast
 message = &#39;默认信息&#39;
 :toastShow.sync = &#39;isShow1&#39; // 需添加.sync修饰符，才能达到自动关闭的效果，否则只能监听toastClose手动关闭
 ></toast>  // 关于sync的说明，请看官网（主要是为了达到双向数据绑定，子组件修改父组件状态）
 
 // 增加自带小图标
 <toast
 message = &#39;success&#39;
 iconClass = &#39;success&#39;
 :toastShow.sync = &#39;isShow2&#39;
 ></toast>
// 自定义类型
 <toast
 message = &#39;自定义&#39;
 position = &#39;70%&#39;
 :duration = &#39;-1&#39; //负数代表不执行定时任务，自己根据需要去关闭
 :iconImage=&#39;bg&#39; // 自定义icon小图标，在data中需require引入，看下面
 :toastShow = &#39;isShow5&#39; // 因为需要手动关闭，所以不需要.sync了
 @toastClose = &#39;isClose5&#39; // 监听回调，手动关闭，看下面
 ></toast>
 
 data() {
 return {
 this.isShow5 : true,
 bg: require(&#39;../assets/logo.png&#39;), // 图片必须用require进来
 }
 },
 isClose5() {
 setTimeout(()=>{
 this.isShow5 = false;
 }, 2000)
 }

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

如何解决Router跨模块跳转问题

详细解读react后端渲染模板

在React中有关高阶组件详细介绍

在Javascript中如何实现网页抢红包

在JS中如何实现网页自动秒杀点击（详细教程）

The above is the detailed content of How to implement the display box effect in the Vue component Toast. For more information, please follow other related articles on the PHP Chinese website!