qtsk-vue3 0.0.18 → 0.0.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -4,35 +4,36 @@
4
4
  placeholder="请选择省市区"
5
5
  size="default"
6
6
  :options="regionData"
7
- v-model="area"
7
+ v-model="modelValue"
8
+ clearable
9
+ @change="handleChange"
8
10
  >
9
11
  </el-cascader>
10
12
  </div>
11
13
  </template>
12
14
 
13
15
  <script setup>
14
- import { computed } from 'vue'
15
16
  import { ElCascader } from 'element-plus'
16
17
  import { regionData } from 'element-china-area-data'
18
+ import { treeToArray } from '../../utils/common'
19
+ const regionFlatData = treeToArray(regionData)
17
20
  defineOptions({
18
21
  name: 'Area',
19
22
  })
20
23
  const props = defineProps({
21
- modelValue: {
22
- type: Array,
23
- default: () => ([])
24
- }
24
+ idx: Number
25
25
  })
26
- const emits = defineEmits(['update:modelValue'])
27
- const area = computed({
28
- get(){
29
- return props.modelValue
30
- },
31
- set(val){
32
- console.log('val', val)
33
- emits('update:modelValue', Object.values(val))
34
- }
26
+
27
+ const emits = defineEmits(['update:modelValue', 'change'])
28
+ const modelValue = defineModel('modelValue')
29
+
30
+ const handleChange = (value) => {
31
+ emits('change', {index: props.idx, value})
32
+ }
33
+ defineExpose({
34
+ regionFlatData
35
35
  })
36
+
36
37
  </script>
37
38
 
38
39
  <style lang="less" scoped>
@@ -48,7 +48,7 @@ const props = defineProps({
48
48
  }
49
49
  })
50
50
 
51
- const modelValue = defineModel('modelValue', { type: String })
51
+ const modelValue = defineModel('modelValue', { type: [String, Array] })
52
52
  </script>
53
53
 
54
54
  <style lang="less" scoped>
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <el-form-item :label="label" :prop="propName">
2
+ <el-form-item :label="label" :prop="propName" :key="label">
3
3
  <slot/>
4
4
  </el-form-item>
5
5
  </template>
@@ -37,9 +37,10 @@ const props = defineProps({
37
37
  type: [String, Number],
38
38
  default: ''
39
39
  },
40
- disabled: Boolean
40
+ disabled: Boolean,
41
+ idx: Number
41
42
  })
42
- const emits = defineEmits(['update:modelValue'])
43
+ const emits = defineEmits(['update:modelValue', 'change'])
43
44
  const formData = defineModel('formData')
44
45
  const inputValue = computed({
45
46
  get () {
@@ -50,6 +51,7 @@ const inputValue = computed({
50
51
  value = value.trim()
51
52
  }
52
53
  if (formData.value?.loc) formData.value.loc = ''
54
+ emits('change', {index: props.idx || 0, keyWord: value})
53
55
  emits('update:modelValue', value)
54
56
  }
55
57
  })
@@ -0,0 +1,3 @@
1
+ import { ElLoading } from 'element-plus'
2
+
3
+ export const Loading = ElLoading
@@ -5,7 +5,7 @@
5
5
  v-bind="$attrs"
6
6
  :teleported="false"
7
7
  :no-data-text="'暂无数据项'"
8
- clearable
8
+ :clearable="clearable"
9
9
  >
10
10
  <el-option v-for="item in options" :key="item[valueName]" :label="item[keyName]" :value="item[valueName]">
11
11
  <div v-if="item.icon" style="display: flex;align-items: center;justify-content: space-between;">
@@ -39,6 +39,10 @@ defineProps({
39
39
  valueName: {
40
40
  type: String,
41
41
  default: 'value'
42
+ },
43
+ clearable: {
44
+ type: Boolean,
45
+ default: true
42
46
  }
43
47
  })
44
48
  const selectValue = defineModel('modelValue', { default: '', type: [Number, String, Array] })
@@ -19,5 +19,4 @@ const install = makeInstaller(Components)
19
19
 
20
20
  export { Message, MessageBox, install, install as default }
21
21
 
22
- console.info('%c====== Editing in local package ======', 'font-size:16px;color:pink;')
23
-
22
+ console.info('%c====== Editing in local package ======', 'font-size:16px;color:pink;')
package/package/index.js CHANGED
@@ -1,22 +1,23 @@
1
- import Components from './component'
2
- import { Message, MessageBox } from './components/Message'
3
-
4
- const makeInstaller = (components = [], directives = []) => {
5
- const apps = []
6
- const install = (app, opts) => {
7
- const option = opts
8
- if (apps.includes(app)) return
9
- apps.push(app)
10
- components.forEach((c) => {
11
- app.component(c.name, c)
12
- })
13
- app.config.globalProperties.$ELEMENT = option
14
- }
15
- return install
16
- }
17
-
18
- const install = makeInstaller(Components)
19
-
20
- export { Message, MessageBox, install, install as default }
21
-
22
- console.info('%c====== Editing in local package ======', 'font-size:16px;color:pink;')
1
+ import Components from './component'
2
+ import { Message, MessageBox } from './components/Message'
3
+ import { Loading } from './components/Loading'
4
+
5
+ const makeInstaller = (components = [], directives = []) => {
6
+ const apps = []
7
+ const install = (app, opts) => {
8
+ const option = opts
9
+ if (apps.includes(app)) return
10
+ apps.push(app)
11
+ components.forEach((c) => {
12
+ app.component(c.name, c)
13
+ })
14
+ app.config.globalProperties.$ELEMENT = option
15
+ }
16
+ return install
17
+ }
18
+
19
+ const install = makeInstaller(Components)
20
+
21
+ export { Message, MessageBox, Loading, install, install as default }
22
+
23
+ console.info('%c====== Editing in local package ======', 'font-size:16px;color:pink;')
@@ -52,4 +52,30 @@ export const dateFormat = (time, format) => {
52
52
  } else {
53
53
  return ''
54
54
  }
55
- }
55
+ }
56
+
57
+ // 将树形结构数组对象转换为二维数组
58
+ export const treeToArray = (treeArray) => {
59
+ const result = []
60
+
61
+ function flatten (node, level) {
62
+ result.push({
63
+ id: node.value,
64
+ name: node.label,
65
+ level: level
66
+ })
67
+
68
+ if (node.children && node.children.length > 0) {
69
+ node.children.forEach(child => {
70
+ flatten(child, level + 1)
71
+ })
72
+ }
73
+ }
74
+
75
+ treeArray.forEach(node => {
76
+ flatten(node, 0)
77
+ })
78
+
79
+ return result
80
+ }
81
+
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "qtsk-vue3",
3
- "version": "0.0.18",
3
+ "version": "0.0.20",
4
4
  "description": "vue3版组件库",
5
5
  "main": "./package/index.js",
6
6
  "scripts": {