Все сервисы Хабра

Сообщество IT-специалистов

Ответы на любые вопросы об IT

Профессиональное развитие в IT

Удаленная работа для IT-специалистов

Войти на сайт
  • Все вопросы
  • Все теги
  • Пользователи

Хабр Q&A — вопросы и ответы для IT-специалистов

Получайте ответы на вопросы по любой теме из области IT от специалистов в этой теме.

Узнать больше
другие проекты хабра
  • Хабр
  • Карьера
  • Фриланс
Задать вопрос

z_u_l

  • 1
    вклад
  • 79
    вопросов
  • 4
    ответа
  • 25%
    решений
Лайки
  • Информация
  • Ответы
  • Вопросы
  • Комментарии
  • Подписки
  • Нравится
  • Всплывающий placeholder, как переписать с jQuery на Vue.js?

    0xD34F
    0xD34F @0xD34F Куратор тега Vue.js
    Вместо прямого добавления/удаления класса сделайте динамическую привязку в зависимости от текущего значения инпута. Чтобы упростить повторное использование, сделайте компонент: принимает в качестве параметров значение и плейсхолдер, при редактировании пользователем инпута выбрасывает соответствующее событие с новым значением.

    props: [ 'value', 'placeholder' ],

    <div>
      <input
        :class="value ? 'input_filled' : ''"
        :value="value"
        @input="$emit('input', $event.target.value)"
      >
      <span>{{ placeholder }}</span>
    </div>

    https://jsfiddle.net/2415wkmg/
    Ответ написан более года назад
    Комментировать
    Комментировать
  • Как сделать фильтрацию по нескольким значениям в VueJS?

    0xD34F
    0xD34F @0xD34F Куратор тега Vue.js
    Сложно это всё. Четыре селекта - очень похожие, четыре вычисляемых свойства - очень похожие. Многовато копипасты. Надо упростить.

    Первым делом внимательно посмотрим на все эти похожие куски кода, найдём, где они отличаются, и на основе этих отличий сделаем описание фильтров:

    filters: [
      { name: 'calculator.brand_filter', getter: obj => obj.brand.name, value: '' },
      { name: 'calculator.company_filter', getter: obj => obj.company.name, value: '' },
      { name: 'calculator.country_filter', getter: obj => obj.brand.country, value: '' },
      { name: 'calculator.side_filter', getter: obj => obj.sides, value: '' },
    ],

    Затем сделаем собственно фильтрацию, пропустим данные через массив фильтров (если значение фильтра выставлено - производится фильтрация, нет - оставляем данные как есть):

    computed: {
      filteredProfiles() {
        return this.filters.reduce((profiles, { value, getter }) => {
          return value
            ? profiles.filter(n => getter(n) === value)
            : profiles;
        }, this.profiles);
      },
    },

    Далее, надо дать пользователю возможность задавать значения фильтров. Сделаем компонент фильтра:

    Vue.component('filter-select', {
      props: [ 'name', 'items', 'value' ],
      template: `
    <div>
      <p>{{ name }}<p>
      <select :value="value" @change="$emit('input', $event.target.value)">
        <option value="">-</option>
        <option v-for="n in items">{{ n }}</option>
      </select>
    </div>`
    });

    И метод, с помощью которого будем получать массивы уникальных значений для селектов:

    unique(arr, getter) {
      return [...new Set(arr.map(getter))];
    },

    Наконец, создадим сами фильтры:

    <filter-select
      v-for="f in filters"
      v-model="f.value"
      :items="unique(profiles, f.getter)"
      :name="trans(f.name)"
    ></filter-select>

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

    resetFilters() {
      this.filters.forEach(n => n.value = '');
    },

    <button @click="resetFilters">{{ trans('calculator.reset_filter') }}</button>

    Демо можно посмотреть здесь (да, тут меньше фильтров, чем у вас - ну так вы свои данные не показали, а у меня воображения на большее не хватило).
    Ответ написан более трёх лет назад
    1 комментарий
    1 комментарий
  • Как плавно прокрутить главный постер при скролле вниз?

    Воващ @V0vash
    let toBlock = document.querySelector('.section').getBoundingClientRect().top;
                    console.log(toBlock);  (высота до до блока)
    
    window.addEventListener('scroll', () => {
    window.scrollTo({
        top: toBlock,
        behavior: "smooth"
    });
    })


    по итогу выполнения можно сделать removeEventListener и скроллить куда душе угодно
    Ответ написан более года назад
    Комментировать
    Комментировать
  • Как скопировать текущую ссылку (url) в буфер обмена?

    uselessmindYEAH
    Андрей @uselessmindYEAH
    Frontback cocaine developer
    Вот пример
    https://codepen.io/begprod/pen/abbaMgX
    Ответ написан более двух лет назад
    1 комментарий
    1 комментарий
  • Как сделать на одной странице несколько слайдеров с миниатюрами/preview?

    EaGames
    Sergiu Mitu @EaGames
    Front-end developer
    вот пример
    Ответ написан более трёх лет назад
    3 комментария
    3 комментария
  • Как сделать несколько одинаковых Swiper Slider слайдеров на странице?

    0xD34F
    0xD34F @0xD34F Куратор тега JavaScript
    document.querySelectorAll('.container').forEach(n => {
      const slider = new Swiper(n.querySelector('.product-slider'), {
        navigation: {
          nextEl: n.querySelector('.swiper-button-next'),
          prevEl: n.querySelector('.swiper-button-prev'),
        },
        spaceBetween: 10,
      });
    
      const thumbs = new Swiper(n.querySelector('.product-thumbs'), {
        spaceBetween: 5,
        centeredSlides: true,
        slidesPerView: 4,
        touchRatio: 0.2,
        slideToClickedSlide: true,
        direction: 'vertical',
      });
    
      slider.controller.control = thumbs;
      thumbs.controller.control = slider;
    });
    Ответ написан более двух лет назад
    8 комментариев
    8 комментариев
  • Как решить задачку (шахматная доска, ход конем) без использования js?

    profesor08
    profesor08 @profesor08 Куратор тега CSS
    Вот ты с выделением ячейки справился. Молодец. Теперь задай для выделенной ячейки 8 теней синего цвета и позиционируй как надо.

    input[type="radio"]:checked + label {
        background: #FF0000;
        box-shadow: 60px 30px 0 0 blue, 60px -30px 0 0 blue;
        position: relative;
        z-index: 1;
    }


    Можешь даже анимацию задать для тени
    label {
        transition: ease box-shadow .3s;
    }
    Ответ написан более двух лет назад
    5 комментариев
    5 комментариев
  • Px to Rem, как пользоваться?

    zooks
    zooks @zooks
    Frontend и Django
    $browser-context: 16; // Default
    
    @function rem($pixels, $context: $browser-context) {
      @return #{$pixels/$context}rem;
    }
    Ответ написан более трёх лет назад
    3 комментария
    3 комментария
  • Почему не применяется кастомная иконка Яндекс.Карты?

    0xD34F
    0xD34F @0xD34F
    кастомные свойства для иконки прописал...

    ...не там, где надо. Перенесите из properties в options (третий параметр вместо второго).
    Ответ написан более двух лет назад
    1 комментарий
    1 комментарий
  • Как узнать сколько символов введено в input imask.js?

    Jukk
    Жук @Jukk
    $('#phone').on('change', function(){
    var count = ($('#phone').val().match( /\d+/g ).join('')).length;
    console.log(count);
    });
    Ответ написан более двух лет назад
    2 комментария
    2 комментария
  • Css grid не работает в IE11?

    lagudal @lagudal
    Это означает, что для ие11 надо отдельно прописывать стили, начиная с самого определения display:gird;
    и ниже: display: -ms-grid;
    ну и все свойства дублировать для ие.
    Это несложно, но надо повозиться, потом привыкнете.
    К примеру, для него нет grid-gap, все отступы прописываются явно, как отдельная колонка.
    Как то так
    .startGrid {
    	display: -ms-grid;
    	-ms-grid-columns: 32% 20px 32% 20px 32%;
    	-ms-grid-rows: auto 20px auto 20px auto;
    }
    В этом примере 3 колонки, 2 ряда, между ними по 20 px отступы.
    Что неясно легко гуглится по -ms-grid
    Ответ написан более трёх лет назад
    4 комментария
    4 комментария
  • Как сделать анимацию для нескольких элементов?

    megapihar6
    Сергей Карвасарный @megapihar6
    Когда ты используешь querySelectorAll ты получаешь все элементы и тебе нужно пройти их и добавить к каждому анимацию.
    svg1.forEach(function(el){
    el.style.color = 'red';
    });
    вот так покрасит все твои элементы в красный. Так же ты можешь применить и анимацию.
    Ответ написан более двух лет назад
    1 комментарий
    1 комментарий
  • Как реализовать такой выбор времени в select?

    0xD34F
    0xD34F @0xD34F Куратор тега JavaScript
    document.querySelector('.selectTime').addEventListener('change', function() {
      const [ h, m ] = Array.from(this.querySelectorAll('select'), n => +n.value);
      document.querySelector('куда там вам надо записать время').innerText = `${h + 1}:${m}`;
    });
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Как проигрывать видео при открытии аккордеона и как паузить при скрытии аккордеона?

    0xD34F
    0xD34F @0xD34F Куратор тега JavaScript
    <div class="accordionFaq"></div>

    const playersOptions = [
      { source: '...' },
      { source: '...' },
      ...
    ];
    
    $('.accordionFaq').html(playersOptions.map((n, i) => `
      <div class="accordionFaq-item">
        <div class="accordionFaq-head js-accordionFaq-head">
          Video #${i}
        </div>
        <div class="accordionFaq-body">
          <div id="player${i}"></div>
        </div>
      </div>
    `).join('')).on('click', '.accordionFaq-head', function(e) {
      const index = $(this).closest('.accordionFaq-item').index();
    
      $('.accordionFaq-item', e.delegateTarget).each(function(i) {
        const
          $this = $(this),
          isClicked = i === index,
          active = isClicked && !$this.hasClass('active');
    
        $(this)
          .toggleClass('active', active)
          .find('.accordionFaq-body')
          [isClicked ? 'slideToggle' : 'slideUp']();
    
        playersOptions[i].player[active ? 'play' : 'pause']();
      });
    });
    
    playersOptions.forEach((n, i) => {
      n.player = new Clappr.Player({
        source: n.source,
        parentId: `#player${i}`,
      });
    });
    Ответ написан более трёх лет назад
    1 комментарий
    1 комментарий
  • Как сохранить настройки входа(логин пароль) в командной строке linux, чтобы не вводить 100 раз?

    ldv @ldvldv
    sysadm.pp.ua/linux/nalashtuvannya-zruchnogo-ssh-do...
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Почему не работает переключение городов?

    0xD34F
    0xD34F @0xD34F Куратор тега JavaScript
    Вы подсовываете строку в качестве координат, вместо массива.

    Оберните this.getAttribute('data-goto') в JSON.parse.
    Ответ написан более трёх лет назад
    1 комментарий
    1 комментарий
  • Как вставить класс в данный dropdown при состоянии select "disabled"?

    Tendor @Tendor
    class: $this.children('option').eq(i).attr('class');


    $(this).find('option').each(function(index, elem){
      $('<li />', {
           text: $(this).text(),
           class: $(this).attr('class')
      }).appendTo($list);
    });
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Как вывести в owl-carousel заголовок предыдущего и следующего слайда?

    NeiroNx
    Александр @NeiroNx
    Программист
    как то так наверно
    $(".owl-carousel .active").prev().text()
    $(".owl-carousel .active").next().text()
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Как вывести в owl-carousel заголовок предыдущего и следующего слайда?

    0xD34F
    0xD34F @0xD34F Куратор тега JavaScript
    https://jsfiddle.net/mn0z4fu5/
    Ответ написан более трёх лет назад
    1 комментарий
    1 комментарий
  • Как сделать так, чтобы при смене select (плагин select2) карточка оставалась наведённой?

    0xD34F
    0xD34F @0xD34F Куратор тега JavaScript
    $('select').select2({
      minimumResultsForSearch: Infinity,
      dropdownParent: $('.card-more'),
    });
    Ответ написан более трёх лет назад
    1 комментарий
    1 комментарий
Оценили как «Нравится»
  • 1
  • 2
  • Следующие →
Самые активные сегодня
  • Никита Савченко
    • 12 ответов
    • 3 вопроса
  • Drno
    • 11 ответов
    • 1 вопрос
  • mayton2019
    • 6 ответов
    • 0 вопросов
  • GavriKos
    GavriKos
    • 5 ответов
    • 0 вопросов
  • delphinpro
    Сергей delphinpro
    • 5 ответов
    • 0 вопросов
  • firedragon
    Владимир Коротенко
    • 5 ответов
    • 0 вопросов
  • © Habr
  • О сервисе
  • Обратная связь
  • Блог

Войдите на сайт

Чтобы задать вопрос и получить на него квалифицированный ответ.
Войти через центр авторизации