Привет! Это небольшой опрос. Я хотел бы знать, используют ли какие-либо англоязычные пользователи этот плагин. Если да, пожалуйста, предоставьте мне информацию о проблеме, чтобы я мог адаптировать плагин для международного использования. И я напишу англоязычную версию документа по использованию.

hevue-img-preview 简介

Этот компонент представляет собой компонент предварительного просмотра изображений на основе Vue. Он поддерживает ПК и мобильные устройства, а также предварительный просмотр одного или нескольких изображений. Требуется только ввести адрес изображения, чтобы реализовать эффект предварительного просмотра изображения. Мобильный терминал поддерживает перетаскивание одним пальцем и масштабирование двумя пальцами.

Если вы можете помочь, мы надеемся перейти на GitHub или Gitee, чтобы дать звезду. Если у вас есть какие-либо мнения или предложения, вы также можете ответить или создать issue.

Официальный документ

Официальный документ по использованию можно найти по адресу https://heyongsheng.github.io/#/.

Установка

Используйте npm для установки:

npm install hevue-img-preview

Импортируйте в main.js для глобального использования:

// vue2.x
import hevueImgPreview from 'hevue-img-preview'
Vue.use(hevueImgPreview)

// vue3.x
import hevueImgPreview from 'hevue-img-preview'
const app = createApp(App)
app.use(hevueImgPreview)
app.mount('#app')

Использование в компонентах:

<img :src="url" @click="previewImg(url)">

methods: {
    previewImg (url) {
        this.$hevueImgPreview(url)
    }
}

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

Метод this.$hevueImgPreview() может принимать строку URL или объект конфигурации. Конкретные методы использования следующие:

• Принять строку URL this.$hevueImgPreview('https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg') — онлайн-адрес;
  this.$hevueImgPreview('./img/logo.jpeg') — локальный адрес.

• Примите объект this.$hevueImgPreview(options):

# Предварительный просмотр одной картинки
this.$hevueImgPreview({
    url: 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
})

# Предварительный просмотр нескольких картинок
this.$hevueImgPreview({
    multiple: true, // Включить предварительный просмотр нескольких изображений
    nowImgIndex: 1, // Предварительный просмотр второй картинки при предварительном просмотре нескольких изображений
    imgList: ['1.png', '2.png', '3.png'], // Массив изображений для предварительного просмотра
})

Конфигурационные параметры

Глобальная конфигурация

Для некоторых конфигураций, таких как управление с клавиатуры и возможность закрыть окно предварительного просмотра нажатием на маску, нам может потребоваться сохранить единообразие во всём приложении, но при этом необходимо настраивать их каждый раз при вызове. Чтобы решить эту проблему, мы предоставляем глобальные параметры конфигурации, которые можно передать в качестве второго параметра при импорте плагина. Это позволит избежать повторной настройки при каждом вызове:

// main.js

// vue2.x
import hevueImgPreview from 'hevueImgPreview'
Vue.use(hevueImgPreview, {
  keyboard: true,
  clickMaskCLose: true
  ...
})

// vue3.x
const app = createApp(App)
app.use(hevueImgPreview, {
  keyboard: true,
  clickMaskCLose: true
  ...
})
app.mount('#app')

После включения управления с клавиатуры соответствующие функции клавиш будут следующими:

Журнал обновлений

6.1.0

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

6.0.0

Компонент совместим с Vue 3.x.

5.0.2

Компонент поддерживает создание экземпляров, вызов компонента вернёт экземпляр компонента. Поддерживает закрытие окна непосредственно через экземпляр.

const hevueImgPreviewEl = this.$hevueImgPreview(...)
hevueImgPreviewEl.close()

Объявление о вакансии

Я имею четырёхлетний опыт работы фронтенд-разработчиком. Мне срочно нужна работа фронтенд-разработчика. Моя технологическая база включает Vue и Element. У меня нет высшего образования, только диплом о среднем профессиональном образовании. Есть ли компании в Пекине или Шанхае, которые ищут сотрудников? Если да, свяжитесь со мной. Вы можете связаться со мной по указанным ниже контактам.

Авторское примечание

Я начинающий фронтенд-разработчик с небольшим опытом работы. Я стараюсь гарантировать отсутствие ошибок в написанном коде, но, возможно, не смогу достичь оптимального уровня производительности и пользовательского интерфейса. Если у вас есть предложения или отзывы об использовании, я буду рад получить обратную связь. Вы можете оставить отзыв, связавшись со мной напрямую или оставив комментарий на GitHub. Если моя работа окажется полезной для вас, буду очень признателен за ваш звёздный рейтинг на GitHub.