yh-mobile-components 1.4.12 → 1.5.0
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/functional/yhmScanAndSelect.vue +144 -0
- package/index.ts +23 -21
- package/info/yhmList.vue +2 -1
- package/package.json +1 -1
- /package/{readme.md → README.md} +0 -0
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<van-field
|
|
3
|
+
class="yhm-scan-and-select-container"
|
|
4
|
+
:disabled="disabled"
|
|
5
|
+
v-bind="$attrs"
|
|
6
|
+
v-model="modelValue"
|
|
7
|
+
@keydown="keydownHandler"
|
|
8
|
+
:error="error"
|
|
9
|
+
:error-message="errorMessage">
|
|
10
|
+
<template #right-icon>
|
|
11
|
+
<svg
|
|
12
|
+
width="20px"
|
|
13
|
+
height="20px"
|
|
14
|
+
style="vertical-align: middle"
|
|
15
|
+
viewBox="0 0 1000 1000"
|
|
16
|
+
xmlns="http://www.w3.org/2000/svg">
|
|
17
|
+
<path
|
|
18
|
+
stroke="var(--van-field-right-icon-color)"
|
|
19
|
+
stroke-width="60"
|
|
20
|
+
stroke-linejoin="round"
|
|
21
|
+
fill="none"
|
|
22
|
+
d="M200,350 L200,200 L400,200 M600,200 L800,200 L800,400 M800,600 L800,800 L600,800 M400,800 L200,800 L200,600 M0,500 L1000,500"></path>
|
|
23
|
+
</svg>
|
|
24
|
+
<svg
|
|
25
|
+
width="20px"
|
|
26
|
+
height="20px"
|
|
27
|
+
style="vertical-align: middle; margin-left: 5px"
|
|
28
|
+
viewBox="0 0 1000 1000"
|
|
29
|
+
@click="toChoose"
|
|
30
|
+
xmlns="http://www.w3.org/2000/svg">
|
|
31
|
+
<path
|
|
32
|
+
stroke="none"
|
|
33
|
+
fill="var(--van-gray-8)"
|
|
34
|
+
class="select-icon"
|
|
35
|
+
:d="selectIconPath"></path>
|
|
36
|
+
</svg>
|
|
37
|
+
</template>
|
|
38
|
+
</van-field>
|
|
39
|
+
<van-popup
|
|
40
|
+
v-model:show="show"
|
|
41
|
+
class="yhm-select-container"
|
|
42
|
+
position="bottom">
|
|
43
|
+
<van-picker
|
|
44
|
+
:title="palceholder"
|
|
45
|
+
:columns="filterOptionData"
|
|
46
|
+
:modelValue="[modelValue]"
|
|
47
|
+
ref="pickerRef"
|
|
48
|
+
@confirm="onComfirm"
|
|
49
|
+
@cancel="onCancel">
|
|
50
|
+
<template
|
|
51
|
+
#title
|
|
52
|
+
v-if="filterabled">
|
|
53
|
+
<input
|
|
54
|
+
class="yhm-select-filter-input"
|
|
55
|
+
placeholder="输入关键词筛选"
|
|
56
|
+
type="text"
|
|
57
|
+
v-model="filterKeyword" />
|
|
58
|
+
</template>
|
|
59
|
+
</van-picker>
|
|
60
|
+
</van-popup>
|
|
61
|
+
</template>
|
|
62
|
+
<script setup lang="ts">
|
|
63
|
+
import { ref, computed } from "vue";
|
|
64
|
+
|
|
65
|
+
const props = withDefaults(defineProps<{ error?: boolean; errorMessage?: string; disabled?: boolean; palceholder?: string; optionData: any[]; filterabled?: boolean; remoteFilter?: boolean }>(), {
|
|
66
|
+
disabled: false,
|
|
67
|
+
filterabled: false,
|
|
68
|
+
remoteFilter: false,
|
|
69
|
+
palceholder: "请选择",
|
|
70
|
+
});
|
|
71
|
+
|
|
72
|
+
const emits = defineEmits<{
|
|
73
|
+
(e: "scan", val: string);
|
|
74
|
+
}>();
|
|
75
|
+
|
|
76
|
+
const modelValue = ref();
|
|
77
|
+
|
|
78
|
+
const selectIconPath = computed(() => {
|
|
79
|
+
return !show.value ? "M100,300 L500,300 L900,300 L500,700 Z" : "M100,700 L500,300 L900,700 L500,700 Z";
|
|
80
|
+
});
|
|
81
|
+
|
|
82
|
+
const show = ref(false);
|
|
83
|
+
const pickerRef = ref();
|
|
84
|
+
|
|
85
|
+
const filterKeyword = ref("");
|
|
86
|
+
const filterOptionData = computed(() => {
|
|
87
|
+
if (props.filterabled && !props.remoteFilter) {
|
|
88
|
+
return props.optionData.filter(({ text, value }) => {
|
|
89
|
+
return text.indexOf(filterKeyword.value) > -1 || value.indexOf(filterKeyword.value) > -1;
|
|
90
|
+
});
|
|
91
|
+
} else {
|
|
92
|
+
return props.optionData;
|
|
93
|
+
}
|
|
94
|
+
});
|
|
95
|
+
|
|
96
|
+
function keydownHandler(e: KeyboardEvent) {
|
|
97
|
+
let key = e.key;
|
|
98
|
+
if (key === "Enter") {
|
|
99
|
+
changeHandler();
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
function changeHandler() {
|
|
104
|
+
emits("scan", modelValue.value);
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
function toChoose() {
|
|
108
|
+
if (props.disabled) {
|
|
109
|
+
return false;
|
|
110
|
+
}
|
|
111
|
+
show.value = true;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
// function onChange({ selectedValues }) {
|
|
115
|
+
// emits("update:modelValue", selectedValues[0]);
|
|
116
|
+
// }
|
|
117
|
+
function onCancel() {
|
|
118
|
+
show.value = false;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
function onComfirm({ selectedValues }) {
|
|
122
|
+
modelValue.value = selectedValues[0];
|
|
123
|
+
emits("scan", modelValue.value);
|
|
124
|
+
onCancel();
|
|
125
|
+
}
|
|
126
|
+
</script>
|
|
127
|
+
<style lang="scss">
|
|
128
|
+
.yhm-scan-and-select-container {
|
|
129
|
+
--van-switch-width: calc(3em + 4px);
|
|
130
|
+
.select-icon {
|
|
131
|
+
transition: all 0.3s ease-in-out 0s;
|
|
132
|
+
}
|
|
133
|
+
&.van-popup {
|
|
134
|
+
height: 560px;
|
|
135
|
+
.yhm-select-filter-input {
|
|
136
|
+
flex: 1;
|
|
137
|
+
line-height: 30px;
|
|
138
|
+
font-size: 12px;
|
|
139
|
+
border: 1px solid var(--van-border-color);
|
|
140
|
+
padding: 0 8px;
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
</style>
|
package/index.ts
CHANGED
|
@@ -17,31 +17,33 @@ import yhmRate from "./form/yhmRate.vue";
|
|
|
17
17
|
import yhmSignature from "./form/yhmSignature.vue";
|
|
18
18
|
import yhmSlider from "./form/yhmSlider.vue";
|
|
19
19
|
import yhmStepper from "./form/yhmStepper.vue";
|
|
20
|
+
import yhmScanAndSelect from "./functional/yhmScanAndSelect.vue";
|
|
20
21
|
import vant from "vant";
|
|
21
22
|
import "vant/lib/index.css";
|
|
22
23
|
import "yh-mobile-components/custom.scss";
|
|
23
24
|
|
|
24
25
|
export default {
|
|
25
|
-
install(app) {
|
|
26
|
-
app.component("yhm-list", yhmList);
|
|
27
|
-
app.component("yhm-dropdown-item", yhmDropdownItem);
|
|
28
|
-
app.component("yhm-tabs", yhmTabs);
|
|
29
|
-
app.component("yhm-info", yhmInfo);
|
|
30
|
-
app.component("yhm-info-item", yhmInfoItem);
|
|
31
|
-
app.component("yhm-table", yhmTable);
|
|
32
|
-
app.component("yhm-form", yhmForm);
|
|
33
|
-
app.component("yhm-datetime", yhmDatetime);
|
|
34
|
-
app.component("yhm-radio", yhmRadio);
|
|
35
|
-
app.component("yhm-checkbox", yhmCheckbox);
|
|
36
|
-
app.component("yhm-input", yhmInput);
|
|
37
|
-
app.component("yhm-select", yhmSelect);
|
|
38
|
-
app.component("yhm-switch", yhmSwitch);
|
|
39
|
-
app.component("yhm-password", yhmPassword);
|
|
40
|
-
app.component("yhm-cascader", yhmCascader);
|
|
41
|
-
app.component("yhm-rate", yhmRate);
|
|
42
|
-
app.component("yhm-signature", yhmSignature);
|
|
43
|
-
app.component("yhm-slider", yhmSlider);
|
|
44
|
-
app.component("yhm-stepper", yhmStepper);
|
|
45
|
-
app.
|
|
26
|
+
install ( app ) {
|
|
27
|
+
app.component( "yhm-list", yhmList );
|
|
28
|
+
app.component( "yhm-dropdown-item", yhmDropdownItem );
|
|
29
|
+
app.component( "yhm-tabs", yhmTabs );
|
|
30
|
+
app.component( "yhm-info", yhmInfo );
|
|
31
|
+
app.component( "yhm-info-item", yhmInfoItem );
|
|
32
|
+
app.component( "yhm-table", yhmTable );
|
|
33
|
+
app.component( "yhm-form", yhmForm );
|
|
34
|
+
app.component( "yhm-datetime", yhmDatetime );
|
|
35
|
+
app.component( "yhm-radio", yhmRadio );
|
|
36
|
+
app.component( "yhm-checkbox", yhmCheckbox );
|
|
37
|
+
app.component( "yhm-input", yhmInput );
|
|
38
|
+
app.component( "yhm-select", yhmSelect );
|
|
39
|
+
app.component( "yhm-switch", yhmSwitch );
|
|
40
|
+
app.component( "yhm-password", yhmPassword );
|
|
41
|
+
app.component( "yhm-cascader", yhmCascader );
|
|
42
|
+
app.component( "yhm-rate", yhmRate );
|
|
43
|
+
app.component( "yhm-signature", yhmSignature );
|
|
44
|
+
app.component( "yhm-slider", yhmSlider );
|
|
45
|
+
app.component( "yhm-stepper", yhmStepper );
|
|
46
|
+
app.component( "yhm-scan-and-select", yhmScanAndSelect );
|
|
47
|
+
app.use( vant );
|
|
46
48
|
},
|
|
47
49
|
};
|
package/info/yhmList.vue
CHANGED
|
@@ -87,7 +87,7 @@ const props = withDefaults(
|
|
|
87
87
|
/** 是否有关键字筛选 */
|
|
88
88
|
hasSearch?: boolean;
|
|
89
89
|
/** 筛选搜索触发类型 默认 update当输入框内容发生变化时触发 search点击键盘上的搜索/回车按钮后触发 */
|
|
90
|
-
searchType?:
|
|
90
|
+
searchType?: string;
|
|
91
91
|
/** 关键字筛选提示语 */
|
|
92
92
|
searchPlaceholder?: string;
|
|
93
93
|
paramType?: "dropdown" | "tabs";
|
|
@@ -110,6 +110,7 @@ const props = withDefaults(
|
|
|
110
110
|
}>(),
|
|
111
111
|
{
|
|
112
112
|
hasSearch: false,
|
|
113
|
+
searchType: "update",
|
|
113
114
|
searchPlaceholder: "输入关键词搜索",
|
|
114
115
|
align: "right",
|
|
115
116
|
descAlign: "left",
|
package/package.json
CHANGED
/package/{readme.md → README.md}
RENAMED
|
File without changes
|