Слияние кода завершено, страница обновится автоматически
1. Эмодзи в этом плагине собраны из интернета. Если они нарушают ваши права, пожалуйста, свяжитесь с автором для удаления. Контактные данные: QQ:1431128779
2. Простой плагин для эмодзи и некоторых простых эмодзи. Если у вас есть какие-либо предложения, пожалуйста, дайте знать.
3. Простой плагин для эмодзи и некоторые простые эмодзи. Если у вас есть какие-либо предложения, пожалуйста, дайте знать.
4. Если вам кажется, что количество по умолчанию слишком большое, вы можете удалить данные по умолчанию в файле /uni_modules/evan-emoji/utils/default.emoji.js
5. Если вам кажется, что этих эмодзи недостаточно, вы можете расширить их самостоятельно. Внизу документа добавлены источники эмодзи и методы получения данных.
1. Установка плагина: плагин следует стандарту uni_modules и может быть импортирован напрямую из плагин-магазина.
Установка и использование:
2.1. В main.js
// Установка emoji
import EvanEmoji from '@/uni_modules/evan-emoji/utils/index.js'
Vue.use(EvanEmoji)
2.2. В шаблоне
<evan-emoji
@on-select="fnOnEmojiSelect"
@on-delete="fnOnEmojiDelete">
</evan-emoji>
``` 2.3. Преобразование эмодзи
```javascript
// Рендеринг
fnTranslEmoji() {
let _testText = '[拍手]哈哈哈哈哈，[心花怒放]'
// Преобразование символов эмодзи в HTML-контент
// API:
// 1. Использование uni.$evanEmoji.util.convert.toHtml
// 2. Использование this.$evanEmoji.util.convert.toHtml
let html = uni.$evanEmoji.util.convert.toHtml(_testText, false, {
classes: ['img-class-1', 'img-class-2'], // Пользовательские классы
width: 40, // Ширина изображения (rpx)
height: 40, // Высота изображения (rpx)
styles: {'vertical-align': 'text-bottom'} // Дополнительные стили (должны быть в оригинальном стиле, без camelCase)
});
},
``` 2.4. Расширение эмодзи локально (пример)
> Через параметр `customEmojiList` передаются эмодзи для расширения. Для более подробной информации о формате параметров, смотрите ниже.
```html
<evan-emoji
:customEmojiList="myEmojiList"
@on-select="fnOnEmojiSelect"
@on-delete="fnOnEmojiDelete">
</evan-emoji>
<script>
export default {
data(){
return {
myEmojiList: [{
type: 'image',
alias: 'kz1',
name: 'расширенный эмодзи 1',
list: [{
id: '',
name: '施工标',
code: '"\u{1f6a7}',
htm: '🚧',
class: '',
text: '[施工标志]',
url: 'https://uc-emoji.azureedge.net/orig/dd/8b7f393a72b7705da89b5b87a1d340.png'
}]
},
{
type: 'image',
alias: 'kz2',
name: 'расширенный эмодзи 2',
list: [{
id: '',
name: '挥手',
code: null,
html: '👋',
class: '',
text: '[挥手]',
url: 'https://emoji.emojipic.cn/pic/72/apple/waving-hand-sign_1f44b.png'
}]
}]
}
}
}
</script>
2.5. Глобальное расширение эмодзи (в разработке...)
```javascript
|:--:|:--:|:--:|:--:|
|height|Высота контейнера|String|340rpx|
|activeBgColor|Цвет активного фона для инструментов выбора эмодзи|String|#ededed|
|activeRadius|Радиус активного фона для инструментов выбора эмодзи (единицы измерения rpx)|Number|12|
|useDefault|Использовать встроенные эмодзи|Boolean|true|
|customEmojiList|Список пользовательских эмодзи (см. подробное описание ниже)|Array|[ ]|
|useHtmlRender|Использовать html-рендеринг, поле html должно быть заполнено и поддерживать прямое отображение html (поддерживается для встроенных эмодзи или пользовательских эмодзи с одинаковым форматом)|Boolean|true|
|useDelIcon|Использовать иконку удаления|Boolean|true|> !!! Подробное описание параметра customEmojiList:```javascript
// Формат параметра:
// При type='text' используется для эмодзи в виде текста или только html-кода (без url-адреса изображения)
// При type='image' используется для эмодзи с изображением
[
// Категория эмодзи 1
{
type: 'image', // type может принимать значения image или text
alias: 'jtgj', // Альтернативное имя категории эмодзи
name: 'Транспорт', // Имя категории эмодзи
list: [ // Список данных эмодзи
{
"id": "", // Идентификатор
"name": "Строительный знак", // Название эмодзи
"code": "\u{1f6a7}", // Unicode код
"html": "🚧", // HTML-код (эмодзи для отображения и вставки в поле ввода)
"class": "", // Класс для изображения
"text": "[Строительный знак]", // Текстовое содержимое эмодзи
"url": "https://uc-emoji.azureedge.net/orig/dd/8b7f393a72b7705da89b5b87a1d340.png", // Адрес эмодзи
},
// Дополнительные (формат аналогичен). . .
]
},
// Категория эмодзи 2
{
type: 'image', // type может принимать значения image или text
alias: 'ssjt', // Альтернативное имя категории эмодзи
name: 'Рукопожатие', // Имя категории эмодзи
list: [ // Список данных эмодзи
{
"id": "", // Идентификатор
"name": "Рукопожатие", // Название эмодзи
"code": null, // Unicode код
"html": "👋", // HTML-код (эмодзи для отображения и вставки в поле ввода)
"class": "", // Класс для изображения
"text": "[Рукопожатие]", // Текстовое содержимое эмодзи
"url": "https://emoji.emojipic.cn/pic/72/apple/waving-hand-sign_1f44b.png", // Адрес эмодзи
},
// Дополнительные (формат аналогичен). . .
]
},
]
```markdown
}
]
},
]
```### Внутренние события```|Параметр|Описание|
|:--:|:--|
|||
<br/>
### Коллбэк события
|Параметр|Описание|
|:--:|:--|
|@on-select|Коллбэк выбора эмодзи, возвращает формат данных:<br/>{<br/> type:'', // Основная категория эмодзи image \| text|
|@on-delete|Активен при включении `useDelIcon`, слушает операцию удаления|
|||
|||
<br/>
### Встроенные инструменты
###### `uni.$evanEmoji` эквивалентен `this.$evanEmoji`
|Инструмент|Описание|Параметры|Пример|
|--|--|--|--|
|uni.$evanEmoji.util.convert|Инструмент для преобразования текста с использованием компонента эмодзи|Нет||
|uni.$evanEmoji.util.convert.toHtml|Преобразование текста с эмодзи в HTML-код|Параметр OnClickListener 1: Текст<br/>Параметр 2: Преобразование в unicode код эмодзи, значение по умолчанию `false`<br/>Параметр 3: Настройки изображения {<br/> classes:[], // Массив классов изображения<br/> width: 40, // Ширина изображения (rpx)<br/> height: 40, // Высота изображения (rpx)<br/> styles:{}, // Дополнительные стили<br/>}|let html = uni.$evanEmoji.util.convert.toHtml(_testText, false, { <br/> classes: ['img-class-1', 'img-class-2'], // Дополнительные классы<br/> width: 40, // Ширина изображения (rpx)<br/> height: 40, // Высота изображения (rpx)<br/> styles: {'vertical-align': 'text-bottom'} // Дополнительные стили (должны быть в оригинальном стиле, не поддерживаются camelCase)<br/>});|
|||||
|||||
<br/>
### 2. Источники эмодзи (получение)
#### [1.Emoji大全：https://www.emojidaquan.com/common-smileys-people-emojis](https://www.emojidaquan.com/common-smileys-people-emojis)
##### js-код для получения данных (формат данных после получения соответствует внутреннему формату данных компонента)```javascript
function fnGetEmojiList() {
let emojiList = []
let domList = document.querySelectorAll('.character-list__item')
for (let i = 0; i < domList.length; i++) {
let _a = domList[i].children[0]; // Получение a-тега
let _img = _a.children[0].children[0]; // Получение тега изображения
let _div2 = _a.childNodes[3]; // Получение тега с unicode-кодом
let emoji = {
id: '',
name: _a.getAttribute('title'),
url: _img.getAttribute('data-src'),
code: _div2.innerText,
html: _a.getAttribute('data-symbol'),
class: '',
text: '[' + _a.getAttribute('title') + ']',
}
emojiList.push(emoji)
}
}
Справочник Unicode символов emoji: https://unicode-table.com/cn/emoji/
function fnGetEmojiList() {
let emojiList = []
// Получение списка
let domList = document.querySelectorAll('.character-list__item')
// Перебор списка
for (let i = 0; i < domList.length; i++) {
let _a = domList[i].children[0]; // Получение a-тега
let _img = _a.children[0].children[0]; // Получение тега img
let _div2 = _a.childNodes[3]; // Получение тега, содержащего unicode-код
let emoji = {
id: '',
name: _a.getAttribute('title'),
url: _img.getAttribute('data-src'),
code: _div2.innerText,
html: _a.getAttribute('data-symbol'),
class: '',
text: '[' + _a.getAttribute('title') + ']',
}
emojiList.push(emoji)
}
return emojiList;
}
let r = fnGetEmojiList()
console.table(r)
console.log(JSON.stringify(r))
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )