InputCell组件

1、预览

2、实现

<template>
  <div class="input-cell-wrapper" :style="inputSty">
    <div class="input-cell-inner">
      <span class="lable">{{ desc }}</span>
      <input
        class="input-sty"
        :disabled="disableInput"
        :value="value"
        :placeholder="defaultvalue"
        @input="input"
      />
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
export default Vue.extend({
  name: 'InputCell',
  props: {
    inputSty: '',
    desc: '',
    disableInput: false,
    value: '',
    defaultvalue: '',
  },
  data: function () {
    return {};
  },
  methods: {
    input() {
      this.$emit('input', event.target.value);
    },
  },
})
</script>
<style lang="scss" scoped>
.input-cell-wrapper {
  height: 55px;
  background: #fff;
  display: flex;
  line-height: 55px;
  justify-content: space-between;
  padding: 0 15px;
  .input-cell-inner {
    width: 100%;
    border-bottom: solid 1px #e2e8f4;
    .lable {
      font-size: 15px;
      color: #1c222e;
      font-weight: 400;
    }
    .input-sty {
      width: 250px;
      text-align: right;
      font-size: 14px;
      border: 0;
      height: 100%;
      float: right;
    }
    .input-sty::-webkit-input-placeholder {
      color: #acb7ce;
      font-size: 14px;
      font-family: 'PingFang FC';
    }
    .input-sty:disabled {
      background: #fff;
    }
    .input-sty:focus{
      outline none;
      border 0;
  }
}
</style>

3、 使用

 import InputCell from './components/InputCell'
  ...
  components: {
    InputCell
  },
  ...
  <InputCell
    desc="设备类型"
    defaultvalue="输入设备类型"
    disableInput
    //:value="deviceType"
    v-model="deviceType"
    inputSty="margin-top: px"
   />