@netang/quasar 0.0.84 → 0.0.85
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.
package/components/img/index.vue
CHANGED
|
@@ -3,12 +3,13 @@
|
|
|
3
3
|
v-model="currentModelValue"
|
|
4
4
|
:options="currentOptions"
|
|
5
5
|
:option-label="optionLabel"
|
|
6
|
+
:multiple="multiple"
|
|
6
7
|
:use-input="filter"
|
|
7
8
|
@filter="onFilter"
|
|
8
9
|
v-bind="$attrs"
|
|
9
10
|
>
|
|
10
11
|
<!-- 占位符 -->
|
|
11
|
-
<template v-slot:selected v-if="!
|
|
12
|
+
<template v-slot:selected v-if="! showValue && placeholder">
|
|
12
13
|
<div class="n-placeholder q-mr-xs">{{placeholder}}</div>
|
|
13
14
|
</template>
|
|
14
15
|
|
|
@@ -36,6 +37,7 @@
|
|
|
36
37
|
<script>
|
|
37
38
|
import { ref, computed, watch } from 'vue'
|
|
38
39
|
|
|
40
|
+
import $n_isValidArray from '@netang/utils/isValidArray'
|
|
39
41
|
import $n_isValidObject from '@netang/utils/isValidObject'
|
|
40
42
|
import $n_collection from '@netang/utils/collection'
|
|
41
43
|
|
|
@@ -63,6 +65,8 @@ export default {
|
|
|
63
65
|
type: String,
|
|
64
66
|
default: 'label',
|
|
65
67
|
},
|
|
68
|
+
// 是否多选
|
|
69
|
+
multiple: Boolean,
|
|
66
70
|
// 占位符
|
|
67
71
|
placeholder: String,
|
|
68
72
|
// 筛选
|
|
@@ -81,6 +85,17 @@ export default {
|
|
|
81
85
|
*/
|
|
82
86
|
setup(props, { emit, slots }) {
|
|
83
87
|
|
|
88
|
+
// ==========【当前值】===========================================================================================
|
|
89
|
+
|
|
90
|
+
// 当前值
|
|
91
|
+
const currentModelValue = ref(props.modelValue)
|
|
92
|
+
|
|
93
|
+
// 原始选项
|
|
94
|
+
const rawOptions = props.options
|
|
95
|
+
|
|
96
|
+
// 当前选项
|
|
97
|
+
const currentOptions = ref(rawOptions)
|
|
98
|
+
|
|
84
99
|
// ==========【计算属性】=========================================================================================
|
|
85
100
|
|
|
86
101
|
/**
|
|
@@ -90,16 +105,19 @@ export default {
|
|
|
90
105
|
return $n_isValidObject(slots) ? Object.keys(slots) : []
|
|
91
106
|
})
|
|
92
107
|
|
|
93
|
-
|
|
108
|
+
/**
|
|
109
|
+
* 显示值
|
|
110
|
+
*/
|
|
111
|
+
const showValue = computed(function() {
|
|
94
112
|
|
|
95
|
-
|
|
96
|
-
|
|
113
|
+
// 如果是多选
|
|
114
|
+
if (props.multiple) {
|
|
115
|
+
return $n_isValidArray(currentModelValue.value) ? '1' : ''
|
|
116
|
+
}
|
|
97
117
|
|
|
98
|
-
|
|
99
|
-
|
|
118
|
+
return currentModelValue.value
|
|
119
|
+
})
|
|
100
120
|
|
|
101
|
-
// 当前选项
|
|
102
|
-
const currentOptions = ref(rawOptions)
|
|
103
121
|
|
|
104
122
|
// ==========【监听数据】=========================================================================================
|
|
105
123
|
|
|
@@ -148,6 +166,8 @@ export default {
|
|
|
148
166
|
currentModelValue,
|
|
149
167
|
// 当前选项
|
|
150
168
|
currentOptions,
|
|
169
|
+
// 显示值
|
|
170
|
+
showValue,
|
|
151
171
|
|
|
152
172
|
// 筛选
|
|
153
173
|
onFilter,
|
|
@@ -76,7 +76,7 @@
|
|
|
76
76
|
@dragenter="dragEnter($event, fileItemIndex)"
|
|
77
77
|
@dragend="dragEnd"
|
|
78
78
|
>
|
|
79
|
-
<
|
|
79
|
+
<n-img
|
|
80
80
|
:src="getImage(fileItem)"
|
|
81
81
|
:spinner-size="toPx(currentSize / 2)"
|
|
82
82
|
:width="toPx(currentSize)"
|
|
@@ -138,7 +138,7 @@
|
|
|
138
138
|
size="xs"
|
|
139
139
|
title="预览"
|
|
140
140
|
@click="uploader.previewImage(fileItem)"
|
|
141
|
-
v-if="! noPreview"
|
|
141
|
+
v-if="! noPreview && getImage(fileItem)"
|
|
142
142
|
/>
|
|
143
143
|
|
|
144
144
|
<!-- 删除 -->
|
|
@@ -151,7 +151,7 @@
|
|
|
151
151
|
v-if="! noDelete && ! disable && ! readonly"
|
|
152
152
|
/>
|
|
153
153
|
</div>
|
|
154
|
-
</
|
|
154
|
+
</n-img>
|
|
155
155
|
</div>
|
|
156
156
|
|
|
157
157
|
<!-- 右边方块按钮 -->
|