App.vue
<template>
<img alt="Vue logo" src="./assets/logo.png">
<modal :isOpen="modalisopen" @close-modal="onCloseModal">
插槽
</modal>
<div id="test"></div>
<button @click="openModal" ref="modal">打开模态框</button>
<div class="box">
<div class="box1">
<div class="box2" v-for="(item,index) in arr1" :key="index" :id="`row1-${index}`">{
{
item}}</div>
</div>
<div class="box1">
<div class="box2" v-for="(item,index) in arr2" :key="index" :id="`row2-${index}`">{
{
item}}</div>
</div>
<div class="box1">
<div class="box2" v-for="(item,index) in arr3" :key="index" :id="`row3-${index}`">{
{
item}}</div>
</div>
</div>
</template>
<script lang="ts">
import {
defineComponent, ref, reactive, onMounted, nextTick, Ref, provide} from 'vue';
import modal from './components/modal.vue';
export default defineComponent({
name: 'App',
components: {
modal
},
setup() {
// $ref使用
const modal: Ref<HTMLElement | undefined> =ref<HTMLElement>()
// provide 的使用
const name:Ref<string> = ref('zz')
// 以下是横向瀑布流dome，定义的数组
let arr1:string[] = reactive([])
let arr2:string[] = reactive([])
let arr3:string[] = reactive([])
onMounted(async () => {
// $ref 修改dom时，需要判空，不然会报错
let mymodal = modal.value
console.log(mymodal)
if (mymodal){
mymodal.style.backgroundColor= 'red'
}
// 关于瀑布流代码
let data:string[] = ['设aa计狮','英文zfq1 8','起作用 8','只对中文起作用 8',
'言和非亚洲语言的 8','椭圆形备份 8','椭圆形备份 8','强制不换行 8',
'意字内 8','椭圆形备aa份','以省略号形式 8','言文本 8',
'语言的no 8','亚洲语言和 8','允许在字内换行 8','，不允许 8',
'文本的非亚洲文 8',]
let r1 = 0;
let r2 = 0;
let r3 = 0
console.log(data.length)
let n=0
let m=0
let v=0
for (let i =0;i<data.length;i++) {
let min = Math.min(r1,r2,r3)
if (min === r1){
n++
arr1.push(data[i])
await new Promise(resolve => setTimeout(resolve,10))
let bb = document.querySelector(`#row1-${
arr1.length-1}`)
// console.log(document.querySelector(`#row1-${arr1.length-1}`))
if (bb){
r1 += bb.clientWidth
}
} else if (min === r2){
m++
arr2.push(data[i])
await new Promise(resolve => setTimeout(resolve,10))
let cc = document.querySelector(`#row2-${
arr2.length-1}`)
if (cc){
r2 +=cc.clientWidth
}
} else if (min === r3){
v++
arr3.push(data[i])
await new Promise(resolve => setTimeout(resolve,10))
let dd = document.querySelector(`#row3-${
arr3.length-1}`)
if (dd){
r3 +=dd.clientWidth
}
}
}
console.log(n,m,v)
})
// provide 传值
provide('name',name)
// 关于传送门的代码
const modalisopen = ref(false)
const onCloseModal = () => {
modalisopen.value = false
}
const openModal = () => {
modalisopen.value = true
}
return {
modalisopen,
onCloseModal,
openModal,
arr1,
arr2,
arr3,
name,
modal
}
}
});
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.box {
margin: 0 auto;
height: 200px;
width: 300px;
padding: 40px;
overflow-x: scroll;
border: 1px solid sandybrown;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.box1 {
display: flex;
}
.box2 {
height: 30px;
line-height: 30px;
white-space: nowrap;
border: 1px solid paleturquoise;
margin-left: 10px;
}
</style>
moadl.vue
<template>
<teleport to="#app">
<div class="modal" v-if="isOpen" >
<div id="center">
<h2>
<slot>this is a modal</slot>
</h2>
<button @click="clickButton" ref="mymo">关闭模态框{
{
name}}</button>
</div>
</div>
</teleport>
</template>
<script lang="ts">
import {
defineComponent, inject,onMounted} from 'vue';
export default defineComponent({
name: 'modal',
// 接收父组件传值props方式
props: {
isOpen: Boolean
},
emits:{
'close-modal':null
},
setup(props,cc){
// 关闭传送门，触发父组件方法
const clickButton = ()=>{
cc.emit('close-modal')
}
// inject 接收父组件provide 传递的值
let name:unknown = inject('name')
onMounted(()=>{
console.log(1)
})
return {
clickButton,
name,
}
}
});
</script>
<style scoped>
.modal{
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,.6);
}
#center {
width: 200px;
height: 200px;
border: 2px solid black;
background: white;
position: fixed;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
}
</style>