山东大学项目实训记录(八)——扩展功能

界面基本搭建完成之后，我进行主页扩展功能的实现，例如实现登录时间和地点的获取，还有网页live2d的添加

methods: {
    getCurrentTime() {
        var _this = this;
    　　let yy = new Date().getFullYear();
    　　let mm = new Date().getMonth()+1;
    　　let dd = new Date().getDate();
    　　let hh = new Date().getHours();
    　　let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
    　　let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
    　　_this.gettime = yy+'/'+mm+'/'+dd+' '+hh+':'+mf+':'+ss;
    　　console.log(_this.gettime)  
    }
}   

但是这是vue3.0之前的方法，最后为了适配整个项目使用了Date()方法
然后是网页live2d，这个使用了现成的方法

//html页面js引入
<script type="text/javascript" src="./static/live2dw/lib/L2Dwidget.min.js"></script>
//App.vue声明
 export default {
    name: 'App',
    /*看板娘初始化
      参数说明
      model 模型的配置
         json 文件资源路径，可以支持网络路径，此处使用的是相对路径
         scale 模型缩放系数
      display 模型布局
         position 位置
         width 宽度
         height 高度
         hOffset 水平偏移量
         vOffset 垂直偏移量
      mobile 移动端配置
         show 显示/隐藏
         scale 缩放比例
      react 模型矩形框样式
         opacity 透明度
         opacityDefault 默认透明度
         opacityOnHover 鼠标悬浮透明度
    */
    created() {
        setTimeout(() => {
            window.L2Dwidget.init({
                pluginRootPath: '../static/live2dw/',
                pluginJsPath: 'lib/',
                pluginModelPath: 'live2d-widget-model-haru_2/assets/', //中间这个haru_2就是你的老婆,想换个老婆,换这个就可以了
                tagMode: false,
                debug: false,
                model: { jsonPath: '../static/live2dw/live2d-widget-model-haru_2/assets/haru02.model.json' }, 
                display: { position: 'left', width: 350, height: 800 },  //调整大小,和位置
                mobile: { show: true },   //要不要盯着你的鼠标看
                log: false,
            })
        }, 1000)
    }
  }

获取地点使用高德地图的API
网上一搜会有详细教程，就不多说了