Я пытаюсь внедрить font-awesome-picker на веб-сайт, который я делаю с использованием vue2 / php / mysql, но в рамках стандартного сценария js, поэтому нет импорта, .vue и т. Д.
Сценарий, который я пытаюсь добавить, взят отсюда: https://github.com/laistomazz/font-awesome-picker
Проблема, с которой я сталкиваюсь, состоит в том, что у меня есть 3 столбца, у которых есть заголовок и значок выбора рядом с ним, что позволит пользователю выбрать 1 значок для каждого заголовка. Это хорошо работает ... но если один и тот же значок используется в 2 разных столбцах, то каждый раз, когда пользователь снова нажимает на любой из двух значков, оба экземпляра средства выбора запускаются, показывая 2 всплывающих окна. Мне нужно как-то сделать их уникальными.
Я пытался использовать
: Ключ = "list.id"
или же
v-for = "значок в значках": icon: icon: key = "icon"
но ничего не получалось. Каким-то образом я должен отделить все экземпляры (я думаю), чтобы они были уникальными.
Это код шаблона:
Vue.component('font-awesome-picker', {
template: ' <div><div class="iconPicker__header"><input type="text" class="form-control" :placeholder="searchPlaceholder" @keyup="filterIcons($event)" @blur="resetNew" @keydown.esc="resetNew"></div><div class="iconPicker__body"><div class="iconPicker__icons"><a href="#" @click.stop.prevent="getIcon(icon)" :class="`item ${selected === icon ? \'selected\' : \'\'}`" v-for="icon in icons" :key="icon"><i :class="\'fa \'+icon"></i></a></div></div></div>',
name: 'fontAwesomePicker',
props: ['seachbox','parentdata'],
data () {
return {
selected: '',
icons,
listobj: {
type: Object
}
};
},
computed: {
searchPlaceholder () {
return this.seachbox || 'search box';
},
},
methods: {
resetNew () {
vm.addNewTo = null;
},
getIcon (icon) {
this.selected = icon;
this.getContent(this.selected);
},
getContent (icon) {
const iconContent = window
.getComputedStyle(document.querySelector(`.fa.${icon}`), ':before')
.getPropertyValue('content');
this.convert(iconContent);
},
convert (value) {
const newValue = value
.charCodeAt(1)
.toString(10)
.replace(/\D/g, '');
let hexValue = Number(newValue).toString(16);
while (hexValue.length < 4) {
hexValue = `0${hexValue}`;
}
this.selecticon(hexValue.toUpperCase());
},
selecticon (value) {
this.listobj = this.$props.parentdata;
const result = {
className: this.selected,
cssValue: value,
listobj: this.listobj
};
this.$emit('selecticon', result);
},
filterIcons (event) {
const search = event.target.value.trim();
let filter = [];
if (search.length > 3) {
filter = icons.filter((item) => {
const regex = new RegExp(search, 'gi');
return item.match(regex);
});
}else{
this.icons = icons;
}
if (filter.length > 0) {
this.icons = filter;
}
}
},
});
Я настроил скрипку с проблемой здесь:
https://jsfiddle.net/3yxk1ahb/1/
Просто выберите один и тот же значок в обоих случаях, а затем снова щелкните любой из значков. Вы увидите, что всплывающие окна открываются для обоих столбцов.
Как я могу отделить сборщики?