1. 程式人生 > >vue+element ui專案總結點(一)select、Cascader級聯選擇器、encodeURI、decodeURI轉碼解碼、一級mockjs用法、路由懶載入三種方式

vue+element ui專案總結點(一)select、Cascader級聯選擇器、encodeURI、decodeURI轉碼解碼、一級mockjs用法、路由懶載入三種方式

不多說上程式碼:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>Element UI簡單Cascader級聯選擇器使用</p>
    <el-cascader :options='options' v-model="selectedOptions" @change="handleChange">
    </el-cascader>
    <div class="select_box">
      <
p>mockjs的資料Element UI的select元件做的二級聯動效果</p> <el-select v-model="shopRegoin" placeholder="請選擇" @change="selectShopRegoin"> <el-option v-for="item in shopList" :key="item.type" :label="item.shop" :value="item.type"> </el-option> </el-select>
<el-select v-model="shopName" placeholder="請選擇"> <el-option v-for="item in shopNameList" :key="item.type" :label="item.shop" :value="item.type"> </el-option> </el-select> </div> <!-- 去下一個頁面 --> <div class="btn_box select_box"
> <el-button type="primary" @click="goNextPage">去下一個頁面看看</el-button> </div> </div> </template> <script> import { cityList } from '../netconnet/api' export default { name: 'HelloWorld', data() { return { msg: 'hello,vuejs', selectedOptions: [], options: [], //級聯資料 shopRegoin: '', shopName: '', shopList: [], //門店區域 shopNameList: [], //門店名字 } }, created() { this.getList() this.getMockData() this.postMockData() }, methods: { //es6寫法 async getList() { try { let res = await cityList(null) console.log(res) this.$eleMessage('資料成功返回', 'success', 500) } catch (e) { console.log(e) } //原始寫法 // cityList(null).then(res=>{ // console.log(res,'res') // }).catch(err=>{ // console.log(err,'err') // }) }, //change事件 selectShopRegoin(val) { console.log(val, 'val') let vIndex = this.shopList.findIndex(e => { return e.type == val }) this.shopNameList = this.shopList[vIndex].shopNameList; //二級聯動的陣列; this.shopName = this.shopNameList[0].type; console.log(this.shopNameList, 'this.shopNameList') }, //模擬mock get請求 getMockData() { this.$http.get('/getshop/list').then(res => { this.shopList = res.data.data.shopList; console.log(res, 'getMock資料') this.$eleMessage('get的mock資料成功返回', 'success', 1500) }) }, //模擬mock post請求 postMockData() { let data = { type: 'see', key: '123456789' } this.$http.post('/postshop/list', data).then(res => { // 級聯選擇 this.options = res.data.data.shopList.map(e => { return { value: e.type, label: e.shop, children: e.shopNameList.map(i => { return { value: i.type, label: i.shop } }) } }) console.log(res.data, 'postMock資料') this.$eleMessage('post的mock資料成功返回', 'success', 3000) }) }, handleChange(val) { console.log(val, ''); }, //vue 跳轉 goNextPage() { //1.push方式可以產生歷史記錄 this.$router.push({ name: 'test', query: { age: 20, sex: '', goodName: encodeURI(encodeURI('中文引數轉碼套兩層encodeURI,同理解碼decodeURI也套兩層')) } }) //2.用replace的方式不會產生歷史記錄 // this.$router.replace({ // name:'test', // query:{ // age:20, // sex:'男', // goodName:encodeURI(encodeURI('中文引數轉碼套兩層encodeURI')) // } // }) } } } </script> <style scoped> .select_box { margin-top: 30px; } </style>

2.mockjs使用方法 npm/cnpm  install mockjs -S 具體參照官網(我這裡給出的是快捷使用快捷配置方法)新建一個資料夾mock新建一個mockjs檔案如下:

// 使用 Mock
import Mock from 'mockjs';

// 配置 Mock 路徑
require.config({
    paths: {
        mock: 'http://mockjs.com/dist/mock'
    }
})
// mock一組資料
const shopData = {
    "code": 0,
    "data": {
        "mockObj":{
            "tip":'hello,我教你手把手玩mockjs',
            "date":'2018-11-30'
        },
        "shopList": [{
                "type": 1,
                "shopNameList": [{
                        "type": 1,
                        "shopNameList": [],
                        "shop": "母嬰店1"
                    },
                    {
                        "type": 2,
                        "shopNameList": [],
                        "shop": "母嬰店2"
                    },
                    {
                        "type": 3,
                        "shopNameList": [],
                        "shop": "母嬰店3"
                    },
                    {
                        "type": 4,
                        "shopNameList": [],
                        "shop": "母嬰店4"
                    },
                    {
                        "type": 5,
                        "shopNameList": [],
                        "shop": "母嬰店5"
                    },
                    {
                        "type": 6,
                        "shopNameList": [],
                        "shop": "母嬰店6"
                    },
                    {
                        "type": 7,
                        "shopNameList": [],
                        "shop": "母嬰店7"
                    },
                    {
                        "type": 8,
                        "shopNameList": [],
                        "shop": "母嬰店8"
                    },
                    {
                        "type": 9,
                        "shopNameList": [],
                        "shop": "母嬰店9"
                    },
                ],
                "shop": "南山分店"
            },
            {
                "type": 2,
                "shopNameList": [{
                        "type": 10,
                        "shopNameList": [],
                        "shop": "燒烤店1"
                    },
                    {
                        "type": 11,
                        "shopNameList": [],
                        "shop": "燒烤店2"
                    },
                    {
                        "type": 12,
                        "shopNameList": [],
                        "shop": "燒烤店3"
                    },
                    {
                        "type": 13,
                        "shopNameList": [],
                        "shop": "燒烤店4"
                    }
                ],
                "shop": "寶安分店"
            },
            {
                "type": 3,
                "shopNameList": [{
                        "type": 14,
                        "shopNameList": [],
                        "shop": "酒店1"
                    },
                    {
                        "type": 15,
                        "shopNameList": [],
                        "shop": "酒店2"
                    }
                ],
                "shop": "羅湖分店"
            },
            {
                "type": 4,
                "shopNameList": [{
                    "type": 16,
                    "shopNameList": [],
                    "shop": "按摩店1"
                },{
                    "type": 17,
                    "shopNameList": [],
                    "shop": "按摩店2"
                }],
                "shop": "福田分店"
            }
        ]
    },
    "msg": "請求成功"
}

// Mock.mock( url, post/get , 返回的資料);此處可以模擬post和get 請求
Mock.mock('/postshop/list', 'post', shopData);

Mock.mock('/getshop/list', 'get', shopData);

3.mainjs如下:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'
Vue.prototype.$http = axios;
require('./mock/mock.js')
Vue.use(ElementUI);

//element Message全域性配置元件呼叫 this.$eleMessage('內容','訊息型別','持續時間')
Vue.prototype.$eleMessage = function (msg,tip,time) {
  this.$message({
    message: msg,
    type: tip,
    duration:time
  })
}

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  //store,
  render: h => h(App)
})

4.接受路由編碼後的引數並解碼:

<template>
  <div class="test_box">
      <p>hell,你好</p>
      <p>encodeURI編碼後轉碼的路由引數內容----<span style="color: red">({{routerParmas}})</span></p>
  </div>
</template>
<script>
export default {
  data() {
    return {
        routerParmas:decodeURI(decodeURI(this.$route.query.goodName)),
    }
  },
  created(){

  },
  methods:{
      
  }
}

</script>

5.路由懶載入三種方式:

import Vue from 'vue'
import Router from 'vue-router'
//方式一:最簡單直接的使用元件
//import HelloWorld from '@/components/HelloWorld'
//import Test from '@/components/test'

//方式二:webpack自帶的模組按需載入 r就是resolve
//const HelloWorld = r => require.ensure([], () => r(require('@/components/HelloWorld')), 'HelloWorld');

Vue.use(Router)

const router =  new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component:  resolve => require(['@/components/HelloWorld'], resolve)//方式三:懶載入方式
    },{
      path: '/test',
      name: 'test',
      component:  resolve => require(['@/components/test'], resolve)
    }
  ]
})

export default router;