纯js实现，无外部依赖，实现js 放大镜

2023-10-23

纯js实现，无外部依赖，实现js 放大镜

有一年没更新了，趁现在有时间，过来水一篇。js放大镜，技术嘛，没啥技术含量，主要是把所有的串联了一下，就包含了vite开发npm库，项目包含了demo，库支持typescript的类型引用，npm库的publish，然后就是github的action根据master的push自动生成demo页面

可以直接看

{{form.zoom}}
{{form.width}}
{{form.MagnifyDomWidth}}
MagnifyDomStyles:
Custom MagnifyDom:
magnify allow overflow:

code

magnifyImg{
  src: '/src/assets/waterDrop.jpg',
  zoom: {{this.form.zoom}},
  target: document.getElementById('example'),
  width: {{form.width}},
  MagnifyDomWidth: {{form.MagnifyDomWidth}},{{useMagnifyDomStyles ? `\n  MagnifyDomStyles: ${JSON.stringify(form.MagnifyDomStyles)},` : ''}}{{useMagnifyDom ? `\n  MagnifyDom: document.getElementById('show'),` : ''}}
  overflow: {{form.overflow}}
}

example:

确定好npm库名

npm info js-img-magnify

通过npm命令确定这个库名没有被占用。

创建项目：

yarn create vite js-magnify --template vanilla-ts

项目结构

├── .github // github action 配置
│   └── workflows
├── .gitignore
├── README.md  // readme
├── dist    //demo的页面内容
│   ├── assets
│   └── index.html
├── index.html
├── lib // 打包后的库文件，提供dts
│   ├── index.d.ts
│   ├── js-img-magnify.mjs
│   └── js-img-magnify.umd.js
├── package.json    // package.json
├── public
├── src // 源码
│   ├── assets
│   ├── lib
│   ├── main.js
│   └── vite-env.d.ts
├── .npmignore // npm publish 忽略配置
├── tsconfig.json   // ts配置
├── vite.config.js  // vite配置
└── yarn.lock

package.json配置

项目的话，主要是要区分库文件打包和demo页面打包
然后package.json修改如下:

{
  "name": "js-img-magnify",
  "private": false,
  "version": "0.0.1",
  "main": "lib/js-img-magnify.umd.js",
  "module": "lib/js-img-magnify.mjs",
  "typings": "lib/index.d.ts",
  "files": [ "lib" ],
  "description": "Pure JavaScript utility enabling magnifying glass effect on an images",
  "author": 作者,
  "homepage": "https://github.com/s749312025/js-img-magnify",// 主页，这里我使用了github项目地址
  "repository": {
    "type": "git",
    "url": "https://github.com/s749312025/js-img-magnify"
  },
  "keywords": [
    "magnify",
    "img",
    "utility",
    "Typescript",
    "No-external"
  ],
  "scripts": {
    "dev": "vite",
    "lib": "tsc && vite build --mode lib",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "typescript": "^5.0.2",
    "vite": "^4.4.5",
    "vite-plugin-dts": "^3.6.0"
  }
}

vite 配置

对于vite的配置文件的话，也是要判断一下打包模式，还要注意dts文件的输出，vite.config.js的配置如下：

import { resolve } from 'path'
import { defineConfig, loadEnv } from 'vite'
import dts from 'vite-plugin-dts'
export default defineConfig(({command, mode}) => {
  const env = loadEnv(mode, process.cwd(), '')
  const isLibMode = env.BUILDTYPE === 'lib'
  let buildOption = isLibMode ? {
    outDir: 'lib',
    lib: {
      entry: resolve(__dirname, 'src/lib/index.ts'),
      name: 'index',
    }
  } : {}
  const config = {
    plugins: [dts()],
    build: buildOption
  }

  if (!isLibMode) {
    config.base = './'
  }
  return config
})

调用参数说明

源码可以直接去github看就好了。这里说一下调用参数

参数明 类型 required 描述 默认值
src string true img标签的src属性
zoom number false 放大倍数 3
target HTMLElement true 放大镜target容器
width string/number false img标签的width属性 "auto"
MagnifyDomWidth number false js自己创建的放大镜的dom的width属性，如果MagnifyDom有值，将无效 200
MagnifyDomStyles partialCSSStyleDeclaration false 将合并js创建的放大镜dom的样式属性，如果MagnifyDom有值，将无效 {}
MagnifyDom HTMLElement false 用户可自定义放大镜dom
overflow Boolean false 是否允许在图像边缘处超出图像范围 true
遇到问题了? 可以直接联系我。

评论区