qtsk-vue3 0.0.16 → 0.0.17

package/package/component.js

@@ -17,6 +17,10 @@ import Tabs from './components/Tabs/index.vue'
 import TabPane from './components/TabPane/index.vue'
 import SelectRemote from './components/SelectRemote/index.vue'
 import Timeline from './components/Timeline/index.vue'
+import Area from './components/Area/index.vue'
+import Radio from './components/Radio/index.vue'
+import Number from './components/Number/index.vue'
+import Checkbox from './components/CheckBox/index.vue'
 const components = 
     [
         CommonButton, 
@@ -29,7 +33,7 @@ const components =
         Switch, 
         Pagination, 
         DatePicker, 
-        Tree, 
+        Tree,
         Dialog,
         Form,
         FormItem,
@@ -37,6 +41,10 @@ const components =
         Tabs,
         TabPane,
         SelectRemote,
-        Timeline
+        Timeline,
+        Area,
+        Radio,
+        Number,
+        Checkbox
     ]
 export default components

package/package/components/Area/index.vue

@@ -0,0 +1,42 @@
+<template>
+    <div class="normalClass">
+      <el-cascader
+        placeholder="请选择省市区"
+        size="default"
+        :options="regionData"
+        v-model="area"
+      >
+      </el-cascader>
+    </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { ElCascader } from 'element-plus'
+import { regionData } from 'element-china-area-data'
+defineOptions({
+  name: 'Area',
+})
+const props = defineProps({
+  modelValue: {
+    type: Array,
+    default: () => ([])
+  }
+})
+const emits = defineEmits(['update:modelValue'])
+const area = computed({
+  get(){
+    return props.modelValue
+  },
+  set(val){
+    console.log('val', val)
+    emits('update:modelValue', Object.values(val))
+  }
+})
+</script>
+
+<style lang="less" scoped>
+.normalClass{
+  margin: 0px;
+}
+</style>

package/package/components/CheckBox/index.vue

@@ -0,0 +1,33 @@
+<template>
+     <el-checkbox-group v-model="checkBoxValue">
+      <el-checkbox v-for="(item, index) in options" :value="item.value" :key="index">{{ item.label }}</el-checkbox>
+    </el-checkbox-group>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { ElCheckboxGroup, ElCheckbox } from 'element-plus'
+import '../../style/root.css'
+
+defineOptions({
+   name: 'CheckBox'
+})
+const props = defineProps({
+  options: {
+   type: Array,
+   default: () => ([])
+  }
+})
+const emits = defineEmits(['update:modelValue'])
+const checkBoxValue = computed({
+   get () {
+       return props.modelValue
+   },
+   set (value) {
+       emits('update:modelValue', value)
+   }
+})
+</script>
+
+<style lang="less" scoped>
+</style>

package/package/components/DatePicker/index.vue

@@ -1,6 +1,15 @@
 <template>
   <el-config-provider :locale="zhCn">
-    <el-date-picker style="width: 100%;" v-model="modelValue" :type="type" :placeholder="placeholder" :format="format" :value-format="format"/>
+    <el-date-picker 
+      style="width: 100%;" 
+      v-model="modelValue" 
+      :type="type" 
+      :placeholder="placeholder" 
+      :format="format" 
+      :value-format="format"
+      :start-placeholder="startPlaceholder"
+      :end-placeholder="endPlaceholder"
+    />
   </el-config-provider>
 </template>
 
@@ -24,6 +33,18 @@ const props = defineProps({
   type: {
     type: String,
     default: 'date'
+  },
+  startPlaceholder: {
+    type: String,
+    default: '开始日期'
+  },
+  startPlaceholder: {
+    type: String,
+    default: '开始日期'
+  },
+  endPlaceholder: {
+    type: String,
+    default: '结束日期'
   }
 })
 

package/package/components/Input/index.vue

@@ -1,12 +1,16 @@
 <template>
-    <ElInput :type="type" :placeholder="placeholder" v-model="inputValue" v-bind="$attrs" clearable :disabled="disabled">
+    <ElInput :type="type" :placeholder="placeholder" v-model="inputValue" v-bind="$attrs" :disabled="disabled">
         <template #prepend v-if="$slots.prepend">
             <!-- 前缀 -->
             <slot name="prepend" />
         </template>
         <template #append v-if="$slots.append">
             <!-- 后缀 -->
-            <slot name="append" />
+            <slot name="append" />  
+        </template>
+        <template #suffix v-if="$slots.suffix">
+            <!-- 后缀图标 -->
+            <slot name="suffix" />  
         </template>
     </ElInput>
 </template>
@@ -15,6 +19,7 @@
 import { computed } from 'vue'
 import {ElInput} from 'element-plus'
 import '../../style/root.css'
+import { Search } from '@element-plus/icons-vue'
 
 defineOptions({
     name: 'Input'
@@ -35,6 +40,7 @@ const props = defineProps({
     disabled: Boolean
 })
 const emits = defineEmits(['update:modelValue'])
+const formData = defineModel('formData')
 const inputValue = computed({
     get () {
         return props.modelValue
@@ -43,6 +49,7 @@ const inputValue = computed({
         if(value && typeof value === 'string'){
             value = value.trim()
         }
+        if (formData.value?.loc) formData.value.loc = ''
         emits('update:modelValue', value)
     }
 })

package/package/components/Number/index.vue

@@ -0,0 +1,20 @@
+<template>
+    <div class="normalClass">
+      <el-input-number v-model="num" :min="1" />
+    </div>
+</template>
+
+<script setup>
+import { ElInputNumber } from 'element-plus'
+defineOptions({
+  name: 'Number',
+})
+
+const num = defineModel('modelValue', { type: Number, default: 1 })
+</script>
+
+<style lang="less" scoped>
+.normalClass{
+  margin-right: 10px;
+}
+</style>

package/package/components/Radio/index.vue

@@ -0,0 +1,33 @@
+<template>
+     <el-radio-group v-model="radioValue">
+      <el-radio v-for="(item, index) in options" :value="item.value" :key="index">{{item.label}}</el-radio>
+    </el-radio-group>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import {ElRadioGroup, ElRadio} from 'element-plus'
+import '../../style/root.css'
+
+defineOptions({
+    name: 'Radio'
+})
+const props = defineProps({
+   options: {
+    type: Array,
+    default: () => ([])
+   }
+})
+const emits = defineEmits(['update:modelValue'])
+const radioValue = computed({
+    get () {
+        return props.modelValue
+    },
+    set (value) {
+        emits('update:modelValue', value)
+    }
+})
+</script>
+
+<style lang="less" scoped>
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qtsk-vue3",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "description": "vue3版组件库",
   "main": "./package/index.js",
   "scripts": {
@@ -20,6 +20,7 @@
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
     "@vue/shared": "^3.5.6",
+    "element-china-area-data": "^6.1.0",
     "element-plus": "^2.8.3"
   }
 }