<template>
<input class="hover--red"/>
</template>
<style>
.hover--red:hover {
color: #f00
}
</style><script setup>
// ...
const hoverColor = '#f00'
</script>
<template>
<input :style="{'--hover-color': hoverColor}"/>
</template>
<style>
input:hover {
color: var(--hover-color)
}
</style>v-bind в <style>:<script setup>
// ...
const hoverColor = '#f00'
</script>
<template>
<input />
</template>
<style>
input:hover {
color: v-bind(hoverColor)
}
</style>interface CSS {
[k: string]: {
[k: string]: string | number
}
}const css = {
default: {
color: '#676767',
border: '1px solid',
border_color: '#C4C4C4',
border_radius: '110px',
padding: '16px 21px',
}
} satisfies CSS;input с text-align: center и text-indent: -<размер буковки/2>.div с pointer-events:none и копией стилей input, в котором прозрачный span с дублируемым введённым текстом(input.oninput) + span с раскрашенной буковкой.input всегда был шире текста.
<img>, а внутри img многие фишки svg не работают, в т.ч., видимо, и отдельно подгружаемая image. Если очень хочется - впихни картинку как data uri прям в svg.
paths в tsconfig - это чисто справочная информация для подсветки, добавленная из расчёта, что вы уже используете какой-то сборщик который такие пути умеет.
type Returns<T extends readonly Function[]> = {
-readonly [K in keyof T]: T[K] extends (...args: any[]) => PromiseLike<infer R> ? R : never;
};
type Arguments<T extends readonly Function[]> = {
[K in keyof T]?: T[K] extends (args: infer R, ...a: any[]) => any ? R : never;
};
function fetchAll<T extends readonly Function[]>(functions: readonly [...T], data?: Arguments<T>): Promise<Returns<T>> {
return Promise.all(
functions.map((func, index) => func(data?.[index]))
) as Promise<Returns<T>>;
}
const x = fetchAll([
(a:66) => Promise.resolve(42),
(f:string) => Promise.resolve('hello'),
() => Promise.resolve(true),
], [66, '1ff']);const arr = [
(a:66) => Promise.resolve(42),
(f:string) => Promise.resolve('hello'),
() => Promise.resolve(true),
] as const;
const x = fetchAll(arr, [66, '1ff']);next-auth.skipLibCheck в tsconfig. typecript, или старую версию модуля, или случайно подключаешь несколько версий модуля одновременно, или ещё много куда менее вероятных вариантов.
(item: LinkItem) => void, а требуется (data: MobileMegaMenuItem | LinkItem) => void, , т.е. функция которая умеет работать и с тем и с тем. Подразумевается что onClick как раз не умеет и может привести к ошибке, потому и не даёт. export const useOpenMenuByHash = <Data extends MobileMegaMenuItem | LinkItem>(
data: Data[],
action: (data: Data) => void,
actionRoom?: () => void
) => {
//...
};
useOpenMenuByHash(data, onClick); // okuseOpenMenuByHash(data, onClick as (d: LinkItem | MobileMegaMenuItem) => void);conslole.log у тебя в русской "c", о чём намекает даже подсветка тут.npm run съедает параметр --env, т.к. считает его своим, чтоб передавать аргументы в скрипт надо использовать разделитель --: npm run build -- --env mode=development.
If you prefer a plain HTML setup without any build steps, you can use this JSFiddle as your starting point.
<script type="importmap">
{
"imports": {
"vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
}
}
</script>
<div id="app">{{ message }}</div>
<script type="module">
import { createApp } from 'vue'
createApp({
data() {
return {
message: 'Hello Vue!'
}
}
}).mount('#app')
</script><SomeComponent :someProp=""val"/><some-component :some-prop=""val"></some-component>SomeComponent читается как somecomponent, а vue такого не знает, 2 - список тэгов которые могут самозакрываться ограничен.
font-display.
function lazyAsync(lib) {
let promise;
return async function (...args) {
promise ??= lib();
return (await promise).call(this, ...args);
};
}
const doSomething = lazyAsync(async () => {
// тут загружаем
const doSomething = await loadLib('doSomething');
// тут что-то делаем с загруженным
// тут возвращаем конечную функцию
return data => {
// тут делаем с аргументами
return doSomething.process(imgData);
};
});
// если сразу загружается нужная функция - можно не усложнять
const doSomething = lazyAsync(loadDoSomethingProcess);
await doSomething(1);
await doSomething(2);
await doSomething(3);