新增按钮
This commit is contained in:
zouzhibing
parent
c0ffc065d6
commit
0aa80d6735
|
|
@ -3,7 +3,7 @@ vue-element-perfect 是一个后台前端解决方案, 基于Vue3.0+TS+Element-p
|
|||
|
||||
## 效果预览
|
||||
|
||||
进行预览 [项目预览地址](https://zouzhibin.github.io/vue-admin-perfect/#/home)
|
||||
进行预览 [项目预览地址](https://yuanzbz.gitee.io/vue-admin-perfect)
|
||||
|
||||
附上github地址 [vue-admin-perfect](https://github.com/zouzhibin/vue-admin-perfect)
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
.card-header{display:flex;justify-content:space-between;align-items:center}.text{font-size:14px}.item{margin-bottom:18px}.box-card{width:100%}
|
||||
|
|
@ -1 +1 @@
|
|||
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>admin3</title><link href="css/chunk-026f8934.203a047d.css" rel="prefetch"><link href="css/chunk-0d19964f.203a047d.css" rel="prefetch"><link href="css/chunk-15e30221.b8a19145.css" rel="prefetch"><link href="css/chunk-378ee166.ca18b920.css" rel="prefetch"><link href="css/chunk-3baa9536.e5ad81d1.css" rel="prefetch"><link href="css/chunk-46f3cdc3.c96f8308.css" rel="prefetch"><link href="css/chunk-7597aed0.e2f29e2b.css" rel="prefetch"><link href="css/chunk-762e73e2.68e4d222.css" rel="prefetch"><link href="css/chunk-a691402a.aa1a879f.css" rel="prefetch"><link href="css/chunk-c535df16.2dff8b36.css" rel="prefetch"><link href="js/chunk-026f8934.5cb461a9.js" rel="prefetch"><link href="js/chunk-0375f012.576712c3.js" rel="prefetch"><link href="js/chunk-0d19964f.06ad7856.js" rel="prefetch"><link href="js/chunk-15e30221.26ec0b0d.js" rel="prefetch"><link href="js/chunk-2b54affe.416b987b.js" rel="prefetch"><link href="js/chunk-2d0b9232.d108bca7.js" rel="prefetch"><link href="js/chunk-2d217928.23078a4b.js" rel="prefetch"><link href="js/chunk-378ee166.5f385493.js" rel="prefetch"><link href="js/chunk-3baa9536.ead11f6c.js" rel="prefetch"><link href="js/chunk-46f3cdc3.4a9551b2.js" rel="prefetch"><link href="js/chunk-496def4a.163ff0dc.js" rel="prefetch"><link href="js/chunk-7597aed0.7552c5e1.js" rel="prefetch"><link href="js/chunk-762e73e2.863ada0b.js" rel="prefetch"><link href="js/chunk-a691402a.b7df4ead.js" rel="prefetch"><link href="js/chunk-c535df16.83234e09.js" rel="prefetch"><link href="css/app.aacaec17.css" rel="preload" as="style"><link href="css/chunk-vendors.9660a410.css" rel="preload" as="style"><link href="js/app.e03fc9b1.js" rel="preload" as="script"><link href="js/chunk-vendors.6d058070.js" rel="preload" as="script"><link href="css/chunk-vendors.9660a410.css" rel="stylesheet"><link href="css/app.aacaec17.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but admin3 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="js/chunk-vendors.6d058070.js"></script><script src="js/app.e03fc9b1.js"></script></body></html>
|
||||
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>admin3</title><link href="css/chunk-026f8934.203a047d.css" rel="prefetch"><link href="css/chunk-0d19964f.203a047d.css" rel="prefetch"><link href="css/chunk-15e30221.b8a19145.css" rel="prefetch"><link href="css/chunk-378ee166.ca18b920.css" rel="prefetch"><link href="css/chunk-3baa9536.e5ad81d1.css" rel="prefetch"><link href="css/chunk-3cf5ae64.e2f29e2b.css" rel="prefetch"><link href="css/chunk-46f3cdc3.c96f8308.css" rel="prefetch"><link href="css/chunk-762e73e2.68e4d222.css" rel="prefetch"><link href="css/chunk-a691402a.aa1a879f.css" rel="prefetch"><link href="css/chunk-a6bcb2cc.a3651a4e.css" rel="prefetch"><link href="css/chunk-c535df16.2dff8b36.css" rel="prefetch"><link href="js/chunk-026f8934.5cb461a9.js" rel="prefetch"><link href="js/chunk-0375f012.576712c3.js" rel="prefetch"><link href="js/chunk-0d19964f.06ad7856.js" rel="prefetch"><link href="js/chunk-15e30221.26ec0b0d.js" rel="prefetch"><link href="js/chunk-2b54affe.416b987b.js" rel="prefetch"><link href="js/chunk-2d0b9232.d108bca7.js" rel="prefetch"><link href="js/chunk-2d217928.2d8e8acc.js" rel="prefetch"><link href="js/chunk-378ee166.5f385493.js" rel="prefetch"><link href="js/chunk-3baa9536.ead11f6c.js" rel="prefetch"><link href="js/chunk-3cf5ae64.17c7eef9.js" rel="prefetch"><link href="js/chunk-46f3cdc3.4a9551b2.js" rel="prefetch"><link href="js/chunk-496def4a.163ff0dc.js" rel="prefetch"><link href="js/chunk-762e73e2.863ada0b.js" rel="prefetch"><link href="js/chunk-a691402a.b7df4ead.js" rel="prefetch"><link href="js/chunk-a6bcb2cc.af5fd410.js" rel="prefetch"><link href="js/chunk-c535df16.83234e09.js" rel="prefetch"><link href="css/app.aacaec17.css" rel="preload" as="style"><link href="css/chunk-vendors.9660a410.css" rel="preload" as="style"><link href="js/app.81245a6a.js" rel="preload" as="script"><link href="js/chunk-vendors.1680c7ad.js" rel="preload" as="script"><link href="css/chunk-vendors.9660a410.css" rel="stylesheet"><link href="css/app.aacaec17.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but admin3 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="js/chunk-vendors.1680c7ad.js"></script><script src="js/app.81245a6a.js"></script></body></html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,2 @@
|
|||
(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-3cf5ae64"],{"590d":function(e,t,c){"use strict";c("b3d1")},"99de":function(e,t,c){"use strict";c.r(t);var n=c("7a23"),i={class:"infinite-list",style:{overflow:"auto"}},o={key:0,style:{height:"50px",width:"100%",display:"flex","align-items":"center","justify-content":"center"}},l=Object(n["defineComponent"])({setup:function(e){var t=Object(n["ref"])(0),c=Object(n["ref"])(!0),l=function(){t.value+=3};return function(e,r){var s=Object(n["resolveDirective"])("infinite-scroll");return Object(n["withDirectives"])((Object(n["openBlock"])(),Object(n["createElementBlock"])("ul",i,[(Object(n["openBlock"])(!0),Object(n["createElementBlock"])(n["Fragment"],null,Object(n["renderList"])(t.value,(function(e){return Object(n["openBlock"])(),Object(n["createElementBlock"])("li",{key:e,class:"infinite-list-item"},Object(n["toDisplayString"])(e),1)})),128)),c.value?(Object(n["openBlock"])(),Object(n["createElementBlock"])("div",o,"正在加载中...")):Object(n["createCommentVNode"])("",!0)])),[[s,l]])}}});c("590d");const r=l;t["default"]=r},b3d1:function(e,t,c){}}]);
|
||||
//# sourceMappingURL=chunk-3cf5ae64.17c7eef9.js.map
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sources":["webpack:///./src/views/components-demo/scroll.vue?1818","webpack:///./src/views/components-demo/scroll.vue?c7d1","webpack:///./src/views/components-demo/scroll.vue"],"names":["_hoisted_1","class","style","_hoisted_2","key","_defineComponent","setup","__props","count","ref","isLoading","load","value","_ctx","_cache","_directive_infinite_scroll","_resolveDirective","_withDirectives","_openBlock","_createElementBlock","_Fragment","_renderList","i","_toDisplayString","_createCommentVNode","__exports__"],"mappings":"kHAAA,W,2DCGMA,EAAa,CACjBC,MAAO,gBACPC,MAAO,CAAC,SAAW,SAEfC,EAAa,CACjBC,IAAK,EACLF,MAAO,CAAC,OAAS,OAAO,MAAQ,OAAO,QAAU,OAAO,cAAc,SAAS,kBAAkB,WAKvEG,+BAAiB,CAC3CC,MAD2C,SACrCC,GAEN,IAAMC,EAAQC,iBAAI,GACZC,EAAYD,kBAAI,GAChBE,EAAO,WACXH,EAAMI,OAAS,GAGnB,OAAO,SAACC,EAAUC,GAChB,IAAMC,EAA6BC,8BAAkB,mBAErD,OAAOC,6BAAiBC,yBAAcC,gCAAoB,KAAMnB,EAAY,EACzEkB,wBAAW,GAAOC,gCAAoBC,cAAW,KAAMC,wBAAYb,EAAMI,OAAO,SAACU,GAChF,OAAQJ,yBAAcC,gCAAoB,KAAM,CAC9Cf,IAAKkB,EACLrB,MAAO,sBACNsB,6BAAiBD,GAAI,MACtB,MACHZ,EAAUE,OACNM,yBAAcC,gCAAoB,MAAOhB,EAAY,aACtDqB,gCAAoB,IAAI,MACzB,CACH,CAACT,EAA4BJ,S,UChCjC,MAAMc,EAAc,EAEL,gB","file":"js/chunk-3cf5ae64.17c7eef9.js","sourcesContent":["export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--7-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!../../../node_modules/vue-loader-v16/dist/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--7-oneOf-1-2!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader-v16/dist/index.js??ref--1-1!./scroll.vue?vue&type=style&index=0&id=3778e8f5&lang=css\"","import { defineComponent as _defineComponent } from 'vue'\nimport { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, createCommentVNode as _createCommentVNode, resolveDirective as _resolveDirective, withDirectives as _withDirectives } from \"vue\"\n\nconst _hoisted_1 = {\n class: \"infinite-list\",\n style: {\"overflow\":\"auto\"}\n}\nconst _hoisted_2 = {\n key: 0,\n style: {\"height\":\"50px\",\"width\":\"100%\",\"display\":\"flex\",\"align-items\":\"center\",\"justify-content\":\"center\"}\n}\n\nimport { ref } from 'vue'\r\n \nexport default /*#__PURE__*/_defineComponent({\n setup(__props) {\n\r\n const count = ref(0)\r\n const isLoading = ref(true)\r\n const load = () => {\r\n count.value += 3\r\n }\r\n\nreturn (_ctx: any,_cache: any) => {\n const _directive_infinite_scroll = _resolveDirective(\"infinite-scroll\")!\n\n return _withDirectives((_openBlock(), _createElementBlock(\"ul\", _hoisted_1, [\n (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(count.value, (i) => {\n return (_openBlock(), _createElementBlock(\"li\", {\n key: i,\n class: \"infinite-list-item\"\n }, _toDisplayString(i), 1))\n }), 128)),\n (isLoading.value)\n ? (_openBlock(), _createElementBlock(\"div\", _hoisted_2, \"正在加载中...\"))\n : _createCommentVNode(\"\", true)\n ])), [\n [_directive_infinite_scroll, load]\n ])\n}\n}\n\n})","import script from \"./scroll.vue?vue&type=script&lang=ts&setup=true\"\nexport * from \"./scroll.vue?vue&type=script&lang=ts&setup=true\"\n\nimport \"./scroll.vue?vue&type=style&index=0&id=3778e8f5&lang=css\"\n\nconst __exports__ = script;\n\nexport default __exports__"],"sourceRoot":""}
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-7597aed0"],{"1c3a":function(e,t,c){"use strict";c("c7d7")},6655:function(e,t,c){"use strict";c.r(t);var n=c("7a23"),i={class:"infinite-list",style:{overflow:"auto"}},o={key:0,style:{height:"50px",width:"100%",display:"flex","align-items":"center","justify-content":"center"}},l=Object(n["defineComponent"])({setup:function(e){var t=Object(n["ref"])(0),c=Object(n["ref"])(!0),l=function(){t.value+=3};return function(e,r){var a=Object(n["resolveDirective"])("infinite-scroll");return Object(n["withDirectives"])((Object(n["openBlock"])(),Object(n["createElementBlock"])("ul",i,[(Object(n["openBlock"])(!0),Object(n["createElementBlock"])(n["Fragment"],null,Object(n["renderList"])(t.value,(function(e){return Object(n["openBlock"])(),Object(n["createElementBlock"])("li",{key:e,class:"infinite-list-item"},Object(n["toDisplayString"])(e),1)})),128)),c.value?(Object(n["openBlock"])(),Object(n["createElementBlock"])("div",o,"正在加载中...")):Object(n["createCommentVNode"])("",!0)])),[[a,l]])}}});c("1c3a");const r=l;t["default"]=r},c7d7:function(e,t,c){}}]);
|
||||
//# sourceMappingURL=chunk-7597aed0.7552c5e1.js.map
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"sources":["webpack:///./src/views/other/scroll.vue?507e","webpack:///./src/views/other/scroll.vue?c87e","webpack:///./src/views/other/scroll.vue"],"names":["_hoisted_1","class","style","_hoisted_2","key","_defineComponent","setup","__props","count","ref","isLoading","load","value","_ctx","_cache","_directive_infinite_scroll","_resolveDirective","_withDirectives","_openBlock","_createElementBlock","_Fragment","_renderList","i","_toDisplayString","_createCommentVNode","__exports__"],"mappings":"kHAAA,W,yDCGMA,EAAa,CACjBC,MAAO,gBACPC,MAAO,CAAC,SAAW,SAEfC,EAAa,CACjBC,IAAK,EACLF,MAAO,CAAC,OAAS,OAAO,MAAQ,OAAO,QAAU,OAAO,cAAc,SAAS,kBAAkB,WAKvEG,+BAAiB,CAC3CC,MAD2C,SACrCC,GAEN,IAAMC,EAAQC,iBAAI,GACZC,EAAYD,kBAAI,GAChBE,EAAO,WACXH,EAAMI,OAAS,GAGnB,OAAO,SAACC,EAAUC,GAChB,IAAMC,EAA6BC,8BAAkB,mBAErD,OAAOC,6BAAiBC,yBAAcC,gCAAoB,KAAMnB,EAAY,EACzEkB,wBAAW,GAAOC,gCAAoBC,cAAW,KAAMC,wBAAYb,EAAMI,OAAO,SAACU,GAChF,OAAQJ,yBAAcC,gCAAoB,KAAM,CAC9Cf,IAAKkB,EACLrB,MAAO,sBACNsB,6BAAiBD,GAAI,MACtB,MACHZ,EAAUE,OACNM,yBAAcC,gCAAoB,MAAOhB,EAAY,aACtDqB,gCAAoB,IAAI,MACzB,CACH,CAACT,EAA4BJ,S,UChCjC,MAAMc,EAAc,EAEL,gB","file":"js/chunk-7597aed0.7552c5e1.js","sourcesContent":["export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--7-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!../../../node_modules/vue-loader-v16/dist/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--7-oneOf-1-2!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader-v16/dist/index.js??ref--1-1!./scroll.vue?vue&type=style&index=0&id=050a26df&lang=css\"","import { defineComponent as _defineComponent } from 'vue'\nimport { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, createCommentVNode as _createCommentVNode, resolveDirective as _resolveDirective, withDirectives as _withDirectives } from \"vue\"\n\nconst _hoisted_1 = {\n class: \"infinite-list\",\n style: {\"overflow\":\"auto\"}\n}\nconst _hoisted_2 = {\n key: 0,\n style: {\"height\":\"50px\",\"width\":\"100%\",\"display\":\"flex\",\"align-items\":\"center\",\"justify-content\":\"center\"}\n}\n\nimport { ref } from 'vue'\r\n \nexport default /*#__PURE__*/_defineComponent({\n setup(__props) {\n\r\n const count = ref(0)\r\n const isLoading = ref(true)\r\n const load = () => {\r\n count.value += 3\r\n }\r\n\nreturn (_ctx: any,_cache: any) => {\n const _directive_infinite_scroll = _resolveDirective(\"infinite-scroll\")!\n\n return _withDirectives((_openBlock(), _createElementBlock(\"ul\", _hoisted_1, [\n (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(count.value, (i) => {\n return (_openBlock(), _createElementBlock(\"li\", {\n key: i,\n class: \"infinite-list-item\"\n }, _toDisplayString(i), 1))\n }), 128)),\n (isLoading.value)\n ? (_openBlock(), _createElementBlock(\"div\", _hoisted_2, \"正在加载中...\"))\n : _createCommentVNode(\"\", true)\n ])), [\n [_directive_infinite_scroll, load]\n ])\n}\n}\n\n})","import script from \"./scroll.vue?vue&type=script&lang=ts&setup=true\"\nexport * from \"./scroll.vue?vue&type=script&lang=ts&setup=true\"\n\nimport \"./scroll.vue?vue&type=style&index=0&id=050a26df&lang=css\"\n\nconst __exports__ = script;\n\nexport default __exports__"],"sourceRoot":""}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -33,13 +33,13 @@ const componentsRouter = {
|
|||
},
|
||||
{
|
||||
path: 'scroll',
|
||||
component: () => import('@/views/other/scroll.vue'),
|
||||
component: () => import('@/views/components-demo/scroll.vue'),
|
||||
name: 'scroll',
|
||||
meta: { title: '无限滚动', noCache: true }
|
||||
},
|
||||
{
|
||||
path: 'button',
|
||||
component: () => import('@/views/other/scroll.vue'),
|
||||
component: () => import('@/views/components-demo/button.vue'),
|
||||
name: 'button',
|
||||
meta: { title: '按钮', noCache: true }
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,192 @@
|
|||
<template>
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>基础用法
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<div>
|
||||
<el-button class="item">Default</el-button>
|
||||
<el-button type="primary" class="item">Primary</el-button>
|
||||
<el-button type="success" class="item">Success</el-button>
|
||||
<el-button type="info" class="item">Info</el-button>
|
||||
<el-button type="warning" class="item">Warning</el-button>
|
||||
<el-button type="danger" class="item">Danger</el-button>
|
||||
<el-button class="item">中文</el-button>
|
||||
<el-button plain class="item">Plain</el-button>
|
||||
<el-button type="primary" plain class="item">Primary</el-button>
|
||||
<el-button type="success" plain class="item">Success</el-button>
|
||||
<el-button type="info" plain class="item">Info</el-button>
|
||||
<el-button type="warning" plain class="item">Warning</el-button>
|
||||
<el-button type="danger" plain class="item">Danger</el-button>
|
||||
<el-button round class="item">Round</el-button>
|
||||
<el-button type="primary" round class="item">Primary</el-button>
|
||||
<el-button type="success" round class="item">Success</el-button>
|
||||
<el-button type="info" round class="item">Info</el-button>
|
||||
<el-button type="warning" round class="item">Warning</el-button>
|
||||
<el-button type="danger" round class="item">Danger</el-button>
|
||||
<el-button :icon="Search" circle class="item"/>
|
||||
<el-button type="primary" :icon="Edit" circle class="item"/>
|
||||
<el-button type="success" :icon="Check" circle class="item"/>
|
||||
<el-button type="info" :icon="Message" circle class="item"/>
|
||||
<el-button type="warning" :icon="Star" circle class="item"/>
|
||||
<el-button type="danger" :icon="Delete" circle class="item"/>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>禁用状态
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<div>
|
||||
<el-button disabled class="item">Default</el-button>
|
||||
<el-button type="primary" disabled class="item">Primary</el-button>
|
||||
<el-button type="success" disabled class="item">Success</el-button>
|
||||
<el-button type="info" disabled class="item">Info</el-button>
|
||||
<el-button type="warning" disabled class="item">Warning</el-button>
|
||||
<el-button type="danger" disabled class="item">Danger</el-button>
|
||||
<el-button plain disabled class="item">Plain</el-button>
|
||||
<el-button type="primary" plain disabled class="item">Primary</el-button>
|
||||
<el-button type="success" plain disabled class="item">Success</el-button>
|
||||
<el-button type="info" plain disabled class="item"> Info</el-button>
|
||||
<el-button type="warning" plain disabled class="item">Warning</el-button>
|
||||
<el-button type="danger" plain disabled class="item">Danger</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>文字按钮
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<div>
|
||||
<el-button type="text" class="item">文字按钮</el-button>
|
||||
<el-button type="text" disabled class="item">文字按钮</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>图标按钮
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<div>
|
||||
<el-button type="primary" :icon="Edit" class="item"/>
|
||||
<el-button type="primary" :icon="Share" class="item"/>
|
||||
<el-button type="primary" :icon="Delete" class="item"/>
|
||||
<el-button type="primary" :icon="Search" class="item">Search</el-button>
|
||||
<el-button type="primary" class="item">
|
||||
Upload<el-icon class="el-icon--right"><Upload /></el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>按钮组
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<div>
|
||||
<el-button type="primary" :icon="ArrowLeft" class="item">上一页</el-button>
|
||||
<el-button type="primary" class="item">
|
||||
下一页<el-icon class="el-icon--right"><ArrowRight /></el-icon>
|
||||
</el-button>
|
||||
<el-button type="primary" :icon="Edit" class="item"/>
|
||||
<el-button type="primary" :icon="Share" class="item"/>
|
||||
<el-button type="primary" :icon="Delete" class="item"/>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>加载中
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<div>
|
||||
<el-button type="primary" loading class="item">Loading</el-button>
|
||||
<el-button type="primary" :loading-icon="Eleme" loading class="item">Loading</el-button>
|
||||
<el-button type="primary" loading class="item">
|
||||
<template #loading>
|
||||
<div class="custom-loading">
|
||||
<svg class="circular" viewBox="-10, -10, 50, 50">
|
||||
<path
|
||||
class="path"
|
||||
d="
|
||||
M 30 15
|
||||
L 28 17
|
||||
M 25.61 25.61
|
||||
A 15 15, 0, 0, 1, 15 30
|
||||
A 15 15, 0, 1, 1, 27.99 7.5
|
||||
L 15 15
|
||||
"
|
||||
style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
Loading
|
||||
</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>自定义颜色
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<div>
|
||||
<el-button color="#626aef" :dark="isDark" class="item">Default</el-button>
|
||||
<el-button color="#626aef" :dark="isDark" plain class="item">Plain</el-button>
|
||||
|
||||
<el-button color="#626aef" :dark="isDark" disabled class="item">Disabled</el-button>
|
||||
<el-button color="#626aef" :dark="isDark" disabled plain class="item"
|
||||
>Disabled Plain</el-button
|
||||
>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
Check,
|
||||
Delete,
|
||||
Edit,
|
||||
Message,
|
||||
Search,
|
||||
Share,
|
||||
Star,
|
||||
} from '@element-plus/icons-vue'
|
||||
</script>
|
||||
<style>
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.box-card {
|
||||
width: 100%
|
||||
}
|
||||
</style>
|
||||
|
|
@ -58,7 +58,10 @@
|
|||
<el-radio label="线下场地免费" />
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动形式" prop="desc">
|
||||
<el-form-item label="上传图片" prop="img">
|
||||
<u-upload v-model="ruleForm.img"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="desc">
|
||||
<el-input v-model="ruleForm.desc" type="textarea" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
|
|
@ -74,11 +77,12 @@
|
|||
<script lang="ts" setup>
|
||||
import { reactive, ref } from 'vue'
|
||||
import type { FormInstance } from 'element-plus'
|
||||
import UUpload from './form/u-upload.vue'
|
||||
|
||||
const formSize = ref('default')
|
||||
const ruleFormRef = ref<FormInstance>()
|
||||
const ruleForm = reactive({
|
||||
name: 'Hello',
|
||||
name: '跑步',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
|
|
@ -86,6 +90,7 @@ const ruleForm = reactive({
|
|||
type: [],
|
||||
resource: '',
|
||||
desc: '',
|
||||
img:[]
|
||||
})
|
||||
|
||||
const rules = reactive({
|
||||
|
|
@ -93,6 +98,9 @@ const rules = reactive({
|
|||
{ required: true, message: '请输入活动名称活动区域', trigger: 'blur' },
|
||||
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
|
||||
],
|
||||
img:[
|
||||
{ required: true, message: '请上传图片', trigger: 'blur' },
|
||||
],
|
||||
region: [
|
||||
{
|
||||
required: true,
|
||||
|
|
@ -137,6 +145,7 @@ const rules = reactive({
|
|||
})
|
||||
|
||||
const submitForm = async (formEl: FormInstance | undefined) => {
|
||||
console.log('--FORM---',ruleForm)
|
||||
if (!formEl) return
|
||||
await formEl.validate((valid, fields) => {
|
||||
if (valid) {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,71 @@
|
|||
<template>
|
||||
<el-upload
|
||||
action=""
|
||||
:before-upload="beforeUploadAction"
|
||||
list-type="picture-card"
|
||||
:on-preview="handlePictureCardPreview"
|
||||
:on-remove="handleRemove"
|
||||
:file-list="fileList"
|
||||
>
|
||||
<el-icon><Plus /></el-icon>
|
||||
</el-upload>
|
||||
|
||||
<el-dialog v-model="dialogVisible" width="80%" top="80px">
|
||||
<img w-full :src="dialogImageUrl" alt="预览图片" style="width: 100%"/>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {onMounted, ref, watch} from 'vue'
|
||||
import { Plus } from '@element-plus/icons-vue'
|
||||
|
||||
import type { UploadProps, UploadUserFile } from 'element-plus'
|
||||
import {ElMessage} from "element-plus";
|
||||
let emit = defineEmits(['update:modelValue'])
|
||||
let props = defineProps({
|
||||
modelValue:Array
|
||||
})
|
||||
let fileList = ref([
|
||||
|
||||
])
|
||||
|
||||
const dialogImageUrl = ref('')
|
||||
const dialogVisible = ref(false)
|
||||
|
||||
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
|
||||
console.log(uploadFile, uploadFiles)
|
||||
}
|
||||
|
||||
const beforeUploadAction = (file, fileLi)=>{
|
||||
return new Promise((resolve, reject) => {
|
||||
var reader = new FileReader()
|
||||
let reg = (/\.jpg$|\.jpeg$|\.gif$|\.png$/i)
|
||||
reader.readAsDataURL(file)
|
||||
let name = file.name
|
||||
if(reg.test(name)){
|
||||
reader.onload = (e:FileReader)=>{
|
||||
fileList.value.push({
|
||||
name:name,
|
||||
url:e.target.result
|
||||
})
|
||||
emit('update:modelValue',fileList.value)
|
||||
resolve(e.target.result)
|
||||
}
|
||||
}else{
|
||||
ElMessage.error('请上传图片')
|
||||
reject()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
|
||||
dialogImageUrl.value = uploadFile.url!
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
onMounted(()=>{
|
||||
watch(()=>props.modelValue,(value)=>{
|
||||
fileList.value = value
|
||||
})
|
||||
})
|
||||
</script>
|
||||
Loading…
Reference in New Issue