@10yun/cv-mobile-ui 0.3.26 → 0.4.2

package/ui-cv/cv-form-group/cv-form-group2.vue

@@ -0,0 +1,80 @@
+<template>
+  <view class="cv-form-group">
+    <view class="cv-form-group-title" v-if="label">
+      <view class="cv-form-group-title-item" :style="getStyle">
+        <text>{{ label }}</text>
+      </view>
+    </view>
+    <slot />
+  </view>
+</template>
+<script>
+export default {
+  name: 'cvFormGroup',
+  props: {
+    label: {
+      type: String,
+      default: ''
+    },
+    labelAlign: {
+      type: String,
+      default: 'left'
+    },
+    layout: {
+      type: String,
+      default: ''
+    },
+    labelWidth: {
+      type: [String, Number],
+      default: ''
+    }
+  },
+  provide() {
+    return {
+      cvFormGroup: this
+    };
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  computed: {
+    getStyle() {
+      let style = {};
+      // 如果没有自定义高度，就根据type为input还是textare来分配一个默认的高度
+      style.textAlign = this.labelAlign;
+      return style;
+    }
+  }
+};
+</script>
+
+<style>
+.cv-form-group {
+  margin-bottom: 10px;
+  background-color: #ffffff;
+}
+.cv-form-group-title {
+  background-color: #ffffff;
+  padding: 0 15px;
+  font-size: 14px;
+  font-weight: bold;
+  line-height: 45px;
+  border-bottom: 1px solid #dedede;
+}
+.cv-form-group-title-item {
+  text-align: left;
+  background: white;
+  position: relative;
+}
+
+.cv-form-group-title-item::before {
+  width: 4px;
+  height: 22px;
+  top: 12px;
+  left: -10px;
+  position: absolute;
+  content: ' ';
+  background: #22cec0;
+}
+</style>