常见插件使用

总结一下我的开发的后台管理系统中用到的插件 项目地址

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'
复制代码

未完待续...