天給大家推薦一款超美觀的pc端vue.js彈窗組件VueJsModal。
vue-js-modal 基于Vue構(gòu)建的Modal對話框組件。單獨組件,方便使用。支持拖拽、縮放、異步調(diào)用組件。
安裝
$ npm i vue-js-modal -S
引入組件
// 在main.js中引入
import Vue from 'vue'
import VModal from 'vue-js-modal'
import 'vue-js-modal/dist/styles.css'
Vue.use(VModal)
調(diào)用方式
<template>
<modal name="example"
:width="300"
:height="300"
:resizable="true"
:draggable="true"
:adaptive="true"
@before-open="beforeOpen"
@opened="Opened"
@before-close="beforeClose"
@closed="Closed"
>
Hello, VueModal!
</modal>
</template>
<script>
export default {
data() {
return {}
},
mounted() {
this.$modal.show('example')
},
methods: {
beforeOpen(event) {
console.log('Opening...')
},
Opened(event) {
console.log('Opened...')
},
beforeClose(event) {
console.log('Closing...')
},
Closed(event) {
console.log('Closed...')
}
}
}
</script>
調(diào)用內(nèi)部 show、hide 方法顯示和隱藏彈窗
<template>
<modal name="my-first-modal">
This is my first modal
</modal>
</template>
<script>
export default {
mounted () {
this.show()
},
methods: {
show () {
this.$modal.show('my-first-modal');
},
hide () {
this.$modal.hide('my-first-modal');
}
}
}
</script>
另外還支持Modal動態(tài)調(diào)用組件
import MyComponent from './MyComponent.vue'
this.$modal.show(
MyComponent,
{ text: 'This text is passed as a property' },
{ draggable: true }
)
// or
this.$modal.show(
{
template: `
<div>
<h1>This is created inline</h1>
<p>{{ text }}</p>
</div>
`,
props: ['text']
},
{ text: 'This text is passed as a property' },
{ draggable: true, resizable: true },
{ 'before-close': event => {} }
)
附上模態(tài)框示例及倉庫地址
# demo地址
http://vue-js-modal.yev.io/
# 項目地址
https://github.com/euvl/vue-js-modal
ok,這次就分享到這里。如果大家有其它Vue彈窗組件,歡迎留言討論~
teleport 傳送門組件,提供一種簡潔的方式,可以指定它里面的內(nèi)容的父元素。通俗易懂地講,就是 teleport 中的內(nèi)容允許我們控制在任意的 DOM 中,使用簡單。
使用語法:
<teleport to="body">
<div>
需要創(chuàng)建的內(nèi)容
</div>
</teleport>
to 屬性是指定 teleport 中的內(nèi)容加入的 DOM 元素。可以是標簽名,也可以是 id 或類名。
//標簽名 。上述實例就是加入body元素內(nèi),使用的是標簽名。
<teleport to="body"></teleport>
//類名。如:to=".className"
<teleport to=".className"></teleport>
//id名
<teleport to="#idName"></teleport>
1.1、多個 teleport 使用
多個 teleport 傳送門組件可以將內(nèi)容都掛載到一個目標上,多個 teleport 組件內(nèi)容就是兄弟節(jié)點,先掛載的在前面,后掛載的在后面。
使用如下:
<teleport to="body">
<div class="first">
第一個掛載元素
</div>
</teleport>
<teleport to="body">
<div class="second">
第二個掛載元素
</div>
</teleport>
運行結(jié)果如圖:
上邊的實例等價于:
<teleport to="body">
<div class="first">
第一個掛載元素
</div>
<div class="second">
第二個掛載元素
</div>
</teleport>
使用 vue 開發(fā)時,都是多個組件之間不斷地嵌套,處理元素的樣式或者層級的時候就會變得困難。如我們需要添加一個 modal 模態(tài)框或 toast 提示框,如果我們把這樣的框可以從 vue 組件中剝離出來,我們樣式和層級設(shè)置起來會更加簡便。
有些同學會想,這直接放到 index.html 中不就好了嗎?另外 modal 、toast 元素需要使用 vue 組件的狀態(tài)值,通過狀態(tài)控制 modal、toast 的隱藏顯示。如果直接放入 index.html 則狀態(tài)控制就復雜了。
所以 teleport 傳送門組件就派上用場了。有點像“哆啦A夢”的任意門,可以把元素傳送到任意的元素內(nèi)。同時還可以使用 vue 組件內(nèi)的狀態(tài)值控制它。
使用 vite + vue 3 創(chuàng)建的項目,具體如何創(chuàng)建項目請查看《什么,你還使用 webpack?別人都在用 vite 搭建項目了》文章。
vue 3 的項目創(chuàng)建完成之后,找到 index.htm 文件,添加:
<div id="newModal"></div>
組件文件內(nèi),添加 teleport 組件:
<button @click="showModal" class="btn">打開 modal </button>
<!-- to 屬性就是目標位置 -->
<teleport to="#newModal">
<div v-if="visible">
<div >我是一個 Modal 框</div>
</div>
</teleport>
運行結(jié)果,我們發(fā)現(xiàn)使用的 teleport 組件,通過 to 屬性,將內(nèi)容傳送到<div id="newModal"></div>內(nèi),該元素與<div id="app"></div>同級。此時 teleport 中的元素隱藏顯示完全由 vue 組件內(nèi)的狀態(tài)值決定。
有些同學在自己的項目內(nèi),直接引入了 teleport 傳送門組件,運行以后發(fā)現(xiàn)該組件原樣輸出了,并沒有被解析,同時還會報錯。
錯誤信息如下:
vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: <teleport> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
然后就在網(wǎng)上各種查解決辦法,最后發(fā)現(xiàn)壓根找不到!
根本原因是你使用的還是 vue2,不是 vue3。有些同學會把 腳手架 vue-cli 3 創(chuàng)建的項目,當作是 vue3 。vue-cli 2 和 vue-cli 3 創(chuàng)建項目與是否是 vue3 沒有必然聯(lián)系的。
為大家介紹如何使用 CSS 來布局圖片。
圓角圖片
實例
圓角圖片:
img {
border-radius: 8px;
}
實例
橢圓形圖片:
img {
border-radius: 50%;
}
嘗試一下 ?
縮略圖
我們使用 border
屬性來創(chuàng)建縮略圖。
實例
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
}
<img src="paris.jpg" alt="Paris">
嘗試一下 ?
實例
a {
display: inline-block;
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
transition: 0.3s;
}
a:hover {
box-shadow: 0 0 2px 1px rgba
(0, 140, 186, 0.5);
}
<a href="paris.jpg">
<img src="paris.jpg" alt="Paris">
</a>
響應(yīng)式圖片
響應(yīng)式圖片會自動適配各種尺寸的屏幕。
實例中,你可以通過重置瀏覽器大小查看效果:
如果你需要自由縮放圖片,且圖片放大的尺寸不大于其原始的最大值,則可使用以下代碼:
實例
img {
max-width: 100%;
height: auto;
}
嘗試一下 ?
提示: Web 響應(yīng)式設(shè)計更多內(nèi)容可以參考 CSS 響應(yīng)式設(shè)計教程。
圖片文本
如何定位圖片文本:
實例
左下角左上角右上角右下角居中
嘗試一下:
左上角 ? 右上角 ? 左下角 ? 右下角 ? 居中 ?
卡片式圖片
實例
div.polaroid {
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
img {width: 100%}
div.container {
text-align: center;
padding: 10px 20px;
}
圖片濾鏡
CSS filter
屬性用為元素添加可視效果 (例如:模糊與飽和度) 。
注意: Internet Explorer 或 Safari 5.1 (及更早版本) 不支持該屬性。
實例
修改所有圖片的顏色為黑白 (100% 灰度):
img {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}
提示: 訪問 CSS 濾鏡參考手冊 查看更多內(nèi)容。
響應(yīng)式圖片相冊
實例
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}
@media only screen and (max-width: 700px){
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px){
.responsive {
width: 100%;
}
}
嘗試一下 ?
圖片 Modal(模態(tài))
本實例演示了如何結(jié)合 CSS 和 JavaScript 來一起渲染圖片。
首先,我們使用 CSS 來創(chuàng)建 modal 窗口 (對話框), 默認是隱藏的。
然后,我們使用 JavaScript 來顯示模態(tài)窗口,當我們點擊圖片時,圖片會在彈出的窗口中顯示:
實例
// 獲取模態(tài)窗口
var modal = document.getElementById('myModal');
// 獲取圖片模態(tài)框,alt 屬性作為圖片彈出中文本描述
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
modalImg.alt = this.alt;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
*請認真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。