海创软件组--20200802--vue实现网页中英文切换--Element日历区分上个月下个月等按钮和日期点击事件

一：vue使用vue-i18n插件实现网页中英文切换

1：下载vue-i18n插件

npm install vue-i18n

---

2：自己定义中英文两套js文件

中文版js文件：

英文版js文件：

---

3：配置main.js文件

//引入中英文切换插件vue-i18n
import VueI18n from 'vue-i18n'

Vue.use(VueI18n) // 挂载

const i18n = new VueI18n({
  locale: 'zh-CN',    // 语言标识
  messages: {
    'zh-CN': require('./lang/zh'),   // 通过require引入中文语言包
    'en-US': require('./lang/en')    // 通过require引入英文语言包
  }
})

new Vue({
  el: '#app',
  render:h=>h(App),
  router,
  store,
  i18n,  // ！！！！！一定要引入
})

---

4：通过点击事件切换语种

this.$i18n.locale = 'zh-CN'			//切换为中文
this.$i18n.locale = 'en-US'			//切换为英文

---

5：数据渲染

使用方式一：

<h3 class="myHotelList-bigTtitle">{{$t('m.hotelList')}}：</h3>

使用方式二：

<el-table-column
 :label="$t('m.isOfficialRating')"	//！！！！
 min-width="120"
 :formatter="formatterRating"
>

---

6：效果图

---

二： Element日历区分上个月下个月等按钮和日期点击事件

1：前言

前言：最近做个酒店管理系统，需要点击日历选择日期查询当天的酒店起价，这时我才用了element的日历（结合了element的对话框）。
功能需求：点击价格日历打开日历对话框，点击日期更新酒店起价并关闭对话框，点击下个月，上个月以及今天只是更新日历而不关闭对话框和请求新起价。

此过程我一路探索，都找不到比较好的办法，就只能退而求次，这里我才用的是给日历中的tbody元素添加点击事件，有兴趣可以看后面我其中想到的一些办法，只是我没实现出来。

---

2：解决办法

2.1： 给日历中的tbody元素添加点击事件：

代码：
日历：

<el-dialog title="价格日历" :visible.sync="dialogTableVisible">		//dialogTableVisible控制是否打开日历对话框
  <el-calendar v-model="priceTime">	//日历时间数据保存在priceTime中
   </el-calendar>
 </el-dialog>

点击打开日历对话框事件代码：

//打开价格日历
openDate(){
  this.dialogTableVisible = true		      //打开日历对话框
  this.$nextTick(() => {                      //给点击日历绑定绑定监听事件,效果：只有点击日期才去请求新价格并关闭弹窗，点击下个月，上个月等等不变化
    console.log('aaa')
    var prevBtn = document.querySelector('tbody')		//给tbody添加事件，也就是日期那部分
    prevBtn.addEventListener('click',() => {
      this.dialogTableVisible = false				   //点击关闭日历对话框
      this.reqHotelPrice()						       //请求新的酒店起价
    })
  })
},

---

3：其他思路

3.1：watch监听日历绑定数据变化实现更新数据：

watch: {
   priceTime(newval,oldval){
   this.dialogTableVisible = false
   this.reqHotelPrice()
 }
},

虽然每次在日历选择日期都会触发关闭日历对话框和查询新的酒店起价。
我无法解决的地方：点击按钮上个月，下个月，今天等都会触发日历数据更新从而触发关闭日历对话框和查询新的酒店起价，这给用户的体验不好。

---

3.2：给上个月，下个月，今天三个按钮添加点击事件：

通过属性选择器给这三个按钮添加点击事件（给当月的日期添加点击关闭日历对话框并请求新的起价），我虽然可以给三个按钮添加点击事件，但在该点击事件中给当月日期添加点击关闭日历对话框并请求新的起价事件不起作用。

this.$nextTick(() => {
  // 点击上个月
  let prevBtn1 = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(1)');
  prevBtn1.addEventListener('click',() => {
    consolo.log('上个月');
  })
  // 点击今天
  let prevBtn2 = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(2)');
  prevBtn2.addEventListener('click',() => {
    consolo.log('今天');
  })
  // 点击下个月
  let prevBtn3 = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(3)');
  prevBtn3.addEventListener('click',() => {
    consolo.log('下个月');
  })
})