vue 3.0 使用cloudzoom.js（图像放大插件）

Posted 2021-06-19 佑之以航

由于cloudzoom.js依赖jquery库所以这里需要先引入jquery

npm i jquery --save

vue.config.js

const webpack = require(\'webpack\');

module.exports = {
    css: {
        // 是否使用css分离插件 ExtractTextPlugin
        extract: true,
        // 开启 CSS source maps?
        sourceMap: false,
        // css预设器配置项
        loaderOptions: {},
        // 启用 CSS modules for all css / pre-processor files.
        modules: true //需要启用，否则引入css会报错
    },
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                "window.jquery": "jquery"
            })
        ]
    }
}

main.js

import {
    createApp
} from "vue";
import App from "./App.vue";
import \'./assets/cloudzoom.css\'

createApp(App).mount("#app");

useZoom.vue

<template>
  <!-- class必须有cloudzoom 插件会去查找这个类名 -->
  <!-- data-cloudzoom： 为配置项文档地址参考：http://www.kumic.cn/scriptshow.php?cid=5&id=16 -->
  <img
    class="cloudzoom"
    src="../assets/1.jpg"
    data-cloudzoom="zoomImage:\'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1663708332,49189409&fm=26&gp=0.jpg\',zoomPosition: \'inside\',zoomOffsetX:0,animationTime: 300,startMagnificatio:\'auto\'"
  />
</template>

<script>
import "../assets/cloudzoom";
export default {
  name: "UseZoom",
  props: {
    msg: String,
  },
  mounted() {
    this.$nextTick(() => {
      // 初始化插件
      window.CloudZoom.quickStart();
    });
  },
};
</script>

<style scoped>
/* 改变一些插件样式 */
.cloudzoom {
  width: 400px;
}
.cloudzoom-zoom-inside:hover {
  cursor: crosshair;
}
</style>

总结: 了解插件依赖项，了解插件配置项，了解插件使用规则可以任我操作。任重道远，加油！