const thumbs = reactive([null, null, null]);
v-for="(swiper, i) in thumbs" @swiper="thumbs[i]=$event" :thumbs="{ swiper }"function escapeRegExp(string) {
return String(string).replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}
// для оптимизации неплохо бы завернуть в memoize-one
const toSpacedRegExp = (needle, ignoreCase = true) => new RegExp(
needle
.trim()
.split(/\s+/)
.map(chunk => '(' + escapeRegExp(chunk) + ')')
.join('(\\S*(?:\\s+\\S*)+?)'),
ignoreCase ? 'i' : ''
);
// для оптимизации неплохо бы завернуть в memoize-one
const toSomeRegExp = (needle, ignoreCase = true) => new RegExp(
needle
.trim()
.split(/\s+/)
.map(chunk => '(' + escapeRegExp(chunk) + ')')
.join('([\\S\\s]*)'),
ignoreCase ? 'i' : ''
);
// Возвращает либо false, либо массив разделённых совпадний
// smartFind('start found rest', 'found') // ['start ', 'found', ' rest']
// smartFind('start found rest', 'start') // ['', 'start', ' found rest']
// удобно для подсвечивания найденного тупо через i % 2
function smartFind(haystack, needle) {
if (!haystack) return false;
if (!needle) return ['', haystack, ''];
// ищем сначала разделённые пробелами: ва ся => ВАся СЯпкин
let result = haystack.split(toSpacedRegExp(needle));
if (result.length > 1) return result;
// ищем хоть какое-то совпадение: ва ся => ВАСЯ пупкин
result = haystack.split(toSomeRegExp(needle));
return result.length > 1 && result;
}http(хз что за сайт, нагуглен из списка "popular websites loaded insecurely") , прекрасно грузит иконку сверху слева.image/<что-то> идёт какая-то ересь и браузер решает попытать счастья на https. Тогда надо поправить MIME types на сервере.https с включенным HSTS. Тогда надо руками удалить из браузера сохранённую метку.
<Row justify="space-around">
<Col flex="none">
...
</Col>
<Col flex="none">
...
</Col>
</Row><Row>
<Col span={12}>
<Row justify="center">
<Col flex="none">
...
</Col>
</Row>
</Col>
<Col span={12}>
<Row justify="center">
<Col flex="none">
...
</Col>
</Row>
</Col>
</Row>class CompatibleBounds {
northEast = [0, 0];
southWest = [0, 0];
constructor(bounds) {
Object.assign(this, bounds);
}
static new(bounds) {
return new this(bounds);
}
get south(){ return this.southWest[1] }
get west(){ return this.southWest[0] }
get north(){ return this.northEast[1] }
get east(){ return this.northEast[0] }
set south(value){ this.southWest[1] = value }
set west(value){ this.southWest[0] = value }
set north(value){ this.northEast[1] = value }
set east(value){ this.northEast[0] = value }
}
const compatibleBounds = CompatibleBounds.new({
"south": 43.106491921792255,
"west": 76.71745650634767,
"north": 43.4065384633472,
"east": 77.13974349365236
});
// или
const compatibleBounds = CompatibleBounds.new({
"northEast": [
76.92894332280319,
43.25695003829279
],
"southWest": [
76.92825667730312,
43.256449960663694
]
});
// на выходе универсальный динамический объект:
compatibleBounds.southWest = [1, 2];
console.log(compatibleBounds.south); // 2
compatibleBounds.south = 3
console.log(compatibleBounds.southWest); // [1, 3]const ThemeProvider: FC = ...;ThemeProvider имеет тип FC, и пофиг что ты там дальше пишешь. Тип FC по умолчанию не имеет children.const ThemeProvider: FC<{children: ...}> = ...;const ThemeProvider = ({ children }: ...) => ...;props, children это поле props, а не верхний аргумент.const ThemeProvider: FC<PropsWithChildren> = ...PropsWithChildren - тип помощник, добавляющий children к объекту, например PropsWithChildren<{
prop2: string;
prop3: number
}>{
children?: ReactNode | undefined;
}type Lettrer = 'a' | 'b' | ...
type Digit = 1 | 2 | ...
...string и просто number.type ZipCode = string;
type GeoCoord = number;transformAssetUrls. Однако открыв доки я вижу там: Converts src to provider optimized URLs
import img from '~/assets/images/header.jpg'?
transform: rotate(-90deg); и какой-нить transform-origin, наиболее удобный.
import Wordpress from '../assets/wordpress-logotype-wmark.png';
import Bitrix from '@/assets/logotip/1c_bitrix_logo.svg.png';
const brandImgs = {
'1C Bitrix': Bitrix,
Wordpress,
};/public и указывать не относительные пути в рамках проекта, а абсолютные от корня:const brandImgs = {
'1C Bitrix': '/logotip/1c_bitrix_logo.svg.png',
'Wordpress': '/logotip/wordpress-logotype-wmark.png',
};dangerouslySetInnerHTML то предварительно её почистить можно так:function removeStyles(html) {
const container = document.createElement('div');
container.innerHTML = html;
container.querySelectorAll('style').forEach(
style => style.remove()
);
return container.innerHTML;
}MutationObserver или банальный setTimeout. Однако в таком случае стили могут успеть отрисоваться до удаления, из-за чего может происходить мерцание.document.createElement, отфильтровая ненужный style. Но всё это уже требует понимания.:)
reactive/ref объекта, чтоб получить эрзац-стор, тупо: // где-нибудь
export const basket = reactive([]); // или ref([]) по вкусу.
// везде где надо
import { basket } from './...'store если можно делать так? Потому что сторы учитывают работу в режиме SSR, а также позволяют удобную отладку в случае множества запутанных связей. store - только pinia, а не vuex. Не вижу причин его не использовать.EventBus: с одной стороны новичку её использовать категорически не рекомендуется, т.к. работа со store куда удобнее, очевиднее и надёжнее. Однако и совсем отрицать её использование тоже не следует, шина отлично подходит для случаев когда мы имеем дело именно с событиями, а не изменением состояния. Т.е. послать какой-нить notification или лог - самое оно, использовать для изменения basket, как в вашем случае - нет.
no-cors на клиенте это не "отключение cors", иначе не было никакого смысла в cors, это метка "мне похрен на ответ, я просто отправляю". Соответственно с такой меткой ты не можешь читать ответ никак.allow-* заголовков и cors не разрешён. Set-Cookie ставит, очевидно, cookie. Напрямую его читать в любом случае нельзя. cookieHTTP-only.HTTP-only куки передаются браузером в запросе самостоятельно, из скрипта к ним доступа нет. Однако он и не нужен. Отправляйте все запросы с credentials: "include" и значение автоматически будет присутствовать в заголовке Cookie..