code init

2021-05-25 18:06:45 +08:00
parent 02698d6dab
commit f54a8d4fa1
1367 changed files with 540755 additions and 21713 deletions
@@ -0,0 +1,96 @@
+<!-- 带label的输入框 -->
+<!--
+  可接收一个width用于控制输入框长度
+  可接收一个placeholder用户显示待输入提示
+  可接收一个clearable用户是否包含清除按钮
+  可接收一个maxlength 用于限制输入框长度
+-->
+<template>
+  <div id="labelInput">
+    <label>{{ label }}</label>
+    <div class="label-input-content" :style="{ width: width + 'px' }">
+      <el-input :value="value" @input="handleChange" :maxlength="maxlength" :placeholder="placeholder" :clearable="clearable"></el-input>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'index',
+  data () {
+    return {
+      currentValue: this.value
+    }
+  },
+  methods: {
+    handleChange (val) {
+      this.$emit('input', val)
+    }
+  },
+  components: {},
+  props: {
+    value: String,
+    label: String,
+    width: {
+      type: Number,
+      default: 200
+    },
+    maxlength: Number,
+    placeholder: String,
+    clearable: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {},
+  watch: {},
+  mounted () {}
+}
+</script>
+
+<style lang="less">
+  #labelInput{
+    vertical-align: top;
+    label{
+      width: 88px;
+      display: inline-block;
+      border: 1px solid #DDD;
+      border-top-left-radius: 4px;
+      border-bottom-left-radius: 4px;
+      border-right: none;
+      height: 32px;
+      line-height: 32px;
+      background: #F4F8FB;
+      padding: 0 7px;
+      text-align: center;
+      vertical-align: middle;
+      float: left;
+      font-size: 12px;
+      color: #515a6e;
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+    }
+    .label-input-content{
+      display: inline-block;
+      .el-input{
+        display: inline-block;
+        width: 100%;
+        position: relative;
+        vertical-align: middle;
+        line-height: normal;
+        .el-input__inner{
+          height: 32px;
+          line-height: 32px;
+          font-size: 12px;
+          border-top-left-radius: 0;
+          border-bottom-left-radius: 0;
+        }
+        .el-input__suffix{
+          .el-icon-circle-close{
+            line-height: 32px;
+          }
+        }
+      }
+    }
+  }
+</style>