Vue.2.0開發後臺系統，採坑系列組件篇（一）

時間 2019-11-30

標籤 vue.2.0 vue 開發後臺系統系列組件简体版

原文原文鏈接

前言

剛剛接手了一個公司內部的後臺系統項目，剛開始的時候真的是一步一個坑，通過一週的加班，基本把經常使用的功能和組件都完成了，基本緩了一口氣。vue

技術棧： ivew + vue + vue-clivue-cli

廢話很少說，下面總結一下封裝組件的一些問題大體頁面以下 api

組件的封裝

實現 input select radio checkbox date 的組件的封裝

1.由於vue須要數據驅動視圖，須要把全部屬性在頁面中初始化

export default {
    data() {
      return {
        list: [
          {name: 'applicationNo', title: '採購申請編號 :', type: 'input', placeholder: '', disable: true, value: '111'},
          {name: 'createUserName', title: '申請人 :', type: 'input', value: '', disable: true},
          {name: 'organLeaderName', title: '機構負責人', type: 'input', value: '', disable: true},
          {name: 'expectTime', title: '但願到貨時間', type: 'input', value: '', data: [], placeholder: '', disable: true},
          {name: 'transportOrganName', title: '配送機構', type: 'input', value: '', placeholder: '', disable: true},
          {name: 'receive', title: '接車地址', type: 'input', value: '', disable: true},
          {name: 'detailAddress', title: '詳細地址', type: 'input', value: '', data: [], col: '12', disable: true},
          {name: 'contract', title: '聯繫人', type: 'input', value: '', data: [], disable: true},
          {name: 'telphone', title: '聯繫電話', type: 'input', value: '', data: [], disable: true},
          {name: 'remark', title: '備註', type: 'input', value: '', data: [], disable: true, col: '20'}
        ],
複製代碼

1.1 封裝組件，實現提交按鈕的判斷，由於初始化定義了`type`根據`type`來判斷是什麼提交按鈕（如：input，select...）

<template>
  <div class="form-input-group">
    <template v-if="type == 'text'">
      <span class="form-list-text">{{ value }}</span>
    </template>
    <template v-else-if="type == 'input'">
      <Input class="input-item" v-model="inputValue" :placeholder="placeholder" :disabled="disable"></Input>
      <template v-if="detail">
        <span class="input-detail">{{detail}}</span>
      </template>
    </template>
    <template v-else-if="type == 'select'">
      <Select class="input-item" v-model="inputValue" :placeholder="placeholder" :disabled="disable">
        <Option v-for="item in selectData" :value="item" :key="item.value">{{item }}</Option>
      </Select>
    </template>
    <template v-else-if="type == 'date'">
      <DatePicker type="date" :placeholder="placeholder" @on-change="setDate" :disabled="disable"></DatePicker>
    </template>
    <template v-else-if="type == 'city'">
      <city-select :value="value" @setCity="SetCity"></city-select>
    </template>
    <template v-else-if="type == 'model'">
      <Input class="input-model-hidden" v-model="modelValue.code"></Input>
      <Input class="input-item input-model" :placeholder="modelValue.name" readonly></Input>
      <div class="input-shadow" @click="showModel = true"></div>
    </template>
    <template v-else-if="type == 'cars'">
      <car-select :value="value" @setCar="SetCar"></car-select>
    </template>
    <FormModel v-if="showModel" @closeModel="closeModel" @confirmModel="confirmModel"></FormModel>
  </div>
</template>
/**
   * [inputGroup 輸入框]
   * 接受參數：[type: 輸入框類型，name:要綁定的屬性名, data: 下拉菜單或級聯菜單數據]
   * type值：[text：普通文本，input:普通輸入框，select：下拉框，date：日期選擇框，city：省市區，cascader：級聯菜單]
   * 接受方法：[getValue:獲取屬性名和返回值]
   * 返回值：{ name: name, value: value }
   * 級聯菜單返回值：{ name: name, value: [value1, value2] }
   * 使用示例： <input-group v-bind="propsData"></input-group>
   */
複製代碼

父組件中咱們不能只傳遞type值去判斷提交按鈕類型，當查看訂單並不能修改的時候還須要把value值傳遞給子組件顯示，而且設置disabled屬性不可編輯。還須要傳遞其它屬性（eg: placeholder, disable, name）等bash

1.2 從而在父組件和子組件須要作兩件事

<Row class="form-list-search">
      <Col :span="item.col ? item.col : '6'" v-for="(item,index) in list" :key="index">
      <span class="form-list-title">{{item.title}}</span>
      <input-group v-bind="item" @setCarCode="setCarCode" @setValue="setValue"></input-group>
      </Col>
    </Row>
複製代碼

使用 v-bind="item"傳遞屬性值。那麼在input組件下如何接收？看代碼app

// input.vue
 export default {
    data() {
      return {
        inputValue: '',
        selectData: [],
        modelValue: {},
        showModel: false,
        dateData: ''
      }
    },
    props: {
      data: {
        default: ''
      },
      value: {
        default: ''
      },
      type: {
        required: true
      },
      name: {
        required: true
      },
      disable: {
        type: Boolean
      },
      detail: {
        default: ''
      },
      placeholder: String,
      index: Number
    },
    components: {
      CitySelect,
      FormModel,
      CarSelect
    }
複製代碼

1.3 當子組件的發生改變時，咱們須要監聽組件中`value`的變化並把值傳遞給父組件，從而改變視圖。`$emit()`

created() {
      this.inputValue = this.value
      this.selectData = this.data
      this.inputkey = this.key
    },
    methods: {
      setDate(date) {
        this.inputValue = date
        // this.dateData = date
        // let returnData = {name: this.name, value: this.dateData}
        // this.$emit('dateData', returnData)
      },
      SetCity(val) {
        let returnData = {name: this.name, value: val}
        this.$emit('setCityCode', returnData)
      },
      SetCar(val) {
        console.log(val, 'input.vue')
        this.$emit('setCarCode', val)
      },
      confirmModel(data) {
        if (data) {
          this.showModel = false
          this.modelValue = data
        }
      },
      closeModel(data) {
        if (data) {
          this.showModel = false
        }
      }
    },
    watch: {
      value(val) {
        this.inputValue = val
      },
      data(val) {
        this.selectData = val
      },
      inputValue(val) {
        // console.log(val)
        let returnData = {name: this.name, value: val}
        if (this.index != undefined) {
          returnData.index = this.index
        }
        if (this.type == 'date') {
          returnData.value = Util.unixTime(val)
        }
        this.$emit('setValue', returnData)
      }
    }
  }
複製代碼

1.4 三級聯動組件

大體思路iview

結合iview組件Cascader 級聯選擇，動態加載，若是有下一級菜單，在對象內部定義children[]，而且push新的二級對象結構，loading: false 說明還有下一級，還會調用loadData方法

<template>
  <div>
    <Cascader :data="cascaderData" :load-data="loadData" v-model="cascader" @on-change="setValue"></Cascader>
  </div>
</template>
<script>
  import Util from '../../libs/util.js'
  import {getBrand, getSeriesList, getModelList} from '../../api/index'

  export default {
    data() {
      return {
        cascaderData: [],
        cascader: []
      }
    },
    async mounted() {
    // 返回一級菜單數據
      let brandList = await getBrand()
      // 渲染視圖
      Util.CommonCascader(this, brandList.result, this.cascaderData)
    },
    created() {
    },
    methods: {
      loadData(item, callback) {
        item.loading = true
        
        // 調用二級菜單接口，傳入id
        getSeriesList(item.value).then((res) => {
          
          Util.CascaderChild(this, res.result, item.children, 'name', 'code')
          callback()
          item.loading = false
        }).then(() => {
        // 調用三級菜單接口，傳入id
          getModelList(item.value).then((res) => {
            Util.CascaderChild(this, res.result, item.children, 'name', 'code', true)
            callback()
            item.loading = false
          })
        })
      },
      setValue(val) {
        this.$emit('setCar', val)
      }
    },
    watch: {
      value(val) {
        this.cascader = val
      }
    },
    components: {}
  }
</script>
<style scoped>
</style>

複製代碼