vue項(xiàng)目中公共方法的配置和調(diào)用

項(xiàng)目中我們總有不少公共方法要提取窗看,在Vue中具體大致可采用三種形式來(lái)實(shí)現(xiàn)。

一绿聘、過(guò)濾器

通常直接在實(shí)例模版中使用爬凑,用于處理數(shù)據(jù)格式。
注??:我在webpack中配置過(guò)路徑別名冒黑,以下代碼中的 @ 都是src文件夾的別名

  1. 把處理格式的函數(shù)都寫(xiě)在src/filters/index.js里田绑,每個(gè)方法都單獨(dú)export。過(guò)濾器函數(shù)都必須有返回值
// src/filters/index.js

/**
 * 把時(shí)間處理成所需格式的字符串
 * @param {(Object|string|number)} time
 * @param {string} cFormat
 * @returns {string | null}
 */
export function parseTime(time, cFormat) {
  if(!time) {
    return ''
  }
  if (arguments.length === 0) {
    return null
  }
  const format = cFormat || '{y}-{m}-rcuqyxs {h}:{i}:{s}'
  let date
  if (typeof time === 'object') {
    date = time
  } else {
    if (typeof time === 'string' && /^[0-9]+$/.test(time)) {
      time = parseInt(time)
    }
    if (typeof time === 'number' && time.toString().length === 10) {
      time = time * 1000
    }
    date = new Date(time)
  }
  const formatObj = {
    y: date.getFullYear(),
    m: date.getMonth() + 1,
    d: date.getDate(),
    h: date.getHours(),
    i: date.getMinutes(),
    s: date.getSeconds(),
    a: date.getDay()
  }
  const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
    const value = formatObj[key]
    // Note: getDay() returns 0 on Sunday
    if (key === 'a') {
      return ['日', '一', '二', '三', '四', '五', '六'][value]
    }
    return value.toString().padStart(2, '0')
  })
  return time_str
}

/** 截取字?jǐn)?shù)長(zhǎng)度, 常用
  * @param {string} text
  * @param {number} length
*/
export function textFilter(text, length){
  let shortText = text
  const len = length ? length : 20
  if (text && text.length > len) {
    shortText = text.substring(0, len) + '...'
  }
  return shortText
}
  1. 在 src/main.js 注冊(cè)過(guò)濾器
import * as filters from './filters' 
// 注冊(cè)全局公共過(guò)濾器
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})
  1. 在實(shí)例模版中使用
<template>
  <div class="app-container">
    <el-table-column label="發(fā)布日期" align="center" sortable="custom" prop="created_time">
      <template slot-scope="scope">
        {{ scope.row.created_time | parseTime('{y}-{m}-ghw4xn5') }}
      </template>
    </el-table-column>
    <el-table-column label="詳情" align="center">
      <template slot-scope="scope">
        {{ scope.row.detail | textFilter(10) }}
      </template>
    </el-table-column>
  </div>
</template>

二抡爹、在實(shí)例 import 公共方法

  1. 在 src/utils/index.js 單獨(dú)導(dǎo)出這些具名函數(shù)
/**
 * 把標(biāo)準(zhǔn)時(shí)間轉(zhuǎn)換成時(shí)間戳
 * 傳入標(biāo)準(zhǔn)時(shí)間
 */
export function timestamp(date) {
  let myDate = date ? new Date(date) : new Date()
  return Date.parse(myDate) / 1000
}

/**
 * 時(shí)間戳轉(zhuǎn)換成把標(biāo)準(zhǔn)時(shí)間
 * 傳入時(shí)間戳
 */
export function standardTime(timestamp) {
  let time = timestamp.toString() + '000'
  return new Date(parseInt(time))
}
  1. 在實(shí)例中導(dǎo)入需要的方法并使用
import { timestamp, standardTime } from '@/utils'

export default {
  filters: {
    statusFilter(time) { // 在局部過(guò)濾器中使用
      let status = time > timestamp() ? 'success' : 'info'
      return status
    }
  },
  computed: {
    nowTime() {  // 在計(jì)算屬性中使用
      return timestamp()
    }
  },
  methods: {
    handleEdit(id) { // 在實(shí)例方法中使用
      ...
      this.newTrade.validTime = standardTime(this.newTrade.validTime)
    },
  }
}

三掩驱、全局方法

像二那樣每次要使用都要在實(shí)例里面import一遍,如果是使用率比較高的方法冬竟,我們還是掛載到全局比較方便欧穴。比如經(jīng)常要用到的刪除和批量刪除數(shù)據(jù)。

在src/utils/common.js里導(dǎo)出這些公共方法

// src/utils/common.js

import {
  Message,
  MessageBox,
} from 'element-ui'

/**
 * 刪除數(shù)據(jù)
 * @id {(string)} 多個(gè)id用 , 分隔
 * @deleteFun {Function} 刪除數(shù)據(jù)調(diào)用的Api方法
 * @callback {Function} 刪除成功的回調(diào)
 * @returns {null}
 */
export const deleteById = (id, deleteFun, callback) => {
  MessageBox.confirm('是否要永久刪除該信息', '提示', {
    confirmButtonText: '確定',
    cancelButtonText: '取消',
    type: 'warn'
  })
    .then(() => {
      deleteFun(id).then(res => {
        Message({ type: 'success', message: res.message })
        callback()
      })
    })
    .catch(() => {
      Message({ type: 'info', message: '已取消刪除' })
    })
}

