Home > Web Front-end > JS Tutorial > How to implement the display box effect in the Vue component Toast

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

亚连
Release: 2018-06-15 14:23:53
Original
1880 people have browsed it

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>
Copy after login

props data

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

computed

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

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)
 }
 }
 }
}
Copy after login

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

propsDescriptionTypeOptional valueDefault value
toastShowControl the display box to show and hide. You need to add the .sync modifier to automatically close, see exampleBooleanfalse
true
false
messagePrompt messageString
iconClassicon small iconStringsuccess
warning
close
iconImageCustomized small icon (image needs to be imported by require)
durationTimer (milliseconds), controls the pop-up display time, a negative number means not to execute the scheduled taskNumber1500
positionBomb 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)
 }
Copy after login

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

相关文章:

如何解决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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template