feat:组件二次封装

main
向文可 3 years ago
parent d66faa7bb0
commit 04e7b94aab

26
.gitignore vendored

@ -1,24 +1,8 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
.idea
.DS_Store
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
src/.eslintrc.json
src/.auto-imports.d.ts
src/.components.d.ts

@ -1,64 +0,0 @@
{
"globals": {
"_": true,
"axios": true,
"computed": true,
"createApp": true,
"createLogger": true,
"createNamespacedHelpers": true,
"createStore": true,
"customRef": true,
"dayjs": true,
"defineAsyncComponent": true,
"defineComponent": true,
"effectScope": true,
"EffectScope": true,
"getCurrentInstance": true,
"getCurrentScope": true,
"h": true,
"inject": true,
"isReadonly": true,
"isRef": true,
"mapActions": true,
"mapGetters": true,
"mapMutations": true,
"mapState": true,
"markRaw": true,
"nextTick": true,
"onActivated": true,
"onBeforeMount": true,
"onBeforeUnmount": true,
"onBeforeUpdate": true,
"onDeactivated": true,
"onErrorCaptured": true,
"onMounted": true,
"onRenderTracked": true,
"onRenderTriggered": true,
"onScopeDispose": true,
"onServerPrefetch": true,
"onUnmounted": true,
"onUpdated": true,
"provide": true,
"reactive": true,
"readonly": true,
"ref": true,
"resolveComponent": true,
"shallowReactive": true,
"shallowReadonly": true,
"shallowRef": true,
"toRaw": true,
"toRef": true,
"toRefs": true,
"triggerRef": true,
"unref": true,
"useAttrs": true,
"useCssModule": true,
"useCssVars": true,
"useRoute": true,
"useRouter": true,
"useSlots": true,
"useStore": true,
"watch": true,
"watchEffect": true
}
}

@ -1,65 +0,0 @@
// Generated by 'unplugin-auto-import'
// We suggest you to commit this file into source control
declare global {
const _: typeof import('lodash')
const axios: typeof import('axios')['default']
const computed: typeof import('vue')['computed']
const createApp: typeof import('vue')['createApp']
const createLogger: typeof import('vuex')['createLogger']
const createNamespacedHelpers: typeof import('vuex')['createNamespacedHelpers']
const createStore: typeof import('vuex')['createStore']
const customRef: typeof import('vue')['customRef']
const dayjs: typeof import('dayjs')
const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
const defineComponent: typeof import('vue')['defineComponent']
const effectScope: typeof import('vue')['effectScope']
const EffectScope: typeof import('vue')['EffectScope']
const getCurrentInstance: typeof import('vue')['getCurrentInstance']
const getCurrentScope: typeof import('vue')['getCurrentScope']
const h: typeof import('vue')['h']
const inject: typeof import('vue')['inject']
const isReadonly: typeof import('vue')['isReadonly']
const isRef: typeof import('vue')['isRef']
const mapActions: typeof import('vuex')['mapActions']
const mapGetters: typeof import('vuex')['mapGetters']
const mapMutations: typeof import('vuex')['mapMutations']
const mapState: typeof import('vuex')['mapState']
const markRaw: typeof import('vue')['markRaw']
const nextTick: typeof import('vue')['nextTick']
const onActivated: typeof import('vue')['onActivated']
const onBeforeMount: typeof import('vue')['onBeforeMount']
const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
const onDeactivated: typeof import('vue')['onDeactivated']
const onErrorCaptured: typeof import('vue')['onErrorCaptured']
const onMounted: typeof import('vue')['onMounted']
const onRenderTracked: typeof import('vue')['onRenderTracked']
const onRenderTriggered: typeof import('vue')['onRenderTriggered']
const onScopeDispose: typeof import('vue')['onScopeDispose']
const onServerPrefetch: typeof import('vue')['onServerPrefetch']
const onUnmounted: typeof import('vue')['onUnmounted']
const onUpdated: typeof import('vue')['onUpdated']
const provide: typeof import('vue')['provide']
const reactive: typeof import('vue')['reactive']
const readonly: typeof import('vue')['readonly']
const ref: typeof import('vue')['ref']
const resolveComponent: typeof import('vue')['resolveComponent']
const shallowReactive: typeof import('vue')['shallowReactive']
const shallowReadonly: typeof import('vue')['shallowReadonly']
const shallowRef: typeof import('vue')['shallowRef']
const toRaw: typeof import('vue')['toRaw']
const toRef: typeof import('vue')['toRef']
const toRefs: typeof import('vue')['toRefs']
const triggerRef: typeof import('vue')['triggerRef']
const unref: typeof import('vue')['unref']
const useAttrs: typeof import('vue')['useAttrs']
const useCssModule: typeof import('vue')['useCssModule']
const useCssVars: typeof import('vue')['useCssVars']
const useRoute: typeof import('vue-router')['useRoute']
const useRouter: typeof import('vue-router')['useRouter']
const useSlots: typeof import('vue')['useSlots']
const useStore: typeof import('vuex')['useStore']
const watch: typeof import('vue')['watch']
const watchEffect: typeof import('vue')['watchEffect']
}
export {}

