@netang/quasar 0.0.76 → 0.0.78
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/_docs/docs/components/field-table.md +57 -57
- package/components/field-text/index.vue +2 -10
- package/components/img/index.vue +179 -0
- package/components/search/index.vue +2 -0
- package/components/search-item/index.vue +53 -9
- package/components/thumbnail/index.vue +25 -75
- package/docs/404.html +33 -33
- package/docs/assets/404.html-60b35caa.js +1 -1
- package/docs/assets/404.html-d1e63d77.js +1 -1
- package/docs/assets/alert.html-568d4e94.js +1 -1
- package/docs/assets/alert.html-f5dbc3e9.js +1 -1
- package/docs/assets/app-8c3ae4de.js +6 -6
- package/docs/assets/confirm.html-7a1566f6.js +1 -1
- package/docs/assets/confirm.html-96f1b004.js +1 -1
- package/docs/assets/field-table.html-68d610b0.js +1 -1
- package/docs/assets/field-table.html-86cc3511.js +1 -1
- package/docs/assets/field-tree.html-45410c3c.js +1 -1
- package/docs/assets/field-tree.html-c98ac993.js +1 -1
- package/docs/assets/framework-204010b2.js +5 -5
- package/docs/assets/index.html-1695dd7c.js +1 -1
- package/docs/assets/index.html-65a4aa67.js +1 -1
- package/docs/assets/style-ac5a9aa6.css +1 -1
- package/docs/components/field-table.html +33 -33
- package/docs/components/field-tree.html +33 -33
- package/docs/index.html +33 -33
- package/docs/utils/alert.html +33 -33
- package/docs/utils/confirm.html +33 -33
- package/package.json +1 -1
- package/sass/common.scss +10 -0
- package/sass/variables.scss +138 -138
- package/utils/getImage.js +65 -65
|
@@ -1,57 +1,57 @@
|
|
|
1
|
-
# FieldTable 下拉表格
|
|
2
|
-
|
|
3
|
-
::: tip
|
|
4
|
-
继承 `<q-field>` 所有特性
|
|
5
|
-
[中文文档](http://www.quasarchs.com/vue-components/field) [英文文档](https://quasar.dev/vue-components/field)
|
|
6
|
-
:::
|
|
7
|
-
|
|
8
|
-
## FieldTable API
|
|
9
|
-
|
|
10
|
-
### FieldTable 属性
|
|
11
|
-
|
|
12
|
-
| 属性名 | 说明 | 类型 | 可选值 | 默认值 |
|
|
13
|
-
|--------------------------|-------------|---------------------|------------------------------------------|-----------------|
|
|
14
|
-
| value / v-model | 绑定值 | - | - | - |
|
|
15
|
-
| value-key | 值字段 | `String` | - | - |
|
|
16
|
-
| label-key | 标签字段 | `String` | - | - |
|
|
17
|
-
| value-type | 值类型 | `String` | `string` / `stringArray` / `objectArray` | objectArray |
|
|
18
|
-
| value-separator | 值分隔符 | `String` | - | , |
|
|
19
|
-
| path | 表格请求路径 | `String` | - | - |
|
|
20
|
-
| query | 请求参数 | `object` | - | - |
|
|
21
|
-
| data | 附加请求数据 | `object` | - | - |
|
|
22
|
-
| no-default-load-selected | 初始不加载已选数据 | `Boolean` | - | false |
|
|
23
|
-
| no-update-load-selected | 更新值时不加载已选数据 | `Boolean` | - | false |
|
|
24
|
-
| format-label | 格式化显示标签 | `Function` | - | - |
|
|
25
|
-
| show-keys | 下拉表格显示的字段数组 | `Array` | - | `[ 值字段, 标签字段 ]` |
|
|
26
|
-
| hide-search-keys | 隐藏搜索字段数组 | `Array` | - | - |
|
|
27
|
-
| filter-key | 默认筛选字段 | `Array` | - | `标签字段` |
|
|
28
|
-
| filter | 是否开启筛选 | `Boolean` | - | false |
|
|
29
|
-
| table-props | 表格声明属性 | `Object` | - | - |
|
|
30
|
-
| dialog-props | 对话框声明属性 | `Object` | - | - |
|
|
31
|
-
| no-dialog | 关闭对话框 | `Boolean` | - | false |
|
|
32
|
-
| columns | 表格列数据 | `Array` | - | - |
|
|
33
|
-
| rows | 行数据 | `Array` | - | - |
|
|
34
|
-
| multiple | 是否多选 | `Boolean` | - | false |
|
|
35
|
-
| collapse-tags | 多选模式下是否折叠标签 | `Boolean` | - | false |
|
|
36
|
-
| placeholder | 占位符 | `String` | - | - |
|
|
37
|
-
| clearable | 是否可清除 | `Boolean` | - | false |
|
|
38
|
-
| disable | 是否禁用 | `Boolean` | - | false |
|
|
39
|
-
| readonly | 是否只读 | `Boolean` | - | false |
|
|
40
|
-
| input-debounce | 输入防抖(毫秒) | `Number` / `String` | - | 500 |
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
### FieldTable 插槽
|
|
44
|
-
|
|
45
|
-
| 插槽名 | 说明 |
|
|
46
|
-
|--------------------------|------------------------------------------|
|
|
47
|
-
| default | 自定义默认内容(如果存在,则会隐藏下拉表格,并提供接口自定义实现) |
|
|
48
|
-
|
|
49
|
-
### FieldTable `default` 插槽 对外暴露的方法
|
|
50
|
-
|
|
51
|
-
| 属性名 | 说明 | 类型 | 示例 |
|
|
52
|
-
|--------------------------|--|----------|-----|
|
|
53
|
-
| showValue | 显示的已选值 | `String` | - |
|
|
54
|
-
| selected | 已选数据 | `Array` | `[ { id: 1, ... }, { id: 2, ... } ]` |
|
|
55
|
-
| onRemove | 删除已选 | `Function` | `onRemove(index)` |
|
|
56
|
-
| onShowDialog | 显示对话框 | `Function` | - |
|
|
57
|
-
| onClear | 清空已选数据 | `Function` | - |
|
|
1
|
+
# FieldTable 下拉表格
|
|
2
|
+
|
|
3
|
+
::: tip
|
|
4
|
+
继承 `<q-field>` 所有特性
|
|
5
|
+
[中文文档](http://www.quasarchs.com/vue-components/field) [英文文档](https://quasar.dev/vue-components/field)
|
|
6
|
+
:::
|
|
7
|
+
|
|
8
|
+
## FieldTable API
|
|
9
|
+
|
|
10
|
+
### FieldTable 属性
|
|
11
|
+
|
|
12
|
+
| 属性名 | 说明 | 类型 | 可选值 | 默认值 |
|
|
13
|
+
|--------------------------|-------------|---------------------|------------------------------------------|-----------------|
|
|
14
|
+
| value / v-model | 绑定值 | - | - | - |
|
|
15
|
+
| value-key | 值字段 | `String` | - | - |
|
|
16
|
+
| label-key | 标签字段 | `String` | - | - |
|
|
17
|
+
| value-type | 值类型 | `String` | `string` / `stringArray` / `objectArray` | objectArray |
|
|
18
|
+
| value-separator | 值分隔符 | `String` | - | , |
|
|
19
|
+
| path | 表格请求路径 | `String` | - | - |
|
|
20
|
+
| query | 请求参数 | `object` | - | - |
|
|
21
|
+
| data | 附加请求数据 | `object` | - | - |
|
|
22
|
+
| no-default-load-selected | 初始不加载已选数据 | `Boolean` | - | false |
|
|
23
|
+
| no-update-load-selected | 更新值时不加载已选数据 | `Boolean` | - | false |
|
|
24
|
+
| format-label | 格式化显示标签 | `Function` | - | - |
|
|
25
|
+
| show-keys | 下拉表格显示的字段数组 | `Array` | - | `[ 值字段, 标签字段 ]` |
|
|
26
|
+
| hide-search-keys | 隐藏搜索字段数组 | `Array` | - | - |
|
|
27
|
+
| filter-key | 默认筛选字段 | `Array` | - | `标签字段` |
|
|
28
|
+
| filter | 是否开启筛选 | `Boolean` | - | false |
|
|
29
|
+
| table-props | 表格声明属性 | `Object` | - | - |
|
|
30
|
+
| dialog-props | 对话框声明属性 | `Object` | - | - |
|
|
31
|
+
| no-dialog | 关闭对话框 | `Boolean` | - | false |
|
|
32
|
+
| columns | 表格列数据 | `Array` | - | - |
|
|
33
|
+
| rows | 行数据 | `Array` | - | - |
|
|
34
|
+
| multiple | 是否多选 | `Boolean` | - | false |
|
|
35
|
+
| collapse-tags | 多选模式下是否折叠标签 | `Boolean` | - | false |
|
|
36
|
+
| placeholder | 占位符 | `String` | - | - |
|
|
37
|
+
| clearable | 是否可清除 | `Boolean` | - | false |
|
|
38
|
+
| disable | 是否禁用 | `Boolean` | - | false |
|
|
39
|
+
| readonly | 是否只读 | `Boolean` | - | false |
|
|
40
|
+
| input-debounce | 输入防抖(毫秒) | `Number` / `String` | - | 500 |
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
### FieldTable 插槽
|
|
44
|
+
|
|
45
|
+
| 插槽名 | 说明 |
|
|
46
|
+
|--------------------------|------------------------------------------|
|
|
47
|
+
| default | 自定义默认内容(如果存在,则会隐藏下拉表格,并提供接口自定义实现) |
|
|
48
|
+
|
|
49
|
+
### FieldTable `default` 插槽 对外暴露的方法
|
|
50
|
+
|
|
51
|
+
| 属性名 | 说明 | 类型 | 示例 |
|
|
52
|
+
|--------------------------|--|----------|-----|
|
|
53
|
+
| showValue | 显示的已选值 | `String` | - |
|
|
54
|
+
| selected | 已选数据 | `Array` | `[ { id: 1, ... }, { id: 2, ... } ]` |
|
|
55
|
+
| onRemove | 删除已选 | `Function` | `onRemove(index)` |
|
|
56
|
+
| onShowDialog | 显示对话框 | `Function` | - |
|
|
57
|
+
| onClear | 清空已选数据 | `Function` | - |
|
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
<script>
|
|
74
74
|
import { computed } from 'vue'
|
|
75
75
|
|
|
76
|
-
import $
|
|
76
|
+
import $n_omit from 'lodash/omit'
|
|
77
77
|
|
|
78
78
|
import $n_copy from '../../utils/copy'
|
|
79
79
|
|
|
@@ -133,15 +133,7 @@ export default {
|
|
|
133
133
|
* 插槽标识数组
|
|
134
134
|
*/
|
|
135
135
|
const slotNames = computed(function() {
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
$n_forIn(slots, function(val, key) {
|
|
139
|
-
if (key !== 'default') {
|
|
140
|
-
lists.push(key)
|
|
141
|
-
}
|
|
142
|
-
})
|
|
143
|
-
|
|
144
|
-
return lists
|
|
136
|
+
return $n_isValidObject(slots) ? Object.keys($n_omit(slots, [ 'default' ])) : []
|
|
145
137
|
})
|
|
146
138
|
|
|
147
139
|
// ==========【方法】=============================================================================================
|
|
@@ -0,0 +1,179 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<q-img
|
|
3
|
+
:src="currentSrc"
|
|
4
|
+
:width="imageProps.width"
|
|
5
|
+
:height="imageProps.height"
|
|
6
|
+
:spinner-size="imageProps.spinnerSize"
|
|
7
|
+
v-bind="$attrs"
|
|
8
|
+
v-if="currentSrc"
|
|
9
|
+
>
|
|
10
|
+
<!-- 错误插槽 -->
|
|
11
|
+
<template v-slot:error>
|
|
12
|
+
<slot name="error">
|
|
13
|
+
<div class="absolute-full flex flex-center bg-grey-5 text-white no-padding">
|
|
14
|
+
<q-icon
|
|
15
|
+
:size="errorIconSize"
|
|
16
|
+
:name="errorIcon"
|
|
17
|
+
/>
|
|
18
|
+
</div>
|
|
19
|
+
</slot>
|
|
20
|
+
</template>
|
|
21
|
+
|
|
22
|
+
<!-- 默认插槽 -->
|
|
23
|
+
<slot />
|
|
24
|
+
|
|
25
|
+
<!-- 预览点击 -->
|
|
26
|
+
<div
|
|
27
|
+
class="absolute-full transparent cursor-pointer"
|
|
28
|
+
@click.prevent.stop="onPreview"
|
|
29
|
+
@dblclick.prevent.stop="onNoop"
|
|
30
|
+
v-if="preview"
|
|
31
|
+
></div>
|
|
32
|
+
</q-img>
|
|
33
|
+
|
|
34
|
+
<!-- 如果没有图片 -->
|
|
35
|
+
<div
|
|
36
|
+
class="q-img"
|
|
37
|
+
v-bind="imageProps"
|
|
38
|
+
v-else
|
|
39
|
+
>
|
|
40
|
+
<div class="q-img__content absolute-full q-anchor--skip">
|
|
41
|
+
<slot name="error">
|
|
42
|
+
<div class="absolute-full flex flex-center bg-grey-5 text-white no-padding">
|
|
43
|
+
<q-icon
|
|
44
|
+
:size="errorIconSize"
|
|
45
|
+
:name="errorIcon"
|
|
46
|
+
/>
|
|
47
|
+
</div>
|
|
48
|
+
</slot>
|
|
49
|
+
</div>
|
|
50
|
+
</div>
|
|
51
|
+
</template>
|
|
52
|
+
|
|
53
|
+
<script>
|
|
54
|
+
import { computed } from 'vue'
|
|
55
|
+
|
|
56
|
+
import $n_get from 'lodash/get'
|
|
57
|
+
import $n_px from '@netang/utils/px'
|
|
58
|
+
|
|
59
|
+
import $n_getImage from '../../utils/getImage'
|
|
60
|
+
import $n_previewImage from '../../utils/previewImage'
|
|
61
|
+
|
|
62
|
+
export default {
|
|
63
|
+
|
|
64
|
+
/**
|
|
65
|
+
* 标识
|
|
66
|
+
*/
|
|
67
|
+
name: 'NImg',
|
|
68
|
+
|
|
69
|
+
/**
|
|
70
|
+
* 关闭组件 attribute 透传行为
|
|
71
|
+
*/
|
|
72
|
+
inheritAttrs: false,
|
|
73
|
+
|
|
74
|
+
/**
|
|
75
|
+
* 声明属性
|
|
76
|
+
*/
|
|
77
|
+
props: {
|
|
78
|
+
// 图片地址
|
|
79
|
+
src: [ String, Array, Object ],
|
|
80
|
+
// 宽
|
|
81
|
+
width: [ String, Number ],
|
|
82
|
+
// 高
|
|
83
|
+
height: [ String, Number ],
|
|
84
|
+
// 加载旋转器尺寸
|
|
85
|
+
spinnerSize: [ String, Number ],
|
|
86
|
+
// 错误尺寸
|
|
87
|
+
errorSize: {
|
|
88
|
+
type: [ String, Number ],
|
|
89
|
+
default: 70,
|
|
90
|
+
},
|
|
91
|
+
// 错误图标大小
|
|
92
|
+
errorIconSize: {
|
|
93
|
+
type: String,
|
|
94
|
+
default: 'sm',
|
|
95
|
+
},
|
|
96
|
+
// 错误图标
|
|
97
|
+
errorIcon: {
|
|
98
|
+
type: String,
|
|
99
|
+
default: 'image',
|
|
100
|
+
},
|
|
101
|
+
// 是否点击放大预览
|
|
102
|
+
preview: Boolean,
|
|
103
|
+
},
|
|
104
|
+
|
|
105
|
+
/**
|
|
106
|
+
* 组合式
|
|
107
|
+
*/
|
|
108
|
+
setup(props, { attrs }) {
|
|
109
|
+
|
|
110
|
+
// ==========【计算属性】==========================================================================================
|
|
111
|
+
|
|
112
|
+
/**
|
|
113
|
+
* 当前图片地址
|
|
114
|
+
*/
|
|
115
|
+
const currentSrc = computed(function () {
|
|
116
|
+
const res = $n_getImage(props.src, { w: props.width, zoom: true })
|
|
117
|
+
if (res) {
|
|
118
|
+
return res
|
|
119
|
+
}
|
|
120
|
+
})
|
|
121
|
+
|
|
122
|
+
/**
|
|
123
|
+
* 图片声明属性
|
|
124
|
+
*/
|
|
125
|
+
const imageProps = computed(function () {
|
|
126
|
+
|
|
127
|
+
let width = props.width ? $n_px(props.width) : undefined
|
|
128
|
+
let height = props.height ? $n_px(props.height) : undefined
|
|
129
|
+
|
|
130
|
+
// 如果有当前值
|
|
131
|
+
if (currentSrc.value) {
|
|
132
|
+
return {
|
|
133
|
+
width,
|
|
134
|
+
height,
|
|
135
|
+
spinnerSize: props.spinnerSize ? $n_px(props.spinnerSize) : undefined,
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
// 如果没有宽 || 没有高
|
|
140
|
+
if (! width || ! height) {
|
|
141
|
+
width = $n_px(props.errorSize)
|
|
142
|
+
height = width
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
return {
|
|
146
|
+
class: $n_get(attrs, 'class'),
|
|
147
|
+
style: [
|
|
148
|
+
{
|
|
149
|
+
width,
|
|
150
|
+
height,
|
|
151
|
+
},
|
|
152
|
+
$n_get(attrs, 'style'),
|
|
153
|
+
],
|
|
154
|
+
}
|
|
155
|
+
})
|
|
156
|
+
|
|
157
|
+
// ==========【方法】=============================================================================================
|
|
158
|
+
|
|
159
|
+
/**
|
|
160
|
+
* 预览
|
|
161
|
+
*/
|
|
162
|
+
function onPreview() {
|
|
163
|
+
// 预览图片
|
|
164
|
+
$n_previewImage(props.src)
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
return {
|
|
168
|
+
// 当前图片地址
|
|
169
|
+
currentSrc,
|
|
170
|
+
// 图片声明属性
|
|
171
|
+
imageProps,
|
|
172
|
+
// 预览
|
|
173
|
+
onPreview,
|
|
174
|
+
// 点击空方法
|
|
175
|
+
onNoop() {},
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
</script>
|
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
v-for="(item, itemIndex) in options"
|
|
9
9
|
>
|
|
10
10
|
<template v-if="! item.hide">
|
|
11
|
+
|
|
11
12
|
<!-- 如果有 name 插槽 -->
|
|
12
13
|
<slot
|
|
13
14
|
:name="`name-${item.name}`"
|
|
@@ -121,6 +122,7 @@
|
|
|
121
122
|
v-model="modelValue[itemIndex][index].value"
|
|
122
123
|
dense
|
|
123
124
|
outlined
|
|
125
|
+
:value-type="multiple ? 'stringArray' : 'string'"
|
|
124
126
|
:multiple="multiple"
|
|
125
127
|
v-bind="item.table"
|
|
126
128
|
v-else-if="item.searchType === 'table'"
|
|
@@ -66,10 +66,12 @@
|
|
|
66
66
|
<script>
|
|
67
67
|
import { watch } from 'vue'
|
|
68
68
|
|
|
69
|
+
import $n_isArray from 'lodash/isArray'
|
|
69
70
|
import $n_cloneDeep from 'lodash/cloneDeep'
|
|
70
71
|
|
|
71
72
|
import $n_split from '@netang/utils/split'
|
|
72
73
|
import $n_indexOf from '@netang/utils/indexOf'
|
|
74
|
+
import $n_numberDeep from '@netang/utils/numberDeep'
|
|
73
75
|
|
|
74
76
|
import { configs } from '../../utils/config'
|
|
75
77
|
|
|
@@ -112,21 +114,63 @@ export default {
|
|
|
112
114
|
/**
|
|
113
115
|
* 监听值的比较类型
|
|
114
116
|
*/
|
|
115
|
-
watch(()=>props.modelValue[0].compare, function(
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
117
|
+
watch(()=>props.modelValue[0].compare, function(compare) {
|
|
118
|
+
|
|
119
|
+
// 获取当前值
|
|
120
|
+
const value = props.modelValue[0].value
|
|
121
|
+
|
|
122
|
+
// 如果类型为 in / not in, 则为多选
|
|
123
|
+
// --------------------------------------------------
|
|
124
|
+
if ($n_indexOf([dicts.SEARCH_COMPARE_TYPE__IN, dicts.SEARCH_COMPARE_TYPE__NOT_IN], compare) > -1) {
|
|
125
|
+
|
|
126
|
+
// 如果当前值不为数组
|
|
127
|
+
if (! $n_isArray(value)) {
|
|
128
|
+
|
|
129
|
+
// 则将值转为数组
|
|
130
|
+
// 触发更新值
|
|
131
|
+
emitModelValue($n_split(value, ','))
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
// 否则为单选 && 如果值为: 数组
|
|
135
|
+
// --------------------------------------------------
|
|
136
|
+
} else if ($n_isArray(value)) {
|
|
137
|
+
|
|
138
|
+
// 触发更新值
|
|
139
|
+
emitModelValue(value.length ? $n_numberDeep(value[0]) : '')
|
|
140
|
+
|
|
141
|
+
// 否则为单选 && 值为: 字符串 / 数字
|
|
142
|
+
// --------------------------------------------------
|
|
143
|
+
} else {
|
|
144
|
+
|
|
145
|
+
// 将值转为数组
|
|
146
|
+
const arr = $n_split(value, ',')
|
|
147
|
+
|
|
148
|
+
// 如果数组长度不为 1, 则说明有多个值 || 无值
|
|
119
149
|
if (arr.length !== 1) {
|
|
120
|
-
// 克隆值
|
|
121
|
-
const _modelValue = $n_cloneDeep(props.modelValue)
|
|
122
150
|
|
|
123
|
-
//
|
|
124
|
-
|
|
125
|
-
emit('update:modelValue', _modelValue)
|
|
151
|
+
// 触发更新值
|
|
152
|
+
emitModelValue(arr.length > 1 ? arr[0] : '')
|
|
126
153
|
}
|
|
127
154
|
}
|
|
128
155
|
})
|
|
129
156
|
|
|
157
|
+
// ==========【方法】=============================================================================================
|
|
158
|
+
|
|
159
|
+
/**
|
|
160
|
+
* 触发更新值
|
|
161
|
+
*/
|
|
162
|
+
function emitModelValue(value) {
|
|
163
|
+
|
|
164
|
+
// 克隆值
|
|
165
|
+
const _modelValue = $n_cloneDeep(props.modelValue)
|
|
166
|
+
|
|
167
|
+
// 更新值
|
|
168
|
+
_modelValue[0].value = value
|
|
169
|
+
|
|
170
|
+
// 更新值
|
|
171
|
+
emit('update:modelValue', _modelValue)
|
|
172
|
+
}
|
|
173
|
+
|
|
130
174
|
// ==========【返回】=============================================================================================
|
|
131
175
|
|
|
132
176
|
return {
|
|
@@ -1,41 +1,28 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
3
|
-
:
|
|
4
|
-
:
|
|
5
|
-
:
|
|
6
|
-
:height="toPx(size)"
|
|
7
|
-
fit="fill"
|
|
2
|
+
<g-img
|
|
3
|
+
:spinner-size="size / 2"
|
|
4
|
+
:width="size"
|
|
5
|
+
:height="size"
|
|
8
6
|
v-bind="$attrs"
|
|
9
|
-
v-if="currentSrc"
|
|
10
7
|
>
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
8
|
+
<!-- 插槽 -->
|
|
9
|
+
<template
|
|
10
|
+
v-for="slotName in slotNames"
|
|
11
|
+
v-slot:[slotName]
|
|
12
|
+
>
|
|
13
|
+
<slot
|
|
14
|
+
:name="slotName"
|
|
15
|
+
/>
|
|
18
16
|
</template>
|
|
19
|
-
|
|
20
|
-
<!-- 预览点击 -->
|
|
21
|
-
<div
|
|
22
|
-
class="absolute-full transparent cursor-pointer"
|
|
23
|
-
@click.prevent.stop="onPreview"
|
|
24
|
-
@dblclick.prevent.stop="onNoop"
|
|
25
|
-
v-if="preview"
|
|
26
|
-
></div>
|
|
27
|
-
</q-img>
|
|
17
|
+
</g-img>
|
|
28
18
|
</template>
|
|
29
19
|
|
|
30
20
|
<script>
|
|
31
21
|
import { computed } from 'vue'
|
|
32
|
-
import { useQuasar } from 'quasar'
|
|
33
22
|
|
|
34
|
-
import $
|
|
35
|
-
import $n_noop from '@netang/utils/noop'
|
|
23
|
+
import $n_isValidObject from '@netang/utils/isValidObject'
|
|
36
24
|
|
|
37
|
-
import
|
|
38
|
-
import $n_previewImage from '../../utils/previewImage'
|
|
25
|
+
import GImg from '../img'
|
|
39
26
|
|
|
40
27
|
export default {
|
|
41
28
|
|
|
@@ -45,77 +32,40 @@ export default {
|
|
|
45
32
|
name: 'NThumbnail',
|
|
46
33
|
|
|
47
34
|
/**
|
|
48
|
-
*
|
|
35
|
+
* 组件
|
|
49
36
|
*/
|
|
50
|
-
|
|
37
|
+
components: {
|
|
38
|
+
GImg,
|
|
39
|
+
},
|
|
51
40
|
|
|
52
41
|
/**
|
|
53
42
|
* 声明属性
|
|
54
43
|
*/
|
|
55
44
|
props: {
|
|
56
|
-
// 图片地址
|
|
57
|
-
src: [String, Array, Object],
|
|
58
45
|
// 图片尺寸
|
|
59
46
|
size: {
|
|
60
47
|
type: Number,
|
|
61
48
|
default: 40,
|
|
62
49
|
},
|
|
63
|
-
// 错误图标大小
|
|
64
|
-
errorIconSize: {
|
|
65
|
-
type: String,
|
|
66
|
-
default: 'sm',
|
|
67
|
-
},
|
|
68
|
-
// 错误图标
|
|
69
|
-
errorIcon: {
|
|
70
|
-
type: String,
|
|
71
|
-
default: 'image',
|
|
72
|
-
},
|
|
73
|
-
// 是否点击放大预览
|
|
74
|
-
preview: Boolean,
|
|
75
50
|
},
|
|
76
51
|
|
|
77
52
|
/**
|
|
78
53
|
* 组合式
|
|
79
54
|
*/
|
|
80
|
-
setup(props) {
|
|
81
|
-
|
|
82
|
-
// ==========【数据】============================================================================================
|
|
83
|
-
|
|
84
|
-
// quasar 对象
|
|
85
|
-
const $q = useQuasar()
|
|
55
|
+
setup(props, { slots }) {
|
|
86
56
|
|
|
87
57
|
// ==========【计算属性】==========================================================================================
|
|
88
58
|
|
|
89
59
|
/**
|
|
90
|
-
*
|
|
60
|
+
* 插槽标识
|
|
91
61
|
*/
|
|
92
|
-
const
|
|
93
|
-
|
|
94
|
-
if (res) {
|
|
95
|
-
return res
|
|
96
|
-
}
|
|
97
|
-
return 'error'
|
|
62
|
+
const slotNames = computed(function() {
|
|
63
|
+
return $n_isValidObject(slots) ? Object.keys(slots) : []
|
|
98
64
|
})
|
|
99
65
|
|
|
100
|
-
// ==========【方法】=============================================================================================
|
|
101
|
-
|
|
102
|
-
/**
|
|
103
|
-
* 预览
|
|
104
|
-
*/
|
|
105
|
-
function onPreview() {
|
|
106
|
-
// 预览图片
|
|
107
|
-
$n_previewImage(props.src)
|
|
108
|
-
}
|
|
109
|
-
|
|
110
66
|
return {
|
|
111
|
-
//
|
|
112
|
-
|
|
113
|
-
// 预览
|
|
114
|
-
onPreview,
|
|
115
|
-
// 转像素
|
|
116
|
-
toPx: $n_px,
|
|
117
|
-
// 点击空方法
|
|
118
|
-
onNoop: $n_noop,
|
|
67
|
+
// 插槽标识
|
|
68
|
+
slotNames,
|
|
119
69
|
}
|
|
120
70
|
}
|
|
121
71
|
}
|
package/docs/404.html
CHANGED
|
@@ -1,33 +1,33 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en-US">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
6
|
-
<meta name="generator" content="VuePress 2.0.0-beta.60">
|
|
7
|
-
<style>
|
|
8
|
-
:root {
|
|
9
|
-
--c-bg: #fff;
|
|
10
|
-
}
|
|
11
|
-
html.dark {
|
|
12
|
-
--c-bg: #22272e;
|
|
13
|
-
}
|
|
14
|
-
html, body {
|
|
15
|
-
background-color: var(--c-bg);
|
|
16
|
-
}
|
|
17
|
-
</style>
|
|
18
|
-
<script>
|
|
19
|
-
const userMode = localStorage.getItem('vuepress-color-scheme');
|
|
20
|
-
const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
21
|
-
if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) {
|
|
22
|
-
document.documentElement.classList.toggle('dark', true);
|
|
23
|
-
}
|
|
24
|
-
</script>
|
|
25
|
-
<title>netang-quasar</title><meta name="description" content="">
|
|
26
|
-
<link rel="preload" href="/netang-quasar/assets/style-ac5a9aa6.css" as="style"><link rel="stylesheet" href="/netang-quasar/assets/style-ac5a9aa6.css">
|
|
27
|
-
<link rel="modulepreload" href="/netang-quasar/assets/app-8c3ae4de.js"><link rel="modulepreload" href="/netang-quasar/assets/framework-204010b2.js"><link rel="modulepreload" href="/netang-quasar/assets/404.html-60b35caa.js"><link rel="modulepreload" href="/netang-quasar/assets/404.html-d1e63d77.js"><link rel="prefetch" href="/netang-quasar/assets/index.html-65a4aa67.js" as="script"><link rel="prefetch" href="/netang-quasar/assets/field-table.html-86cc3511.js" as="script"><link rel="prefetch" href="/netang-quasar/assets/field-tree.html-c98ac993.js" as="script"><link rel="prefetch" href="/netang-quasar/assets/alert.html-568d4e94.js" as="script"><link rel="prefetch" href="/netang-quasar/assets/confirm.html-96f1b004.js" as="script"><link rel="prefetch" href="/netang-quasar/assets/index.html-1695dd7c.js" as="script"><link rel="prefetch" href="/netang-quasar/assets/field-table.html-68d610b0.js" as="script"><link rel="prefetch" href="/netang-quasar/assets/field-tree.html-45410c3c.js" as="script"><link rel="prefetch" href="/netang-quasar/assets/alert.html-f5dbc3e9.js" as="script"><link rel="prefetch" href="/netang-quasar/assets/confirm.html-7a1566f6.js" as="script">
|
|
28
|
-
</head>
|
|
29
|
-
<body>
|
|
30
|
-
<div id="app"><!--[--><div class="theme-container"><main class="page"><div class="theme-default-content"><h1>404</h1><blockquote>That's a Four-Oh-Four.</blockquote><a href="/netang-quasar/" class="">Take me home</a></div></main></div><!----><!--]--></div>
|
|
31
|
-
<script type="module" src="/netang-quasar/assets/app-8c3ae4de.js" defer></script>
|
|
32
|
-
</body>
|
|
33
|
-
</html>
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en-US">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
6
|
+
<meta name="generator" content="VuePress 2.0.0-beta.60">
|
|
7
|
+
<style>
|
|
8
|
+
:root {
|
|
9
|
+
--c-bg: #fff;
|
|
10
|
+
}
|
|
11
|
+
html.dark {
|
|
12
|
+
--c-bg: #22272e;
|
|
13
|
+
}
|
|
14
|
+
html, body {
|
|
15
|
+
background-color: var(--c-bg);
|
|
16
|
+
}
|
|
17
|
+
</style>
|
|
18
|
+
<script>
|
|
19
|
+
const userMode = localStorage.getItem('vuepress-color-scheme');
|
|
20
|
+
const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
21
|
+
if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) {
|
|
22
|
+
document.documentElement.classList.toggle('dark', true);
|
|
23
|
+
}
|
|
24
|
+
</script>
|
|
25
|
+
<title>netang-quasar</title><meta name="description" content="">
|
|
26
|
+
<link rel="preload" href="/netang-quasar/assets/style-ac5a9aa6.css" as="style"><link rel="stylesheet" href="/netang-quasar/assets/style-ac5a9aa6.css">
|
|
27
|
+
<link rel="modulepreload" href="/netang-quasar/assets/app-8c3ae4de.js"><link rel="modulepreload" href="/netang-quasar/assets/framework-204010b2.js"><link rel="modulepreload" href="/netang-quasar/assets/404.html-60b35caa.js"><link rel="modulepreload" href="/netang-quasar/assets/404.html-d1e63d77.js"><link rel="prefetch" href="/netang-quasar/assets/index.html-65a4aa67.js" as="script"><link rel="prefetch" href="/netang-quasar/assets/field-table.html-86cc3511.js" as="script"><link rel="prefetch" href="/netang-quasar/assets/field-tree.html-c98ac993.js" as="script"><link rel="prefetch" href="/netang-quasar/assets/alert.html-568d4e94.js" as="script"><link rel="prefetch" href="/netang-quasar/assets/confirm.html-96f1b004.js" as="script"><link rel="prefetch" href="/netang-quasar/assets/index.html-1695dd7c.js" as="script"><link rel="prefetch" href="/netang-quasar/assets/field-table.html-68d610b0.js" as="script"><link rel="prefetch" href="/netang-quasar/assets/field-tree.html-45410c3c.js" as="script"><link rel="prefetch" href="/netang-quasar/assets/alert.html-f5dbc3e9.js" as="script"><link rel="prefetch" href="/netang-quasar/assets/confirm.html-7a1566f6.js" as="script">
|
|
28
|
+
</head>
|
|
29
|
+
<body>
|
|
30
|
+
<div id="app"><!--[--><div class="theme-container"><main class="page"><div class="theme-default-content"><h1>404</h1><blockquote>That's a Four-Oh-Four.</blockquote><a href="/netang-quasar/" class="">Take me home</a></div></main></div><!----><!--]--></div>
|
|
31
|
+
<script type="module" src="/netang-quasar/assets/app-8c3ae4de.js" defer></script>
|
|
32
|
+
</body>
|
|
33
|
+
</html>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const t=JSON.parse('{"key":"v-3706649a","path":"/404.html","title":"","lang":"en-US","frontmatter":{"layout":"NotFound"},"headers":[],"git":{},"filePathRelative":null}');export{t as data};
|
|
1
|
+
const t=JSON.parse('{"key":"v-3706649a","path":"/404.html","title":"","lang":"en-US","frontmatter":{"layout":"NotFound"},"headers":[],"git":{},"filePathRelative":null}');export{t as data};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{_ as e,p as t,q as _}from"./framework-204010b2.js";const c={};function r(n,o){return t(),_("div")}const a=e(c,[["render",r],["__file","404.html.vue"]]);export{a as default};
|
|
1
|
+
import{_ as e,p as t,q as _}from"./framework-204010b2.js";const c={};function r(n,o){return t(),_("div")}const a=e(c,[["render",r],["__file","404.html.vue"]]);export{a as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const t=JSON.parse('{"key":"v-7b1a2a14","path":"/utils/alert.html","title":"alert","lang":"en-US","frontmatter":{},"headers":[],"git":{"updatedTime":1675652908000,"contributors":[{"name":"junmiao","email":"mj287@163.com","commits":1}]},"filePathRelative":"utils/alert.md"}');export{t as data};
|
|
1
|
+
const t=JSON.parse('{"key":"v-7b1a2a14","path":"/utils/alert.html","title":"alert","lang":"en-US","frontmatter":{},"headers":[],"git":{"updatedTime":1675652908000,"contributors":[{"name":"junmiao","email":"mj287@163.com","commits":1}]},"filePathRelative":"utils/alert.md"}');export{t as data};
|