VUE工具开发

#bash

npm install mc-libs

//main.js

import utils from 'mc-libs'
Vue.use(utils)

Smart-Img.vue 智能裁剪

• 在不能完全展示图片全尺寸的情况下，图片将智能选区，自动裁剪最佳区域并生成一张新图

• 生成的为canvas图，且高宽都为100%，所以父容器需要固定高宽

<!-- xxx.vue -->

<Smart-Img :imgURL='imgURL' :cropWidth="width" :cropHeight="height"></Smart-Img>

| 参数 | 说明 | 类型 | | -------- | -----: | ----: | | imgURL | 图片地址 | String | | cropWidth | 裁剪宽度 | Number | | cropHeight | 裁剪高度 | Number |

v-scroll-text 指令

• 文本溢出时自动左右来回滚动

• div 需要有固定的宽度

<!-- xxx.vue -->

<div v-scroll-text:speed="text"></div>

| 参数 | 说明 | 类型 | | -------- | -----: | :----: | | v-scroll-text | 滚动指令 | String | | text | 纯文本 | String | | speed | 速度/毫秒(可选) | Number |

通用对话框

• 通用的对话框，需自定义宽度和居中

<!-- xxx.vue -->

<Tui-Dialog :show.sync="绑定显示属性" @on-hide="关闭事件">这里放自定义内容</Tui-Dialog>

请求后缓存

• 基于axios修改的

// 用法
this.$storage({
  name: '缓存名[必选]',
  type: 'local || session 缓存类型[默认session]',
  timeout: '1000 过期时间[毫秒]，[默认7天]',
  url: 'axios请求地址[必选]',
  httpType: 'get || post 请求类型[默认get]',
  params: 'axios请求参数，按axios格式[可选]',
  status: 'err_code=200[必选]',
  success: (res) => {
    // res为axios请求成功返回的结果
  }
})