vue的一些插件和依赖使用

最新推荐文章于 2025-05-27 21:49:35 发布

原创最新推荐文章于 2025-05-27 21:49:35 发布 · 2.4k 阅读

1 ·

CC 4.0 BY-SA版权

vue.js 同时被 2 个专栏收录

9 篇文章

订阅专栏

学习资源

2 篇文章

订阅专栏

本文介绍了Vue.js在移动端和PC端的应用，包括移动端的img-vuer图片预览器、px2rem-loader和lib-flexible适配解决方案、wc-messagebox弹窗组件、mint-ui框架。在PC端，提到了element-ui UI框架、less样式语言、v-viewer图片查看器以及vue-area-linkage地区选择器。

移动端

1. 图片预览查看器 img-vuer（支持放大缩小左右滑动切换）

参考： https://www.jianshu.com/p/2f0288bffb44

//安装
npm install img-vuer --save

//引入
import gallery from 'img-vuer '
Vue.use(gallery)

//使用
<template>
  <img v-gallery:group
   v-for="(url, index) in dataArr[index]"
   :key="index"
   :src="url" alt="">
</template>

2. 移动端适配（px2rem-loader lib-flexible）

参考： https://blog.csdn.net/cyx1874/article/details/83272820

3. 弹窗 wc-messagebox

https://segmentfault.com/a/1190000009705021

4. 框架 mint-ui

PC端

1. ui框架 element-ui

http://element-cn.eleme.io/#/zh-CN

//安装
npm install element-ui -s

//引入
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'

Vue.use(ElementUI)

2. less依赖

//安装
npm install less less-loader --save

3. 图片查看器 v-viewer

//安装
npm install v-viewer --save

//引入
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)

//使用
<template>
    <viewer :images="images">
	   <img v-for="src in images" :src="src" :key="src" width="300">
	</viewer>
</template>

4. 地区选择器 vue-area-linkage

// 安装
npm i --save vue-area-linkage area-data

// 引入
import Vue from 'vue';
import 'vue-area-linkage/dist/index.css';
import VueAreaLinkage from 'vue-area-linkage';

Vue.use(VueAreaLinkage)

// 使用
<template>
  <area-select type='all'
     :placeholders="placeholder"
     :level='2'
     :data="pcaa"
     v-model="selected">
  </area-select>
</template>

<script>
import { pca, pcaa } from 'area-data';
export default {
  data () {
    return {
      pca,
      pcaa,
      selected: [],
      placeholder: ['请选择省', '请选择市', '请选择区'],
    }
  },
}
</script>