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('toastClose'); } else { setTimeout(()=>{ this.$emit('update:toastShow', false) // 利用了.sync达到双向数据绑定 this.$emit('toastClose'); }, 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 - useprops
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 = '默认信息' :toastShow.sync = 'isShow1' // 需添加.sync修饰符,才能达到自动关闭的效果,否则只能监听toastClose手动关闭 ></toast> // 关于sync的说明,请看官网(主要是为了达到双向数据绑定,子组件修改父组件状态) // 增加自带小图标 <toast message = 'success' iconClass = 'success' :toastShow.sync = 'isShow2' ></toast> // 自定义类型 <toast message = '自定义' position = '70%' :duration = '-1' //负数代表不执行定时任务,自己根据需要去关闭 :iconImage='bg' // 自定义icon小图标,在data中需require引入,看下面 :toastShow = 'isShow5' // 因为需要手动关闭,所以不需要.sync了 @toastClose = 'isClose5' // 监听回调,手动关闭,看下面 ></toast> data() { return { this.isShow5 : true, bg: require('../assets/logo.png'), // 图片必须用require进来 } }, isClose5() { setTimeout(()=>{ this.isShow5 = false; }, 2000) }
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
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!