vue应用插件

最新推荐文章于 2023-07-24 11:14:28 发布

举个不听话的栗子

最新推荐文章于 2023-07-24 11:14:28 发布

阅读量197

点赞数

文章标签： vue 适配

本文链接：https://blog.csdn.net/weixin_41455147/article/details/102483538

版权

一、amfe-flexible/postcss-pxtorem——Vue CLI 3 自适应解决方案

1-------------安装amfe-flexible

cnpm i amfe-flexible -S

配置amfe-flexible

//.main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import 'amfe-flexible'
Vue.config.productionTip = false
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

2-------------安装postcss-pxtorem

npm install postcss-pxtorem -D

设置规则（更改postcss.config.js,该文件为使用vue-cli3自动创建的文件）

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 16,//结果为：设计稿元素尺寸/16，比如元素宽320px,最终页面会换算成 20rem
      propList: ['*']
    }
  }
}

二、nprogress——vue使用nprogress页面加载进度条

下载 nprogress

 npm install --save nprogress

入口文件,main.js引入 nprogress

import App from './App'
import VueRouter from 'vue-router'
import router from './router' //你的路由文件
//引入nprogress
import NProgress from 'nprogress' // 进度条
import 'nprogress/nprogress.css' //这个样式必须引入

Vue.use(VueRouter)

// 简单配置
NProgress.inc(0.2)
NProgress.configure({ easing: 'ease', speed: 500, showSpinner: false })

router.beforeEach((to,from,next) => {
  NProgress.start() 
  next()
})
router.afterEach(() => {
  NProgress.done()
})

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

1.引入依赖：

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

简单的调用 start() 和 done() 方法来控制进度条。

NProgress.start(); //开始
NProgress.done(); // 结束

2.如果想ajax请求有progress，加载vue-resource的interceptors中：

Vue.http.interceptors.push((request, next) => {
  NProgress.start();

  next((response)=>{
    NProgress.done();
  });
});

3.如果想路由跳转有progress，加在vue-router的beforeEach和afterEach中：

router.beforeEach(transition => {
  NProgress.done();
});

router.afterEach(transition => {
  NProgress.start();
});

PS: 我这里有些奇葩的是beforeEach在afterEach之后执行。。。。所以我只能在afterEach中start了。。

修改进度条颜色 1、在App.vue中的style中增加：

 #nprogress .bar {
      background: red !important; //自定义颜色
    }

三、VConsole ——Vue项目中使用手机网页的前端 console 调试面板

1、使用 npm ：

npm install vconsole

2、在 mian.js 文件夹中引入，并判断production环境使用

import VConsole from 'vconsole'

if (process.env.NODE_ENV === 'production') {
  new VConsole()
}

请注意，VConsole 只是 vConsole 的原型，而非一个已实例化的对象。所以在手动 new 实例化之前，vConsole 不会被插入到网页中。

四、moment——vue中时间格式化组件库moment.js的使用

1 首先在vue项目中

npm install moment --save

2、在main.js中导入组件

import moment from 'moment'

3、官网链接 http://momentjs.cn/

五、vue-clipboard2——vue项目如何实现剪切板功能

1、安装vue-clipboard2插件：

npm install --save vue-clipboard2

2、main.js添加

import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)

3、copy组件：message绑定需要复制的文本/onCopy复制成功回调/onError复制失败回调，在需要复制的地方调用

v-clipboard:copy="message"
v-clipboard:success="onCopy"
v-clipboard:error="onError"

另外补充：

原生js实现点击按钮，复制文本框中的的内容

<body>
    <textarea cols="20" rows="10" id="test">用户定义的代码区域</textarea>
    <input type="button" onClick="copyUrl2()" value="点击复制代码" />
</body>
<script type="text/javascript">
function copyUrl2(){
    var Url2=document.getElementById("test");
    Url2.select(); // 选择对象
    document.execCommand("Copy"); // 执行浏览器复制命令
    alert("已复制好，可贴粘。");
}
</script>

举个栗子：

<template id="t">
  <div class="container">
    <input type="text" v-model="message">
    <button type="button"
      v-clipboard:copy="message"
      v-clipboard:success="onCopy"
      v-clipboard:error="onError">Copy!</button>
  </div>
