常見插件使用

總結一下我的開發的後臺管理系統中用到的插件 項目地址

vuex 持續儲存

使用vuex-persistedstate實現數據持續存

//安裝
npm i vue-persistedstate -S

//使用 在 store.js 中
import createPersistedState from "vuex-persistedstate"

export default new Vuex.Store({
    ...
    plugins:[createPersistedState({
        storage: window.sessionStorage, // 存儲方式 默認使用 localStorage
        reducer(state){
            return { // 這裏須要存儲的vuex 中的數據位置也要同樣 , 好比模塊 app 中的 test 參數
                app: {
                    test: state.app.test
                }
            }
        }
    })]
})
複製代碼

數字滾動效果

使用 vue-countTo實現數字滾動效果

// 安裝
npm i vue-count-to -S

// 使用 在組件中
import CountTo from 'vue-count-to'

<template>
    <countTo :startVal="startVal" :endVal="endVal" :duration="3000"></countTo>
</template>

// 常見屬性
詳見文檔
複製代碼

時間處理

使用 Moment.js 快速處理時間

// 安裝 
npm i moment -S

// 使用 在 main.js中
import moment from 'moment'
moment.locale('zh-cn')
Vue.prototype.$moment = moment

// 在組件中直接使用
this.$moment(new Date()).format('YYYY-MM-DD')
複製代碼

全屏插件

使用 screenfull 實現全屏操做

常見屬性和方法

屬性/方法	描述	值
screenfull.isEnabled	返回瀏覽器是否支持全屏操做	true/false
screenfull.isFullscreen	返回當前瀏覽器狀態	true/flase
screenfull.toggle()	切換當前狀態
screenfull.on('change', fn)	添加監聽事件,監聽全屏改變
screenfull.off('change',fn)	移除監聽事件
screenfull.request()	接受一個dom,設置某個元素全屏操做	默認值 html

// 安裝
npm i screenfull -S

//在組件中
import screenfull from 'screenfull'

<button @click="handleFullScreen"></button>

<script>
export default {
    data(){
        return {
            isFullScreen: false
        }
    },
    methods:{
        handleFullScreen(){
            if(screenfull.isEnabled){
                screenfull.toggle()
            }else {
                this.$message.warning('當前瀏覽器不支持')
            }
        },
        change(){
            this.isFullScreen = screenfull.isFullscreen
        }
    },
    created(){
        if(screenfull,isEnabled){
            screenfull.on('change', this.change)
        }
    },
    beforeDestory() {
        if(screenfull.isEnabled) {
            screenfull.off('change', this.change)
        }
    }
}
</script>
複製代碼

國際化

使用 vue-i18n 實現 國際化

通常 我會建立三個文件 index.js en.js zh.js

// 在 index.js 中
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n) // 以插件的形式掛載到vue上

// 引入語言包 結合 element 使用
import en from './en'
import zh from './zh'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'

const i18n = new VueI18n({
    locale: 'zh', // 通常結合 vuex + 本地存儲 實現 刷新語言還在
    messages: {
        'zh': Object.assign(zh, zhLocale),
        'en': Object.assign(en, enLocale)
    }
})

export default i18n

//在 main.js 中
import i18n from './lang/index'

new Vue({
    ...
    i18n
}).$mount('#app')

// 而後再組件中
// 展現字段
{{$t('test')}}
// js 中
this.$t('test')

// 語言切換
this.$i18n.locale = 'en'
複製代碼

未完待續...