web-mobile/src/components/form-item.vue

<template>
  <div id="form-item">
    <!-- <el-row class="input_row" v-if="type === 'text'">
      <el-form-item :prop="prop">
        <el-col :span="4">{{ label }}</el-col>
        <el-col :span="20">
          <el-popover :disabled="!usePop" placement="top-start" trigger="hover" ref="input">
            <el-alert :closable="false" :title="popContent" type="warning" effect="dark"> </el-alert>
          </el-popover>
          <el-input :value="modelVal" :disabled="disabled" :placeholder="placeholder" @input="handleInput" v-popover:input></el-input>
        </el-col>
      </el-form-item>
    </el-row> -->
    <el-row class="input_row">
      <el-form-item :prop="prop">
        <el-col :span="4">
          <slot name="label">{{ label }}</slot>
        </el-col>
        <el-col :span="20">
          <slot></slot>
        </el-col>
      </el-form-item>
    </el-row>
    <!-- <el-row class="input_row" v-if="type === 'select'">
      <el-form-item :prop="prop">
        <el-col :span="4">
          {{ label }}
        </el-col>
        <el-col :span="20">
          <el-select v-model="value" filterable :placeholder="placeholder" @input="handleInput">
            <el-option v-for="(item, index) in list" :key="index" :label="item.label" :value="item.label"></el-option>
          </el-select>
        </el-col>
      </el-form-item>
    </el-row> -->
  </div>
</template>

<script>
export default {
  name: 'form-item',
  //使用v-model方式的一种,此处为此方式的前置
  model: {
    prop: 'modelVal', //声明v-model变量过来用什么字符串接收
    event: 'change', //v-model改变时,应该走这个名称的方法
  },
  props: {
    modelVal: String, //给v-model开空间
    type: { type: String, default: 'text' },
    prop: { type: String, default: '' },
    label: { type: String, default: '' },
    disabled: { type: Boolean, default: false },
    placeholder: { type: String, default: '请输入' },
    list: { type: Array, default: () => [] },
    usePop: { type: Boolean, default: false },
    popContent: { type: String, default: '' },
  },
  components: {},
  data: () => ({
    value: '',
    values: [],
  }),
  created() {},
  computed: {},
  mounted() {
    if (this.modelVal) {
      this.$set(this, `value`, this.modelVal);
    }
  },
  methods: {
    handleInput($event) {
      //目前只试了text的情况
      this.$emit('change', $event);
    },
  },
};
</script>

<style lang="less" scoped>
.input_row {
  margin-top: 0.6rem;
}
</style>