這篇文章主要介紹了基於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: '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) } } } }
使用說明
元件位址: src/components/Toast.vue (不能npm,只能手動下載使用)
下載並放入自己專案中— import 引入元件— components中註冊元件— 使用
props
props | 說明 | 類型 | #預設值 | |
---|---|---|---|---|
toastShow | 控制顯示框顯示、隱藏。需新增.sync修飾符才能自動關閉,詳見範例######Boolean######false###true | false | ||
message | #提示訊息 | String | ||
icon小圖示 | String | #success |
warning close | |
iconImage | 自訂小圖示(圖片需require引入) | |||
duration | #定時器(毫秒),控制彈框顯示時間,負數代表不執行定時任務 | Number | 1500 | |
position | #彈框位置(距頂) | 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) }
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
以上是在Vue 元件Toast中如何實現顯示框效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!