vue 常用操作

Bonrui

已于 2024-09-20 15:15:06 修改

阅读量1.5k

点赞数

分类专栏： Vue 文章标签： vue vue-i18n 多语言

于 2018-01-15 10:53:12 首次发布

本文链接：https://blog.csdn.net/qinjm8888/article/details/79062073

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、多语言vue-i18n

使用vue开发的网站如何支持多语言？如果vue网站想支持多语言我们可以选择 vue-i18n 下面介绍一下它在vue中的使用：
    1：使用npm安装
        npm install vue-i18n -S
    2：挂载到vue实例

import Vue from 'vue'
import VueI18n from 'vue-i18n'

// install plugin
Vue.use(VueI18n)
Vue.config.lang = 'zh-cn'
Vue.locale('zh-cn', { message: '你好' })
Vue.locale('en', { message: 'hello' })

    3：模板使用
      <span>{{ $t('message') }}</span>
        或者也可以用在data中

export defaults {
  data () {
    return {
      hello: this.$t('message')
    }
  }
}

二、vue项目不同环境的配置

在项目根目录下创建 .env .env.development .env.production 文件，里面可以配置VUE_APP_API_URL的不同值(通过process.env.API_URL获取)。只有NODE_ENV,VUE_APP_*,BASE_URL(和config中publicPath对应)可以直接使用
可以在package.json配置scripts:{devbuild:'vue-cli-service build --mode development'}来指定环境。
其他常量可以自定义不同配置文件来实现，创建在/config/(index.js development.js production.js)文件

// development.js
export const globalParam = {
  apibaseUrl: 'devUrl',
  key: 'dev'
};

// production.js
export const globalParam = {
  apibaseUrl: 'proUrl',
  key: 'pro'
};

// index.js 公共常量可以定义在这
const env = process.env;
const {globalParam} = require('@/config/' + process.env.NODE_ENV);
export {
  env,
  globalParam
}

// main.js
import * as env from '@/config/env'
import {globalParam} from '@/config/env'
Object.keys(env).forEach(key => {
  Vue.prototype[key] = env[key]
}); // 通过this.globalParam可调用

三、vue.config.js常用配置


const path = require('path');

module.exports = {
    // 公共路径部署二级路径下需要对应修改/x/，同时需配置VueRouter({base:'/x/',mode:'history'})，history时NG需配置location /x {index /index.html;try_files $uri $uri/ /x/index.html;}
    publicPath:'./',
    outputDir: process.env.NODE_ENV === "development" ? 'devdist' : 'dist', // 不同的环境打不同包名
    assetsDir: 'static', // 静态资源目录 (js, css, img, fonts)
    lintOnSave: true, // 是否开启eslint保存检测，有效值：ture | false | 'error'
    css: {  // 一次配置，全局使用，这个scss 因为每个文件都要引入
        loaderOptions: {
            sass: {
                data: `@import "./src/assets/hotcss/px2rem.scss";`
            }
        }
    },
    lintOnSave:false,  // 关闭eslint
    productionSourceMap:true,  // 生产环境下css 分离文件
    devServer:{   // 配置服务器
        host: '0.0.0.0',
        hotOnly: false,
        port:8081,
        open:true,
        https:false,
        overlay: {
            warnings: true,
            errors: true
        },
        proxy: null,
        // proxy: {
        //     '/api': {
        //         target: '<url>',
        //         ws: true,
        //         changOrigin: true
        //     }
        // },
        before: app => {}
    },
    // chainWebpack: config => { // 修改webpack配置
        // config.resolve.alias.set('@', path.resolve(__dirname, './src'))
    // },
    configureWebpack:{  // 覆盖webpack默认配置的都在这里
        resolve:{   // 配置解析别名
            alias:{
                '@':path.resolve(__dirname, './src'),
                '@h':path.resolve(__dirname, './src/assets/hotcss'),
                '@s':path.resolve(__dirname, './src/assets/style'),
                '@i':path.resolve(__dirname, './src/assets/images'),
            } 
        },
        plugins: [
          new CompressionPlugin({
            cache: false,                   // 编译后文件缓存 node_modules/.cache 为true会导致缓存越来越大
            test: /\.(js|css|woff|woff2|json|txt|html|ico|svg)(\?.*)?$/i,     // 压缩文件格式
            filename: '[path].gz[query]',   // 压缩后的文件名
            threshold: 10240,               // 压缩超过10k的文件
            deleteOriginalAssets: false,    // 不删除压缩前的文件，如果浏览器不支持gzip加载源文件
            algorithm: 'gzip',              // 使用gzip压缩
            minRatio: 0.8                   // 压缩率小于1才会压缩
          })
        ]
    }
}

