From 4b82221b66665703ea2693eee328ca35b23faa10 Mon Sep 17 00:00:00 2001 From: xiaofengzi <1025578829@qq.com> Date: Mon, 27 Mar 2023 02:20:07 +0800 Subject: [PATCH 1/4] =?UTF-8?q?=E6=8F=90=E4=BA=A4Table=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=EF=BC=8CModal=E7=BB=84=E4=BB=B6=EF=BC=8CPopover=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=EF=BC=8CLoadImage=E7=BB=84=E4=BB=B6=EF=BC=8CTablePagi?= =?UTF-8?q?nation=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- babel.config.js | 11 +- index.html | 8 +- package-lock.json | 63 ++++++ package.json | 3 +- vue/components/demo.vue | 279 ++++++++++++++++++++++- vue/components/loadimage.vue | 152 +++++++++++++ vue/components/mymodal.vue | 140 ++++++++++++ vue/components/mypop.vue | 160 +++++++++++++ vue/components/mytable.vue | 195 ++++++++++++++++ vue/components/tablepagination.vue | 352 +++++++++++++++++++++++++++++ vue/vue_main.js | 8 +- 11 files changed, 1354 insertions(+), 17 deletions(-) create mode 100644 vue/components/loadimage.vue create mode 100644 vue/components/mymodal.vue create mode 100644 vue/components/mypop.vue create mode 100644 vue/components/mytable.vue create mode 100644 vue/components/tablepagination.vue diff --git a/babel.config.js b/babel.config.js index b4f89cd..14c6dbd 100644 --- a/babel.config.js +++ b/babel.config.js @@ -5,5 +5,14 @@ module.exports = { presets: [ '@babel/preset-env', ['@babel/preset-react', { runtime: 'automatic' }], - ] + ], + "plugins": [ + [ + "component", + { + "libraryName": "element-ui", + "styleLibraryName": "theme-chalk" + } + ] + ] } \ No newline at end of file diff --git a/index.html b/index.html index 7f97143..c3facb1 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ Document
-
left
-
right
+
diff --git a/package-lock.json b/package-lock.json index fe19286..624eb62 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,6 +28,7 @@ "@types/react": "^18.0.28", "babel-jest": "^29.5.0", "babel-loader": "^9.1.2", + "babel-plugin-component": "^1.1.1", "babel-plugin-transform-class-properties": "^6.24.1", "compression-webpack-plugin": "^10.0.0", "copy-webpack-plugin": "^11.0.0", @@ -4290,6 +4291,36 @@ "babel-runtime": "^6.22.0" } }, + "node_modules/babel-plugin-component": { + "version": "1.1.1", + "resolved": "https://registry.npmmirror.com/babel-plugin-component/-/babel-plugin-component-1.1.1.tgz", + "integrity": "sha512-WUw887kJf2GH80Ng/ZMctKZ511iamHNqPhd9uKo14yzisvV7Wt1EckIrb8oq/uCz3B3PpAW7Xfl7AkTLDYT6ag==", + "dev": true, + "dependencies": { + "@babel/helper-module-imports": "7.0.0-beta.35" + } + }, + "node_modules/babel-plugin-component/node_modules/@babel/helper-module-imports": { + "version": "7.0.0-beta.35", + "resolved": "https://registry.npmmirror.com/@babel/helper-module-imports/-/helper-module-imports-7.0.0-beta.35.tgz", + "integrity": "sha512-vaC1KyIZSuyWb3Lj277fX0pxivyHwuDU4xZsofqgYAbkDxNieMg2vuhzP5AgMweMY7fCQUMTi+BgPqTLjkxXFg==", + "dev": true, + "dependencies": { + "@babel/types": "7.0.0-beta.35", + "lodash": "^4.2.0" + } + }, + "node_modules/babel-plugin-component/node_modules/@babel/types": { + "version": "7.0.0-beta.35", + "resolved": "https://registry.npmmirror.com/@babel/types/-/types-7.0.0-beta.35.tgz", + "integrity": "sha512-y9XT11CozHDgjWcTdxmhSj13rJVXpa5ZXwjjOiTedjaM0ba5ItqdS02t31EhPl7HtOWxsZkYCCUNrSfrOisA6w==", + "dev": true, + "dependencies": { + "esutils": "^2.0.2", + "lodash": "^4.2.0", + "to-fast-properties": "^2.0.0" + } + }, "node_modules/babel-plugin-istanbul": { "version": "6.1.1", "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-6.1.1.tgz", @@ -17524,6 +17555,38 @@ "babel-runtime": "^6.22.0" } }, + "babel-plugin-component": { + "version": "1.1.1", + "resolved": "https://registry.npmmirror.com/babel-plugin-component/-/babel-plugin-component-1.1.1.tgz", + "integrity": "sha512-WUw887kJf2GH80Ng/ZMctKZ511iamHNqPhd9uKo14yzisvV7Wt1EckIrb8oq/uCz3B3PpAW7Xfl7AkTLDYT6ag==", + "dev": true, + "requires": { + "@babel/helper-module-imports": "7.0.0-beta.35" + }, + "dependencies": { + "@babel/helper-module-imports": { + "version": "7.0.0-beta.35", + "resolved": "https://registry.npmmirror.com/@babel/helper-module-imports/-/helper-module-imports-7.0.0-beta.35.tgz", + "integrity": "sha512-vaC1KyIZSuyWb3Lj277fX0pxivyHwuDU4xZsofqgYAbkDxNieMg2vuhzP5AgMweMY7fCQUMTi+BgPqTLjkxXFg==", + "dev": true, + "requires": { + "@babel/types": "7.0.0-beta.35", + "lodash": "^4.2.0" + } + }, + "@babel/types": { + "version": "7.0.0-beta.35", + "resolved": "https://registry.npmmirror.com/@babel/types/-/types-7.0.0-beta.35.tgz", + "integrity": "sha512-y9XT11CozHDgjWcTdxmhSj13rJVXpa5ZXwjjOiTedjaM0ba5ItqdS02t31EhPl7HtOWxsZkYCCUNrSfrOisA6w==", + "dev": true, + "requires": { + "esutils": "^2.0.2", + "lodash": "^4.2.0", + "to-fast-properties": "^2.0.0" + } + } + } + }, "babel-plugin-istanbul": { "version": "6.1.1", "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-6.1.1.tgz", diff --git a/package.json b/package.json index 6f4b3ba..3c0310a 100644 --- a/package.json +++ b/package.json @@ -44,6 +44,7 @@ "@types/react": "^18.0.28", "babel-jest": "^29.5.0", "babel-loader": "^9.1.2", + "babel-plugin-component": "^1.1.1", "babel-plugin-transform-class-properties": "^6.24.1", "compression-webpack-plugin": "^10.0.0", "copy-webpack-plugin": "^11.0.0", @@ -79,4 +80,4 @@ "framer-motion": "^8.5.5", "uuid": "^9.0.0" } -} \ No newline at end of file +} diff --git a/vue/components/demo.vue b/vue/components/demo.vue index 8cb6902..f208514 100644 --- a/vue/components/demo.vue +++ b/vue/components/demo.vue @@ -1,16 +1,275 @@ - - diff --git a/vue/components/loadimage.vue b/vue/components/loadimage.vue new file mode 100644 index 0000000..1cf89c4 --- /dev/null +++ b/vue/components/loadimage.vue @@ -0,0 +1,152 @@ + + + + + diff --git a/vue/components/mymodal.vue b/vue/components/mymodal.vue new file mode 100644 index 0000000..fccfa4e --- /dev/null +++ b/vue/components/mymodal.vue @@ -0,0 +1,140 @@ + + + + + diff --git a/vue/components/mypop.vue b/vue/components/mypop.vue new file mode 100644 index 0000000..76c4ca4 --- /dev/null +++ b/vue/components/mypop.vue @@ -0,0 +1,160 @@ + + + + + diff --git a/vue/components/mytable.vue b/vue/components/mytable.vue new file mode 100644 index 0000000..7e1ce42 --- /dev/null +++ b/vue/components/mytable.vue @@ -0,0 +1,195 @@ + + + + + diff --git a/vue/components/tablepagination.vue b/vue/components/tablepagination.vue new file mode 100644 index 0000000..a4162d3 --- /dev/null +++ b/vue/components/tablepagination.vue @@ -0,0 +1,352 @@ + + + + + diff --git a/vue/vue_main.js b/vue/vue_main.js index 01af16d..c735eb9 100644 --- a/vue/vue_main.js +++ b/vue/vue_main.js @@ -2,9 +2,15 @@ import {createApp} from 'vue' import App from './App.vue' +// import { Table, Dialog,InfiniteScroll,Popconfirm,Pagination } from 'element-ui'; +const app=createApp(App) +// app.component(Table.name, Table); +// app.component(Dialog.name, Dialog); +// app.component(Popconfirm.name, Popconfirm); +// app.component(Pagination.name, Pagination); -createApp(App).mount("#app") +app.mount("#app") // new Vue({ // render: h => h(App) // }).$mount('#app'); \ No newline at end of file From 84e0067ea71205486d286ffe714a7d881207bde4 Mon Sep 17 00:00:00 2001 From: xiaofengzi <1025578829@qq.com> Date: Mon, 27 Mar 2023 02:31:19 +0800 Subject: [PATCH 2/4] =?UTF-8?q?=E5=81=9A=E4=BA=86=E7=AE=80=E5=8D=95?= =?UTF-8?q?=E7=9A=84=E8=AF=AD=E6=B3=95=E6=A3=80=E6=9F=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- vue/components/demo.vue | 21 ++++++++++----------- vue/vue_main.js | 11 +---------- 2 files changed, 11 insertions(+), 21 deletions(-) diff --git a/vue/components/demo.vue b/vue/components/demo.vue index f208514..49607d1 100644 --- a/vue/components/demo.vue +++ b/vue/components/demo.vue @@ -135,7 +135,7 @@ nextPage点击下一页时触发 --> h(App) -// }).$mount('#app'); \ No newline at end of file From 2e64c3a42a593cb8d4abcb782992c5ae3fde320b Mon Sep 17 00:00:00 2001 From: xiaofengzi <1025578829@qq.com> Date: Mon, 27 Mar 2023 03:23:04 +0800 Subject: [PATCH 3/4] =?UTF-8?q?=E4=B8=BA=E9=81=BF=E5=85=8D=E5=86=B2?= =?UTF-8?q?=E7=AA=81=EF=BC=8C=E5=B0=86=E4=B9=8B=E5=89=8D=E4=BF=AE=E6=94=B9?= =?UTF-8?q?=E7=9A=84=E5=85=B6=E4=BB=96=E6=96=87=E4=BB=B6=E6=81=A2=E5=A4=8D?= =?UTF-8?q?=E5=88=B0=E6=9C=80=E5=88=9D=E7=8A=B6=E6=80=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- babel.config.js | 13 ++----------- index.html | 8 ++++---- vue/components/mypop.vue | 12 ++++++------ vue/vue_main.js | 4 +++- 4 files changed, 15 insertions(+), 22 deletions(-) diff --git a/babel.config.js b/babel.config.js index 14c6dbd..37a2454 100644 --- a/babel.config.js +++ b/babel.config.js @@ -5,14 +5,5 @@ module.exports = { presets: [ '@babel/preset-env', ['@babel/preset-react', { runtime: 'automatic' }], - ], - "plugins": [ - [ - "component", - { - "libraryName": "element-ui", - "styleLibraryName": "theme-chalk" - } - ] - ] -} \ No newline at end of file + ] +} diff --git a/index.html b/index.html index c3facb1..7f97143 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ Document
- +
left
+
right
diff --git a/vue/components/mypop.vue b/vue/components/mypop.vue index 76c4ca4..7725a9f 100644 --- a/vue/components/mypop.vue +++ b/vue/components/mypop.vue @@ -64,12 +64,12 @@ export default { contentWrap.value.style.color = props.color; switch (props.placement) { case "left": - contentWrap.value.classList.add("left", "cLeft"); - element.value.classList.add("left", "eLeft"); + contentWrap.value.classList.add("tLeft", "cLeft"); + element.value.classList.add("tLeft", "eLeft"); break; case "right": - contentWrap.value.classList.add("right", "cRight"); - element.value.classList.add("right", "eRight"); + contentWrap.value.classList.add("tRight", "cRight"); + element.value.classList.add("tRight", "eRight"); break; case "top": contentWrap.value.classList.add("top", "cTop"); @@ -113,12 +113,12 @@ export default { position: absolute; z-index: 2; } -.left { +.tLeft { right: 100%; top: 50%; transform: translateY(-50%); } -.right { +.tRight { left: 100%; top: 50%; transform: translateY(-50%); diff --git a/vue/vue_main.js b/vue/vue_main.js index 4535a63..ed80851 100644 --- a/vue/vue_main.js +++ b/vue/vue_main.js @@ -4,4 +4,6 @@ import {createApp} from 'vue' import App from './App.vue' createApp(App).mount("#app") - +// new Vue({ +// render: h => h(App) +// }).$mount('#app'); From b2a39689bd078152953f6519a43eecb57e1851e3 Mon Sep 17 00:00:00 2001 From: xiaofengzi <1025578829@qq.com> Date: Mon, 27 Mar 2023 17:16:10 +0800 Subject: [PATCH 4/4] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=B3=A8=E9=87=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- vue/components/demo.vue | 84 +---------- vue/components/loadimage.vue | 16 +-- vue/components/mymodal.vue | 28 ++-- vue/components/mypop.vue | 18 +-- vue/components/mytable.vue | 102 ++++++++------ vue/components/tablepagination.vue | 215 ++++++++++++++++------------- 6 files changed, 201 insertions(+), 262 deletions(-) diff --git a/vue/components/demo.vue b/vue/components/demo.vue index 49607d1..f1e4cfa 100644 --- a/vue/components/demo.vue +++ b/vue/components/demo.vue @@ -4,27 +4,12 @@
Table
-
Modal
-
loadImage
-
Popover
-
TablePagination
- import { watchEffect, ref, reactive } from "vue"; export default { - /* - loadimage组件： - 属性：imgUrls,imgWidth,imgHeight,duration,timer,timingFunction - imgUrls属性，值为数组类型，元素是字符串，是要展示的所有的图片路径 - imgWidth属性，值为一个字符串，用来设置图片的宽度 - imgHeight属性，值为一个字符串，用来设置图片的高度 - duration属性，值是Number类型的，用来设置每张图片的过渡时间 - timer属性，值是Number类型的，用来设置每张图片的显示时间，并且值不能低于2倍的duration - timingFunction属性，值为一个字符串，用来设置图片的过渡函数 - */ name: "loadimage", props: { + //要展示的图片的路径 imgUrls: { type: Array, default() { @@ -42,22 +33,27 @@ export default { ]; }, }, + //图片宽度 imgWidth: { type: String, default: "200px", }, + //图片高度 imgHeight: { type: String, default: "292px", }, + //图片的过渡时间 duration: { type: Number, default: 300, }, + //图片的显示时间，值不能低于2倍的duration timer: { type: Number, default: 3000, }, + //图片的过渡函数 timingFunction: { type: String, default: "linear", diff --git a/vue/components/mymodal.vue b/vue/components/mymodal.vue index fccfa4e..a2fcc63 100644 --- a/vue/components/mymodal.vue +++ b/vue/components/mymodal.vue @@ -15,52 +15,44 @@