[JavaScript知识库]VUE参数划分

VUE的指令与过滤器filter

过滤器Fileters:常用于文本格式化。过滤器可以用在两个地方：1.插值表达式。 2.v-bind绑定器

<p>{{message|capitalize}}</p>
    <!--formatId为过滤器 -->
<div v-bind:id="rawId|formatId"></div>

定义私有过滤器

const vm = new Vue({
el:'#app',
data:{
  message:'hello vue.js',
  info:'title info'
},
filters:{
  //在filters节点下定义过滤器
    capitalize(str) {
     return str.charAt(0).toUpperCase()+str.slice(1)
  }
 }
})

定义全局过滤器

Vue.filer('capitalize',(str) => {
    return str.charAt(0).toUpperCase()+str.slice(1)+'~~'
})

过滤器的串联调用

{{message|filterA|filterB}}

过滤器传参

过滤器的本质是javaScript函数，因此可以接收参数

<!--arg1和arg2是传递给filterA的参数 -->
<p>{{message|filterA(arg1,arg2)}}</p>

//过滤器处理函数的形参列表中：
//第一个参数：永远都是“管道符”前面待处理的值
//第二个参数开始，才是调用过滤器时传送过来的arg1和arg2参数
Vue.filter('filterA',(msg,arg1,arg2) => {
  //过滤器代码逻辑
})

过滤器传参示例代码

<!--调用maxLength过滤器时传参-->
<p>{{text|capitalize|maxLength(5)}}</p>

//全局过滤器 - 首字母大写
Vue.filter('capitalize',(str) => {
  return str.charAt(0).toUpperCase()+str.slice(1)+'~~'
})

//全局过滤器控制文本的最大长度
Vue.filter('maxLength',(str,len = 10) => {
  if (str.length <= len) return str
                       return str.slice(0,len) + '...'
})

例子 ：使用全局过滤器对时间进行格式化

Vue.filter('dataFormat',(dtStr) => {
    //定义格式化时间的过滤器dataForm
    const dt = new Date(dtStr)
    
    const y = dt.getFullYear()
    const m = padZero(dt.getMonth() + 1)
    const d = padZero(dt.getDate())
    const hh = padZero(dt.getHours())
    const mm = padZero(dt.getMinutes())
    const ss = padZero(dt.getSeconds())
    
    return '${y}--${m}--{d}  ${hh}:${mm}:${ss}'
})

watch监听器

在watch节点下定义自己的侦听器：

export default {
    data(){
        return{
            username:''
        }
    },
    watch:{
        //监听username的值的变化
        //形参列表中，第一个值是"变化后的新值"，第二个值是“变化之前的旧值”
        username(newVal,oldVal){
            console.log(newVal，oldVal)
        },
 }
}

使用watch检测用户名是否可用

监听username值的变化，并用axios发起Ajax请求，检测当前输入用户名是否可用：

import axios from 'axios'
export default {
    data(){
        return {username:''}
    },
    watch:{
        async username(newVal,oldVal) {
            const {data:res} = await axios.get('https://www.escook.cn/api/finduser/${newVal}')
            console.log(res)
        }
    }
}

immediate选项

默认情况下，组件在初次加载完毕后不会调用watch侦听器，如果想让watch侦听器立即被调用，则需要使用immedita选项，实例代码如下：

watch:{
    //监听username值的变化
    username:{
        //handler属性是固定写法：当username变化是，调用handler
        async handler(newVal,oldVal) {
            const {data:res} = await axios.get('https://www.escook.cn/api/finduser/${newVal}')
            console.log(res)
        },
            //表示组件加载完毕后立即调用一次当前的watch侦听器
            immediate:true
    }
}

deep选项

当watch侦听的是一个对象，如果对象中的属性值发生了变化，则无法被监听到，此时需要deep选项。

data() {
    return {
        info:{username:'admin'},
    }
},
    
watch:{
    info:{
        asyno handler(newVal,oldVal) {
            const {data:res} =await axios.get('https://www.escook.cn/api/finduser/${newVal}')
            console.log(res)
        },
    deep:true //需要使用deep选项，否则username值的变化无法被监听到
    }
}

监听对象中单个属性变化

data(){
    return{
        info:{username:'admin',password:''},
    }
},

watch:{
    'info.username':{
        async handler(newVal,oldVal){
            const {data:res} = await axios.get('https://www.escook.cn/api/finduser/${newVal}')
            console.log(res)
        }
    }
}    

jeecgboot-jeecglistMixin.js(参数来源)

/**
 * 新增修改完成调用 modalFormOk方法 编辑弹框组件ref定义为modalForm
 * 高级查询按钮调用 superQuery方法  高级查询组件ref定义为superQueryModal
 * data中url定义 list为查询列表  delete为删除单条记录  deleteBatch为批量删除
 */
import { filterObj } from '@/utils/util';
import { deleteAction, getAction,downFile,getFileAccessHttpUrl } from '@/api/manage'
import Vue from 'vue'
import { ACCESS_TOKEN, TENANT_ID } from "@/store/mutation-types"
import store from '@/store'

