Vue项目总结

2020-07-11  本文已影响0人  Roseska

（一）vue

1.页面加载速度优化

2.移动端适配

一般我们只希望 iPhoneX 才需要新增适配样式，我们可以配合@supports 这样编写样式：

 @supports (bottom: constant(safe-area-inset-bottom)) {
       div {
           margin-bottom: constant(safe-area-inset-bottom);
       }
     }

高版本的写法（用env函数，且要放在constant函数下方）
env(safe-area-inset-top, 20px)：env()的第二个可选参数，如果环境变量不可用，该参数可让您设置备用值

   data(){
       return {
           screenWidth: document.body.clientWidth,
           timer: false,
       }
   },
   created() {
     this.refreshRem()
     window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth
        this.screenWidth = window.screenWidth
        this.refreshRem()
      })()
     }
  },
  watch: {
    screenWidth(val) {
      //这里用到了节流
      if (!this.timer) {
        this.screenWidth = val
        this.timer = true
        setTimeout(() => {
          this.refreshRem()
          this.timer = false
        }, 400)
      }
    }
  },
  methods:{
    refreshRem() {
        const docEl = document.documentElement;
        const rem = this.clientWidth / 3.75;
        docEl.style.fontSize = rem + "px";
    }
  }

3.好用的插件

4.其他

 <div 
      :class="{'bar-item selected': index === selected, 'bar-item': index !== selected}" 
      v-for="(item, index) in items" 
      @click="handleItemClick(index)"
      :key="index">
      <div class="item-text">
        {{item.name}}
      </div>
      <div class="item-border" v-show="selected === index"></div>
</div>

data:{
    selected:0
}
methods: {
    handleItemClick(index) {
      this.selected = index
    }
  }

（二）Element UI防踩坑指南

1.el-slider组件

 <el-slider
    v-model="value"
    show-stops
    :step="10"
    range
    :format-tooltip="formatTooltip"
    :max="70"
    @change="ageChange"
></el-slider>  #max应设为step的整数，这样会避免undefined的情况发生

2.el-table组件

当el-table有多选框时，有这样两个方法select和selection-change

事件名 说明 参数
select 当用户手动勾选数据行的 Checkbox 时触发的事件 selection, row 短文本 中等文本 稍微长一点的文本
selection-change 当选择项发生变化时会触发该事件 selection

注意：

3.vue中element-ui实现的slot分发和route路由

     #单个激活 并以 index 作为 path 进行路由跳转
    <el-menu unique-opened router v-show="!collapsed">
     #动态路由到子组件 将不可见的路径隐藏
     <template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
       <el-submenu :index="index+''" v-if="!item.leaf">
        #用el ui 的title进行slot分发菜单
         <template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>
          #item.name和item.children.name来配置菜单栏和子菜单栏的名称
         <el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" v-if="!child.hidden">
             {{child.name}}
         </el-menu-item>
       </el-submenu>
       <el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path">
            <i :class="item.iconCls"></i>
            {{item.children[0].name}}
       </el-menu-item>
     </template>
   </el-menu>

4.element-ui组件中方法调用问题

<el-input type="text" :placeholder="fileName" v-model="uploadForm.reNameTxt" @keyup.enter.native="reNameSuccess"></el-input>

@keyup.enter.native多加了个native

注意！！！如果用了封装组件的话，比如element，这个时候使用按键修饰符需要加上.native

当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在<el-form>标签上添加 @submit.native.prevent ;

即@submit.native.prevent是用来阻止默认行为的

5.el-upload组件使用

 <el-upload
      class="avatar-uploader"
      :http-request="handleGiftImgUpload"
      :show-file-list="false"
      :before-upload="beforeUpload"
      :on-success="
        (res, file) => {
          return onUploadSuccess(res, file)
        }
      "
    >
    <img v-if="bindForm.urlPic !== ''" :src="bindForm.urlPic" class="avatar" />
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

beforeUpload(file) {
  const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif'
  if (!isJPG) {
    this.$message.error('只能上传图片格式!')
  }
  return isJPG
},

handleGiftImgUpload(fileObj) {
  const formData = new FormData()
  formData.append('file', fileObj.file)
  return giftManagerUpdateImage(formData)#接口名字
},

onUploadSuccess(res) {
  this.bindForm.urlPic = res.data
},

(三)webpack

可以看我的另一篇文章：webpack构建

上一篇 下一篇

猜你喜欢

热点阅读