-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
8d60af9
commit 488bf6c
Showing
8 changed files
with
172 additions
and
158 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,19 +1,19 @@ | ||
# imgzoom-li 是什么? | ||
# What is imgzoom Li? | ||
|
||
`imgzoom-li` 是一个用于查看网页图片的 `js`插件,可以切换,拖拽和缩放。使用简单,便捷和兼容性强。 | ||
`Imgzoom` Li is a 'JS' plug-in for viewing web page pictures, which can switch, drag and zoom. It is easy to use, convenient and compatible. | ||
|
||
<img :src="$withBase('/imgzoom.jpg')" alt="imgzoom"> | ||
|
||
### 它能为我做什么 | ||
### What can it do for me | ||
|
||
imgzoom-li 一个可以查看图片(可以缩放,拖拽)的JS插件,无需引入额外 js 插件,简洁,方便,兼容。采用原生js编写。能广泛兼容多种浏览器,IE9+ 等低版本浏览器也可以兼容。对项目中的图片可以进行查看,放大,缩小及拖拽等操作。 | ||
Imgzoom Li is a JS plug-in that can view pictures (zoom, drag) without introducing additional JS plug-ins. It is simple, convenient and compatible. It is written in native JS. It can be widely compatible with a variety of browsers, IE9 + and other low version browsers can also be compatible. The pictures in the project can be viewed, enlarged, reduced and dragged. | ||
|
||
<img :src="$withBase('/VPDemo.png')" alt="VPDemo"> | ||
|
||
该文档可以全方位的为你演示 imgzoom-li 的各类配置和效果,通过项目的结构和注释,可以很好的了解和学习 | ||
This document can demonstrate all kinds of configurations and effects of imgzoom Li for you in an all-round way. Through the structure and annotation of the project, you can understand and learn it well | ||
|
||
### 我需要为它做什么 | ||
### What do I need to do for it | ||
|
||
imgzoom-li 采用原生js ,无需引入额外的js插件。可以即装立用。无需为此产生额外的负担。 | ||
Imgzoom Li uses native JS without introducing additional JS plug-ins. It can be installed and used immediately. There is no need to put an extra burden on it. | ||
|
||
imgzoom 仅作为一个演示项目,无需额外的权限,仅需要克隆和点赞即可。如果你能为此添加你的学习过程中产生的问题和解决办法的话,那肯定是极好的, | ||
Imgzoom is only a demonstration project, without additional permissions. It only needs to clone and like. If you can add problems and solutions in your learning process, it will be excellent, |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,26 +1,33 @@ | ||
# 快速上手 | ||
# Get started quickly | ||
|
||
本文会为你快速介绍一下imgzoom-li 的应用及过程 | ||
This article will give you a quick introduction to the application and process of imgzoom Li | ||
|
||
### imgzoom-li 的使用 | ||
### The use of imgzoom Li | ||
|
||
1:安装 imgzoom-li | ||
1: Install imgzoom Li | ||
|
||
```sh | ||
|
||
yarn add imgzoom-li # npm install imgzoom-li | ||
|
||
``` | ||
|
||
2:打开你需要查看图片的html,在所有需要查看的图片的class上添加 imgZoom | ||
2: Open the HTML of the pictures you need to view, and add imgzoom to the class of all the pictures you need to view | ||
|
||
```html | ||
<img class="imgZoom" src="./Img/202001034.png" alt="示例图片" > | ||
|
||
< img class = "imgzoom" SRC =. / img / 202001034. PNG "ALT =" sample picture "> | ||
|
||
``` | ||
|
||
3:在js中调用 imgzoom-li | ||
3: calling imgzoom-li in JS | ||
|
||
```javascript | ||
|
||
import imgli from 'imgzoom-li' | ||
|
||
imgli.init() | ||
|
||
``` | ||
|
||
之后你就可以尽情在页面中享受imgzoom-li 带来的图片查看效果了 | ||
After that, you can enjoy the image viewing effect of imgzoom Li on the page |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,65 +1,81 @@ | ||
# Introduction | ||
|
||
# 介绍 | ||
Imgzoom is used to introduce imgzoom Li (PS: a plug-in for viewing pictures. Originally, it was intended to use the name of imgzoom, but it has already been used.) Plug in Library packaging, publishing and maintenance of the project, you can learn through it a library packaging, publishing and maintenance. | ||
|
||
imgZoom 一个用于介绍 imgzoom-li(PS:一个用于查看图片的插件,原本打算用 imgzoom 的名称,可是已经有人用了。) 插件库的打包,发布和维护的项目,可以通过它学习库的一个打包,发布和维护。 | ||
### Branch introduction | ||
|
||
### 分支介绍 | ||
- **master** | ||
|
||
- **master** | ||
>The introduction branch is used to introduce the related content of imgzoom and the reference of plug-in library | ||
>介绍的分支,用于介绍 imgzoom 的相关内容及插件库的引用 | ||
- **gh-pages** | ||
|
||
- **gh-pages** | ||
>Demo branch, above is the static website generated by vuepress | ||
>演示的分支,上面是通过 vuepress 生成的静态网站 | ||
- **package** | ||
|
||
- **package** | ||
>The publishing branch, which is the content of imgzoom Li plug-in, is the content to be published | ||
>发布的分支,上面是imgzoom-li插件的内容,是需要发布的内容 | ||
### Command introduction | ||
|
||
### 命令介绍 | ||
Package command, package the demo project under SRC directory, and generate the build folder | ||
|
||
打包命令,打包src目录下的演示项目,生成bui ld文件夹 | ||
```sh | ||
|
||
npm run buil # npx webpack -p | ||
|
||
``` | ||
|
||
启动服务,启动src目录下的演示项目 | ||
Start the service and start the demo project in SRC directory | ||
|
||
```sh | ||
|
||
npm run serve # npx webpack-dev-server | ||
|
||
``` | ||
|
||
启动服务器,启动vuepress的文档介绍网站 | ||
Start the server, start the document introduction website of vuepress | ||
|
||
```sh | ||
|
||
npm run docs:dev # vuepress dev docs | ||
|
||
``` | ||
|
||
打包命令,打包vuepress的文档介绍网站 | ||
Package command, package vuepress document introduction website | ||
|
||
```sh | ||
|
||
npm run docs:build # vuepress build docs | ||
|
||
``` | ||
|
||
### 引用支持 | ||
### Reference support | ||
|
||
#### VuePress | ||
|
||
VuePress:一个快速构建文档型网站的工具,通过它用来构建介绍项目的静态网站。 [官网介绍](https://vuepress.vuejs.org/zh/) | ||
Vuepress: a tool to quickly build a document website. It is used to build a static website to introduce projects[ [official website]( https://vuepress.vuejs.org/zh/ ) | ||
|
||
1: install vuepress as a local dependency. Vuepress no longer recommends global installation of vuepress | ||
|
||
1 : 将 VuePress 安装为本地依赖 , vuepress 已经不再推荐全局安装 VuePress | ||
```sh | ||
yarn add -D vuepress # npm install -D vuepress | ||
|
||
yarn add -D vuepress # npm install -D vuepress | ||
|
||
``` | ||
|
||
#### Webpack | ||
|
||
Webpac:一个模块打包器。通过它用来生成打包后的代码。 [官网介绍](https://webpack.docschina.org/) | ||
WebPAC: a module packer. It is used to generate packaged code[ [official website]( https://webpack.docschina.org/ ) | ||
|
||
1:将 webpack 安装为本地依赖,同时安装 webpack-cli 命令工具 | ||
1: Install webpack as a local dependency and the webpack cli command tool | ||
|
||
```sh | ||
|
||
yarn add -D webpack # npm install -D webpack | ||
|
||
yarn add -D webpack-cli # npm install -D webpack-cli | ||
``` | ||
PS:目前用于演示引用imgzoom-li库的项目打包 | ||
|
||
``` | ||
|
||
PS: currently used to demonstrate the packaging of projects that reference the imgzoom Li library |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,48 +1,73 @@ | ||
# VuePress | ||
|
||
### 链接语法 | ||
### Link syntax | ||
|
||
```md | ||
[转跳特定标题](/guide/page1.html#介绍) <!-- 跳转到特定标题位置 --> | ||
[bar - three](../bar/three.md) <!-- 具体文件可以使用 .md 结尾(推荐) --> | ||
[bar - four](../bar/four.html) <!-- 也可以用 .html --> | ||
|
||
[jump to specific title] (/ guide / page1. HTML # introduction) <-- Jump to a specific title position -- > | ||
|
||
[bar - three](../bar/three.md) <!-- Specific files can end with. MD (recommended) - > | ||
|
||
[bar - four](../bar/four.html) <!-- You can also use. HTML -- > | ||
|
||
``` | ||
|
||
### 提示主题 | ||
### Prompt topic | ||
|
||
Example effect | ||
|
||
示例效果 | ||
::: tip | ||
这是一个提示 | ||
|
||
This is a hint | ||
|
||
::: | ||
|
||
::: warning | ||
这是一个警告 | ||
|
||
This is a warning | ||
|
||
::: | ||
|
||
::: danger | ||
这是一个危险警告 | ||
|
||
This is a danger warning | ||
|
||
::: | ||
|
||
::: details | ||
这是一个详情块,在 IE / Edge 中不生效 | ||
|
||
This is a detail block and does not work in IE / edge | ||
|
||
::: | ||
示例代码 | ||
|
||
Sample code | ||
|
||
```md | ||
|
||
::: tip | ||
这是一个提示 | ||
|
||
This is a hint | ||
|
||
::: | ||
|
||
::: warning | ||
这是一个警告 | ||
|
||
This is a warning | ||
|
||
::: | ||
|
||
::: danger | ||
这是一个危险警告 | ||
|
||
This is a danger warning | ||
|
||
::: | ||
|
||
::: details | ||
这是一个详情块,在 IE / Edge 中不生效 | ||
|
||
This is a detail block and does not work in IE / edge | ||
|
||
::: | ||
|
||
``` | ||
|
||
目前的 imgzoom-li 正在试验中,请稍候! | ||
The current imgzoom Li is being tested, please wait! |
Oops, something went wrong.