vue 常用操作

一、多语言vue-i18n使用vue开发的网站如何支持多语言如果vue网站想支持多语言我们可以选择vue-i18n下面介绍一下它在vue中的使用1使用npm安装npm install vue-i18n -S2挂载到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键盘事件// 1el-input 键盘事件 el-input keyup.enter.nativefunction/el-input // 2页面键盘事件 created: function() { document.addEventListener(keydown,this.handleEvent) }, methods: { handleEvent(e){ var that this; //altF let key window.event.keyCode; if (70 e.keyCode e.altKey){ // 如果是AltF 的操作的话方法执行与此 } }, }, beforeDestroy(){ document.removeEventListener(keydown, this.handleEvent); } // 3el-input获取焦点选中 el-input focusfunction($event)/el-input methods: { function(e){ e.currentTarget.select(); }, }2el-table滚动条自动滚动el-table reftabData/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); } } } /script3el-time-select在el-form中使用时如果form使用resetFields方法会导致select数据改变后视图不刷新这个时候数据双向绑定是生效的使用$set是解决不了的原因是element组件复用时复用了上次的input使用加key(这个方法会导致change事件不触发)或v-if的方法让el-time-select组件重新加载的方法可以解决这个问题五、甘特图插件Gantt : Samples DHTMLX-GANTT有些功能收费npm install dhtmlx-gantt div refgantt/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(); }mzgantt-vue3这个也不错六、Highcharts使用问题Highcharts数据量超过1000不显示配置series:{turboThreshold:0 // 性能阈值}七、组件传值1props/$emit父 引入子 Users :usersusers v-on:emitFunemitFun / methods: { emitFun(e) { ... } } 子// 给父传值 this.$emit(emitFun, 参数) Vue3 const props defineProps([foo]); Vue2 props: [message]2$emit/$on(Vue2, Vue3废弃on需要通过tiny-emitter或mitt插件)this.$on(emitFun, data {}); this.$emit(emitFun, 参数)