@ -1,29 +0,0 @@
// generated by unplugin-vue-components
// We suggest you to commit this file into source control
// Read more: https://github.com/vuejs/vue-next/pull/3399
declare module 'vue' {
export interface GlobalComponents {
ElAvatar: typeof import('element-plus/es')['ElAvatar']
ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
ElButton: typeof import('element-plus/es')['ElButton']
ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
ElDivider: typeof import('element-plus/es')['ElDivider']
ElDropdown: typeof import('element-plus/es')['ElDropdown']
ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
ElIcon: typeof import('./components/ElIcon.vue')['default']
ElInput: typeof import('element-plus/es')['ElInput']
ElMenu: typeof import('element-plus/es')['ElMenu']
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
ElSelect: typeof import('./components/ElSelect.vue')['default']
ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
ElTabPane: typeof import('element-plus/es')['ElTabPane']
ElTabs: typeof import('element-plus/es')['ElTabs']
}
}
export { }

@ -1,9 +0,0 @@
<template>
1
<component :is="ElSelect" />
</template>
<script setup>
import { ElSelect } from 'element-plus/es/components/select/index';
</script>
<style lang="less" scoped></style>

@ -0,0 +1,17 @@
<template>
<component :is="render" />
</template>
<script setup lang="jsx">
import { ElCascader } from 'element-plus/es/components/cascader/index';
import 'element-plus/es/components/cascader/style/css';
const props = defineProps({
clearable: {
type: Boolean,
default: true,
},
});
const slots = useSlots();
const render = () => <ElCascader {...props} v-slots={slots} />;
</script>
<style lang="less" scoped></style>

@ -0,0 +1,72 @@
<template>
<component :is="render" />
</template>
<script setup lang="jsx">
import { ElSelect, ElOption } from 'element-plus/es/components/select/index';
import 'element-plus/es/components/select/style/css';
const props = defineProps({
opts: {
type: Array,
required: true,
},
clearable: {
type: Boolean,
default: true,
},
filterable: {
type: Boolean,
default: true,
},
config: {
type: Object,
default() {
return {
label: 'label',
value: 'value',
disabled: 'disabled',
};
},
},
});
const slots = useSlots();
let config = {
label: 'label',
value: 'value',
disabled: 'disabled',
...props.config,
};
function handleItemDisabled(item, index) {
let res = false;
if (config.disabled instanceof Function) {
res = config.disabled(item, index);
} else {
res = !!item[config.disabled];
}
return res;
}
const opts = computed(() =>
props.opts.map((item) => {
return typeof item !== 'object' ? { label: item, value: item } : item;
})
);
const render = () => (
<ElSelect
{...props}
v-slots={{
default: () =>
unref(opts).map((item, index) => (
<ElOption
label={item[config.label]}
value={item[config.value]}
disabled={handleItemDisabled(item, index)}
>
{slots.option?.(item, index) || item[config.label]}
</ElOption>
)),
...slots,
}}
></ElSelect>
);
</script>
<style lang="less" scoped></style>

@ -58,7 +58,7 @@ export default [
{
path: 'admission',
name: 'AdmissionManagement',
component: () => import('@/views/global/home.vue'),
component: () => import('@/views/home/index.vue'),
component: () => import('@/views/home/index.vue'),
meta: {
title: '入学',
@ -88,7 +88,7 @@ export default [
{
path: 'answer',
name: 'Answer',
component: () => import('@/views/global/home.vue'),
component: () => import('@/views/home/index.vue'),
component: () => import('@/views/home/index.vue'),
meta: {
title: '答疑',
@ -98,7 +98,7 @@ export default [
{
path: 'management',
name: 'AnswerManagement',
component: () => import('@/views/global/home.vue'),
component: () => import('@/views/home/index.vue'),
component: () => import('@/views/home/index.vue'),
meta: {
title: '答疑管理',
@ -148,7 +148,7 @@ export default [
{
path: 'teacher',
name: 'AnswerTeacher',
component: () => import('@/views/global/home.vue'),
component: () => import('@/views/home/index.vue'),
component: () => import('@/views/home/index.vue'),
meta: {
title: '答疑老师管理',
@ -218,7 +218,7 @@ export default [
{
path: 'research',
name: 'CourseResearch',
component: () => import('@/views/global/home.vue'),
component: () => import('@/views/home/index.vue'),
component: () => import('@/views/home/index.vue'),
meta: {
title: '课研更新',

@ -1,6 +1,12 @@
<template>
<div class="container">
<el-select></el-select>
<el-select
:opts="[
{ label: '女', value: 0 },
{ label: '男', value: 1 },
]"
></el-select>
<el-cascader></el-cascader>
<h1>{{ $route.name }}</h1>
<h1>TOKEN:{{ token }}</h1>
<h2>{{ userInfo }}</h2>

Loading…
Cancel
Save