色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

vue message顯示位置

洪振霞2年前11瀏覽0評論

Vue的Message組件可以用來在頁面上顯示提示信息,但是默認情況下,Message的位置并不一定符合我們的需求。本文將詳細介紹如何設置Message組件的顯示位置。

要調整Message的顯示位置,我們可以使用Vue.prototype.$message的options參數。在這個參數中,我們可以設置Message組件的position屬性。position接受五個值,分別是top-left、top-right、top-center、bottom-left和bottom-right。

Vue.prototype.$message({
message: 'Hello world',
type: 'success',
position: 'top-right'
});

上面的代碼中,我們將Message組件的位置設置為了右上角。

如果我們希望將Message組件的位置設置為屏幕的中央,我們可以使用以下代碼:

Vue.prototype.$message({
message: 'Hello world',
type: 'success',
center: true
});

上面的代碼中,我們通過center屬性將Message組件的位置設置為了屏幕的中央。

除了通過options參數來設置Message組件的位置,我們還可以通過CSS的方式來修改它的位置。在Message組件中,我們可以使用el屬性來獲取這個組件的DOM元素。通過修改DOM元素的樣式,我們就可以調整Message組件的位置。

Vue.prototype.$message({
message: 'Hello world',
type: 'success',
onClose: function () {
var messageDom = document.getElementsByClassName('el-message')[0];
messageDom.style.top = '100px';
messageDom.style.left = '50%';
messageDom.style.transform = 'translate(-50%, 0)';
}
});

上面的代碼中,我們通過onClose屬性來獲取Message組件的DOM元素,然后通過修改top和left屬性將它的位置設置在了屏幕的中央。

在實際項目中,我們可以將上面兩種方法結合起來使用,通過options參數來設置Message組件默認的顯示位置,然后在必要時通過CSS來調整它的位置。

總之,調整Message組件的顯示位置是一個非常簡單的操作,采用合適的方法可以讓我們的頁面更加美觀和易用。