yh-mobile-components 1.4.13 → 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/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/package.json
CHANGED
/package/{readme.md → README.md}
RENAMED
|
File without changes
|