15-vux踩坑

发表于 | 分类于 |

本文不仅限于vux组件，包括项目中遇到的一些问题记录
本文不仅限于vux组件，包括项目中遇到的一些问题记录

1. AlertModule 组件

原先写法：

1
2
3
4
5
AlertModule.show({
  title: '提示',
  content: '请输入手机号码',
  maskTransition: '' // 原生的 maskTransition 动画慢一拍，设置为空取消动画
})

解决：

每次写都要加maskTransition: '' // 原生的 maskTransition 动画慢一拍，设置为空取消动画，为了简写，封装一个函数，预设设置。

src/plugins/Alert.js:

1
2
3
4
5
6
7
8
9
10
import { AlertModule } from 'vux'

export default function(tip, payload = {}) {
  AlertModule.show({
    title: '提示',
    ...payload,
    content: tip,
    maskTransition: '' // 原生的 maskTransition 动画慢一拍，设置为空取消动画
  })
}

并将yxAlert写到 Vue.prototype.$yxAlert 上

src/plugins/index.js:

1
2
3
4
5
6
import yxAlert from './Alert'
export default {
  install: (Vue, options) => {
    Vue.prototype.$yxAlert = yxAlert
  }
}

2. toast 组件

同理，src/plugins/Alert.js:

1
2
3
4
export function yxToast(tip, position = 'bottom') {
  Vue.$vux.toast.text(tip, position)
  return Vue.$vux.toast
}

引用：

1
this.$yxToast('请输入您的手机号码')

3. 防抖函数

vux自带防抖函数，简单包装在工具函数js里src/utils

1
2
3
4
5
6
7
8
9
import { dateFormat, debounce as vuxDebounce } from 'vux'

// 防抖
export function throttle(fn, time) {
  return vuxDebounce(fn, time, {
    'leading': true,
    'trailing': false
  })
}

使用方法：

1
2
3
4
// 上拉加载
onPullingUp: throttle(function() {
  this.SearchOranizations()
}, 2000),

3. 验证插件

由于vux没有element-ui一套完整的验证规则，可采用vee-validate插件

4. vue-awesome-swiper 插件使用

vue-awesome-swiper 当你使用了 loop 模式，尽量用 v-if 来控制 swiper 组件的渲染，并且，swiper 对 图片懒加载不友好。

1
2
3
4
<swiper :options="swiperOption" ref="swiperOption" v-if="value.length > 0">
    <swiper-slide v-for="(slide, index) in value" :key="index" ><img class="slider-img" :src="slide.F_PictureUrl" alt=""></swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
</swiper>

5. 手机侧滑插件

采用插件sideout.

6. 判断浏览器内核

请查看 Browser.js

7. 上拉下滑插件

本项目使用 better-scroll,封装从 cube-ui的 Scroll 组件，api可查看文档

bs有个问题，在手机uc浏览器，手机safria浏览器，底部栏会遮挡底部内容

1
2
3
4
5
6
7
8
9
10
11
12
13
_calculateMinHeight() {
  if (this.$refs.listWrapper) {
    this.$refs.listWrapper.style.minHeight = this.pullDownRefresh || this.pullUpLoad ? `${getRect(this.$refs.wrapper).height + 1}px` : 0
  }
  /* 给 UC，safira浏览器增加 padding-bottom，防止底部栏遮挡内容 */
  var _navigator = typeof navigator !== 'undefined' ? navigator : {}
  var u = _navigator.userAgent || {}
  var isUC = u.indexOf('UC') > -1 || u.indexOf(' UBrowser') > -1
  // var Safari = u.indexOf('Safari') > -1
  if (isUC) {
    this.$refs.listWrapper.style.paddingBottom = '50px'
  }
},

8.upload图片上传组件

由于vux没有图片上传组件，故采用ube-ui的upload组件,并简单封装一下。

1
2
3
4
5
6
7
8
<yx-upload
  v-model="value" // 图片链接，上传1张用字符串，多张用字符串数组
  @file-error="fileError"
  @file-success="fileSuccess"
  folderName="companyInsert"
  :maxSize="2*1024*1024"
  :amount="1">
</yx-upload>