威尼斯wns.9778官网 > 计算机教程 > Asp.net Vue2构建简单记账WebApp之四(vue.js构建记账

原标题:Asp.net Vue2构建简单记账WebApp之四(vue.js构建记账

浏览次数:183 时间:2019-05-10

最近在vue中使用echarts时,遇到了一些坑,在此记录一下。

Asp.net Vue2构建简单记账WebApp之一(设计)
Asp.net Vue2构建简单记账WebApp之二(使用ABP迅速搭建.Net后台)
Asp.net Vue2构建简单记账WebApp之三(使用Vue-cli构建vue.js应用)
Asp.net Vue2构建简单记账WebApp之四(vue.js构建记账主页面)
Asp.net Vue2构建简单记账WebApp之五(vue.js构建记账页面)
Asp.net Vue2构建简单记账WebApp之六(vue.js构建记账统计页面)
源码下载

1:echarts map的使用

一、安装我们所需要的一些库

cnpm install mint-ui -S // 安装mint-ui库,ui库,cnmp是按照淘宝镜像后的用法,用法和npm一样。-s是将库添加到项目的package.json文件中。
cnpm install echarts -S // 安装echarts库。用于绘制图表
cnpm install vue-resource -S // 相当于ajax取数据用的

威尼斯wns.9778官网 1

这里写图片描述

package.json 文件中可以看见我们当前项目中安装的控件

威尼斯wns.9778官网 2

这里写图片描述

2:页面多图自适应,只有一个图生效

二、全局引入模块

在main.js 中引入

import Vue from 'vue'
import App from './App'
import router from './router'
import VueResouse from 'vue-resource' // 引入vue-resource
import MintUI from 'mint-ui'     // 引入mint-ui
import 'mint-ui/lib/style.css'  // 引入mint-ui的样式
Vue.use(MintUI);
Vue.use(VueResouse);
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

3:根据设备的dpr,动态的修改了meta标签中的initial-scale,导致引入的类似于echarts这样的外部插件的字体也产生了缩放

三、开始构建页面框架

1、 将components(组件)文件夹下面的hello.vue 清空作为记账页面,并添加Count.vue作为统计页面 如下:

<template>
 <h1>记账页面</h1>
</template>

<template>
  <h1>统计页面</h1>
</template>

2、修改路由文件( router文件夹下面的index.js),加入我们刚才添加页面的路由。

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello' // 记账页面
import Count from "@/components/Count" // 统计页面
Vue.use(Router)

export default new Router({
  routes: [
    {path: '/',component: Hello},
    {path: '/Count', component: Count}
  ]
})

3、修改App.vue

<template>
  <div id="app">
    <router-view class="Content"></router-view>
    <mt-tabbar :fixed="true">
      <router-link to="/" v-bind:class="ClassMenuHello" v-on:click.native="select(0)" > <i class="fa fa-edit"></i> 记账 </router-link>
      <router-link to="/Count"  v-bind:class="ClassMenuCount" v-on:click.native="select(1)"> <i class="fa fa-bar-chart"></i> 统计 </router-link>
    </mt-tabbar>
  </div>
</template>

<script>
  export default { 
    name: 'app',
    data(){
      return{
        selected:-1,
      }
    },
    computed:{ // 使用计算属性给菜单动态添加样式
      ClassMenuHello(){
        return{
          'mint-tab-item':true,
          'is-selected':this.selected==0,
        }
      },
      ClassMenuCount(){
        return{
          'mint-tab-item':true,
          'is-selected':this.selected==1,
        }
      }
    },
    methods:{
      select(m){ // 给组件绑定事件时需要使用.native 例如绑定点击事件使用 v-on:click.native="f"
        this.selected=m;
      },
    }
  }
</script>

<style scoped>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
  }
  #app .mint-tab-item{
    font-size: 20px;
    padding: 15px;
  }
  #app .Content{
    padding-bottom: 56px;
  }
</style>

4、设置页面禁止缩放,用于手机页面。引入我们的图标库。将index.html文件修改如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0" name="viewport" /> <!-- 禁止缩放,用于手机页面-->
  <title>易兒善-记账</title>
  <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <!-- 图标的样式-->
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
<style>
  body,html {
    margin: 0;
    padding: 0;
  }
