Задать вопрос

r_g_b_a

Лайки

  • Как сделать передачу данных на страницу для печати?

    Xuxicheta
    @Xuxicheta
    инженер 
    function openWindowAndPrint(context, title = 'Документ') {
  const win = window.open();
  win.document.write(context);
  win.document.title = title;
  win.focus(); // Required for IE

  ensureImagesLoaded(win.document).then(() => win.print());
  win.onafterprint = () => win.close();

  return win;
}

function ensureImagesLoaded(document, waitTime = 7000) {
  const images = document.querySelectorAll('img');
  const loadedList = Array.from(images).map(imageLoadToPromise);
  const timeout = new Promise(resolve => setTimeout(resolve, waitTime));

  return Promise.race([timeout, Promise.all(loadedList)]);
}

function imageLoadToPromise(img) {
  return new Promise(resolve => img.addEventListener('load', resolve));
}


    Еще можно открывать для печати специально подготовленную страницу, на который скрипт слушает событие message.
    И отправлять примерно так
    win.onload = () => win.postMessage({
      method: 'sendFileData',
      payload,
    }, '*');


    windows.open(). Если вызывать через onclick, проблем с блокировкой окна быть не должно?

    Обычно браузеры не блокирует попапы, вызванные действиями пользователя.

    p.s. Если кто знает способ попроще узнать момент, когда загрузились все картинки - welcome
    Ответ написан
    Комментировать
    Комментировать

  • Как в vue использовать результаты с computed в data?

    0xD34F
    @0xD34F Куратор тега Vue.js
    Добавьте в option'ы свойство, которое будет указывать, на что надо умножать price:

    options: [
  {
    ...
    propToBeMultipliedByPrice: 'area',
  },
  {
    ...
    propToBeMultipliedByPrice: 'perimeter',
  },
],

    И умножайте:

    {{ option.price * calc[option.propToBeMultipliedByPrice] }}
    Ответ написан
    5 комментариев
    5 комментариев

  • Как в vue использовать результаты с computed в data?

    firedragon
    @firedragon
    Не джун-мидл-сеньор, а трус-балбес-бывалый.
    То что в {{}} это ява скрипт так что можете писать любое выражение.
    Хотя лучше добавить 2 метод calculateMargin и вызывать его вместо даты
    Ответ написан
    2 комментария
    2 комментария

  • Как подсветить активный пункт подменю?

    0xD34F
    @0xD34F Куратор тега Vue.js
    Пусть active вместо индекса содержит ссылку на сам элемент массива:

    <div @click="active = subcat" :class="{ active: active === subcat }">
    Ответ написан
    Комментировать
    Комментировать

  • Как суммировать все значения отмеченных checkbox?

    Kozack
    @Kozack Куратор тега Vue.js
    Thinking about a11y
    Можно использовать геттеры. Например как-то вот так:
    class CheckBoxCalc {
	constructor(text, callback) {
  	this.text = text
  	this.cb = callback
  }
  
  get value() {
  	return this.cb()
  }
}


new Vue({
  el: "#app",
  data: {
  	checkedNumbers: [],
    checkbox: [
    	new CheckBoxCalc('Checkbox 1', () => 10),
      new CheckBoxCalc('Checkbox 2', () => Math.floor(Date.now() / 10000000)),
      new CheckBoxCalc('Checkbox 3', () => Math.floor(Math.random() * 100)),
    ]
  },
  computed: {
  	sum() {
    	return this.checkedNumbers.reduce((acc, index) => {
      	return acc + this.checkbox[index].value
      }, 0);
    }
  }
})

    Выглядит немножечко колхозно, но там уж сами до ума доведете
    Ответ написан
    Комментировать
    Комментировать

  • Как суммировать все значения отмеченных checkbox?

    kleinmaximus
    @kleinmaximus
    Senior Full-stack Javascript Developer
    https://jsfiddle.net/KleinMaximus/sohzx029/
    Ответ написан
    Комментировать
    Комментировать

  • Как в vue выводить данные по клику?

    0xD34F
    @0xD34F Куратор тега Vue.js 
    <div @click="changeCategory(subcat)">
...
<div v-for="(v, k) in active">{{ k }}: {{ v }}</div>

    changeCategory({ a, b }) {
  this.active = { a, b };
},

    Как сделать, чтобы при загрузке сайта первый пункт первого меню уже был выбранным?

    created() {
  this.changeCategory(this.categories[0].sub[0]);
},
    Ответ написан
    Комментировать
    Комментировать

  • Как в jquery выбрать первые элементы коллекции?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Получить отдельно, объединить:

    $('div').eq(0).add($('span').eq(0))

    Можно функцию сделать, которая будет принимать массив селекторов:

    const getFirst = selectors => selectors.reduce((acc, n) => acc.add($(n).eq(0)), $());

const $first = getFirst([ 'div', 'span' ]);
    Ответ написан
    Комментировать
    Комментировать

  • Как в БЭМ обнулять браузерные стили, правильно создавать модификаторы, независимые блоки?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    1)
    они просто прописали margin: 0, что идет в разрез с их же правилами

    — Нет, как раз нулевое значение для всех блоков и позволяет соблюсти «невлияние на внешнюю геометрию». Т. е. это нормально и допустимо для любого блока — обнулить его margin, position (border'ы, в принципе, можно оставить при указании корректного box-sizing)

    2) в идеале должно быть достаточно «сделать только класс button_size_small», а за порядком должен следить сборщик. Если использовать «вложенные селекторы», то будет нагляднее:

    .button {
  padding: 20px;

  &_size_small {
    padding: 10px;
  }
}


    3) Размер шрифта вполне может быть задан в модификаторе size:

    .heading {
  margin: 0;
  font-feight: bold;

  &_size_s { font-size: 18px; }
  &_size_m { font-size: 24px; }
  &_size_l {  font-size: 30px; }
}


    А тот, кто будет менять положение блока в HTML, помимо «вырезать-вставить» сможет ещё и обновить модификатор, изменив размер шрифта без залезания в CSS.

    4) Следовать БЭМ достаточно непросто, если держать эти правила в голове. БЭМ-разработчики используют инструменты (т. н. «БЭМ-стек»), которые автоматизируют всю рутину, но порог вхождения достаточно высок. Могу лишь посоветовать не стесняться задавать подобные вопросы в чатике https://t.me/bem_ru
    Ответ написан
    2 комментария
    2 комментария