n20-common-lib 1.3.8 → 1.3.11

package/nstc-g6/components/NstcForm/CheckboxCustom/index.vue

@@ -0,0 +1,84 @@
+<template>
+  <el-checkbox-group
+    v-model="_value"
+    v-bind="$attrs"
+    class="checkbox-group"
+    :style="{width:parseFloat(width) + 'px'}"
+    v-on="$listeners"
+  >
+    <template v-for="item in options">
+      <el-checkbox-button
+        v-if="type === 'button'"
+        :key="item.value"
+        :label="item.value"
+        :disabled="item.disabled"
+      >
+        {{ item.label}}
+      </el-checkbox-button>
+      <el-checkbox
+        v-else
+        :key="item.value"
+        :label="item.value"
+        :disabled="item.disabled"
+        :border="type === 'border'"
+        :title="hoverShowTitle ? item.label : ''"
+      >
+        <!-- {{ (item.label+'').length>6? item.label.slice(0, 6) + '...' : item.label }} -->
+        {{ item.label }}
+      </el-checkbox>
+    </template>
+  </el-checkbox-group>
+</template>
+
+<script>
+export default {
+  name: 'CheckboxCustom',
+
+  props: {
+    value: {
+      type: Array,
+      default: () => []
+    },
+
+    type: {
+      default: 'normal',
+      validator: function(val) {
+        return ['normal', 'border', 'button'].includes(val)
+      }
+    },
+
+    width: {
+      type: [String, Number],
+      default: ''
+    },
+
+    options: {
+      type: Array,
+      default: () => []
+    },
+
+    hoverShowTitle: {
+      type: Boolean,
+      default: false
+    }
+
+  },
+
+  computed: {
+    _value: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.checkbox-group /deep/ .el-checkbox{
+  margin-right: 40px;
+}
+</style>