</style>

 

四、查看效果

威尼斯wns.9778官网 3

这里写图片描述

在echarts3.x后,echarts不在内置地图数据,地图的json数据需要单独下载引入。在vue中使用时,地图的json文件在node_modules中的echarts中,并不需要单独下载了。

五、总结

1、使用 vue-router 中的 router-view 和 router-link 标签实现页面间切换
2、使用computed 计算属性动态绑定样式,实现选中样式。
3、给组件标签绑定事件时需要使用.native 例如绑定点击事件使用 v-on:click.native="f"
威尼斯wns.9778官网,4、关于vue-router 和 mint-ui的更多用法参见官网
5、这样编写将页面模块化,而且一个页面相关的js,style ,html都可以写在一个页面里。不同页面分开写。

威尼斯wns.9778官网 4

代码如下:

<template>
    <div class="map" id="s-map">
        <div id="chartMap" class="chartGauge" :style="{height:height,width:width}"></div>
    </div>
</template>

<script type="text/ecmascript-6">
   // 在之前已经单独引入了echarts文件
   // 在此只需引入需要的地区的json文件
    import gz from 'echarts/map/json/province/guizhou'

    export default {
        components: {

        },
        data () {
            return {
                font: '24'
            }
        },
        props: {
            width: {
                type: String,
                default: '200px'
            },
            height: {
                type: String,
                default: '400px'
            }
        },
        watch: {},
        methods: {
            drawmap() {
                let chartMap = document.getElementById('chartMap');
                let smap = document.getElementById('s-map');
          // 动态修改图表的宽高,达到自适应的效果 
                var resizeWorldMapContainer = function () {
                    chartMap.style.width  = smap.clientWidth  'px';
                    chartMap.style.height = smap.clientHeight   'px';
                };
                resizeWorldMapContainer();
                // 注册可用的地图
                echarts.registerMap('guizhou', gz);
                let myChart = echarts.init(chartMap);
                myChart.setOption({
                    roam: false,
                    series: [
                        {
                            name: '',
                            type: 'map',
                            map: 'guizhou',
                            mapType: '贵州',
                            roam: false,
                            zoom: 1.2,
                            itemStyle:{
                                normal:{
                                    areaColor: '#181d36',
                                    label:{
                                        show:true,
                                        textStyle: {
                                            color: '#fff',
                                            fontSize: this.font
                                        }
                                    },
                                },
                                emphasis:{
                                    areaColor: '#fff',
                                    label:{
                                        show:true,
                                        textStyle: {
                                            color: '#398def',
                                            fontSize: this.font
                                        }
                                    }

                                }
                            },
                            data:[
                                {name: '贵州',value: Math.round(Math.random()*1000)}
                            ]
                        }
                    ]
                });
                /*
                // window的方法在一个页面只加载一次,window.onresize只在一个图表中发生一次,因此在一个页面多图时,只有一个图会自适应
                window.onresize = function () {
                    resizeWorldMapContainer();
                    myChart.resize();
                };
                */
                window.addEventListener("resize", function(){
                    resizeWorldMapContainer();
                    myChart.resize();
                })
            }
        },
        filters: {},
        computed: {},
        created () {

        },
        mounted () {
            this.drawmap()
        },
        destroyed () {}
    }
</script>

<style lang="scss" scoped>
    @function px2rem($px) {
        $rem: 75px;
        @return ($px / $rem)   rem;
    }
</style>

 


 

同一页面多图都达到自适应的效果,如下图,我在同一个页面中引入了map和gauge,分别属于不同的组件,每个组件中都有对图表自适应的设置,然后通过window.onresize进行处理,但是发现只有一个图表会自适应拖动效果。

window.onresize = function () {
   resizeWorldMapContainer();
   myChart.resize();
};  

原因:wndow.onsize事件在同一页面中只会发生一次,因此会导致有点组件中window.onresize事件未发生

本文由威尼斯wns.9778官网发布于计算机教程,转载请注明出处:Asp.net Vue2构建简单记账WebApp之四(vue.js构建记账

关键词:

上一篇:python3 第三十二章 - 标准库概览

下一篇:没有了