Компонент для комментариев с эмодзи в Vue

1. Эффект компонента для комментирования

Используя Vue, разработаем красивый и функциональный компонент для комментирования с поддержкой эмодзи. Общий эффект выглядит следующим образом:

Описание изображения

При получении фокуса текстовым полем появляются кнопки «Эмодзи», «Отправить» и «Отменить».

Нажатие на кнопку «Эмодзи» открывает список эмодзи:

Описание изображения

2. Использование

1. Для загрузки компонента bright-comment используйте команду:

npm i bright-comment

2. После загрузки импортируйте компонент в проект:

import comment from 'bright-comment' components:{ comment },

3. Используйте компонент:

4. Если вы не загрузили element-ui, используйте следующую команду:

npm i element-ui -S

5. После загрузки импортируйте element-ui в main.js:

import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI);

3. Свойства и события

1. Свойства props

Название	Тип	Описание	Значение по умолчанию
avatar	String	Эмодзи
placeholder	String	Текст в поле ввода	«Введите комментарий...»
minRows	Number	Минимальное количество строк в текстовом поле	4
maxRows	Number	Максимальное количество строк в текстовом поле	8
commentNum	Number	Количество комментариев	2
authorId	Number	Идентификатор текущего пользователя	1
label	String	Имя метки	Автор
commentWidth	String	Ширина текстового поля	80%
commentList	Array	Список комментариев	Много комментариев, здесь они опущены

Список комментариев commentList содержит несколько комментариев comment. Вот поля, которые есть у каждого комментария:

2. Поля комментария comment

Название	Тип	Описание
id	Number	ID комментария
commentUser	Object	Пользователь, оставивший комментарий
targetUser	Object	Пользователь, которому адресован комментарий
content	String	Содержание комментария
createDate	String	Дата комментария
childrenList	Array	Список дочерних комментариев

3. Поля пользователя

Название	Тип	Описание
id	Number	ID пользователя
nickName	String	Псевдоним пользователя
avatar	String	Изображение пользователя

4. События Events

Название	Описание	Параметры
doSend	Событие отправки начального текстового поля	Комментарий
doChidSend	Событие отправки текстового поля списка комментариев	Комментарий, ID пользователя, которому адресован комментарий, ID родительского комментария

OSCHINA-MIRROR/bright-boy-bright-comment

Компонент для комментариев с эмодзи в Vue

1. Эффект компонента для комментирования

Используя Vue, разработаем красивый и функциональный компонент для комментирования с поддержкой эмодзи. Общий эффект выглядит следующим образом:

При получении фокуса текстовым полем появляются кнопки «Эмодзи», «Отправить» и «Отменить».

Нажатие на кнопку «Эмодзи» открывает список эмодзи:

2. Использование

1. Для загрузки компонента bright-comment используйте команду:

2. После загрузки импортируйте компонент в проект:

3. Используйте компонент:

4. Если вы не загрузили element-ui, используйте следующую команду:

5. После загрузки импортируйте element-ui в main.js:

3. Свойства и события

1. Свойства props

2. Поля комментария comment

3. Поля пользователя

4. События Events

Комментарии ( 0 )

Введение

Обновления (1)

Участники

Недавние действия

OSCHINA-MIRROR/bright-boy-bright-comment .gitee-modal { min-width: 500px !important; } .gitee-modal .close { right: 0.6rem !important; }

Компонент для комментариев с эмодзи в Vue

1. Эффект компонента для комментирования

Используя Vue, разработаем красивый и функциональный компонент для комментирования с поддержкой эмодзи. Общий эффект выглядит следующим образом:

При получении фокуса текстовым полем появляются кнопки «Эмодзи», «Отправить» и «Отменить».

Нажатие на кнопку «Эмодзи» открывает список эмодзи:

2. Использование

1. Для загрузки компонента bright-comment используйте команду:

2. После загрузки импортируйте компонент в проект:

3. Используйте компонент:

4. Если вы не загрузили element-ui, используйте следующую команду:

5. После загрузки импортируйте element-ui в main.js:

3. Свойства и события

1. Свойства props

2. Поля комментария comment

3. Поля пользователя

4. События Events

Комментарии ( 0 )

Введение

Обновления (1)

Участники

Недавние действия

OSCHINA-MIRROR/bright-boy-bright-comment