一、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