</template>
<script>
new Vue({
  el: '#app',
  template: '#t',
  data: function () {
    return {
      message: 'Copy These Text'
    }
  },
  methods: {
    onCopy: function (e) {
      alert('You just copied: ' + e.text)
    },
    onError: function (e) {
      alert('Failed to copy texts')
    }
  }
})
</script>

六、vue-wechat-title——用vue-wechat-title为微信动态设置标题

1.安装插件

cnpm install vue-wechat-title --save

2.在main.js中引入　　

Vue.use(require('vue-wechat-title'))
<or>
import VueWechatTitle from "vue-wechat-title";
Vue.use(VueWechatTitle);

3.在路由里添加name属性例：　

`{``   
 ``path: ``'/home'``,`` 
 ``name: ``'首页'``,``    
 ``menuShow: ``true``,``    
 ``iconCls: ``'home_light.svg'``,``    
 ``component: Home``
}`

4.在App.vue文件里添加如下代码：

`<div v-wechat-title=``"$route.name"``></div>  
   <!--控制微信标题的-->`

七、vue-quill-editor——Vue富文本编辑器及插入图片自定义

1、文章链接 https://blog.csdn.net/senmage/article/details/82388728

八、vue-cropper——vue+vue-cropper实现上传剪裁图片

1、安装

npm install vue-cropper

yarn add vue-cropper

2、目前还不知道什么原因项目里面开启mock 会导致file报错, 建议使用时关掉mock

名称	功能	默认值	可选值
img	裁剪图片的地址	空	url 地址 \|\| base64 \|\| blob
outputSize	裁剪生成图片的质量	1	0.1 - 1
outputType	裁剪生成图片的格式	jpg (jpg 需要传入jpeg)	jpeg \|\| png \|\| webp
info	裁剪框的大小信息	true	true \|\| false
canScale	图片是否允许滚轮缩放	true	true \|\| false
autoCrop	是否默认生成截图框	false	true \|\| false
autoCropWidth	默认生成截图框宽度	容器的80%	0~max
autoCropHeight	默认生成截图框高度	容器的80%	0~max
fixed	是否开启截图框宽高固定比例	true	true \| false
fixedNumber	截图框的宽高比例	[1, 1]	[宽度, 高度]
full	是否输出原图比例的截图	false	true \| false
fixedBox	固定截图框大小不允许改变	false	true \| false
canMove	上传图片是否可以移动	true	true \| false
canMoveBox	截图框能否拖动	true	true \| false
original	上传图片按照原始比例渲染	false	true \| false
centerBox	截图框是否被限制在图片里面	false	true \| false
high	是否按照设备的dpr 输出等比例图片	true	true \| false
infoTrue	true 为展示真实输出图片宽高 false 展示看到的截图框宽高	false	true \| false
maxImgSize	限制图片最大宽度和高度	2000	0-max
enlarge	图片根据截图框输出比例倍数	1	0-max(建议不要太大不然会卡死的呢)
mode	图片默认渲染方式	contain	contain , cover, 100px, 100% auto

3、内置方法通过this.$refs.cropper 调用

this.$refs.cropper.startCrop() 开始截图

this.$refs.cropper.stopCrop() 停止截图

this.$refs.cropper.clearCrop() 清除截图

this.$refs.cropper.changeScale() 修改图片大小 正数为变大 负数变小

this.$refs.cropper.getImgAxis() 获取图片基于容器的坐标点

this.$refs.cropper.getCropAxis() 获取截图框基于容器的坐标点

this.$refs.cropper.goAutoCrop 自动生成截图框函数

this.$refs.cropper.rotateRight() 向右边旋转90度

this.$refs.cropper.rotateLeft() 向左边旋转90度

图片加载的回调 imgLoad 返回结果success, error

举个不听话的栗子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue应用插件

一、amfe-flexible/postcss-pxtorem——Vue CLI 3 自适应解决方案1-------------安装amfe-flexiblecnpm i amfe-flexible -S配置amfe-flexible//.main.jsimport Vue from 'vue'import App from './App.vue'import route...
复制链接

扫一扫