Ответы пользователя Егор Астрейко

Как в родителе получить $refs элемента ребенка компонента?

Егор Астрейко @Egor1324 Автор вопроса

Правильно ли будет, если я сделаю вот так:

Компонента c-input

<template>
  <div>
    <input type="text" class="input__field"
        :value="value"
        :ref="'input'"
        @input="onChange($event.target.value)"/>
  </div>
</template>

export default {
  name: "CInput",
  props: {
    value: {
      type: [String, Number],
      required: true
    },
  },
  mounted() {
    this.$emit("ref", this.$refs.input)
  },
  methods: {
    onChange(val) {
      this.$emit('value', val)
    },
  }
}

Компонента item

<template>
  <div>
    <div class="complex-item__content" @keydown.esc="close">
      <span v-show="!editTitle"
          class="complex-item__title"
          @dblclick="showEditTitle">{{ content.title }}</span>
          <c-input v-show="editTitle"
              class="input complex-item__edit-title"
              @ref="input = $event"
              :value="edit.title"
              @value="edit.title = $event"
              @keydown.ctrl.enter="endEdit(content.key, edit.title, null)" />
    </div>
  </div>
</template>

import CInput from "@/components/CInput";

export default {
  name: "Item",
  components: {
    CInput
  },
  props: {
    content: {
      type: Object,
      required: true
    },
    editTitleTodo: {
      type: Function,
      required: true
    },
  },
  data() {
    return {
      edit: {
        title: this.content.title,
      },
      editTitle: false,
    }
  },
  methods: {
    close() {
      this.editTitle = false
    },
    showEditTitle() {
      this.editTitle = true
      this.$nextTick(() => {
        this.input.focus()
      })
    },
    endEdit(id, title) {
      this.editTitleTodo(id, title)
      this.editTitle = false
    },
  }
}

Ответ написан более трёх лет назад

Комментировать

Почему UserInputError не отображает properties?

Егор Астрейко @Egor1324 Автор вопроса

Решил проблему, вместо graphqlhttp юзаю new ApolloServer

Ответ написан более трёх лет назад

Комментировать

Как сделать так чтобы одна буква занимала две строки?

Егор Астрейко @Egor1324

Как вариант обертка, в ней два span, в одном находится "Н", в другом "у на примере этого", для обертки прописать display: flex, что бы во втором span текст переносился можно задать фикс. ширину или поставить br

Ответ написан более трёх лет назад

Комментировать

Как сделать данный блок?

Егор Астрейко @Egor1324

<div class="toolTip">
        <p class="toolTip__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur distinctio dolore ipsam iste nobis pariatur possimus quia, quidem quisquam quos?</p>
        <!-- /.toolTip__content -->
    </div>
    <!-- /.toolTip -->

.toolTip {
  width: 400px;
  height: 150px;
  background-color: #ebebeb;
  border-radius: 5px;
  margin-left: 50px;
  position: relative;
  padding: 20px;

  &::before {
    content: "";
    width: 30px;
    height: 30px;
    transform: rotate(45deg);
    position: absolute;
    left: -15px;
    top: 30%;
    background-color: #ebebeb;
  }
}

Ответ написан более трёх лет назад

1 комментарий

Как заставить работать checkbox в карточке товара?

Егор Астрейко @Egor1324

Попробуйте так:

$(document).on('change', '#new_price', function () {
        if ($(this).is(':checked')) {
            var newPrice = $('.add_item[data-id=1]').attr('data-price') * 1 + $(this).val() * 1;
            $('.add_item[data-id=1]').attr('data-price', newPrice);
        } else {
            var newPrice = $('.add_item[data-id=1]').attr('data-price') * 1 - $(this).val() * 1;
            $('.add_item[data-id=1]').attr('data-price', newPrice);
        }
    })

После чего добавляйте цену в корзину с "data-price"

Ответ написан более трёх лет назад

2 комментария

Как настроить vs code?

Егор Астрейко @Egor1324 Автор вопроса

Проблема решения переноса строк после форматирования решается при помощи: "HTML › Format: Wrap Line Length" = 0.
Проблема с авто комментом строк в html, решается при помощи

"emmet.syntaxProfiles": {
        "html": {
            "filters": "c"
        }
    }

Ответ написан более трёх лет назад

Комментировать

Почему в модальном окне, не работает скролл?

Егор Астрейко @Egor1324 Автор вопроса

Я нашел проблему, из-за чего не скроллится, вся проблема в

.modal {
 transition: all 0.5s ease;
}

При удалении transition, все начинает корректно работать... И что делать с этим, не знаю....

Ответ написан более трёх лет назад

Комментировать

Как правильно реализовать?

Егор Астрейко @Egor1324 Автор вопроса

Решил проблему так:
при открытие окна, загружаю в него картинки, а после закрытия полностью удаляю все содержимое слайдера и очищаю слайды $(".slider").slick("unslick").empty();

Ответ написан более трёх лет назад

Комментировать

Как в jquery плагине создать событие?

Егор Астрейко @Egor1324 Автор вопроса

Спасибо Stalker_RED , удалось решить проблему
Получается так:
В параметрах создаем функцию:

var pluginName = "defaultPluginName",
defaults = {
   show: function() {}
};

В init создаем переменную:

init: function() {
   var options = this.options;
}

Теперь можно в init спокойно обращаться к этой функции

init: function() {
   var options = this.options;
   elem.on("click", function(event){
      if ( option.show(event) != false ) {
         // Делаем что хотим при нажатии на на этот элемент
      }
   })
}

в js при инициализации:

$("elem").pluginName({
   show: function(event) {
      // Тут все что вы хотите сделать при нажатии на элемент <b>elem</b>
      // Если указать return false; То все стандартные действия будут отменены
   }
});

Ответ написан более трёх лет назад

Комментировать

Как правильно передать переменную player?

Егор Астрейко @Egor1324 Автор вопроса

Решил проблему добавив все действия с player в эту функцию function onPlayerReady() {}, которая вызывается после инициализации плеера

Ответ написан более трёх лет назад

Комментировать

Как правильно стилизовать плеер youtube на сайте?

Егор Астрейко @Egor1324 Автор вопроса

РЕшил проблему с fullscreen при помощи js кода:

function toggleFullScreen(elem) {
    	if ((document.fullScreenElement !== undefined && document.fullScreenElement === null) || (document.msFullscreenElement !== undefined && document.msFullscreenElement === null) || (document.mozFullScreen !== undefined && !document.mozFullScreen) || (document.webkitIsFullScreen !== undefined && !document.webkitIsFullScreen)) {
    		if (elem.requestFullScreen) {
    			elem.requestFullScreen();
    		} else if (elem.mozRequestFullScreen) {
    			elem.mozRequestFullScreen();
    		} else if (elem.webkitRequestFullScreen) {
    			elem.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
    		} else if (elem.msRequestFullscreen) {
    			elem.msRequestFullscreen();
    		}
    	} else {
    		if (document.cancelFullScreen) {
    			document.cancelFullScreen();
    		} else if (document.mozCancelFullScreen) {
    			document.mozCancelFullScreen();
    		} else if (document.webkitCancelFullScreen) {
    			document.webkitCancelFullScreen();
    		} else if (document.msExitFullscreen) {
    			document.msExitFullscreen();
    		}
    	}
    }

Но появилась другая проблема, при двойном клике по Youtube плееру, он становиться fullscreen и перекрывает мою панель, как можно этот двойной клик блокировать ?

Что бы по двойному клику не открывался fullscreen нужно для iframe в css прописать:

user-select: none;
pointer-events: none;

Ответ написан более трёх лет назад

1 комментарий

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