/**
 * 批量刪除數(shù)據(jù)
 * ...
 */
export const multipleDelete = (multiData, deleteFun, callback) => {
  ...
}

/**
 * el-table列數(shù)據(jù)篩選
 * 可直接在組件模版調(diào)用
*/
export const filterChange = (filters, target) => {
  Object.assign(target.queryInfo, filters)
  target.fetchData('new')
}

/**
 * el-table列數(shù)據(jù)排序
 * 可直接在組件模版調(diào)用
*/
export const sortChange = (sortInfo, target) => {
  let order = sortInfo.order
  order === 'ascending' ? (order = 1) : (order = -1)
  target.queryInfo.sortJson = {}
  target.queryInfo.sortJson[sortInfo.prop] = order
  target.queryInfo.sort = JSON.stringify(target.queryInfo.sortJson)
  target.fetchData('new')
}

在 main.js 整體導(dǎo)入包含所有方法(變量)的模塊(這里我們給它定義了 commonApi 的別名)泵殴,然后掛載在 Vue.prototype上

// src/main.js
import * as commonApi from '@/utils/common'
Vue.prototype.commonApi = commonApi

在實(shí)例里方法里調(diào)用

import { deleteFossil } from '@/api/fossil'
methods: {
  fetchData(param) { ... },
  handleDelete(id) {
    this.commonApi.deleteById(id, deleteFossil, this.fetchData)
  },
}

如果該全局方法涮帘,沒(méi)有像上述deleteById一樣有引用非實(shí)例方法的參數(shù)(deleteFossil是外部導(dǎo)入的請(qǐng)求方法),也可以直接在template里調(diào)用笑诅,如下:

因?yàn)槟0嬷兄苯诱{(diào)用的方法调缨,vue會(huì)自動(dòng)給我們加上this

<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      :empty-text="emptyText"
      @selection-change="handleSelectionChange"
      @filter-change="filters => commonApi.filterChange(filters, this)"
      @sort-change="sortInfo => commonApi.sortChange(sortInfo, this)"
    >
      ...
    </el-table>
  </div>
</template>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末疮鲫,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子弦叶,更是在濱河造成了極大的恐慌俊犯,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,348評(píng)論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件伤哺,死亡現(xiàn)場(chǎng)離奇詭異燕侠,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)立莉,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,122評(píng)論 2 385
  • 文/潘曉璐 我一進(jìn)店門(mén)绢彤,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人桃序,你說(shuō)我怎么就攤上這事杖虾。” “怎么了媒熊?”我有些...
    開(kāi)封第一講書(shū)人閱讀 156,936評(píng)論 0 347
  • 文/不壞的土叔 我叫張陵奇适,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我芦鳍,道長(zhǎng)嚷往,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,427評(píng)論 1 283
  • 正文 為了忘掉前任柠衅,我火速辦了婚禮皮仁,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘菲宴。我一直安慰自己贷祈,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,467評(píng)論 6 385
  • 文/花漫 我一把揭開(kāi)白布喝峦。 她就那樣靜靜地躺著势誊,像睡著了一般。 火紅的嫁衣襯著肌膚如雪谣蠢。 梳的紋絲不亂的頭發(fā)上粟耻,一...
    開(kāi)封第一講書(shū)人閱讀 49,785評(píng)論 1 290
  • 那天,我揣著相機(jī)與錄音眉踱,去河邊找鬼挤忙。 笑死,一個(gè)胖子當(dāng)著我的面吹牛谈喳,可吹牛的內(nèi)容都是我干的册烈。 我是一名探鬼主播,決...
    沈念sama閱讀 38,931評(píng)論 3 406
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼叁执,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼茄厘!你這毒婦竟也來(lái)了矮冬?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 37,696評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤次哈,失蹤者是張志新(化名)和其女友劉穎胎署,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體窑滞,經(jīng)...
    沈念sama閱讀 44,141評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡琼牧,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,483評(píng)論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了哀卫。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片巨坊。...
    茶點(diǎn)故事閱讀 38,625評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖此改,靈堂內(nèi)的尸體忽然破棺而出趾撵,到底是詐尸還是另有隱情,我是刑警寧澤共啃,帶...
    沈念sama閱讀 34,291評(píng)論 4 329
  • 正文 年R本政府宣布占调,位于F島的核電站,受9級(jí)特大地震影響移剪,放射性物質(zhì)發(fā)生泄漏究珊。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,892評(píng)論 3 312
  • 文/蒙蒙 一纵苛、第九天 我趴在偏房一處隱蔽的房頂上張望剿涮。 院中可真熱鬧,春花似錦攻人、人聲如沸取试。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,741評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)想括。三九已至,卻和暖如春烙博,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背烟逊。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,977評(píng)論 1 265
  • 我被黑心中介騙來(lái)泰國(guó)打工渣窜, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人宪躯。 一個(gè)月前我還...
    沈念sama閱讀 46,324評(píng)論 2 360
  • 正文 我出身青樓乔宿,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親访雪。 傳聞我的和親對(duì)象是個(gè)殘疾皇子详瑞,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,492評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容