|
|
@@ -1,330 +1,126 @@
|
|
|
<!-- 级联选择器 -->
|
|
|
<template>
|
|
|
- <div>
|
|
|
- <div style="height: 50px;"></div>
|
|
|
- <!-- <v-text-field
|
|
|
- v-model="value"
|
|
|
- variant="outlined"
|
|
|
- id="menu-activator"
|
|
|
- label="查找职位关键字"
|
|
|
- color="primary"
|
|
|
- append-inner-icon="mdi-magnify"
|
|
|
- :rules="[v => !!v || '请输入测试内容']"
|
|
|
- style="width: 500px;"
|
|
|
- >
|
|
|
- </v-text-field>
|
|
|
- <v-menu activator="#menu-activator" :close-on-content-click="closeOnContentClick">
|
|
|
- <el-cascader-panel
|
|
|
+ <div class="d-flex" style="width: 100%;">
|
|
|
+ <div style="line-height: 40px;">
|
|
|
+ <span style="color: #777;">{{ item?.label }}</span>
|
|
|
+ <span v-if="prop.required" class="mr-1" style="color: var(--v-error-base);"> *</span>
|
|
|
+ </div>
|
|
|
+ <div style="flex: 1;">
|
|
|
+ <el-cascader
|
|
|
v-model="value"
|
|
|
- :options="options"
|
|
|
- :show-all-levels="false"
|
|
|
- style="width: fit-content; background-color: #fff;"
|
|
|
+ :show-all-levels="prop.checkStrictly"
|
|
|
+ :size="prop.size"
|
|
|
+ :clearable="item.clearable"
|
|
|
+ :placeholder="item.placeholder || getPlaceholder()"
|
|
|
+ :class="{'required': requiredTxt}"
|
|
|
+ style="width: 100%;"
|
|
|
+ :props="prop"
|
|
|
+ :options="item.items"
|
|
|
+ @blur="handleBlur"
|
|
|
@change="handleChange"
|
|
|
- >
|
|
|
- </el-cascader-panel>
|
|
|
- </v-menu> -->
|
|
|
-
|
|
|
- <el-cascader :options="options" :show-all-levels="false">
|
|
|
- <template #default="{ node, data }">
|
|
|
- <span @click="handleChange(node, data)">123</span>
|
|
|
- </template>
|
|
|
- </el-cascader>
|
|
|
+ ></el-cascader>
|
|
|
+ <div v-if="requiredTxt" class="requiredTxt">{{ requiredTxt }}</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
// import 'element-plus/es/components/cascader-panel/style/css'
|
|
|
// import { ElCascaderPanel } from 'element-plus'
|
|
|
-
|
|
|
-// import 'element-plus/es/components/cascader/style/css'
|
|
|
-// import { ElCascader } from 'element-plus'
|
|
|
-import { ref } from 'vue'
|
|
|
+import 'element-plus/es/components/cascader/style/css'
|
|
|
+import { ElCascader } from 'element-plus'
|
|
|
+import { ref, watch } from 'vue'
|
|
|
defineOptions({ name:'FormUI-el-cascade'})
|
|
|
|
|
|
-const value = ref('')
|
|
|
-// setTimeout(() => { value.value = 'controllability' }, 1000)
|
|
|
+const props = defineProps({item: Object, modelValue: [String, Number, Object]})
|
|
|
+const emit = defineEmits(['update:modelValue', 'change'])
|
|
|
+const item = props.item
|
|
|
+const prop = {
|
|
|
+ ...item,
|
|
|
+ label: item.itemText || 'label',
|
|
|
+ value: item.itemValue || 'value',
|
|
|
+ required: item.required || false,
|
|
|
+ size: item.size || 'large',
|
|
|
+ multiple: item.multiple || false,
|
|
|
+ checkStrictly: item.checkStrictly || false,
|
|
|
+}
|
|
|
+console.log('1', prop)
|
|
|
|
|
|
+const value = ref()
|
|
|
+watch(
|
|
|
+ () => props.modelValue,
|
|
|
+ (newVal) => {
|
|
|
+ value.value = newVal
|
|
|
+ },
|
|
|
+ { immediate: true },
|
|
|
+ { deep: true }
|
|
|
+)
|
|
|
|
|
|
-const handleChange = (val, val1, val2) => {
|
|
|
- console.log('1', val, val1, val2)
|
|
|
-}
|
|
|
+const handleChange = (val) => {
|
|
|
+ value.value = item.multiple ? val : Array.isArray(val) && val?.length ? val[0] : null
|
|
|
+ console.log(1, 'handleChange', value.value)
|
|
|
+ if (prop.required && value.value !== '' && value.value !== null && value.value !== undefined) requiredTxt.value = ''
|
|
|
|
|
|
-const getCheckedNodes = (val, val1, val2) => {
|
|
|
- console.log('1', val, val1, val2)
|
|
|
- debugger
|
|
|
+ emit('update:modelValue', value.value)
|
|
|
+ emit('change', value.value)
|
|
|
}
|
|
|
|
|
|
-const closeOnContentClick = ref(false) // multiple
|
|
|
-
|
|
|
-const options = [
|
|
|
- {
|
|
|
- value: 'guide',
|
|
|
- label: 'Guide',
|
|
|
- children: [
|
|
|
- {
|
|
|
- value: 'disciplines',
|
|
|
- label: 'Disciplines',
|
|
|
- children: [
|
|
|
- {
|
|
|
- value: 'consistency',
|
|
|
- label: 'Consistency',
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'feedback',
|
|
|
- label: 'Feedback',
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'efficiency',
|
|
|
- label: 'Efficiency',
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'controllability',
|
|
|
- label: 'Controllability',
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'navigation',
|
|
|
- label: 'Navigation',
|
|
|
- children: [
|
|
|
- {
|
|
|
- value: 'side nav',
|
|
|
- label: 'Side Navigation',
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'top nav',
|
|
|
- label: 'Top Navigation',
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'component',
|
|
|
- label: 'Component',
|
|
|
- children: [
|
|
|
- {
|
|
|
- value: 'basic',
|
|
|
- label: 'Basic',
|
|
|
- children: [
|
|
|
- {
|
|
|
- value: 'layout',
|
|
|
- label: 'Layout',
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'color',
|
|
|
- label: 'Color',
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'typography',
|
|
|
- label: 'Typography',
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'icon',
|
|
|
- label: 'Icon',
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'button',
|
|
|
- label: 'Button',
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'form',
|
|
|
- label: 'Form',
|
|
|
- children: [
|
|
|
- {
|
|
|
- value: 'radio',
|
|
|
- label: 'Radio',
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'checkbox',
|
|
|
- label: 'Checkbox',
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'input',
|
|
|
- label: 'Input',
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'input-number',
|
|
|
- label: 'InputNumber',
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'select',
|
|
|
- label: 'Select',
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'cascader',
|
|
|
- label: 'Cascader',
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'switch',
|
|
|
- label: 'Switch',
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'slider',
|
|
|
- label: 'Slider',
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'time-picker',
|
|
|
- label: 'TimePicker',
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'date-picker',
|
|
|
- label: 'DatePicker',
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'datetime-picker',
|
|
|
- label: 'DateTimePicker',
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'upload',
|
|
|
- label: 'Upload',
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'rate',
|
|
|
- label: 'Rate',
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'form',
|
|
|
- label: 'Form',
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'data',
|
|
|
- label: 'Data',
|
|
|
- children: [
|
|
|
- {
|
|
|
- value: 'table',
|
|
|
- label: 'Table',
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'tag',
|
|
|
- label: 'Tag',
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'progress',
|
|
|
- label: 'Progress',
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'tree',
|
|
|
- label: 'Tree',
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'pagination',
|
|
|
- label: 'Pagination',
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'badge',
|
|
|
- label: 'Badge',
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'notice',
|
|
|
- label: 'Notice',
|
|
|
- children: [
|
|
|
- {
|
|
|
- value: 'alert',
|
|
|
- label: 'Alert',
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'loading',
|
|
|
- label: 'Loading',
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'message',
|
|
|
- label: 'Message',
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'message-box',
|
|
|
- label: 'MessageBox',
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'notification',
|
|
|
- label: 'Notification',
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'navigation',
|
|
|
- label: 'Navigation',
|
|
|
- children: [
|
|
|
- {
|
|
|
- value: 'menu',
|
|
|
- label: 'Menu',
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'tabs',
|
|
|
- label: 'Tabs',
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'breadcrumb',
|
|
|
- label: 'Breadcrumb',
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'dropdown',
|
|
|
- label: 'Dropdown',
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'steps',
|
|
|
- label: 'Steps',
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'others',
|
|
|
- label: 'Others',
|
|
|
- children: [
|
|
|
- {
|
|
|
- value: 'dialog',
|
|
|
- label: 'Dialog',
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'tooltip',
|
|
|
- label: 'Tooltip',
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'popover',
|
|
|
- label: 'Popover',
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'card',
|
|
|
- label: 'Card',
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'carousel',
|
|
|
- label: 'Carousel',
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'collapse',
|
|
|
- label: 'Collapse',
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'resource',
|
|
|
- label: 'Resource',
|
|
|
- children: [
|
|
|
- {
|
|
|
- value: 'axure',
|
|
|
- label: 'Axure Components',
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'sketch',
|
|
|
- label: 'Sketch Templates',
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'docs',
|
|
|
- label: 'Design Documentation',
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
-]
|
|
|
+const requiredTxt = ref('')
|
|
|
+const handleBlur = () => {
|
|
|
+ if (prop.required && (value.value === '' || value.value === null || value.value === undefined)) requiredTxt.value = '请输入' + item?.label
|
|
|
+ else requiredTxt.value = ''
|
|
|
+}
|
|
|
|
|
|
+const getPlaceholder = () => {
|
|
|
+ return prop.required ? item?.label + ' *' : item?.label
|
|
|
+}
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
+.requiredTxt {
|
|
|
+ font-size: 12px;
|
|
|
+ padding: 6px 16px 0;
|
|
|
+ color: var(--v-error-base)
|
|
|
+}
|
|
|
+:deep(.icon-circle-close) {
|
|
|
+ color: #666;
|
|
|
+ font-size: 22px;
|
|
|
+ &:hover {
|
|
|
+ color: #333 !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.el-input--large) {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #000;
|
|
|
+}
|
|
|
+:deep(.el-cascader-node__label) {
|
|
|
+ font-weight: normal !important;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.el-input.is-focus) {
|
|
|
+ box-shadow: 0 0 0 2px var(--v-primary-base, var(--el-color-primary)) inset;
|
|
|
+ border-radius: 5px;
|
|
|
+}
|
|
|
+:deep(.el-input__wrapper.is-focus) {
|
|
|
+ box-shadow: 0 0 0 2px var(--v-primary-base, var(--el-color-primary)) inset;
|
|
|
+ border-radius: 5px;
|
|
|
+ &:hover {
|
|
|
+ box-shadow: 0 0 0 2px var(--v-primary-base, var(--el-color-primary)) inset;
|
|
|
+ }
|
|
|
+}
|
|
|
+:deep(.required) {
|
|
|
+ --el-border-color: var(--v-error-base) !important;
|
|
|
+ --el-border-color-hover: var(--v-error-base) !important;
|
|
|
+ .el-input.is-focus {
|
|
|
+ box-shadow: 0 0 0 2px var(--v-error-base, var(--v-error-base)) inset !important;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+ .el-input__wrapper.is-focus {
|
|
|
+ box-shadow: 0 0 0 2px var(--v-error-base, var(--v-error-base)) inset !important;
|
|
|
+ border-radius: 5px;
|
|
|
+ &:hover {
|
|
|
+ box-shadow: 0 0 0 2px var(--v-error-base, var(--v-error-base)) inset !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