export const JeecgListMixin = {
  data(){
    return {
      /* 查询条件-请不要在queryParam中声明非字符串值的属性 */
      queryParam: {},
      /* 数据源 */
      dataSource:[],
      /* 分页参数 */
      ipagination:{
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      /* 排序参数 */
      isorter:{
        column: 'createTime',
        order: 'desc',
      },
      /* 筛选参数 */
      filters: {},
      /* table加载状态 */
      loading:false,
      /* table选中keys*/
      selectedRowKeys: [],
      /* table选中records*/
      selectionRows: [],
      /* 查询折叠 */
      toggleSearchStatus:false,
      /* 高级查询条件生效状态 */
      superQueryFlag:false,
      /* 高级查询条件 */
      superQueryParams: '',
      /** 高级查询拼接方式 */
      superQueryMatchType: 'and',
    }
  },
  created() {
      if(!this.disableMixinCreated){
        console.log(' -- mixin created -- ')
        this.loadData();
        //初始化字典配置 在自己页面定义
        this.initDictConfig();
      }
  },
  computed: {
    //token header
    tokenHeader(){
      let head = {'X-Access-Token': Vue.ls.get(ACCESS_TOKEN)}
      let tenantid = Vue.ls.get(TENANT_ID)
      if(tenantid){
        head['tenant-id'] = tenantid
      }
      return head;
    }
  },
  methods:{
    loadData(arg) {
      if(!this.url.list){
        this.$message.error("请设置url.list属性!")
        return
      }
      //加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1;
      }
      var params = this.getQueryParams();//查询条件
      this.loading = true;
        //发送请求
      getAction(this.url.list, params).then((res) => {
        if (res.success) {
          //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
          this.dataSource = res.result.records||res.result;
          if(res.result.total)
          {
            this.ipagination.total = res.result.total;
          }else{
            this.ipagination.total = 0;
          }
          //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
        }else{
          this.$message.warning(res.message)
        }
      }).finally(() => {
        this.loading = false
      })
    },
    initDictConfig(){
      console.log("--这是一个假的方法!")
    },
    handleSuperQuery(params, matchType) {
      //高级查询方法
      if(!params){
        this.superQueryParams=''
        this.superQueryFlag = false
      }else{
        this.superQueryFlag = true
        this.superQueryParams=JSON.stringify(params)
        this.superQueryMatchType = matchType
      }
      this.loadData(1)
    },
    getQueryParams() {
      //获取查询条件
      let sqp = {}
      if(this.superQueryParams){
        sqp['superQueryParams']=encodeURI(this.superQueryParams)
        sqp['superQueryMatchType'] = this.superQueryMatchType
      }
      var param = Object.assign(sqp, this.queryParam, this.isorter ,this.filters);
      param.field = this.getQueryField();
      param.pageNo = this.ipagination.current;
      param.pageSize = this.ipagination.pageSize;
      return filterObj(param);
    },
    getQueryField() {
      //TODO 字段权限控制
      var str = "id,";
      this.columns.forEach(function (value) {
        str += "," + value.dataIndex;
      });
      return str;
    },

onSelectChange(selectedRowKeys, selectionRows) {
  this.selectedRowKeys = selectedRowKeys;
  this.selectionRows = selectionRows;
},
onClearSelected() {
  this.selectedRowKeys = [];
  this.selectionRows = [];
},
searchQuery() {
  this.loadData(1);
},
superQuery() {
  this.$refs.superQueryModal.show();
},
searchReset() {
  this.queryParam = {}
  this.loadData(1);
},
batchDel: function () {
  if(!this.url.deleteBatch){
    this.$message.error("请设置url.deleteBatch属性!")
    return
  }
  if (this.selectedRowKeys.length <= 0) {
    this.$message.warning('请选择一条记录！');
    return;
  } else {
    var ids = "";
    for (var a = 0; a < this.selectedRowKeys.length; a++) {
      ids += this.selectedRowKeys[a] + ",";
    }
    var that = this;
    this.$confirm({
      title: "确认删除",
      content: "是否删除选中数据?",
      onOk: function () {
        that.loading = true;
        deleteAction(that.url.deleteBatch, {ids: ids}).then((res) => {
          if (res.success) {
            //重新计算分页问题
            that.reCalculatePage(that.selectedRowKeys.length)
            that.$message.success(res.message);
            that.loadData();
            that.onClearSelected();
          } else {
            that.$message.warning(res.message);
          }
        }).finally(() => {
          that.loading = false;
        });
      }
    });
  }
},
handleDelete: function (id) {
  if(!this.url.delete){
    this.$message.error("请设置url.delete属性!")
    return
  }
  var that = this;
  deleteAction(that.url.delete, {id: id}).then((res) => {
    if (res.success) {
      //重新计算分页问题
      that.reCalculatePage(1)
      that.$message.success(res.message);
      that.loadData();
    } else {
      that.$message.warning(res.message);
    }
  });
},
reCalculatePage(count){
  //总数量-count
  let total=this.ipagination.total-count;
  //获取删除后的分页数
  let currentIndex=Math.ceil(total/this.ipagination.pageSize);
  //删除后的分页数<所在当前页
  if(currentIndex<this.ipagination.current){
    this.ipagination.current=currentIndex;
  }
  console.log('currentIndex',currentIndex)
},
handleEdit: function (record) {
  this.$refs.modalForm.edit(record);
  this.$refs.modalForm.title = "编辑";
  this.$refs.modalForm.disableSubmit = false;
},
handleAdd: function () {
  this.$refs.modalForm.add();
  this.$refs.modalForm.title = "新增";
  this.$refs.modalForm.disableSubmit = false;
},
handleTableChange(pagination, filters, sorter) {
  //分页、排序、筛选变化时触发
  //TODO 筛选
  console.log(pagination)
  if (Object.keys(sorter).length > 0) {
    this.isorter.column = sorter.field;
    this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
  }
  this.ipagination = pagination;
  this.loadData();
},
handleToggleSearch(){
  this.toggleSearchStatus = !this.toggleSearchStatus;
},
// 给popup查询使用(查询区域不支持回填多个字段，限制只返回一个字段)
getPopupField(fields){
  return fields.split(',')[0]
},
modalFormOk() {
  // 新增/修改 成功时，重载列表
  this.loadData();
  //清空列表选中
  this.onClearSelected()
},
handleDetail:function(record){
  this.$refs.modalForm.edit(record);
  this.$refs.modalForm.title="详情";
  this.$refs.modalForm.disableSubmit = true;
},
/* 导出 */
handleExportXls2(){
  let paramsStr = encodeURI(JSON.stringify(this.getQueryParams()));
  let url = `${window._CONFIG['domianURL']}/${this.url.exportXlsUrl}?paramsStr=${paramsStr}`;
  window.location.href = url;
},
handleExportXls(fileName){
  if(!fileName || typeof fileName != "string"){
    fileName = "导出文件"
  }
  let param = this.getQueryParams();
  if(this.selectedRowKeys && this.selectedRowKeys.length>0){
    param['selections'] = this.selectedRowKeys.join(",")
  }
  console.log("导出参数",param)
  downFile(this.url.exportXlsUrl,param).then((data)=>{
    if (!data) {
      this.$message.warning("文件下载失败")
      return
    }
    if (typeof window.navigator.msSaveBlob !== 'undefined') {
      window.navigator.msSaveBlob(new Blob([data],{type: 'application/vnd.ms-excel'}), fileName+'.xls')
    }else{
      let url = window.URL.createObjectURL(new Blob([data],{type: 'application/vnd.ms-excel'}))
      let link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      link.setAttribute('download', fileName+'.xls')
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link); //下载完成移除元素
      window.URL.revokeObjectURL(url); //释放掉blob对象
    }
  })
},
/* 导入 */
handleImportExcel(info){
  this.loading = true;
  if (info.file.status !== 'uploading') {
    console.log(info.file, info.fileList);
  }
  if (info.file.status === 'done') {
    this.loading = false;
    if (info.file.response.success) {
      // this.$message.success(`${info.file.name} 文件上传成功`);
      if (info.file.response.code === 201) {
        let { message, result: { msg, fileUrl, fileName } } = info.file.response
        let href = window._CONFIG['domianURL'] + fileUrl
        this.$warning({
          title: message,
          content: (<div>
              <span>{msg}</span><br/>
              <span>具体详情请 <a href={href} target="_blank" download={fileName}>点击下载</a> </span>
            </div>
          )
        })
      } else {
        this.$message.success(info.file.response.message || `${info.file.name} 文件上传成功`)
      }
      this.loadData()
    } else {
      this.$message.error(`${info.file.name} ${info.file.response.message}.`);
    }
  } else if (info.file.status === 'error') {
    this.loading = false;
    if (info.file.response.status === 500) {
      let data = info.file.response
      const token = Vue.ls.get(ACCESS_TOKEN)
      if (token && data.message.includes("Token失效")) {
        this.$error({
          title: '登录已过期',
          content: '很抱歉，登录已过期，请重新登录',
          okText: '重新登录',
          mask: false,
          onOk: () => {
            store.dispatch('Logout').then(() => {
              Vue.ls.remove(ACCESS_TOKEN)
              window.location.reload();
            })
          }
        })
      }
    } else {
      this.$message.error(`文件上传失败: ${info.file.msg} `);
    }
  }
},
/* 图片预览 */
getImgView(text){
  if(text && text.indexOf(",")>0){
    text = text.substring(0,text.indexOf(","))
  }
  return getFileAccessHttpUrl(text)
},
/* 文件下载 */
// update--autor:lvdandan-----date:20200630------for：修改下载文件方法名uploadFile改为downloadFile------
downloadFile(text){
  if(!text){
    this.$message.warning("未知的文件")
    return;
  }
  if(text.indexOf(",")>0){
    text = text.substring(0,text.indexOf(","))
  }
  let url = getFileAccessHttpUrl(text)
  window.open(url);
},

}

}