四、ElementUI相关

1：键盘事件

// 1：el-input 键盘事件
<el-input @keyup.enter.native="function"></el-input>
// 2：页面键盘事件
created: function() {
    document.addEventListener('keydown',this.handleEvent)
},
methods: {
	handleEvent(e){
        var that = this;
        //alt+F  
        let key = window.event.keyCode;  
        if (70 == e.keyCode && e.altKey){
            // 如果是Alt+F 的操作的话，方法执行与此
        }
    },
},
beforeDestroy(){
   document.removeEventListener('keydown', this.handleEvent);
}
// 3：el-input获取焦点选中
<el-input @focus="function($event)"></el-input>
methods: {
	function(e){
        e.currentTarget.select();
    },
}

2：el-table滚动条自动滚动

<el-table ref="tabData"></el-tabe>
<script>
export default {
  data() {
    return {
      scrollTimer: null
    };
  },
  mounted() {
    if (!!this.id) {
      this.autoRoll();
    }
  },
  destroyed() {
    clearInterval(this.scrollTimer);
  },
  methods: {
    autoRoll() {
      let status = true;
      // const divData = this.$refs.dataTab.$el;
      const divData = this.$refs.tabData.bodyWrapper;
      divData.addEventListener("mouseenter", (e) => {
        status = false;
      });
      divData.addEventListener("mouseleave", (e) => {
        status = true;
      });

      this.scrollTimer = setInterval(() => {
        if (status) {
          divData.scrollTop += 140;
          console.log(divData.clientHeight + divData.scrollTop, divData.scrollHeight);
          if (divData.scrollHeight - (divData.clientHeight + divData.scrollTop) <= 2) {
            divData.scrollTop = 0;
          }
        }
      }, 10000);
    }
  }
}
</script>

五、甘特图插件

Gantt : Samples DHTMLX-GANTT

npm install dhtmlx-gantt
<div ref="gantt"></div>
import { gantt } from 'dhtmlx-gantt';
  mounted: function () {
    // 初始化甘特图配置基础配置省略
    // 缩放功能配置
    let zoomConfig = {
      min_column_width: 80,
      max_column_width: 160,
      levels: [
        {
          name: 'l1', scales: [
            {unit: "year", format: "%Y", step: 1},
            {unit: "month", format: "%M %Y", step: 1},
          ]
        },
        {
          name: 'l2', scales: [
            {unit: "month", format: "%M %Y", step: 1},
            {unit: "week", step: 1, format: weekScaleTemplate},
            {unit: "day", format: dayTemplate, step: 1, css: daysStyle}
          ]
        },
        {
          name: 'l3', scales: [
            {unit: "month", format: "%M %Y", step: 1},
            {unit: "day", format: dayTemplate, step: 1, css: daysStyle},
            {unit: "hour", format: hourRangeFormat(12), step: 12}
          ]
        },
        {
          name: 'l4', scales: [
            {unit: "week", step: 1, format: weekScaleTemplate},
            {unit: "day", format: dayTemplate, step: 1, css: daysStyle},
            {unit: "hour", format: hourRangeFormat(6), step: 6}
          ]
        },
        {
          name: 'l5', scales: [
            {unit: "week", step: 1, format: weekScaleTemplate},
            {unit: "day", format: dayTemplate, step: 1, css: daysStyle},
            {unit: "hour", format: "%H:%i", step: 1}
          ]
        }
      ],
      useKey: "ctrlKey",
      trigger: "wheel",
      element: function(){
        return gantt.$root.querySelector(".gantt_task");
      }
    }
    gantt.ext.zoom.init(zoomConfig);
    gantt.ext.zoom.setLevel("l4");
    gantt.plugins({
      marker: true
    });
    // 甘特图初始化和导入数据
    gantt.init(this.$refs.gantt);
    gantt.parse(this.xx);
  },
  destroyed() {
    // 防止关闭页面后tooltip没有清除
    gantt.ext.tooltips.tooltip.hide();
    gantt.clearAll();
  }