type JoinKeys<T extends object> = JoinKeysDeep<T> extends infer J extends Record<
string,
unknown
>
? { [Key in J extends J ? keyof J : never]: J extends J ? J[Key] : never }
: never;
type JoinKeysDeep<
T extends object,
K extends keyof T = JoinKeysDeep.GetKeys<T> & keyof T,
> = K extends K & (string | number)
? T[K] extends object
? JoinKeysDeep<T[K]> extends infer J extends Record<string, unknown>
? J extends J
? Record<`${K | '*'}.${keyof J & (string | number)}`, J[keyof J]>
: never
: never
: Record<K | '*', T[K]>
: never;
namespace JoinKeysDeep {
export type GetKeys<T> = T extends unknown[]
? keyof T &
(number extends T['length']
? // array
number
: // tuple
`${number}`)
: keyof T;
}
const blocks = ref(Array.from({ length: 5 }, (_, i) => (-~i) ** 2));
const active = ref(0);
function next() {
active.value = (active.value + 1 + blocks.value.length) % blocks.value.length;
}
let intervalId = null;
onMounted(() => intervalId = setInterval(next, 500));
onUnmounted(() => clearInterval(intervalId));
<div
v-for="(n, i) in blocks"
v-text="n"
:class="[ 'box-item', { active: i === active } ]"
></div>
:nth-child
- не круто. Лучше сделать компонент, принимающий массив цветов и создающий блоки на его основе. Соответственно, вместо класса будет назначаться цвет фона напрямую, как-то так:<div
v-for="(n, i) in colors"
:style="{ backgroundColor: i === active ? n : '' }"
...
v-for="(address, i) in form.addresses_to" :key="i"
всегда удаляется последний
Vue использует алгоритм, минимизирующий перемещение элементов
scoped
стилей: переданный внутрь класс не будет работать сам по себе, т.к. привязан к scope
родительского компонента, придётся использовать псвевдоселектор :deep()
, а это уже чревато коллизиями.type
:type BaseColumn = { label: string; props: string }
type Column = { type: 'text' } & BaseColumn
type LinkColumn = { type: 'link'; path: string } & BaseColumn
type TableColumn = Column | LinkColumn
keyof
для юниона объектов показывает только те поля, которые есть в каждом из них. Это логично, т.к. к типу TableColumn
ты не можешь обратиться по полую .link
предварительно не сузив тип. union
- строгий. // Не пишите тут лишних типов. Юзаете картинку, оставьте только тип картинки
const img = ref<HTMLImageElement | null>(null);
if (img.value) {
observer.value.observe(img.value);
}
ref
на какой либо DOM элемент или же компонент, это не значит, что он существует в DOM дереве. TS не умеет определять, существует ли html или нет.Что надо делать.?
Не понимаю, с чего начать.
double[] x, double[]y
position: relative
совместно со свойствами top
, right
, bottom
или left
смещает элемент относительно его естественного расположения на странице. Поэтому все работает так, как и должно. Ваш main
естественным образом расположен в верхней части родителя и смещен на 0px. Ну то есть никуда не смещен.position: absolute
.