const activeClientChange = reactive<{client: null | INewClient}>({
client: null
})
const options = {
root: null,
rootMargin: '0px',
threshold: 1.0
}
const svg = document.querySelector('svg')
const animation = document.getElementById('animate')
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
animation.beginElement()
svg.style.display = 'block'
}
})
}, options)
observer.observe(document.querySelector('#anim1'))<animate id="animate" .../>
margin - для поведения блока относительно родителя и соседних блоков, padding - для поведения содержимого блока. исходите из ситуации, как для вас будет правильно. .page__body либо будет физически отодвинут от родителя(или соседнего блока) сверху на 13px (margin-top), либо он останется на месте, но его содержимое будет на 13px ниже (padding-top)
<template>
<input :value="props.modelValue"
@input="$event => emit('update:modelValue', $event.target.value)"
/>
</template>
<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
</script><template>
<new-component v-model="refInput" />
</template>
<script setup>
import { ref } from 'vue'
import NewComponent from './new-component'
const refInput = ref('')<template>
<child-component v-bind="globalObject"/>
</template>
<script setup>
// import { Alien, DevTools, Test, ChildComponent } from 'where?'
import { reactive } from 'vue'
const globalObject = reactive({prop1, prop2, prop3})
</script>import beacon from './assets/beacon.svg'
import cloud from './assets/cloud.svg'
import sun from './assets/sun.svg'
export const images = { sun, beacon, cloud }const props = withDefaults(defineProps<{
datalist?: datalist,
id?: strnum,
idKey?: strnum,
valueKey?: strnum,
placeholder?: string,
}>(), {
datalist: () => [] as datalist,
idKey: 'id',
valueKey: 'value',
placeholder: '',
});npm create vue@latest
address в p.p будет в p
function showImages(resReceived) {
par.innerHTML = `<img src=${resReceived.image} width='100px' >`
}const createTimerAnimator = () => {
let intervalId
return (time) => {
if (intervalId) clearInterval(intervalId)
const visibleResult = () => {
const formatter = Intl.NumberFormat(undefined, {
minimumIntegerDigits: 2
})
const hours = formatter.format(Math.floor(time / 60 / 60))
const minutes = formatter.format(Math.floor(time / 60) - (hours * 60))
const seconds = formatter.format(time % 60)
timerEl.textContent = `${hours} : ${minutes} : ${seconds}`
}
visibleResult()
intervalId = setInterval(() => {
if (time > 0) {
visibleResult(time--)
} else {
clearInterval(intervalId)
}
}, 1000)
}
}