From ac3c1d1283b5f0b8c86f4201c6acd1aaeb831c40 Mon Sep 17 00:00:00 2001 From: SuperCuteXiaoSi <1531733886@qq.com> Date: Wed, 12 Jan 2022 10:32:31 +0800 Subject: [PATCH] =?UTF-8?q?feature:=20=E6=B7=BB=E5=8A=A0form=E8=A1=A8?= =?UTF-8?q?=E5=8D=95=EF=BC=8C=E5=88=A0=E9=99=A4wincss?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- build/vite/plugin/index.ts | 4 - package.json | 1 - src/components/Form/index.vue | 102 ++++++++++++++++++ src/components/Form/props.ts | 0 src/components/Form/types/from.ts | 36 +++++++ src/locales/en/modules/route.ts | 1 + src/locales/zh-ch/modules/route.ts | 1 + src/main.ts | 2 +- src/router/modules/otherRoute/otherRoute.ts | 6 ++ src/styles/el-theme.scss | 45 ++++++++ src/styles/index.scss | 79 ++++++++------ src/views/components/form/index.vue | 113 ++++++++++++++++++++ windi.config.ts | 74 ------------- 13 files changed, 351 insertions(+), 113 deletions(-) create mode 100644 src/components/Form/index.vue create mode 100644 src/components/Form/props.ts create mode 100644 src/components/Form/types/from.ts create mode 100644 src/views/components/form/index.vue delete mode 100644 windi.config.ts diff --git a/build/vite/plugin/index.ts b/build/vite/plugin/index.ts index b8d4b96c..fd851fc8 100644 --- a/build/vite/plugin/index.ts +++ b/build/vite/plugin/index.ts @@ -2,8 +2,6 @@ import vue from '@vitejs/plugin-vue'; import vueJsx from '@vitejs/plugin-vue-jsx'; -import windiCSS from 'vite-plugin-windicss'; - import type { Plugin, ConfigEnv } from 'vite'; // 按需加载样式配置 @@ -24,8 +22,6 @@ export function createVitePlugins(isBuild = false, _configEnv: ConfigEnv) { vitePlugins.push(vueJsx()); - vitePlugins.push(windiCSS()); - vitePlugins.push(configStylePlugin()); vitePlugins.push(configThemePlugin()); diff --git a/package.json b/package.json index afb2a5f1..b492ca9e 100644 --- a/package.json +++ b/package.json @@ -88,7 +88,6 @@ "vite-plugin-mock": "^2.9.6", "vite-plugin-style-import": "^1.4.0", "vite-plugin-svg-icons": "^1.0.5", - "vite-plugin-windicss": "^1.6.1", "vue-tsc": "^0.29.8" }, "license": "MIT", diff --git a/src/components/Form/index.vue b/src/components/Form/index.vue new file mode 100644 index 00000000..33bc0c83 --- /dev/null +++ b/src/components/Form/index.vue @@ -0,0 +1,102 @@ + + + + + diff --git a/src/components/Form/props.ts b/src/components/Form/props.ts new file mode 100644 index 00000000..e69de29b diff --git a/src/components/Form/types/from.ts b/src/components/Form/types/from.ts new file mode 100644 index 00000000..1e05c776 --- /dev/null +++ b/src/components/Form/types/from.ts @@ -0,0 +1,36 @@ +export interface FormProps { + labelPosition: string; + formIten: Array; +} + +export interface FormItemProps { + gutter: number; + xs?: number; + sm?: number; + md?: number; + lg?: number; + xl?: number; + itemList: Array; +} + +/** + * @param(type) input：输入框、dataTime：日期选择器、radio：单选框、select：下拉选择框 + * @param(label) 标签名 + * @param(prop) form表单双向绑定字段 + * @param(options) 选择项数据 + * @param(inputType) input输入框类型 type为input生效 + * @param(placeholder) 占位符 + */ +export interface FormItemListProps { + type: string; + label: string; + prop: string; + options?: Array; + inputType?: string; + placeholder?: string; +} + +export interface FormSelectOptProps { + label: string; + value: string | number | boolean; +} diff --git a/src/locales/en/modules/route.ts b/src/locales/en/modules/route.ts index 599d1dda..4c66537f 100644 --- a/src/locales/en/modules/route.ts +++ b/src/locales/en/modules/route.ts @@ -4,6 +4,7 @@ const route = { components: 'Components', dragCpts: 'DragComponents', countTo: 'DigitalAnimation', + form: 'Form', userInfo: 'UserInfo', userList: 'UserList', userDateil: 'UserDateil', diff --git a/src/locales/zh-ch/modules/route.ts b/src/locales/zh-ch/modules/route.ts index 2f1bf9ec..1a576572 100644 --- a/src/locales/zh-ch/modules/route.ts +++ b/src/locales/zh-ch/modules/route.ts @@ -4,6 +4,7 @@ const route = { components: '组件', dragCpts: '拖拽组件', countTo: '数字动画', + form: '表单', userInfo: '用户管理', userList: '用户列表', userDateil: '用户详情', diff --git a/src/main.ts b/src/main.ts index c1d3dc47..7b320ae0 100644 --- a/src/main.ts +++ b/src/main.ts @@ -2,7 +2,7 @@ import { createApp } from 'vue'; import App from './App.vue'; -import 'virtual:windi-base.css'; +// import 'virtual:windi-base.css'; // import 'virtual:windi-components.css' // import 'virtual:windi-utilities.css' // Register icon sprite diff --git a/src/router/modules/otherRoute/otherRoute.ts b/src/router/modules/otherRoute/otherRoute.ts index 9df87c5b..d6931db7 100644 --- a/src/router/modules/otherRoute/otherRoute.ts +++ b/src/router/modules/otherRoute/otherRoute.ts @@ -44,6 +44,12 @@ const safeManagerRoutes: Array = [ component: () => import('@/views/components/count-to/index.vue'), meta: { title: t('route.pathName.countTo') }, }, + { + path: 'form', + name: 'RtForm', + component: () => import('@/views/components/form/index.vue'), + meta: { title: t('route.pathName.form') }, + }, ], }, { diff --git a/src/styles/el-theme.scss b/src/styles/el-theme.scss index 1d5504ea..80056031 100644 --- a/src/styles/el-theme.scss +++ b/src/styles/el-theme.scss @@ -1,16 +1,61 @@ // 修改element主题 :root { --el-border-color-lighter: #{$text-color-placeholder}; + --el-datepicker-border-color: #{$text-color-placeholder}; --el-text-color-primary: #{$text-color-primary}; --el-text-color-regular: #{$text-color-regular}; --el-text-color-secondary: #{$text-color-secondary}; --el-text-color-placeholder: #{$text-color-placeholder}; + --el-input-bg-color: #{$main-bg-color}; + --el-disabled-bg-color: #{$main-bg-color}; + // --el-disabled-border-color: #{$text-color-placeholder}; +} + +// input +.el-input { + --el-input-bg-color: #{$main-bg-color}; +} +.el-textarea { + --el-input-bg-color: #{$main-bg-color}; +} +// button +.el-button { + --el-button-bg-color: #{$main-bg-color}; } .el-drawer { --el-drawer-bg-color: #{$main-bg-color}; } +.el-scrollbar { + --el-scrollbar-bg-color: #{$main-bg-color}; +} + +// 时间选择器 +.el-date-range-picker { + --el-datepicker-inner-border-color: #{$text-color-placeholder}; + --el-datepicker-inrange-bg-color: #{$sub-main-bg-content}; + --el-datepicker-inrange-hover-bg-color: #{$sub-main-bg-content}; +} +.el-picker-panel { + background-color: #{$main-bg-color}; +} +.el-picker-panel__footer { + background-color: #{$main-bg-color}; +} + +// select颜色 +.el-select__popper.el-popper { + background-color: #{$main-bg-color}; +} +.el-select-dropdown__item.hover, +.el-select-dropdown__item:hover { + background-color: #{$sub-main-bg-content}; +} +.el-popper.is-light .el-popper__arrow::before { + background-color: #{$main-bg-color}; +} + .el-card { --el-card-bg-color: #{$main-bg-color}; --el-card-border-color: #{$text-color-placeholder}; diff --git a/src/styles/index.scss b/src/styles/index.scss index 4876eb35..f4ffcf48 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -64,11 +64,6 @@ div:focus { } } -// main-container global css -.app-container { - padding: 20px; -} - .title { display: inline-block; font-size: 18px; @@ -76,41 +71,59 @@ div:focus { // margin: 10px 0; } -.checkbtn { - width: 90px; - height: 36px; - margin: 15px 0 0 10px; - font-size: 14px; - color: #fff; - background: inherit; - background-color: rgba(64, 158, 255, 1); - border: none; - border-width: 0; - border-radius: 4px; - -moz-box-shadow: none; - -webkit-box-shadow: none; - box-shadow: none; +.page-container { + width: 100%; + min-height: 100%; + border-radius: 10px; } -.bigselect { - width: 400px; +ul { + list-style-type: none; + padding: 0; } -.paging { - display: flex; - justify-content: flex-end; -} +@for $i from 1 to 6 { + * > .enter-x:nth-child(#{$i}) { + transform: translateX(50px); + } + * > .-enter-x:nth-child(#{$i}) { + transform: translateX(-50px); + } + * > .enter-x:nth-child(#{$i}), + * > .-enter-x:nth-child(#{$i}) { + z-index: 10 - $i; + opacity: 0; + animation: enter-x-animation 0.4s ease-in-out 0.3s; + animation-fill-mode: forwards; + animation-delay: calc(($i * 1s) / 10); + } -.tablecontent { - margin-bottom: 40px; + * > .enter-y:nth-child(#{$i}) { + transform: translateY(50px); + } + * > .-enter-y:nth-child(#{$i}) { + transform: translatey(-50px); + } + * > .enter-y:nth-child(#{$i}), + * > .-enter-y:nth-child(#{$i}) { + z-index: 10 - $i; + opacity: 0; + animation: enter-x-animation 0.4s ease-in-out 0.3s; + animation-fill-mode: forwards; + animation-delay: calc(($i * 1s) / 5); + } } -.el-dialog__body { - padding: 0; +@keyframes enter-x-animation { + to { + opacity: 1; + transform: translateX(0); + } } -.page-container { - width: 100%; - min-height: 100%; - border-radius: 10px; +@keyframes enter-y-animation { + to { + opacity: 1; + transform: translateY(0); + } } diff --git a/src/views/components/form/index.vue b/src/views/components/form/index.vue new file mode 100644 index 00000000..e53027ab --- /dev/null +++ b/src/views/components/form/index.vue @@ -0,0 +1,113 @@ + + + + + diff --git a/windi.config.ts b/windi.config.ts deleted file mode 100644 index eb931953..00000000 --- a/windi.config.ts +++ /dev/null @@ -1,74 +0,0 @@ -import { defineConfig } from 'vite-plugin-windicss'; -// import { primaryColor } from './build/config/themeConfig' - -export default defineConfig({ - darkMode: 'class', - plugins: [createEnterPlugin()], - theme: { - extend: { - zIndex: { - '-1': '-1', - }, - colors: { - primary: '#409eff', - }, - screens: { - sm: '576px', - md: '768px', - lg: '992px', - xl: '1200px', - '2xl': '1600px', - }, - }, - }, -}); - -/** - * Used for animation when the element is displayed. - * @param maxOutput The larger the maxOutput output, the larger the generated css volume. - */ -function createEnterPlugin(maxOutput = 6) { - const createCss = (index: number, d = 'x') => { - const upd = d.toUpperCase(); - return { - [`*> .enter-${d}:nth-child(${index})`]: { - transform: `translate${upd}(50px)`, - }, - [`*> .-enter-${d}:nth-child(${index})`]: { - transform: `translate${upd}(-50px)`, - }, - [`* > .enter-${d}:nth-child(${index}),* > .-enter-${d}:nth-child(${index})`]: { - 'z-index': `${10 - index}`, - opacity: '0', - animation: `enter-${d}-animation 0.4s ease-in-out 0.3s`, - 'animation-fill-mode': 'forwards', - 'animation-delay': `${(index * 1) / 10}s`, - }, - }; - }; - const handler = ({ addBase }) => { - const addRawCss = {}; - for (let index = 1; index < maxOutput; index++) { - Object.assign(addRawCss, { - ...createCss(index, 'x'), - ...createCss(index, 'y'), - }); - } - addBase({ - ...addRawCss, - [`@keyframes enter-x-animation`]: { - to: { - opacity: '1', - transform: 'translateX(0)', - }, - }, - [`@keyframes enter-y-animation`]: { - to: { - opacity: '1', - transform: 'translateY(0)', - }, - }, - }); - }; - return { handler }; -}