diff --git a/locales/en.yaml b/locales/en.yaml index 5ffd9f59f..86b712a23 100644 --- a/locales/en.yaml +++ b/locales/en.yaml @@ -108,6 +108,7 @@ menus: pureTypeit: Typeit pureJsonEditor: JSON Editor pureColorPicker: Color Picker + pureColorPickerPanel: Color PickerPanel pureDatePicker: Date Picker pureDateTimePicker: DateTimePicker pureTimePicker: TimePicker diff --git a/locales/zh-CN.yaml b/locales/zh-CN.yaml index 2646e4364..f03d21b58 100644 --- a/locales/zh-CN.yaml +++ b/locales/zh-CN.yaml @@ -108,6 +108,7 @@ menus: pureTypeit: 打字机 pureJsonEditor: JSON编辑器 pureColorPicker: 颜色选择器 + pureColorPickerPanel: 颜色选择器面板 pureDatePicker: 日期选择器 pureDateTimePicker: 日期时间选择器 pureTimePicker: 时间选择器 diff --git a/src/plugins/elementPlus.ts b/src/plugins/elementPlus.ts index 8363187c1..48e98bc49 100644 --- a/src/plugins/elementPlus.ts +++ b/src/plugins/elementPlus.ts @@ -3,15 +3,13 @@ import type { App, Component } from "vue"; import { /** * 为了方便演示平台将 element-plus 导出的所有组件引入，实际使用中如果你没用到哪个组件，将其注释掉就行 - * 导出来源：https://github.com/element-plus/element-plus/blob/dev/packages/element-plus/component.ts#L111-L211 + * 导出来源：https://github.com/element-plus/element-plus/blob/dev/packages/element-plus/component.ts#L116-L226 * */ ElAffix, ElAlert, ElAutocomplete, ElAutoResizer, ElAvatar, - ElAnchor, - ElAnchorLink, ElBacktop, ElBadge, ElBreadcrumb, @@ -32,6 +30,7 @@ import { ElCollapse, ElCollapseItem, ElCollapseTransition, + ElColorPickerPanel, ElColorPicker, ElConfigProvider, ElContainer, @@ -40,6 +39,7 @@ import { ElHeader, ElMain, ElDatePicker, + ElDatePickerPanel, ElDescriptions, ElDescriptionsItem, ElDialog, @@ -56,6 +56,7 @@ import { ElImageViewer, ElInput, ElInputNumber, + ElInputTag, ElLink, ElMenu, ElMenuItem, @@ -107,17 +108,22 @@ import { ElWatermark, ElTour, ElTourStep, + ElAnchor, + ElAnchorLink, ElSegmented, + ElMention, + ElSplitter, + ElSplitterPanel, /** * 为了方便演示平台将 element-plus 导出的所有插件引入，实际使用中如果你没用到哪个插件，将其注释掉就行 * 导出来源：https://github.com/element-plus/element-plus/blob/dev/packages/element-plus/plugin.ts#L11-L16 * */ - ElLoading, // v-loading 指令 ElInfiniteScroll, // v-infinite-scroll 指令 - ElPopoverDirective, // v-popover 指令 + ElLoading, // v-loading 指令 ElMessage, // $message 全局属性对象globalProperties ElMessageBox, // $msgbox、$alert、$confirm、$prompt 全局属性对象globalProperties - ElNotification // $notify 全局属性对象globalProperties + ElNotification, // $notify 全局属性对象globalProperties + ElPopoverDirective // v-popover 指令 } from "element-plus"; const components = [ @@ -126,8 +132,6 @@ const components = [ ElAutocomplete, ElAutoResizer, ElAvatar, - ElAnchor, - ElAnchorLink, ElBacktop, ElBadge, ElBreadcrumb, @@ -148,6 +152,7 @@ const components = [ ElCollapse, ElCollapseItem, ElCollapseTransition, + ElColorPickerPanel, ElColorPicker, ElConfigProvider, ElContainer, @@ -156,6 +161,7 @@ const components = [ ElHeader, ElMain, ElDatePicker, + ElDatePickerPanel, ElDescriptions, ElDescriptionsItem, ElDialog, @@ -172,6 +178,7 @@ const components = [ ElImageViewer, ElInput, ElInputNumber, + ElInputTag, ElLink, ElMenu, ElMenuItem, @@ -223,16 +230,21 @@ const components = [ ElWatermark, ElTour, ElTourStep, - ElSegmented + ElAnchor, + ElAnchorLink, + ElSegmented, + ElMention, + ElSplitter, + ElSplitterPanel ]; const plugins = [ - ElLoading, ElInfiniteScroll, - ElPopoverDirective, + ElLoading, ElMessage, ElMessageBox, - ElNotification + ElNotification, + ElPopoverDirective ]; /** 按需引入`element-plus` */ diff --git a/src/router/modules/components.ts b/src/router/modules/components.ts index b8854d9b7..4401255e0 100644 --- a/src/router/modules/components.ts +++ b/src/router/modules/components.ts @@ -119,8 +119,7 @@ export default { name: "PureSlider", component: () => import("@/views/components/slider/index.vue"), meta: { - title: $t("menus.pureSlider"), - extraIcon: "IF-pure-iconfont-new svg" + title: $t("menus.pureSlider") } }, { @@ -195,6 +194,15 @@ export default { title: $t("menus.pureColorPicker") } }, + { + path: "/components/color-picker-panel", + name: "ColorPickerPanel", + component: () => import("@/views/components/color-picker-panel.vue"), + meta: { + title: $t("menus.pureColorPickerPanel"), + extraIcon: "IF-pure-iconfont-new svg" + } + }, { path: "/components/selector", name: "Selector", diff --git a/src/views/components/color-picker-panel.vue b/src/views/components/color-picker-panel.vue new file mode 100644 index 000000000..94431760c --- /dev/null +++ b/src/views/components/color-picker-panel.vue @@ -0,0 +1,68 @@ + + +