封装element-ui里的form组件

1.时间选择器

首先下载element-ui

yarn add element-ui -S

在src下新建plugins文件夹，在plugins新建element-ui.js文件，引入element-ui，也可以在main.js引入

import Vue from 'vue'
import ElementUi from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUi, {size: 'mini'})

在main.js里引入

import './plugins/element-ui'

在src下新建layouts文件夹，新建DefaultFilterPanel.vue文件

<div>
    <el-form inline>
      <slot/>
    </el-form>
  </div>

在components文件夹下新建forms文件夹，用来放封装的form组件
新建TicDatePicker.vue文件

<el-form-item :label="label">
      <el-date-picker
        :placeholder="placeholder"
        :value="value"
        :type="type"
        value-format="yyyy-MM-dd HH:mm:ss"
        @input="onInput"
      />
    </el-form-item>

props: {
    label: {
      type: String
    },
    placeholder: {
      type: String
    },
    value: {},
    type: {
      type: String,
      default: 'date'
    }
  },
  methods: {
    onInput(value) {
      this.$emit('input', value)
    }

使用：

<div class="home">
    <DefaultFilterPanel>
      <el-form-item>
        <tic-date-picker label="时间" v-model="form.date" placeholder="请选择时间"></tic-date-picker>
      </el-form-item>
    </DefaultFilterPanel>
  </div>

import DefaultFilterPanel from '@/layouts/DefaultFilterPanel'
import TicDatePicker from '@/components/forms/TicDatePicker'
components:{
    TicDatePicker,
    DefaultFilterPanel,
  },
  data() {
    return {
      form:{
        date:'',
      }
    }
  }

2.input输入框

在forms里新建TicInput.vue

<el-form-item :label="label">
    <el-input
      :placeholder="placeholder"
      :value="value"
      :type="type"
      autosize
      @input="onInput"
    />
  </el-form-item>
props: {
    label: {
      type: String
    },
    placeholder: {
      type: String
    },
    value: {},
    type: {
      type: String,
    }
  },
  methods: {
    onInput(value) {
      this.$emit('input', value)
    }
  }

使用

<tic-input label="姓名" v-model="form.username" placeholder="请输入姓名"></tic-input>

3.select

在forms里新建TicInput.vue

<el-form-item :label="label">
    <el-select :placeholder="placeholder" @input="onInput" :value="value">
      <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"/>
    </el-select>
  </el-form-item>

props: {
    label: {
      type: String
    },
    placeholder: {
      type: String
    },
    value: {},
    options:{
      type:Array,
      default:[]
    }
  },
  methods: {
    onInput(value) {
      this.$emit('input', value)
    }
  }

使用

<tic-select label="类型" v-model="form.type" :options="optionsType" placeholder="请选择类型"></tic-select>