這篇文章主要介紹了基於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中文網其他相關文章！
