首頁 >web前端 >js教程 >在Vue 元件Toast中如何實現顯示框效果

在Vue 元件Toast中如何實現顯示框效果

亚连
亚连原創
2018-06-15 14:23:531887瀏覽

這篇文章主要介紹了基於flexible 的Vue 元件:Toast -- 顯示框效果,需要的朋友可以參考下

基於flexible.js 的Vue 元件

前言:

  • 目前手邊的行動端Vue專案是用手淘的lib-flexible 作適配的,並用px2rem 來自動轉換成rem 。關於lib-flexible和px2rem的配置,請移步 vue-cli 配置 flexible 。

  • 由於使用rem作適配,導致現有的許多行動端UI框架不能與之很好的配合,往往需要大動幹戈更改UI框架的樣式,背離了使用UI框架達到快速開發的初衷。

  • 為了以後專案的元件重複使用,以及提升開發可重複使用元件的能力,特把平時專案中 常用的、簡單的 元件單獨拎出來。

  • 此為小白之作,論程式碼品質、難易度、復用度,遠不及各位大佬之傑作,求輕噴。同時,也懇請各位,提出意見和建議,不勝感激!

  • GitHub位址:vue-flexible-components

Toast -- 顯示方塊

#效果展示

 

#程式碼分析

p包含icon小圖示與文字說明,構成簡單的dom結構,利用props定義變數值,用computed計算屬性對傳入的值進行解構,watch監聽彈框顯示,並結合.sync修飾符達到雙向資料綁定,同時用$emit向父元件派發事件,方便父元件監聽回呼。

dom結構

<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資料

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;
 }
},

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;
 }
 }
},

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)
 }
 }
 }
}

使用說明

元件位址: src/components/Toast.vue (不能npm,只能手動下載使用)

下載並放入自己專案中— import 引入元件— components中註冊元件— 使用

props

toastShow##iconClassicon小圖示String#success
props 說明 類型 #預設值

控制顯示框顯示、隱藏。需新增.sync修飾符才能自動關閉,詳見範例######Boolean######false###true
false
message #提示訊息 String
     warning
close
iconImage 自訂小圖示(圖片需require引入)
duration #定時器(毫秒),控制彈框顯示時間,負數代表不執行定時任務 Number 1500
position #彈框位置(距頂) 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中如何实现网页自动秒杀点击(详细教程)

以上是在Vue 元件Toast中如何實現顯示框效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn