@ddwl/ddwl-ui 1.1.7 → 1.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ddwl/ddwl-ui",
-  "version": "1.1.7",
+  "version": "1.2.1",
   "private": false,
   "main": "src/main.js",
   "style": "lib/theme/index.css",

package/src/main.js

@@ -16,6 +16,10 @@ import SearchTable from './packages/search-table'
 import SvgIcon from './packages/svg-icon'
 import Table from './packages/table'
 import Upload from './packages/upload'
+import Select from './packages/select'
+import CheckboxGroup from './packages/checkbox-group'
+import RadioGroup from './packages/radio-group'
+
 import extendComponentInstall from './lib/install/index.js'
 
 import './lib/theme/index.css'
@@ -38,7 +42,10 @@ const components = [
   SearchTable,
   SvgIcon,
   Table,
-  Upload
+  Upload,
+  Select,
+  CheckboxGroup,
+  RadioGroup
 ]
 
 const install = (Vue, opts = {}) => {

package/src/packages/checkbox-group/index.vue

@@ -0,0 +1,57 @@
+<!-- 多选框组 -->
+<template>
+  <el-checkbox-group
+    v-model="value"
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+    <el-checkbox
+      v-for="item in options"
+      :key="item.value"
+      :label="item.value"
+    >
+      {{ item.label }}
+    </el-checkbox>
+  </el-checkbox-group>
+</template>
+
+<script>
+export default {
+  name: 'DCheckboxGroup',
+  components: {},
+  model: {
+    prop: 'modelValue',
+    event: 'modelChange'
+  },
+  props: {
+    modelValue: {
+      type: Array,
+      default: () => []
+    },
+    options: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+    value: {
+      get () {
+        return this.modelValue
+      },
+      set (value) {
+        this.$emit('modelChange', value)
+      }
+    }
+  },
+  watch: {},
+  created () {},
+  methods: {}
+}
+</script>
+
+<style lang='scss' scoped>
+</style>

package/src/packages/radio-group/index.vue

@@ -0,0 +1,57 @@
+<!-- 单选框组 -->
+<template>
+  <el-radio-group
+    v-model="value"
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+    <el-radio
+      v-for="item in options"
+      :key="item.value"
+      :label="item.value"
+    >
+      {{ item.label }}
+    </el-radio>
+  </el-radio-group>
+</template>
+
+<script>
+export default {
+  name: 'DRadioGroup',
+  components: {},
+  model: {
+    prop: 'modelValue',
+    event: 'modelChange'
+  },
+  props: {
+    modelValue: {
+      type: [String, Number],
+      default: ''
+    },
+    options: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+    value: {
+      get () {
+        return this.modelValue
+      },
+      set (value) {
+        this.$emit('modelChange', value)
+      }
+    }
+  },
+  watch: {},
+  created () {},
+  methods: {}
+}
+</script>
+
+<style lang='scss' scoped>
+</style>

package/src/packages/select/index.vue

@@ -0,0 +1,74 @@
+<!-- 下拉选择器 -->
+<template>
+  <div>
+    <el-select
+      v-model="value"
+      v-bind="$attrs"
+      v-on="{...$listeners, change: onChange}"
+    >
+      <el-option
+        v-for="item in options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+      />
+      <template slot="prefix">
+        <slot name="prefix" />
+      </template>
+      <template slot="empty">
+        <slot name="empty" />
+      </template>
+    </el-select>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DSelect',
+  components: {},
+  model: {
+    prop: 'modelValue',
+    event: 'modelChange'
+  },
+  props: {
+    modelValue: {
+      type: [String, Number, Array],
+      default: ''
+    },
+    options: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+    value: {
+      get () {
+        return this.modelValue
+      },
+      set (value) {
+        this.$emit('modelChange', value)
+      }
+    }
+  },
+  watch: {},
+  created () {},
+  methods: {
+    onChange (value) {
+      let data
+      if (Array.isArray(value)) {
+        data = this.options.filter(i => value.includes(i.value)) || []
+      } else {
+        data = this.options.find(i => value === i.value) || {}
+      }
+      this.$emit('change', value, data)
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+</style>