study/vue-component-creater-ui
1
0
Fork 0
mirror of https://github.com/sahadev/vue-component-creater-ui.git synced 2025-06-06 13:04:05 +08:00
Code Issues Releases Wiki Activity

update: rebuild elementui

Browse Source
This commit is contained in:
shangbin 2021-12-10 18:32:16 +08:00
parent 1fe41fa768
commit ba575244e1
12 changed files with 579 additions and 596 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/map/data.index.js
View File

File diff suppressed because one or more lines are too long

2
src/map/template.index.js
View File

File diff suppressed because one or more lines are too long

118
src/rawComponents/element/button.vue
View File

@ -1,72 +1,72 @@
<template lc_id="31lOXuZFW0">
<div lc_id="Sqe/e9T+dn">
<div lc_id="pzMg3o1GpZ">
<div class="demonstration-element" lc_id="CSFGeU2yIh">Button 默认按钮</div>
<el-button lc-mark lc_id="It6s7MEKEj">默认按钮</el-button>
<el-button lc-mark type="primary" lc_id="gySZODvPq4">主要按钮</el-button>
<el-button lc-mark type="success" lc_id="C8H4RxH9J4">成功按钮</el-button>
<el-button lc-mark type="info" lc_id="hyRMogHx7g">信息按钮</el-button>
<el-button lc-mark type="warning" lc_id="+1ZoY42NKV">警告按钮</el-button>
<el-button lc-mark type="danger" lc_id="//OdfFfDNy">危险按钮</el-button>
<template lc_id="h951btrjIz">
<div lc_id="Wys3+gAG6o">
<div lc_id="xz+q4JsE0H">
<div class="demonstration-element" lc_id="QOAgJcuNgl">Button 默认按钮</div>
<el-button lc-mark lc_id="CsCNd5VsAG">默认按钮</el-button>
<el-button lc-mark type="primary" lc_id="86aZgUKBRW">主要按钮</el-button>
<el-button lc-mark type="success" lc_id="i9rRR1vGUu">成功按钮</el-button>
<el-button lc-mark type="info" lc_id="KNdblHt7v/">信息按钮</el-button>
<el-button lc-mark type="warning" lc_id="6xzwRUzCpX">警告按钮</el-button>
<el-button lc-mark type="danger" lc_id="n/gRbf1hnb">危险按钮</el-button>
</div>
<div lc_id="dXKZZTSE6f">
<div class="demonstration-element" lc_id="AEqE9Y2JJx">Button 朴素按钮</div>
<el-button lc-mark plain lc_id="xpIy9dyoLu">朴素按钮</el-button>
<el-button lc-mark type="primary" plain lc_id="uuXSeas9Rn">主要按钮</el-button>
<el-button lc-mark type="success" plain lc_id="yT/mnDTNZC">成功按钮</el-button>
<el-button lc-mark type="info" plain lc_id="MkQKv/edLT">信息按钮</el-button>
<el-button lc-mark type="warning" plain lc_id="1nay6UmyQn">警告按钮</el-button>
<el-button lc-mark type="danger" plain lc_id="4dXLsK63dR">危险按钮</el-button>
<div lc_id="aS+4+fs63u">
<div class="demonstration-element" lc_id="eZqzsVXDsz">Button 朴素按钮</div>
<el-button lc-mark plain lc_id="BC7OoDacJj">朴素按钮</el-button>
<el-button lc-mark type="primary" plain lc_id="bWC9CeWjjY">主要按钮</el-button>
<el-button lc-mark type="success" plain lc_id="sVBJspZDuU">成功按钮</el-button>
<el-button lc-mark type="info" plain lc_id="YUbh6jGrjF">信息按钮</el-button>
<el-button lc-mark type="warning" plain lc_id="LOykTx4Sf0">警告按钮</el-button>
<el-button lc-mark type="danger" plain lc_id="0hBjU/hwbY">危险按钮</el-button>
</div>
<div lc_id="BrDirV0DiW">
<div class="demonstration-element" lc_id="Ibx7/Oljm1">Button 圆角按钮</div>
<el-button lc-mark round lc_id="vnhZCSYTKi">圆角按钮</el-button>
<el-button lc-mark type="primary" round lc_id="4G/Xt4oA/W">主要按钮</el-button>
<el-button lc-mark type="success" round lc_id="21dRU+4EP6">成功按钮</el-button>
<el-button lc-mark type="info" round lc_id="t/e3BMImqQ">信息按钮</el-button>
<el-button lc-mark type="warning" round lc_id="jkBcMy35Fs">警告按钮</el-button>
<el-button lc-mark type="danger" round lc_id="NbMTA5OJFM">危险按钮</el-button>
<div lc_id="TIyAo1YWH2">
<div class="demonstration-element" lc_id="ci4hr/TXbi">Button 圆角按钮</div>
<el-button lc-mark round lc_id="JGOxzRnIcl">圆角按钮</el-button>
<el-button lc-mark type="primary" round lc_id="GOolXgPQ8i">主要按钮</el-button>
<el-button lc-mark type="success" round lc_id="QpK7RbxSP1">成功按钮</el-button>
<el-button lc-mark type="info" round lc_id="rPNRcyrUBY">信息按钮</el-button>
<el-button lc-mark type="warning" round lc_id="MCBR6sxh+2">警告按钮</el-button>
<el-button lc-mark type="danger" round lc_id="KCAVqthQwo">危险按钮</el-button>
</div>
<div lc_id="W3QyOQzQlk">
<div class="demonstration-element" lc_id="smimycex4t">Button 文字按钮</div>
<el-button lc-mark type="text" lc_id="t0TXebSot2">文字按钮</el-button>
<el-button lc-mark type="text" disabled lc_id="5YRlNpmVjb">文字按钮</el-button>
<div lc_id="RdvVbD8tRt">
<div class="demonstration-element" lc_id="MCe1tz7lec">Button 文字按钮</div>
<el-button lc-mark type="text" lc_id="VzeBeEyMRU">文字按钮</el-button>
<el-button lc-mark type="text" disabled lc_id="gGBAHuLrE2">文字按钮</el-button>
</div>
<div lc_id="80RD4YeUsn">
<div class="demonstration-element" lc_id="5MhACg2EuC">Button 按钮组</div>
<el-button-group lc-mark lc_id="xEZPfVC0Vk">
<el-button type="primary" icon="el-icon-arrow-left" lc_id="SAyGGlazMe">上一页</el-button>
<el-button type="primary" lc_id="xOLpFj/kpi">
下一页 <i class="el-icon-arrow-right el-icon--right" lc_id="SMXHxa2XXa"></i>
<div lc_id="fiJ0b+a2C7">
<div class="demonstration-element" lc_id="NadQOxXAQD">Button 按钮组</div>
<el-button-group lc-mark lc_id="zPylslsF8c">
<el-button type="primary" icon="el-icon-arrow-left" lc_id="YcgENB34wv">上一页</el-button>
<el-button type="primary" lc_id="7ZtWxMoRg5">
下一页 <i class="el-icon-arrow-right el-icon--right" lc_id="nhJ1UtAuzb"></i>
</el-button>
</el-button-group>
<el-button-group lc-mark lc_id="bgUv4uEWun">
<el-button type="primary" icon="el-icon-edit" lc_id="ZZsmy9U270"></el-button>
<el-button type="primary" icon="el-icon-share" lc_id="ufr8jjdziC"></el-button>
<el-button type="primary" icon="el-icon-delete" lc_id="rp+8TRHMji"></el-button>
<el-button-group lc-mark lc_id="8NQc5ZELeT">
<el-button type="primary" icon="el-icon-edit" lc_id="rBWkIADCIC"></el-button>
<el-button type="primary" icon="el-icon-share" lc_id="aZ8b7GZRtx"></el-button>
<el-button type="primary" icon="el-icon-delete" lc_id="6htBQsITGM"></el-button>
</el-button-group>
</div>
<div lc_id="D9dpNStd1t">
<div class="demonstration-element" lc_id="MPmrgZvo8q">Link 文字链接</div>
<el-link lc-mark lc_id="rtsG+iZyEB">默认链接</el-link>
<el-link lc-mark type="primary" lc_id="qk6VNOTl/3">主要链接</el-link>
<el-link lc-mark type="success" lc_id="q91ZwmwpjV">成功链接</el-link>
<el-link lc-mark type="warning" lc_id="EJaR3vy19z">警告链接</el-link>
<el-link lc-mark type="danger" lc_id="2ixn7o9E7E">危险链接</el-link>
<el-link lc-mark type="info" lc_id="FWgv1C2y/2">信息链接</el-link>
<div lc_id="x1oSPpUpOu">
<div class="demonstration-element" lc_id="uVL6JgP+Au">Link 文字链接</div>
<el-link lc-mark lc_id="dsEhJ0nNvP">默认链接</el-link>
<el-link lc-mark type="primary" lc_id="b0ksqSWND7">主要链接</el-link>
<el-link lc-mark type="success" lc_id="n0JFscE5rV">成功链接</el-link>
<el-link lc-mark type="warning" lc_id="xZ3qu7QdEE">警告链接</el-link>
<el-link lc-mark type="danger" lc_id="DxB6pyqUDJ">危险链接</el-link>
<el-link lc-mark type="info" lc_id="oWXSle5p3a">信息链接</el-link>
</div>
<div lc_id="/barCioNfE">
<div class="demonstration-element" lc_id="PLG2KvKH8y">Tag 标签</div>
<el-tag lc-mark lc_id="U/u261/Smt">标签一</el-tag>
<el-tag lc-mark type="success" lc_id="IDATiLqGk9">标签二</el-tag>
<el-tag lc-mark type="info" lc_id="0D0MewaqKv">标签三</el-tag>
<el-tag lc-mark type="warning" lc_id="vAdw0BIcX+">标签四</el-tag>
<el-tag lc-mark type="danger" lc_id="nbAcfgii7o">标签五</el-tag>
<div lc_id="XE215BO7ZG">
<div class="demonstration-element" lc_id="dIss2fOIh1">Tag 标签</div>
<el-tag lc-mark lc_id="srSB/cYw2J">标签一</el-tag>
<el-tag lc-mark type="success" lc_id="LRJZ1ZP4ZH">标签二</el-tag>
<el-tag lc-mark type="info" lc_id="B+b33TM6FV">标签三</el-tag>
<el-tag lc-mark type="warning" lc_id="VRus6unUUj">标签四</el-tag>
<el-tag lc-mark type="danger" lc_id="7MofqTTFPE">标签五</el-tag>
</div>
<div lc_id="saMTK5tD7X">
<div class="demonstration-element" lc_id="BXSBwotgSp">Avatar 头像</div>
<el-avatar lc-mark :size="50" :src="circleUrl" lc_id="T5mj8odU47"></el-avatar>
<el-avatar lc-mark shape="square" :size="50" :src="squareUrl" lc_id="CGR8yckrEF"></el-avatar>
<div lc_id="MWF8TZpYmQ">
<div class="demonstration-element" lc_id="ILdDu9StTB">Avatar 头像</div>
<el-avatar lc-mark :size="50" :src="circleUrl" lc_id="fRttsgKaqk"></el-avatar>
<el-avatar lc-mark shape="square" :size="50" :src="squareUrl" lc_id="m8hK+IsKji"></el-avatar>
</div>
</div>
</template>

124
src/rawComponents/element/container.vue
View File

@ -1,89 +1,89 @@
<template lc_id="XJkKzJ06tv">
<div lc_id="/CF1zqlrKa">
<div lc_id="4DOfKCgatF">
<div class="demonstration-element" lc_id="xweUl0tEeN">Container 布局容器</div>
<el-container lc-mark lc_id="1VXObrdd7N">
<el-header lc_id="QKfTRdpP9t">Header</el-header>
<el-main lc_id="CEww9LuokJ">Main</el-main>
<template lc_id="pF5ZSBfZwR">
<div lc_id="svh5gymRbT">
<div lc_id="aklN6TcgSi">
<div class="demonstration-element" lc_id="H9Bt++Jp23">Container 布局容器</div>
<el-container lc-mark lc_id="skVZmFc8Z0">
<el-header lc_id="ReeksChIDL">Header</el-header>
<el-main lc_id="RhO3CzVON+">Main</el-main>
</el-container>
<el-container lc-mark lc_id="Cepn7MKmdS">
<el-header lc_id="dtyUqSajiv">Header</el-header>
<el-main lc_id="NWEju0XOHJ">Main</el-main>
<el-footer lc_id="1LcIZWBTV/">Footer</el-footer>
<el-container lc-mark lc_id="OiFYUhn3lV">
<el-header lc_id="+FKCmp4cKF">Header</el-header>
<el-main lc_id="YpteesQGLz">Main</el-main>
<el-footer lc_id="KXY8exJPcM">Footer</el-footer>
</el-container>
<el-container lc-mark lc_id="birpu7Uiq1">
<el-aside width="200px" lc_id="1Lf7a0a0ph">Aside</el-aside>
<el-main lc_id="9KptQSz3+u">Main</el-main>
<el-container lc-mark lc_id="wk/2g93ahS">
<el-aside width="200px" lc_id="l9E3pIb+2h">Aside</el-aside>
<el-main lc_id="bBKBRWXDOx">Main</el-main>
</el-container>
<el-container lc-mark lc_id="eaV4iGUz96">
<el-header lc_id="TaCD08NSSP">Header</el-header>
<el-container lc_id="5J+gD0iEvI">
<el-aside width="200px" lc_id="FRRvlM/Cfr">Aside</el-aside>
<el-main lc_id="lcw3QuiEZe">Main</el-main>
<el-container lc-mark lc_id="gbNSQP45GT">
<el-header lc_id="HF1qQoD4PL">Header</el-header>
<el-container lc_id="ASkvJKvxcV">
<el-aside width="200px" lc_id="9KXTLE0CeH">Aside</el-aside>
<el-main lc_id="7daXKj/Gvs">Main</el-main>
</el-container>
</el-container>
<el-container lc-mark lc_id="PLqrqKhgA7">
<el-header lc_id="tmHiJevIsa">Header</el-header>
<el-container lc_id="qS1KC1cfri">
<el-aside width="200px" lc_id="CzDDLIlPIB">Aside</el-aside>
<el-container lc_id="fSXNZUdZ/f">
<el-main lc_id="wc1jD3bDoT">Main</el-main>
<el-footer lc_id="SjJpHf6a7g">Footer</el-footer>
<el-container lc-mark lc_id="36KOMxGIdH">
<el-header lc_id="Sw6GvGV0eS">Header</el-header>
<el-container lc_id="GHVYjFrX+h">
<el-aside width="200px" lc_id="uw9FF7J6aL">Aside</el-aside>
<el-container lc_id="KvwMo2IxFx">
<el-main lc_id="Fk+eYCCPV2">Main</el-main>
<el-footer lc_id="dUWCQrWVeT">Footer</el-footer>
</el-container>
</el-container>
</el-container>
<el-container lc-mark lc_id="ycgi9Z8Kny">
<el-aside width="200px" lc_id="r/EjWyjczJ">Aside</el-aside>
<el-container lc_id="NqJ8JL820i">
<el-header lc_id="XxixXzG8a2">Header</el-header>
<el-main lc_id="s39II6LC/4">Main</el-main>
<el-container lc-mark lc_id="tL2ICEso4A">
<el-aside width="200px" lc_id="csjsUzA+9Y">Aside</el-aside>
<el-container lc_id="iZYbDNFziC">
<el-header lc_id="vpuQLdTE6A">Header</el-header>
<el-main lc_id="mgPG8ueRqA">Main</el-main>
</el-container>
</el-container>
<el-container lc-mark lc_id="JYPHz0bZMF">
<el-aside width="200px" lc_id="qRJK56Q74V">Aside</el-aside>
<el-container lc_id="c3KN/J7Yi2">
<el-header lc_id="GDfxqJ0R3d">Header</el-header>
<el-main lc_id="Zx/63VU8p0">Main</el-main>
<el-footer lc_id="BLY1vTH5li">Footer</el-footer>
<el-container lc-mark lc_id="SycDYJbUh8">
<el-aside width="200px" lc_id="eCOdbsua/g">Aside</el-aside>
<el-container lc_id="RUKLeBxhhi">
<el-header lc_id="82WGwD/cl3">Header</el-header>
<el-main lc_id="CtffCo/8Cy">Main</el-main>
<el-footer lc_id="g0Jcmm2r+P">Footer</el-footer>
</el-container>
</el-container>
</div>
<div lc_id="fFXoD13StH">
<div class="demonstration-element" lc_id="qzSnnCsiiY">Skeleton 骨架屏</div>
<el-skeleton lc-mark :rows="6" animated lc_id="pMz9OoTtuO"></el-skeleton>
<div lc_id="Lg787FEsDw">
<div class="demonstration-element" lc_id="jlEgJZCE+i">Skeleton 骨架屏</div>
<el-skeleton lc-mark :rows="6" animated lc_id="4O9hfMet5s"></el-skeleton>
</div>
<div lc_id="/+eytuLsMO">
<div class="demonstration-element" lc_id="q2Xgt807d0">Empty 空状态</div>
<el-empty lc-mark description="描述文字" lc_id="GhNJigV87p"></el-empty>
<div lc_id="D3MK6Iq3TG">
<div class="demonstration-element" lc_id="D6xQ5qpO4B">Empty 空状态</div>
<el-empty lc-mark description="描述文字" lc_id="sFeXbcNwIE"></el-empty>
</div>
<div lc_id="pR02CCkeLy">
<div class="demonstration-element" lc_id="CrH218ZZHh">Result 结果</div>
<el-row lc_id="B0lJgeMQgq">
<el-col :sm="12" :lg="6" lc_id="aj5rgx9gtC">
<el-result icon="success" lc-mark title="成功提示" subtitle="请根据提示进行操作" lc_id="TkxmLNdH1k">
<template #extra lc_id="eKy+B81uWz">
<el-button type="primary" size="medium" lc_id="mjvsUigHYK">返回</el-button>
<div lc_id="tpbaaOn5XS">
<div class="demonstration-element" lc_id="6Mnu6i7QPx">Result 结果</div>
<el-row lc_id="FMdEXTrYSx">
<el-col :sm="12" :lg="6" lc_id="deKtOM/g2K">
<el-result icon="success" lc-mark title="成功提示" subtitle="请根据提示进行操作" lc_id="iF6n6EUcmn">
<template #extra lc_id="iJQp/8XeSP">
<el-button type="primary" size="medium" lc_id="UCFmR9EP+q">返回</el-button>
</template>
</el-result>
</el-col>
<el-col :sm="12" :lg="6" lc_id="t8NFAo4Rh9">
<el-result icon="warning" lc-mark title="警告提示" subtitle="请根据提示进行操作" lc_id="H66rtRO+l7">
<template #extra lc_id="NZlnnaHVpe">
<el-button type="primary" size="medium" lc_id="8+A/PdJlL/">返回</el-button>
<el-col :sm="12" :lg="6" lc_id="1smWMRRuZr">
<el-result icon="warning" lc-mark title="警告提示" subtitle="请根据提示进行操作" lc_id="NIEZCy3gG0">
<template #extra lc_id="c6Unj7eQIv">
<el-button type="primary" size="medium" lc_id="MDEtfbmEZd">返回</el-button>
</template>
</el-result>
</el-col>
<el-col :sm="12" :lg="6" lc_id="UqNiIqJz/1">
<el-result icon="error" lc-mark title="错误提示" subtitle="请根据提示进行操作" lc_id="g7rPSUMWcM">
<template #extra lc_id="04xPYOz/ON">
<el-button type="primary" size="medium" lc_id="7MAezDvKx5">返回</el-button>
<el-col :sm="12" :lg="6" lc_id="2zio5J9ljq">
<el-result icon="error" lc-mark title="错误提示" subtitle="请根据提示进行操作" lc_id="kLASzKidTD">
<template #extra lc_id="rnIhJqKRjQ">
<el-button type="primary" size="medium" lc_id="MhrCBFBHlN">返回</el-button>
</template>
</el-result>
</el-col>
<el-col :sm="12" :lg="6" lc_id="+ix6hlAfDe">
<el-result icon="info" lc-mark title="信息提示" subtitle="请根据提示进行操作" lc_id="/vmCqxMpho">
<template #extra lc_id="b1LfBHu9OM">
<el-button type="primary" size="medium" lc_id="ke499n5dzw">返回</el-button>
<el-col :sm="12" :lg="6" lc_id="h7xNXozZ0s">
<el-result icon="info" lc-mark title="信息提示" subtitle="请根据提示进行操作" lc_id="aDXqAjXsST">
<template #extra lc_id="nHgp3LGSea">
<el-button type="primary" size="medium" lc_id="VURe3Zlhq0">返回</el-button>
</template>
</el-result>
</el-col>

22
src/rawComponents/element/dialog.vue
View File

@ -1,14 +1,14 @@
<template lc_id="BQq7/HDDE/">
<div lc_id="YUxWjuPyzo">
<div lc_id="G+CBCq3DYP">
<div class="demonstration-element" lc_id="tr6tZHyaax" @click="dialogVisible = true">Dialog 对话框</div>
<div lc-mark lc_id="KqRoagSJYH">
<el-button type="text" lc_id="IbBWKHUvQx">直接拖我看结果</el-button>
<el-dialog title="提示" v-model="dialogVisible" width="30%" :before-close="handleClose" lc_id="kl38EP183o">
<span lc_id="o7tyPWHtXQ">这是一段信息</span>
<span footer class="dialog-footer" lc_id="4xYQZAAk6B">
<el-button @click="dialogVisible = false" lc_id="nlc9K6Rhcp">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false" lc_id="mgZZJ553WQ">确 定</el-button>
<template lc_id="4TgPahC6u5">
<div lc_id="vxLzr2xqjb">
<div lc_id="tWzGb0zt3I">
<div class="demonstration-element" @click="dialogVisible = true" lc_id="cjFRJjmxCw">Dialog 对话框</div>
<div lc-mark lc_id="dIDt4KsNEb">
<el-button type="text" lc_id="cmG1+fI232">直接拖我看结果</el-button>
<el-dialog title="提示" v-model="dialogVisible" width="30%" :before-close="handleClose" lc_id="W4ORswcE/n">
<span lc_id="8Sb2dnGlHq">这是一段信息</span>
<span footer class="dialog-footer" lc_id="To3nLHp/kA">
<el-button @click="dialogVisible = false" lc_id="gd7Fps6eIs">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false" lc_id="fXoFbUbf9l">确 定</el-button>
</span>
</el-dialog>
</div>

68
src/rawComponents/element/final.vue
View File

@ -1,52 +1,52 @@
<template lc_id="T4QTBulnfw">
<div lc_id="51vNFGmvh3">
<div lc_id="65mfinsz9a">
<div class="demonstration-element" lc_id="trHvmrS793">Drawer 抽屉</div>
<div lc-mark lc_id="GT58r4P5Wk">
<el-radio-group v-model="direction" lc_id="A9TjD47V/m">
<el-radio label="ltr" lc_id="3JnIViDWTD">从左往右开</el-radio>
<el-radio label="rtl" lc_id="//V9WuHsrh">从右往左开</el-radio>
<el-radio label="ttb" lc_id="QiPEQRv+sx">从上往下开</el-radio>
<el-radio label="btt" lc_id="iP/9XjMVBe">从下往上开</el-radio>
<template lc_id="tcjDDP7Fub">
<div lc_id="qEWQVtO4HV">
<div lc_id="ryB2czrr/o">
<div class="demonstration-element" lc_id="1XMeUcBuC6">Drawer 抽屉</div>
<div lc-mark lc_id="iopQBcTsL/">
<el-radio-group v-model="direction" lc_id="oBXOGHBjIr">
<el-radio label="ltr" lc_id="sOtBkShpnA">从左往右开</el-radio>
<el-radio label="rtl" lc_id="npclPhSAAr">从右往左开</el-radio>
<el-radio label="ttb" lc_id="r21dYPRqlH">从上往下开</el-radio>
<el-radio label="btt" lc_id="eNbrmYhimD">从下往上开</el-radio>
</el-radio-group>
<el-button @click="drawer = true" type="primary" style="margin-left: 16px;" disabled lc_id="hrOAKkng+k">点我打开</el-button>
<el-drawer title="我是标题" v-model="drawer" :direction="direction" :before-close="handleDrawerClose" lc_id="rXvMMLyeYl">
<span lc_id="mc44ZyLRo7">我来啦!</span>
<el-button @click="drawer = true" type="primary" style="margin-left: 16px;" disabled lc_id="LKDidefo88">点我打开</el-button>
<el-drawer title="我是标题" v-model="drawer" :direction="direction" :before-close="handleDrawerClose" lc_id="QMf8/82LI6">
<span lc_id="wtfxsNwyPw">我来啦!</span>
</el-drawer>
</div>
</div>
<div lc_id="YR/wK0bfUo">
<div class="demonstration-element" lc_id="E3WQ46Qh+3">Popconfirm 气泡确认框</div>
<div lc-mark lc_id="BV2HA7n4nF">
<el-popconfirm title="这是一段内容确定删除吗？" lc_id="7E1QCXlcDx">
<template #reference>
<el-button lc_id="L3NACLWO2F">删除</el-button>
<div lc_id="VsANkPibgZ">
<div class="demonstration-element" lc_id="61ILio7Yfy">Popconfirm 气泡确认框</div>
<div lc-mark lc_id="tipD3v4v0E">
<el-popconfirm title="这是一段内容确定删除吗？" lc_id="8wIQQ5fsm0">
<template #reference lc_id="VRks4FGAp4">
<el-button lc_id="UfoVVwFlH8">删除</el-button>
</template>
</el-popconfirm>
</div>
</div>
<div lc_id="N4IfEZ7Epi">
<div class="demonstration-element" lc_id="IKCjwiwx+W">Popover 弹出框</div>
<div lc-mark lc_id="HNyqxKw9lC">
<el-popover placement="bottom" title="标题" width="200" trigger="click" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。" lc_id="hZL/Yh0bMe">
<template #reference>
<el-button lc_id="1pN5tai2mM">click 激活</el-button>
<div lc_id="wLPA+POQar">
<div class="demonstration-element" lc_id="ViuBm3mn/O">Popover 弹出框</div>
<div lc-mark lc_id="tk2qy+nwU2">
<el-popover placement="bottom" title="标题" width="200" trigger="click" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。" lc_id="E3FQnEvqcg">
<template #reference lc_id="w1CDln4qFc">
<el-button lc_id="fuAYnHW69Y">click 激活</el-button>
</template>
</el-popover>
</div>
</div>
<div lc_id="/Cu2Xq/CwH">
<div class="demonstration-element" lc_id="HgnHrhiDVx">Tooltip 文字提示</div>
<div lc-mark lc_id="Zucoe7eh64">
<el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start" lc_id="wk1LWx4f2K">
<el-button lc_id="njQ+Vlz5uK">上左</el-button>
<div lc_id="0PvfhG+ZYr">
<div class="demonstration-element" lc_id="4K55zxXUgL">Tooltip 文字提示</div>
<div lc-mark lc_id="hxejw7uzbB">
<el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start" lc_id="XXoofblsAn">
<el-button lc_id="C27qPtyTjp">上左</el-button>
</el-tooltip>
</div>
</div>
<div lc_id="EkQH0AzvZs">
<div class="demonstration-element" lc_id="qV+/Ma51v8">Transfer 穿梭框</div>
<div lc-mark lc_id="mNxdbVDp7U">
<el-transfer v-model="transferValue" :data="transferData" lc_id="8RAvvEZGCO"></el-transfer>
<div lc_id="kDLIM+qGMq">
<div class="demonstration-element" lc_id="9LXwSf1r1p">Transfer 穿梭框</div>
<div lc-mark lc_id="Mfn7m1Nz4k">
<el-transfer v-model="transferValue" :data="transferData" lc_id="FIK2q2sQGP"></el-transfer>
</div>
</div>
</div>

225
src/rawComponents/element/form-base.vue
View File

@ -1,122 +1,107 @@
<template lc_id="1FrH/bXxoo">
<div lc_id="jhcqX3j75w">
<div lc_id="Tu4in0CaIW">
<div class="demonstration-element" lc_id="oxVsd4rXLl">Radio 单选框</div>
<el-radio-group v-model="radio" lc-mark lc_id="0vrFpPvU4H">
<el-radio :label="3" lc_id="7sB/IHgMEP">备选项</el-radio>
<el-radio :label="6" lc_id="iUKVuE/8U4">备选项</el-radio>
<el-radio :label="9" lc-mark lc_id="YKnWJ/dyc+">备选项</el-radio>
</el-radio-group>
</div>
<div lc_id="XIuuMTW+0j">
<div class="demonstration-element" lc_id="UJkx2Yas25">Checkbox 多选框</div>
<el-checkbox-group lc-mark v-model="checkList" lc_id="5Ej1enwgPV">
<el-checkbox label="复选框 A" lc_id="UjSwDuUvwN"></el-checkbox>
<el-checkbox label="复选框 B" lc_id="Lh5ruzddpf"></el-checkbox>
<el-checkbox lc-mark label="复选框 C" lc_id="9I+2SXunYS"></el-checkbox>
</el-checkbox-group>
</div>
<div lc_id="t5nTZdVOYh">
<el-input v-model="input" placeholder="请输入内容" lc-mark lc_id="oQTDIZ45WD"></el-input>
<el-input type="textarea" lc-mark :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="textarea2"
lc_id="0Lb1i+lJ+e"></el-input>
</div>
<div lc_id="5XvABKZyMr">
<div class="demonstration-element" lc_id="P4RAkEgdAX">InputNumber 计数器</div>
<div style="display:inline-block;width:200px;" lc-mark lc_id="33vSscOdJg">
<el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字" lc_id="ok2OSKYUlS">
</el-input-number>
</div>
<div style="display:inline-block;width:200px;" lc-mark lc_id="kZfDuqPsUe">
<el-input-number v-model="num" controls-position="right" @change="handleChange" :min="1" :max="10"
lc_id="ZLZ2cuIsQX"></el-input-number>
</div>
</div>
<div lc_id="zexMdT18+i">
<div class="demonstration-element" lc_id="RUghSMgJOW">Select 选择器</div>
<el-select v-model="value" lc-mark placeholder="请选择" lc_id="H9t9iMrAPl">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" lc_id="GF42PHtHg8">
</el-option>
</el-select>
</div>
<div lc_id="V4l/IYxRw8">
<div class="demonstration-element" lc_id="ASIXtb8VYa">Cascader 级联选择器</div>
<el-cascader lc-mark v-model="value2" :options="options2" @change="handleChange" lc_id="pPI4GNJgyK"></el-cascader>
</div>
<div lc_id="nP4qIv2zGf">
<div class="demonstration-element" lc_id="CLnpHQZ3Cb">Switch 开关</div>
<el-switch lc-mark v-model="value3" active-text="按月付费" inactive-text="按年付费" lc_id="QS2PN4VAu6"></el-switch>
</div>
<div lc_id="+X3HFNOUDN">
<div class="demonstration-element" lc_id="duxYsm2Bqk">Slider 滑块</div>
<el-slider lc-mark v-model="value4" lc_id="pZrnjv27e0"></el-slider>
</div>
<div lc_id="0CqPUH7Loi">
<div class="demonstration-element" lc_id="Kn94f+Qtq6">TimePicker 时间选择器</div>
<el-time-select v-model="value5" lc-mark :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }"
placeholder="选择时间" lc_id="ocidZ8kNvi"></el-time-select>
<el-time-picker lc-mark is-range v-model="value1" range-separator="至" start-placeholder="开始时间"
end-placeholder="结束时间" placeholder="选择时间范围" lc_id="ul4df4BXqL"></el-time-picker>
</div>
<div lc_id="vIkUj/Mdx4">
<div class="demonstration-element" lc_id="9BXiYtOw1H">DatePicker 日期选择器</div>
<el-date-picker v-model="value6" lc-mark type="date" placeholder="选择日期" lc_id="aF5L+DvW8P"></el-date-picker>
<el-date-picker v-model="dateValue1" lc-mark type="daterange" range-separator="至" start-placeholder="开始日期"
end-placeholder="结束日期" lc_id="KsspMcw+vf"></el-date-picker>
</div>
<div lc_id="z/NsnEmneM">
<div class="demonstration-element" lc_id="31TQ4nvcpw">Upload 上传</div>
<div lc_id="XTNxQoBU4c">
<el-upload action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview"
:on-remove="handleRemove" :before-remove="beforeRemove" multiple lc-mark :limit="3" :on-exceed="handleExceed"
:file-list="fileList" lc_id="koVshztGXe">
<el-button size="small" type="primary" lc_id="8K/MngdcDq">点击上传</el-button>
<template #tip>
<div class="el-upload__tip" lc_id="JhGGSZvOOw">只能上传jpg/png文件，且不超过500kb</div>
</template>
</el-upload>
</div>
<div lc-mark style="max-width:400px;font-size:12px;" lc_id="uVTyfuZHcZ">
用户头像上传: <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
:show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"
lc_id="ggkspVsxtO">
<img v-if="imageUrl" :src="imageUrl" class="avatar" lc_id="Xq6mKxhmD2" /> <i v-else
class="el-icon-plus avatar-uploader-icon" lc_id="yMQJeTHV0Q"></i>
</el-upload>
</div>
<div lc-mark style="max-width:400px;font-size:12px;" lc_id="oLOYzhC3OV">
图片列表缩略图: <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" list-type="picture"
lc_id="q2XrT8yeX0">
<el-button size="small" type="primary" lc_id="5u/ST0LLg3">点击上传</el-button>
<template #tip>
<div class="el-upload__tip" lc_id="jtqWimxhcH">只能上传jpg/png文件，且不超过500kb</div>
</template>
</el-upload>
</div>
<div lc_id="+p5NODNW9x">
<el-upload class="upload-demo" lc-mark drag action="https://jsonplaceholder.typicode.com/posts/" multiple
lc_id="xBGaLT6/i0">
<i class="el-icon-upload" lc_id="IYJxHubhoK"></i>
<div class="el-upload__text" lc_id="XlmNpvTMq9">
将文件拖到此处，或 <em lc_id="F1wzfewKQd">点击上传</em>
<template lc_id="6qRH3lc1dt">
<div lc_id="nqlS2COw0N">
<div lc_id="D9kF2S4UlD">
<div class="demonstration-element" lc_id="DH8WXyx5Hd">Radio 单选框</div>
<el-radio-group v-model="radio" lc-mark lc_id="f0v5GqbM8W">
<el-radio :label="3" lc_id="iS/l/lS7uE">备选项</el-radio>
<el-radio :label="6" lc_id="PwMXXlWapK">备选项</el-radio>
<el-radio :label="9" lc-mark lc_id="kgp2vfR6ti">备选项</el-radio>
</el-radio-group>
</div>
<div lc_id="wwgDyr1OR2">
<div class="demonstration-element" lc_id="6KW/uZOTEM">Checkbox 多选框</div>
<el-checkbox-group lc-mark v-model="checkList" lc_id="Uen92zl/6G">
<el-checkbox label="复选框 A" lc_id="FgCPjGEWNa"></el-checkbox>
<el-checkbox label="复选框 B" lc_id="FAGQbE5NjH"></el-checkbox>
<el-checkbox lc-mark label="复选框 C" lc_id="vp/RVl8A/3"></el-checkbox>
</el-checkbox-group>
</div>
<div lc_id="VEDRtauvNm">
<el-input v-model="input" placeholder="请输入内容" lc-mark lc_id="ffFxjUysQl"></el-input>
<el-input type="textarea" lc-mark :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="textarea2" lc_id="l7XPAnIanl"></el-input>
</div>
<div lc_id="4JbZ+JNrQw">
<div class="demonstration-element" lc_id="qBSKct8boj">InputNumber 计数器</div>
<div style="display:inline-block;width:200px;" lc-mark lc_id="xBXsSYROtm">
<el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字" lc_id="6UG1vTaWBN"></el-input-number>
</div>
<div style="display:inline-block;width:200px;" lc-mark lc_id="ma8NcOpTT7">
<el-input-number v-model="num" controls-position="right" @change="handleChange" :min="1" :max="10" lc_id="UBHeHrcbVw"></el-input-number>
</div>
</div>
<div lc_id="cug4WVKxu9">
<div class="demonstration-element" lc_id="BkPeGYgetZ">Select 选择器</div>
<el-select v-model="value" lc-mark placeholder="请选择" lc_id="qB59tUf6Gc">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" lc_id="whLrgIdezr"></el-option>
</el-select>
</div>
<div lc_id="nDNR0MoKZA">
<div class="demonstration-element" lc_id="p4yqbL8QdC">Cascader 级联选择器</div>
<el-cascader lc-mark v-model="value2" :options="options2" @change="handleChange" lc_id="nMEiBnay+d"></el-cascader>
</div>
<div lc_id="H/A6J6KXiY">
<div class="demonstration-element" lc_id="1ly5rIkWVS">Switch 开关</div>
<el-switch lc-mark v-model="value3" active-text="按月付费" inactive-text="按年付费" lc_id="xKdVt8uBzg"></el-switch>
</div>
<div lc_id="PnI1SUBtFH">
<div class="demonstration-element" lc_id="xEukfWny/6">Slider 滑块</div>
<el-slider lc-mark v-model="value4" lc_id="6y/Uiwq0ZN"></el-slider>
</div>
<div lc_id="5dyMzD3j06">
<div class="demonstration-element" lc_id="ERiurnsreT">TimePicker 时间选择器</div>
<el-time-select v-model="value5" lc-mark :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }" placeholder="选择时间" lc_id="Sz3vn5DAbX"></el-time-select>
<el-time-picker lc-mark is-range v-model="value1" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围" lc_id="o2nM93CmIm"></el-time-picker>
</div>
<div lc_id="xWW1lIgrLe">
<div class="demonstration-element" lc_id="Sm6zFTno79">DatePicker 日期选择器</div>
<el-date-picker v-model="value6" lc-mark type="date" placeholder="选择日期" lc_id="5S5Yzx2fXs"></el-date-picker>
<el-date-picker v-model="dateValue1" lc-mark type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" lc_id="3D+CY23B2Q"></el-date-picker>
</div>
<div lc_id="SFEe1Ua3f3">
<div class="demonstration-element" lc_id="EDwU3s0SZ6">Upload 上传</div>
<div lc_id="Cco/MVefy1">
<el-upload action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple lc-mark :limit="3" :on-exceed="handleExceed" :file-list="fileList" lc_id="7frE/pSrYE">
<el-button size="small" type="primary" lc_id="c/5KHeT+LU">点击上传</el-button>
<template #tip lc_id="cEzrM0eEXc">
<div class="el-upload__tip" lc_id="Vh2iLMvT2c">只能上传jpg/png文件，且不超过500kb</div>
</template>
</el-upload>
</div>
<div lc-mark style="max-width:400px;font-size:12px;" lc_id="KzLuue+H7z">
用户头像上传: <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" lc_id="1eXpUahgcu">
<img v-if="imageUrl" :src="imageUrl" class="avatar" lc_id="6Ax8qNsE2Z"/> <i v-else class="el-icon-plus avatar-uploader-icon" lc_id="lqybUMnnYf"></i>
</el-upload>
</div>
<div lc-mark style="max-width:400px;font-size:12px;" lc_id="NwHRrU2JEM">
图片列表缩略图: <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" list-type="picture" lc_id="+hJ7DSkPgT">
<el-button size="small" type="primary" lc_id="y3uZKsl9b/">点击上传</el-button>
<template #tip lc_id="0JB5ZbGk3I">
<div class="el-upload__tip" lc_id="esyAhLLNGI">只能上传jpg/png文件，且不超过500kb</div>
</template>
</el-upload>
</div>
<div lc_id="g/E9ZNwP9E">
<el-upload class="upload-demo" lc-mark drag action="https://jsonplaceholder.typicode.com/posts/" multiple lc_id="ADzwW/1hsX">
<i class="el-icon-upload" lc_id="FsQAFizcWf"></i>
<div class="el-upload__text" lc_id="CCys4DMWDP">
将文件拖到此处，或 <em lc_id="TbbfPE9Hu+">点击上传</em>
</div>
<template #tip lc_id="K65M529P0Z">
<div class="el-upload__tip" lc_id="4GA0T+3HDL">只能上传jpg/png文件，且不超过500kb</div>
</template>
</el-upload>
</div>
</div>
<div lc_id="X/f9Q6XT+l">
<div class="demonstration-element" lc_id="7NKyW9NxNM">Rate 评分</div>
<el-rate v-model="value7" lc-mark show-text lc_id="gWm2+ckHWm"></el-rate>
</div>
<div lc_id="unZHE/lFYS">
<div class="demonstration-element" lc_id="9gDxl8XOEm">ColorPicker 颜色选择器</div>
<el-color-picker lc-mark v-model="color1" lc_id="V+9zRMsjFK"></el-color-picker>
</div>
<template #tip>
<div class="el-upload__tip" lc_id="kLNHsmuBIJ">只能上传jpg/png文件，且不超过500kb</div>
</template>
</el-upload>
</div>
</div>
<div lc_id="rmSgFvvDvt">
<div class="demonstration-element" lc_id="h5uo8CrShR">Rate 评分</div>
<el-rate v-model="value7" lc-mark show-text lc_id="UK81nB7671"></el-rate>
</div>
<div lc_id="G7LuObrLMZ">
<div class="demonstration-element" lc_id="HeOPHNf8Ew">ColorPicker 颜色选择器</div>
<el-color-picker lc-mark v-model="color1" lc_id="1pcEEM5BsF"></el-color-picker>
</div>
</div>
</template>
</template>
<script>
export default {
data() {
@ -472,8 +457,7 @@ export default {
},
},
}; </script>
<style scoped>
.avatar-uploader :v-deep(.el-upload) {
<style scoped>.avatar-uploader :v-deep(.el-upload) {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
@ -496,5 +480,4 @@ export default {
width: 178px;
height: 178px;
display: block;
}
</style>
}</style>

160
src/rawComponents/element/form.vue
View File

@ -1,116 +1,116 @@
<template lc_id="dONI+eltfy">
<div lc_id="pYW7lbQNBm">
<div lc_id="Q9ouPvVCDr">
<div class="demonstration-element" lc_id="QS2gym2BZJ">Form 行内表单</div>
<el-form inline lc-mark :model="formInline" class="demo-form-inline" lc_id="WsfIP160bw">
<el-form-item label="审批人" lc_id="nwnVQASGS0" lc-mark>
<el-input v-model="formInline.user" placeholder="审批人" lc_id="fyTWqa6xR3"></el-input>
<template lc_id="03KSNQZ/MV">
<div lc_id="JoW6e9bEi+">
<div lc_id="VGGG5BzJK+">
<div class="demonstration-element" lc_id="LgRs8iauTY">Form 行内表单</div>
<el-form inline lc-mark :model="formInline" class="demo-form-inline" lc_id="1WJLzNIqg/">
<el-form-item label="审批人" lc-mark lc_id="9iLdD7vRhd">
<el-input v-model="formInline.user" placeholder="审批人" lc_id="2N8NbmX1qy"></el-input>
</el-form-item>
<el-form-item label="活动区域" lc_id="eofsdbRMjx" lc-mark>
<el-select v-model="formInline.region" placeholder="活动区域" lc_id="+2rUZ3W3aC">
<el-option label="区域一" value="shanghai" lc_id="IHvRkwasBm"></el-option>
<el-option label="区域二" value="beijing" lc_id="TR+GgYcJ6L"></el-option>
<el-form-item label="活动区域" lc-mark lc_id="cuShpTy+7P">
<el-select v-model="formInline.region" placeholder="活动区域" lc_id="fblnBhXD33">
<el-option label="区域一" value="shanghai" lc_id="xEcFlTO5pD"></el-option>
<el-option label="区域二" value="beijing" lc_id="PjVhPT7HZa"></el-option>
</el-select>
</el-form-item>
</el-form>
</div>
<div lc_id="RDjCjjhD6t">
<div class="demonstration-element" lc_id="rfAmqnOfPE">Form 表单</div>
<span lc-mark lc_id="RAHdW2D6Om">
<span lc_id="c4he125BD/">Key:</span>
<span lc_id="XQkdV8NCZs">Value</span>
<div lc_id="tY5UywhfnK">
<div class="demonstration-element" lc_id="Efto0Pndua">Form 表单</div>
<span lc-mark lc_id="hqHTBq8YqG">
<span lc_id="EF8c2VPZRA">Key:</span>
<span lc_id="lWbqzj2kHH">Value</span>
</span>
<span lc-mark lc_id="7aLYLrp+/S">
<b lc_id="rO/kiINZrQ">Key:</b>
<span lc_id="6hy1WShna9">Value</span>
<span lc-mark lc_id="cjIUIdSSsS">
<b lc_id="ADps8bfr5O">Key:</b>
<span lc_id="beSG8unZWU">Value</span>
</span>
<span lc-mark lc_id="PJogpEwg0Q">
<b lc_id="BVD6vZZXln">Key:</b>
<div lc_id="9PkvdAl5Pg" label-lc-mark></div>
<span lc-mark lc_id="y29nZqQNoJ">
<b lc_id="N9wWIaXqzx">Key:</b>
<div label-lc-mark lc_id="/ZBycQe5p/"></div>
</span>
</div>
<div lc_id="mL5ltGQ2+1">
<div class="demonstration-element" lc_id="2ckgf6ruBF">Form 容器</div>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" lc-mark label-width="100px" class="demo-border" lc_id="gUzm9BtYBr"></el-form>
<div lc_id="PzuXdsu6kd">
<div class="demonstration-element" lc_id="LdGjb6Df9M">Form 容器</div>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" lc-mark label-width="100px" class="demo-border" lc_id="Zzz06+mzkO"></el-form>
</div>
<div lc_id="4tNJzbfZpl">
<div class="demonstration-element" lc_id="q2A/v0bGPa">Form 典型表单</div>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" lc-mark label-width="100px" class="demo-border" lc_id="+J7wuw2kfG">
<el-form-item label="活动名称" prop="name" lc_id="8zJ3QynhGf" lc-mark>
<el-input v-model="ruleForm.name" lc_id="+0z/Usri5w"></el-input>
<div lc_id="8ZewsTbRuD">
<div class="demonstration-element" lc_id="cX5zh7f+RV">Form 典型表单</div>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" lc-mark label-width="100px" class="demo-border" lc_id="gx5EBJU9WS">
<el-form-item label="活动名称" prop="name" lc-mark lc_id="6md1kDs8qa">
<el-input v-model="ruleForm.name" lc_id="QG5eYYTCSB"></el-input>
</el-form-item>
<el-form-item label="活动区域" prop="region" lc_id="BQknWoGJD1" lc-mark>
<el-select v-model="ruleForm.region" placeholder="请选择活动区域" lc_id="BsYEO5rf2i">
<el-option label="区域一" value="shanghai" lc_id="WZgkAhC9vv"></el-option>
<el-option label="区域二" value="beijing" lc_id="q96ygTFk/B"></el-option>
<el-form-item label="活动区域" prop="region" lc-mark lc_id="tnJTgI76Kp">
<el-select v-model="ruleForm.region" placeholder="请选择活动区域" lc_id="nrTlsTbxPM">
<el-option label="区域一" value="shanghai" lc_id="mXsEEs0/z0"></el-option>
<el-option label="区域二" value="beijing" lc_id="2GzfZP1Cbx"></el-option>
</el-select>
</el-form-item>
<el-form-item label="活动时间" required lc_id="3hYK5tYClq" lc-mark>
<el-col :span="11" lc_id="2/zvr1UBRS">
<el-form-item prop="date1" lc_id="SRsyrJFuY7">
<el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%" lc_id="ut4BH5tRjv"></el-date-picker>
<el-form-item label="活动时间" required lc-mark lc_id="fz4dTVUbEb">
<el-col :span="11" lc_id="mmEYR54uQF">
<el-form-item prop="date1" lc_id="QkTT/2WWLK">
<el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%" lc_id="G3lxZTQsw5"></el-date-picker>
</el-form-item>
</el-col>
<el-col class="line" :span="2" lc_id="cYnewYwc7x">-</el-col>
<el-col :span="11" lc_id="CDem+Jbdu6">
<el-form-item prop="date2" lc_id="mU9tDRBd+N">
<el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%" lc_id="IgAhjz/1Sa"></el-time-picker>
<el-col class="line" :span="2" lc_id="R2NmSO2FCi">-</el-col>
<el-col :span="11" lc_id="eOACIzQ+Dq">
<el-form-item prop="date2" lc_id="Ub+QEqDUGN">
<el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%" lc_id="+tkG6VmYdM"></el-time-picker>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="即时配送" prop="delivery" lc_id="BSjAgD4RBz" lc-mark>
<el-switch v-model="ruleForm.delivery" lc_id="dHzXy9Kd9/"></el-switch>
<el-form-item label="即时配送" prop="delivery" lc-mark lc_id="Lz8oPy38nU">
<el-switch v-model="ruleForm.delivery" lc_id="COO1BlBrjF"></el-switch>
</el-form-item>
<el-form-item label="文件上传" prop="delivery" lc_id="bO0otoJGdo" lc-mark>
<el-button type="primary" size="small" lc_id="be1qikAvG/">
上传 <i class="el-icon-upload el-icon--right" lc_id="7wBx/Um7eK"></i>
<el-form-item label="文件上传" prop="delivery" lc-mark lc_id="eFNZ7B9jgX">
<el-button type="primary" size="small" lc_id="7ZjOmdz3Ur">
上传 <i class="el-icon-upload el-icon--right" lc_id="IOumsfqV0c"></i>
</el-button>
</el-form-item>
<el-form-item label="自定义form-item" prop="delivery" lc_id="QJ3NN+wUEW" lc-mark>
<div class="demo-border" lc_id="gWcKKmRXlJ"></div>
<el-form-item label="自定义form-item" prop="delivery" lc-mark lc_id="g9ZQTRZogP">
<div class="demo-border" lc_id="bICnUogCxE"></div>
</el-form-item>
<el-form-item label="活动性质" prop="type" lc_id="oLunX/GRuH" lc-mark>
<el-checkbox-group v-model="ruleForm.type" lc_id="++4Bda/NVN">
<el-checkbox label="美食/餐厅线上活动" name="type" lc_id="+wC1g9MHna"></el-checkbox>
<el-checkbox label="地推活动" name="type" lc_id="sdCzrXAT2y"></el-checkbox>
<el-checkbox label="线下主题活动" name="type" lc_id="gTsBARyLOu"></el-checkbox>
<el-checkbox label="单纯品牌曝光" name="type" lc_id="TDBRWL+ui/"></el-checkbox>
<el-form-item label="活动性质" prop="type" lc-mark lc_id="u5e4jMDa0Z">
<el-checkbox-group v-model="ruleForm.type" lc_id="4odzSgDoVc">
<el-checkbox label="美食/餐厅线上活动" name="type" lc_id="qRZK4l23q9"></el-checkbox>
<el-checkbox label="地推活动" name="type" lc_id="WbtFV7IdQ0"></el-checkbox>
<el-checkbox label="线下主题活动" name="type" lc_id="/fBZC9Wz76"></el-checkbox>
<el-checkbox label="单纯品牌曝光" name="type" lc_id="V+qui3Km7r"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="特殊资源" prop="resource" lc_id="AIVW6a+WMo" lc-mark>
<el-radio-group v-model="ruleForm.resource" lc_id="arM0Xl8Ow8">
<el-radio label="线上品牌商赞助" lc_id="kFYdyqdoNE"></el-radio>
<el-radio label="线下场地免费" lc_id="9NfIeEmiWw"></el-radio>
<el-form-item label="特殊资源" prop="resource" lc-mark lc_id="EfEJRxIgMc">
<el-radio-group v-model="ruleForm.resource" lc_id="UaAE0hW4YD">
<el-radio label="线上品牌商赞助" lc_id="eVUn2fPBO0"></el-radio>
<el-radio label="线下场地免费" lc_id="OhNxMXrfFs"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="活动形式" prop="desc" lc_id="b5oLJSA9VW" lc-mark>
<el-input type="textarea" v-model="ruleForm.desc" lc_id="Kjz00qg2bm"></el-input>
<el-form-item label="活动形式" prop="desc" lc-mark lc_id="1J3SXxTQjA">
<el-input type="textarea" v-model="ruleForm.desc" lc_id="KndAAF/3Mu"></el-input>
</el-form-item>
<el-form-item lc_id="8uphY++lpC">
<el-button type="primary" @click="submitForm" lc_id="iaY/zpWjSS">立即创建</el-button>
<el-button @click="resetForm" lc_id="KxBu2mPKhs">重置</el-button>
<el-form-item lc_id="wSyCEJYjUD">
<el-button type="primary" @click="submitForm" lc_id="wp2oC1qxYN">立即创建</el-button>
<el-button @click="resetForm" lc_id="nWgxJ6a9v+">重置</el-button>
</el-form-item>
</el-form>
</div>
<div lc_id="dyK4shOTgK">
<div class="demonstration-element" lc_id="OPhwbT6T5C">Descriptions 描述列表</div>
<el-descriptions title="用户信息" lc-mark lc_id="UcepzqrI8T">
<el-descriptions-item label="用户名" lc-mark lc_id="61qM0Gdqq3">kooriookami</el-descriptions-item>
<el-descriptions-item label="手机号" lc_id="p9NL7l0+yS">18100000000</el-descriptions-item>
<el-descriptions-item label="居住地" lc_id="gA+SOSpqT1">苏州市</el-descriptions-item>
<el-descriptions-item label="备注" lc_id="MpLSTs1V1a">
<el-tag size="small" lc_id="x+3JGPZLjM">学校</el-tag>
<div lc_id="ZrfskHN6gD">
<div class="demonstration-element" lc_id="dyf31Nksqb">Descriptions 描述列表</div>
<el-descriptions title="用户信息" lc-mark lc_id="Ih7byjPMdZ">
<el-descriptions-item label="用户名" lc-mark lc_id="Hv9orUOCTm">kooriookami</el-descriptions-item>
<el-descriptions-item label="手机号" lc_id="Qdr3t2Hdqm">18100000000</el-descriptions-item>
<el-descriptions-item label="居住地" lc_id="IcVLWCz0QT">苏州市</el-descriptions-item>
<el-descriptions-item label="备注" lc_id="Far2sRRdAW">
<el-tag size="small" lc_id="CaE0YkJ1TB">学校</el-tag>
</el-descriptions-item>
<el-descriptions-item label="联系地址" lc_id="OoN2WiOmV9">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
<el-descriptions-item label="联系地址" lc_id="P7eacW7mxC">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
</el-descriptions>
<el-descriptions title="垂直带边框列表" direction="vertical" :column="4" border lc-mark lc_id="szloMrlo+J">
> <el-descriptions-item label="用户名" lc_id="eiu+5s736W">kooriookami</el-descriptions-item>
<el-descriptions-item label="手机号" lc_id="5jN1FMg0JM">18100000000</el-descriptions-item>
<el-descriptions-item label="居住地" :span="2" lc_id="0kqZ2EOUJ/">苏州市</el-descriptions-item>
<el-descriptions-item label="备注" lc_id="iSiDebVpZg">
<el-tag size="small" lc_id="gy68yv4szb">学校</el-tag>
<el-descriptions title="垂直带边框列表" direction="vertical" :column="4" border lc-mark lc_id="k4Y9MNzVZb">
> <el-descriptions-item label="用户名" lc_id="YTqOj5iy95">kooriookami</el-descriptions-item>
<el-descriptions-item label="手机号" lc_id="qx7ONklayE">18100000000</el-descriptions-item>
<el-descriptions-item label="居住地" :span="2" lc_id="Gip/4MIafd">苏州市</el-descriptions-item>
<el-descriptions-item label="备注" lc_id="4wYkIRcdbX">
<el-tag size="small" lc_id="9iHUBLDbHY">学校</el-tag>
</el-descriptions-item>
<el-descriptions-item label="联系地址" lc_id="FOfDHeKGh6">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
<el-descriptions-item label="联系地址" lc_id="zfJtvesctl">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
</el-descriptions>
</div>
</div>

240
src/rawComponents/element/icon.vue
View File

@ -1,162 +1,162 @@
<template lc_id="NEXOf/rfSM">
<div lc_id="fsSLs868ck">
<div lc_id="jnWZjBCN55">
<div class="demonstration-element" lc_id="PZC8UwVIRd">Progress 进度条</div>
<el-progress lc-mark :percentage="50" lc_id="GnymMLJ5C6"></el-progress>
<el-progress lc-mark :percentage="100" :format="format" lc_id="8XsOow/7Xd"></el-progress>
<el-progress lc-mark :percentage="100" status="success" lc_id="BtIbOuqpzF"></el-progress>
<el-progress lc-mark :percentage="100" status="warning" lc_id="+CJ7f9MY/b"></el-progress>
<el-progress lc-mark :percentage="50" status="exception" lc_id="nFfSplTrKn"></el-progress>
<template lc_id="GWGSFjvJGS">
<div lc_id="mhJfF7mAeh">
<div lc_id="OyEvjlhxKG">
<div class="demonstration-element" lc_id="jS8CODuZ8w">Progress 进度条</div>
<el-progress lc-mark :percentage="50" lc_id="5KIZ/gMvgA"></el-progress>
<el-progress lc-mark :percentage="100" :format="format" lc_id="andEKznPJm"></el-progress>
<el-progress lc-mark :percentage="100" status="success" lc_id="+c55Mhr6qb"></el-progress>
<el-progress lc-mark :percentage="100" status="warning" lc_id="aVjnu79qzU"></el-progress>
<el-progress lc-mark :percentage="50" status="exception" lc_id="BxPH8oVBkr"></el-progress>
</div>
<div lc_id="y2hj6UPfBT">
<div class="demonstration-element" lc_id="DQOP05V0ui">Tree 树形控件</div>
<el-tree lc-mark :data="data" :props="defaultProps" @node-click="handleNodeClick" lc_id="PXooTPaGg5"></el-tree>
<div lc_id="NZyu36Hfnv">
<div class="demonstration-element" lc_id="KlaxLO85mW">Tree 树形控件</div>
<el-tree lc-mark :data="data" :props="defaultProps" @node-click="handleNodeClick" lc_id="6tm3Um6sZv"></el-tree>
</div>
<div lc_id="5aKl6Rld80">
<div class="demonstration-element" lc_id="APtM1RDdZm">Badge 标记</div>
<el-badge lc-mark :value="12" class="item" lc_id="bflHMoagaW">
<el-button size="small" lc_id="tZgMa+7DS4">评论</el-button>
<div lc_id="EvD0rnh0sk">
<div class="demonstration-element" lc_id="gunUjt4svK">Badge 标记</div>
<el-badge lc-mark :value="12" class="item" lc_id="64M0gaQZnd">
<el-button size="small" lc_id="EwFjRB81yT">评论</el-button>
</el-badge>
<el-badge lc-mark :value="3" class="item" lc_id="4PZTLM5+e6">
<el-button size="small" lc_id="iqXfaLj3WQ">回复</el-button>
<el-badge lc-mark :value="3" class="item" lc_id="haDOmCEsNH">
<el-button size="small" lc_id="iZtMs8mOnw">回复</el-button>
</el-badge>
<el-badge lc-mark :value="1" class="item" type="primary" lc_id="Q7RwbWdiDV">
<el-button size="small" lc_id="r3WfzbZasR">评论</el-button>
<el-badge lc-mark :value="1" class="item" type="primary" lc_id="yraq608Lcr">
<el-button size="small" lc_id="B1N0ns/Uyn">评论</el-button>
</el-badge>
<el-badge lc-mark :value="2" class="item" type="warning" lc_id="TtCe3s6ksj">
<el-button size="small" lc_id="cf1h5bzriK">回复</el-button>
<el-badge lc-mark :value="2" class="item" type="warning" lc_id="h8tv/EwcbE">
<el-button size="small" lc_id="8NG966mGav">回复</el-button>
</el-badge>
</div>
<div lc_id="SSxseq47LR">
<div class="demonstration-element" lc_id="HJm06h80jc">Alert 警告</div>
<el-alert lc-mark title="成功提示的文案" type="success" lc_id="wqO+8uwuWX"></el-alert>
<el-alert lc-mark title="消息提示的文案" type="info" lc_id="iYuvHuINE3"></el-alert>
<el-alert lc-mark title="警告提示的文案" type="warning" lc_id="u4WeAw1AlU"></el-alert>
<el-alert lc-mark title="错误提示的文案" type="error" lc_id="815zGBQ9hH"></el-alert>
<div lc_id="sTqskem3tG">
<div class="demonstration-element" lc_id="WP+GGVOxkS">Alert 警告</div>
<el-alert lc-mark title="成功提示的文案" type="success" lc_id="x1p2XMUWDM"></el-alert>
<el-alert lc-mark title="消息提示的文案" type="info" lc_id="gA2WmaOkII"></el-alert>
<el-alert lc-mark title="警告提示的文案" type="warning" lc_id="0oa8HxAIjm"></el-alert>
<el-alert lc-mark title="错误提示的文案" type="error" lc_id="okpJNZagox"></el-alert>
</div>
<div lc_id="mF0TvIdV4V">
<div class="demonstration-element" lc_id="mFVki7ZkHC">NavMenu 导航菜单</div>
<el-menu lc-mark :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" lc_id="Q6iodKSeyA">
<el-menu-item index="1" lc_id="eiJtp9/zyQ">处理中心</el-menu-item>
<el-menu-item index="4" lc_id="GLfqTcPgMW">
<a target="_blank" lc_id="dil67qSs86">订单管理</a>
<div lc_id="U4YG27qq4s">
<div class="demonstration-element" lc_id="tI02wMGVyX">NavMenu 导航菜单</div>
<el-menu lc-mark :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" lc_id="m4VKXvGyLa">
<el-menu-item index="1" lc_id="5Rt63GCCjB">处理中心</el-menu-item>
<el-menu-item index="4" lc_id="TDeTJ2Uw0j">
<a target="_blank" lc_id="zY0ygk/pmh">订单管理</a>
</el-menu-item>
<el-submenu index="2" lc_id="NY1ULa4P2Q">
<template #title lc_id="EwUd4efWhm">我的工作台</template>
<el-menu-item index="2-1" lc_id="zafhDPI5vE">选项1</el-menu-item>
<el-menu-item index="2-2" lc_id="WlfqjAfsIa">选项2</el-menu-item>
<el-menu-item index="2-3" lc_id="BA4wuaM6Zg">选项3</el-menu-item>
<el-submenu index="2-4" lc_id="/iWebaFsQq">
<template #title lc_id="V8UUKlvHnc">选项4</template>
<el-menu-item index="2-4-1" lc_id="hlaLFAfE7r">选项1</el-menu-item>
<el-menu-item index="2-4-2" lc_id="DJomhSf824">选项2</el-menu-item>
<el-menu-item index="2-4-3" lc_id="PoxAKU6k+S">选项3</el-menu-item>
<el-submenu index="2" lc_id="9HfPjJr/VE">
<template #title lc_id="dvfriNTe67">我的工作台</template>
<el-menu-item index="2-1" lc_id="6fDR/35Dcb">选项1</el-menu-item>
<el-menu-item index="2-2" lc_id="inF9AUVbOa">选项2</el-menu-item>
<el-menu-item index="2-3" lc_id="ox0EdtlU3E">选项3</el-menu-item>
<el-submenu index="2-4" lc_id="QjzqxCifDT">
<template #title lc_id="NIvxdQ77F4">选项4</template>
<el-menu-item index="2-4-1" lc_id="mpWID+cqPv">选项1</el-menu-item>
<el-menu-item index="2-4-2" lc_id="zdDrVca5k3">选项2</el-menu-item>
<el-menu-item index="2-4-3" lc_id="BD0q7ZSrK5">选项3</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
</div>
<div lc_id="RG6XjsgnsE">
<div class="demonstration-element" lc_id="gEZK3ogh8S">Tabs 标签页</div>
<el-tabs lc-mark v-model="activeName" @tab-click="handleClick" lc_id="tuf2/9+j/e">
<el-tab-pane label="用户管理" name="first" lc_id="v/FOTtwlL9">用户管理</el-tab-pane>
<el-tab-pane label="配置管理" name="second" lc_id="FrknB8ZWZ2">配置管理</el-tab-pane>
<el-tab-pane label="角色管理" name="third" lc_id="YUREDANeTC">角色管理</el-tab-pane>
<el-tab-pane label="定时任务补偿" name="fourth" lc_id="txrrEJikwC">定时任务补偿</el-tab-pane>
<div lc_id="Hr+gUUgFTD">
<div class="demonstration-element" lc_id="EAnxv9IwcJ">Tabs 标签页</div>
<el-tabs lc-mark v-model="activeName" @tab-click="handleClick" lc_id="7TSxFc1h/T">
<el-tab-pane label="用户管理" name="first" lc_id="nESAhjJD5+">用户管理</el-tab-pane>
<el-tab-pane label="配置管理" name="second" lc_id="GS8HXVlmCM">配置管理</el-tab-pane>
<el-tab-pane label="角色管理" name="third" lc_id="/jr8Mrluge">角色管理</el-tab-pane>
<el-tab-pane label="定时任务补偿" name="fourth" lc_id="CYHnAsRUdX">定时任务补偿</el-tab-pane>
</el-tabs>
</div>
<div lc_id="ZNvwIyI0Gj">
<div class="demonstration-element" lc_id="94nfjvP9P7">Breadcrumb 面包屑</div>
<el-breadcrumb separator="/" lc-mark lc_id="IXjFDSAAbN">
<el-breadcrumb-item :to="{ path: '/' }" lc_id="+fglUCnnjc">首页</el-breadcrumb-item>
<el-breadcrumb-item lc_id="p3a/Mymfnm">
<a href="/" lc_id="JDk4WTNeok">活动管理</a>
<div lc_id="0MpXv/hB5o">
<div class="demonstration-element" lc_id="cXJHcFnFGI">Breadcrumb 面包屑</div>
<el-breadcrumb separator="/" lc-mark lc_id="2kbMFsaBlw">
<el-breadcrumb-item :to="{ path: '/' }" lc_id="Y24a1lsayw">首页</el-breadcrumb-item>
<el-breadcrumb-item lc_id="e7mudUt3T2">
<a href="/" lc_id="2fk4blwWt1">活动管理</a>
</el-breadcrumb-item>
<el-breadcrumb-item lc_id="c0pBs9wfpq">活动列表</el-breadcrumb-item>
<el-breadcrumb-item lc_id="puOnAeoiUr">活动详情</el-breadcrumb-item>
<el-breadcrumb-item lc_id="0uAUe0LS1k">活动列表</el-breadcrumb-item>
<el-breadcrumb-item lc_id="vTAj15QynT">活动详情</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div lc_id="5x1yyr+pUS">
<div class="demonstration-element" lc_id="oqU11GHCqz">PageHeader 页头</div>
<el-page-header lc-mark @back="goBack2" content="详情页面" lc_id="bmCKcTmef6"></el-page-header>
<div lc_id="VliPzBWiIr">
<div class="demonstration-element" lc_id="URE6411ToF">PageHeader 页头</div>
<el-page-header lc-mark @back="goBack2" content="详情页面" lc_id="VeIIrZpasX"></el-page-header>
</div>
<div lc_id="Ef/GYGM9Cn">
<div class="demonstration-element" lc_id="XiK2EHOXSu">Dropdown 下拉菜单</div>
<el-dropdown lc-mark lc_id="0pRExJy5Rd">
<span class="el-dropdown-link" lc_id="hOjhZVZGbR">
下拉菜单 <i class="el-icon-arrow-down el-icon--right" lc_id="87SkUBPdnB"></i>
<div lc_id="q1K7UjfQRh">
<div class="demonstration-element" lc_id="QRo+LiBcqY">Dropdown 下拉菜单</div>
<el-dropdown lc-mark lc_id="eEugqtt2Ed">
<span class="el-dropdown-link" lc_id="T9RXOuEAsg">
下拉菜单 <i class="el-icon-arrow-down el-icon--right" lc_id="CptOnFiM0H"></i>
</span>
<template #dropdown>
<el-dropdown-menu lc_id="Fi6Q4IfNSE">
<el-dropdown-item lc_id="l8vkCE/8VH">黄金糕</el-dropdown-item>
<el-dropdown-item lc_id="gbNMkf9GXr">狮子头</el-dropdown-item>
<el-dropdown-item lc_id="uwaDtykZaN">螺蛳粉</el-dropdown-item>
<el-dropdown-item disabled lc_id="rI2d1vErJ+">双皮奶</el-dropdown-item>
<el-dropdown-item divided lc_id="6tbTs4xG9T">蚵仔煎</el-dropdown-item>
</el-dropdown-menu>
<template #dropdown lc_id="Jgi+BtUZkP">
<el-dropdown-menu lc_id="fyNKB1+0hw">
<el-dropdown-item lc_id="nCNWPghXw7">黄金糕</el-dropdown-item>
<el-dropdown-item lc_id="3moaMHtIVR">狮子头</el-dropdown-item>
<el-dropdown-item lc_id="zeDetbgzeN">螺蛳粉</el-dropdown-item>
<el-dropdown-item disabled lc_id="590JIX3HSV">双皮奶</el-dropdown-item>
<el-dropdown-item divided lc_id="Svb2tOdBg/">蚵仔煎</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
<div lc_id="aZMbV9+94Y">
<div class="demonstration-element" lc_id="WGB5x2VKOK">Steps 步骤条</div>
<el-steps lc-mark :active="active" finish-status="success" lc_id="QWDOzkcFUw">
<el-step title="步骤 1" lc_id="oFU9um/+li"></el-step>
<el-step title="步骤 2" lc_id="+x6e7YMRDM"></el-step>
<el-step lc-mark title="步骤 3" lc_id="AQTYrrbdjJ"></el-step>
<div lc_id="qp0NNdlqXq">
<div class="demonstration-element" lc_id="RGehF229fc">Steps 步骤条</div>
<el-steps lc-mark :active="active" finish-status="success" lc_id="2yxeEC6GkQ">
<el-step title="步骤 1" lc_id="IA1KW5Gwpv"></el-step>
<el-step title="步骤 2" lc_id="sGjhJUaXCP"></el-step>
<el-step lc-mark title="步骤 3" lc_id="gS1/xHiigS"></el-step>
</el-steps>
</div>
<div lc_id="IiSr5DQBar">
<div class="demonstration-element" lc_id="9vmJpfJXls">Card 卡片</div>
<el-card lc-mark class="box-card" lc_id="JZ/f90Eao5">
<template #header>
<div class="clearfix" lc_id="SvmakA0ZV4">
<span lc_id="DEDjfa97FG">卡片名称</span>
<el-button style="float: right; padding: 3px 0" type="text" lc_id="cCyRGdP1cA">操作按钮</el-button>
</div>
<div v-for="o in 4" :key="o" class="text item" lc_id="LA6GOdkvYg">{{ "列表内容 " + o }}</div>
</template>
<div lc_id="EduDP6YT5B">
<div class="demonstration-element" lc_id="5Ryo1lT9Ri">Card 卡片</div>
<el-card lc-mark class="box-card" lc_id="f7u3JZOXiY">
<template #header lc_id="fcNx1E9u+l">
<div class="clearfix" lc_id="JjiI6DiLa8">
<span lc_id="HyznGRyy1o">卡片名称</span>
<el-button style="float: right; padding: 3px 0" type="text" lc_id="2BV+GEiJPf">操作按钮</el-button>
</div>
<div v-for="o in 4" :key="o" class="text item" lc_id="WrqZOeR62/">{{ "列表内容 " + o }}</div>
</template>
</el-card>
</div>
<div lc_id="ee7f8zuUHN">
<div class="demonstration-element" lc_id="qFhGdZydOI">Carousel 走马灯</div>
<el-carousel height="150px" lc-mark lc_id="HveY4zRKm+">
<el-carousel-item v-for="item in 4" :key="item" lc_id="I/ur+JXX58">
<h3 class="small" lc_id="S84XIuqocQ">{{ item }}</h3>
<div lc_id="Ac3U6soq4v">
<div class="demonstration-element" lc_id="yHQSJ5j0qr">Carousel 走马灯</div>
<el-carousel height="150px" lc-mark lc_id="pf7cTX05Pe">
<el-carousel-item v-for="item in 4" :key="item" lc_id="LWxEwOsKCc">
<h3 class="small" lc_id="rY5AkL9779">{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</div>
<div lc_id="j/8ovh0QgR">
<div class="demonstration-element" lc_id="L0tVuKxcoS">Collapse 折叠面板</div>
<el-collapse lc-mark v-model="collapseActiveNames" @change="handleChange3" lc_id="+stqpbZFyN">
<el-collapse-item title="一致性 Consistency" name="1" lc_id="EKpTUggLJB">
<div lc_id="kNpJOEODiD">与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
<div lc_id="4DFMNwSyQ0">在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
<div lc_id="h98mxV67rm">
<div class="demonstration-element" lc_id="YCdpR3F66X">Collapse 折叠面板</div>
<el-collapse lc-mark v-model="collapseActiveNames" @change="handleChange3" lc_id="SxwGYgpIAH">
<el-collapse-item title="一致性 Consistency" name="1" lc_id="9tnnQx3Q6z">
<div lc_id="nEOQzKpL2r">与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
<div lc_id="dAI8bwEYNq">在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
</el-collapse-item>
<el-collapse-item title="反馈 Feedback" name="2" lc_id="v1GKEI6eGp">
<div lc_id="WCUf4+uzX+">控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
<div lc_id="fC7dq5C7Iq">页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
<el-collapse-item title="反馈 Feedback" name="2" lc_id="B1Egey2IgT">
<div lc_id="XNb772hFlA">控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
<div lc_id="p/6OnJUnHn">页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
</el-collapse-item>
<el-collapse-item title="效率 Efficiency" name="3" lc_id="dfv++aEQZC">
<div lc_id="QOHvDd/wc2">简化流程：设计简洁直观的操作流程；</div>
<div lc_id="1oggmSCvHj">清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
<div lc_id="5cDwsEzcNt">帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
<el-collapse-item title="效率 Efficiency" name="3" lc_id="Xq2hL9btvR">
<div lc_id="fCqY57GW+o">简化流程：设计简洁直观的操作流程；</div>
<div lc_id="O1v1vIbqMk">清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
<div lc_id="oXshK9bC/I">帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
</el-collapse-item>
<el-collapse-item title="可控 Controllability" name="4" lc_id="1f8rwpll8a">
<div lc_id="Cf3MSfNKcp">用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
<div lc_id="8n+IxORrVY">结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
<el-collapse-item title="可控 Controllability" name="4" lc_id="POyL7FoSe4">
<div lc_id="DR+xM6f78t">用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
<div lc_id="2g+ldln/84">结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
</el-collapse-item>
</el-collapse>
</div>
<div lc_id="9+vkQKnoU9">
<div class="demonstration-element" lc_id="wOG8h/0Mkn">Timeline 时间线</div>
<el-timeline :reverse="reverse" lc-mark lc_id="0w+R8i3YSH">
<el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.timestamp" lc_id="1F6u/VeFjn">{{ activity.content }}</el-timeline-item>
<div lc_id="0kee2BlFsA">
<div class="demonstration-element" lc_id="0EBCjFbCyA">Timeline 时间线</div>
<el-timeline :reverse="reverse" lc-mark lc_id="HcDb8BgA1w">
<el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.timestamp" lc_id="lqCmZ7Zw9R">{{ activity.content }}</el-timeline-item>
</el-timeline>
</div>
<div lc_id="fIuGfE2t7Z">
<div class="demonstration-element" lc_id="4RZBWs5HDh">Calendar 日历</div>
<el-calendar lc-mark v-model="calendarValue" lc_id="GEH/lf9pJX"></el-calendar>
<div lc_id="G64C6Q7euE">
<div class="demonstration-element" lc_id="DnbJwJg18E">Calendar 日历</div>
<el-calendar lc-mark v-model="calendarValue" lc_id="yd4ddVWJ69"></el-calendar>
</div>
<div lc_id="0OT80VaZz/"></div>
<div lc_id="BHDMhfXQP4"></div>
</div>
</template>
<script>

28
src/rawComponents/element/image.vue
View File

@ -1,21 +1,21 @@
<template lc_id="0sygtaZzzK">
<div lc_id="ALTsXkmIGE">
<div lc_id="IyBLXIo0O0">
<div class="demonstration-element" lc_id="Nq2fzK+TO2">Image 图片</div>
<div style="display: inline-block;" lc-mark lc_id="IXLvop//zD">
<el-image style="width: 100px; height: 100px;" :src="url4" fit="fill" lc_id="JhLOV9CpES"></el-image>
<template lc_id="PH+yAXBdg0">
<div lc_id="sH9KziXOZQ">
<div lc_id="utFsoBQhKe">
<div class="demonstration-element" lc_id="OWDlcZd3tn">Image 图片</div>
<div style="display: inline-block;" lc-mark lc_id="w68Klpv8Wr">
<el-image style="width: 100px; height: 100px;" :src="url4" fit="fill" lc_id="RvayJfco9G"></el-image>
</div>
<div style="display: inline-block;" lc-mark lc_id="OfDbH48Dqd">
<el-image style="width: 100px; height: 100px;" :src="url4" fit="contain" lc_id="f+p3OK5//3"></el-image>
<div style="display: inline-block;" lc-mark lc_id="8L+gABRzhW">
<el-image style="width: 100px; height: 100px;" :src="url4" fit="contain" lc_id="dInTMVYtvm"></el-image>
</div>
<div style="display: inline-block;" lc-mark lc_id="c7PkXHn46B">
<el-image style="width: 100px; height: 100px;" :src="url4" fit="cover" lc_id="xpJHMNhDHQ"></el-image>
<div style="display: inline-block;" lc-mark lc_id="YKNPD/ANjR">
<el-image style="width: 100px; height: 100px;" :src="url4" fit="cover" lc_id="PNKy3Vw9/D"></el-image>
</div>
<div style="display: inline-block;" lc-mark lc_id="FHnrBwj71E">
<el-image style="width: 100px; height: 100px;" :src="url4" fit="none" lc_id="pUzae4LDfZ"></el-image>
<div style="display: inline-block;" lc-mark lc_id="/MMOV+luD/">
<el-image style="width: 100px; height: 100px;" :src="url4" fit="none" lc_id="gvi3/VnpMI"></el-image>
</div>
<div style="display: inline-block;" lc-mark lc_id="yQL0FP2cM4">
<el-image style="width: 100px; height: 100px;" :src="url4" fit="scale-down" lc_id="uXwV+xiW2H"></el-image>
<div style="display: inline-block;" lc-mark lc_id="xyur7jxP1x">
<el-image style="width: 100px; height: 100px;" :src="url4" fit="scale-down" lc_id="7G2nDtcr5y"></el-image>
</div>
</div>
</div>

150
src/rawComponents/element/layout.vue
View File

@ -1,116 +1,116 @@
<template lc_id="KCiR9cYJ8P">
<div lc_id="Quld4HtbiZ">
<div lc_id="JpTYTNBzEe">
<div class="demonstration-element" lc_id="5yst4mGOV4">Layout 布局</div>
<el-row lc_id="RDMHdYfJZT" lc-mark>
<el-col :span="24" lc_id="XCXYpAliTH">
<div class="grid-content bg-purple-dark" lc_id="Q3pyBv0yQL"></div>
<template lc_id="na2zPOL4fY">
<div lc_id="7QLt3BTntD">
<div lc_id="MoDIFD9beY">
<div class="demonstration-element" lc_id="P3YgnZ+f9L">Layout 布局</div>
<el-row lc-mark lc_id="NezszKss/U">
<el-col :span="24" lc_id="TW/BDkcZrB">
<div class="grid-content bg-purple-dark" lc_id="1Lsg2uMePE"></div>
</el-col>
</el-row>
<el-row lc_id="NNsSl/0P/J" lc-mark>
<el-col :span="12" lc_id="ik3y978rcp">
<div class="grid-content bg-purple" lc_id="m3rjlW975n"></div>
<el-row lc-mark lc_id="TPZKAPgQp1">
<el-col :span="12" lc_id="iNHSLalTdq">
<div class="grid-content bg-purple" lc_id="euyIZziPqv"></div>
</el-col>
<el-col :span="12" lc_id="wmew/CNtQO">
<div class="grid-content bg-purple-light" lc_id="q9JDM10/IT"></div>
<el-col :span="12" lc_id="OVZhfCLYXt">
<div class="grid-content bg-purple-light" lc_id="c7AXrVMer2"></div>
</el-col>
</el-row>
<el-row lc_id="GFwwG6ghFo" lc-mark>
<el-col :span="8" lc_id="0YT4QBLtTF">
<div class="grid-content bg-purple" lc_id="hpH8XVnCDp"></div>
<el-row lc-mark lc_id="tzvFqToSIx">
<el-col :span="8" lc_id="gqZj2TfLb8">
<div class="grid-content bg-purple" lc_id="hU+oUAIchh"></div>
</el-col>
<el-col :span="8" lc_id="75j4FQBj12">
<div class="grid-content bg-purple-light" lc_id="C/i2L9sIfj"></div>
<el-col :span="8" lc_id="Ce0iiKHF1D">
<div class="grid-content bg-purple-light" lc_id="dYm8Ds+7GU"></div>
</el-col>
<el-col :span="8" lc_id="r9Q5Xv5maF">
<div class="grid-content bg-purple" lc_id="ewyMhNwR6d"></div>
<el-col :span="8" lc_id="jJwg57nJyc">
<div class="grid-content bg-purple" lc_id="WgFRKki5iV"></div>
</el-col>
</el-row>
<el-row lc_id="TGg1ilWwDC" lc-mark>
<el-col :span="6" lc_id="zhlSX3rR1s">
<div class="grid-content bg-purple" lc_id="i72CkFCaxP"></div>
<el-row lc-mark lc_id="DISqSQIRuT">
<el-col :span="6" lc_id="YzZ2AwSW6G">
<div class="grid-content bg-purple" lc_id="u5xd9+dh9V"></div>
</el-col>
<el-col :span="6" lc_id="NGEEvGtT6b">
<div class="grid-content bg-purple-light" lc_id="1wPVHPytz5"></div>
<el-col :span="6" lc_id="LEPFDf8YYH">
<div class="grid-content bg-purple-light" lc_id="D05FS4uRjs"></div>
</el-col>
<el-col :span="6" lc_id="5B66ihgyQV">
<div class="grid-content bg-purple" lc_id="nGJUxZOYaY"></div>
<el-col :span="6" lc_id="BBCqvPJv/X">
<div class="grid-content bg-purple" lc_id="S42KNtBQFZ"></div>
</el-col>
<el-col :span="6" lc_id="Jnh3LKyyBk">
<div class="grid-content bg-purple-light" lc_id="C3mr7GCJCp"></div>
<el-col :span="6" lc_id="DHblSwi+L7">
<div class="grid-content bg-purple-light" lc_id="ivjjPVjjnr"></div>
</el-col>
</el-row>
<el-row lc_id="FfE34D+quR" lc-mark>
<el-col :span="4" lc_id="HqC4QfXfTK">
<div class="grid-content bg-purple" lc_id="NRyP+QJeKT"></div>
<el-row lc-mark lc_id="9mPg3N+4Qw">
<el-col :span="4" lc_id="T8HazUYEOt">
<div class="grid-content bg-purple" lc_id="meZQqlUbyc"></div>
</el-col>
<el-col :span="4" lc_id="0/hMidvlgB">
<div class="grid-content bg-purple-light" lc_id="ni6mKUYv9J"></div>
<el-col :span="4" lc_id="us0lyJqF9u">
<div class="grid-content bg-purple-light" lc_id="Dg7zC5FRWM"></div>
</el-col>
<el-col :span="4" lc_id="/1mTPqxtpo">
<div class="grid-content bg-purple" lc_id="y62SKNzieE"></div>
<el-col :span="4" lc_id="Jg2zamD3Pm">
<div class="grid-content bg-purple" lc_id="pTHu7SCFdf"></div>
</el-col>
<el-col :span="4" lc_id="LjWQqmPTg/">
<div class="grid-content bg-purple-light" lc_id="yGYelo1dP7"></div>
<el-col :span="4" lc_id="uFfJtyu3lO">
<div class="grid-content bg-purple-light" lc_id="4Y1h471JWS"></div>
</el-col>
<el-col :span="4" lc_id="Vu2aVQiqIx">
<div class="grid-content bg-purple" lc_id="b054Y4DJeB"></div>
<el-col :span="4" lc_id="n2nFYPBVOv">
<div class="grid-content bg-purple" lc_id="oZwq90Bi+e"></div>
</el-col>
<el-col :span="4" lc_id="E2rYxtm/qD">
<div class="grid-content bg-purple-light" lc_id="KOOA8s6rOL"></div>
<el-col :span="4" lc_id="5+xwb7Y6SI">
<div class="grid-content bg-purple-light" lc_id="bh/aoF+9ya"></div>
</el-col>
</el-row>
</div>
<div lc_id="zXc6Fq0841">
<div class="demonstration-element" lc_id="SBZzIUSzTK">Layout 分栏间隔布局</div>
<el-row :gutter="20" lc-mark lc_id="VZsac7yKoo">
<el-col :span="6" lc_id="WNvXYnn1Jh">
<div class="grid-content bg-purple" lc_id="ZTJoF+cmoa"></div>
<div lc_id="TYy/bOUMNr">
<div class="demonstration-element" lc_id="trBMz5blKg">Layout 分栏间隔布局</div>
<el-row :gutter="20" lc-mark lc_id="gFfya4TxDk">
<el-col :span="6" lc_id="ws0L3MK/Zd">
<div class="grid-content bg-purple" lc_id="Ubsbv5h8rG"></div>
</el-col>
<el-col :span="6" lc_id="U1LTx3WbXw">
<div class="grid-content bg-purple" lc_id="UwNQIlRIzl"></div>
<el-col :span="6" lc_id="JSzu5D9Sfk">
<div class="grid-content bg-purple" lc_id="O0Rgdk3cKz"></div>
</el-col>
<el-col :span="6" lc_id="iMlxvMwEAH">
<div class="grid-content bg-purple" lc_id="soX5vi3Iyo"></div>
<el-col :span="6" lc_id="QEAC8l6awc">
<div class="grid-content bg-purple" lc_id="N+YhMdOQVb"></div>
</el-col>
<el-col :span="6" lc_id="s5vO3hDAg9">
<div class="grid-content bg-purple" lc_id="0y9r0LzJ4L"></div>
<el-col :span="6" lc_id="ojGD7eUbaa">
<div class="grid-content bg-purple" lc_id="cMouTO1yO7"></div>
</el-col>
</el-row>
</div>
<div lc_id="pCMW7dgNrQ">
<div class="demonstration-element" lc_id="f8OXr3g1YW">Layout 混合布局</div>
<el-row :gutter="20" lc-mark lc_id="Zq7py9AGsn">
<el-col :span="16" lc_id="neOUpgtdVA">
<div class="grid-content bg-purple" lc_id="qikR4Vzu0f"></div>
<div lc_id="xbQPgKUBIy">
<div class="demonstration-element" lc_id="Bc2PY/ZYiU">Layout 混合布局</div>
<el-row :gutter="20" lc-mark lc_id="nYMpGdRSrq">
<el-col :span="16" lc_id="eMrh2sYnKx">
<div class="grid-content bg-purple" lc_id="IC5Wm1Hn9n"></div>
</el-col>
<el-col :span="8" lc_id="zlBPWg1V7a">
<div class="grid-content bg-purple" lc_id="iLBVThoOoc"></div>
<el-col :span="8" lc_id="Xs8VJkHelZ">
<div class="grid-content bg-purple" lc_id="ypg8TKxYh5"></div>
</el-col>
</el-row>
<el-row :gutter="20" lc-mark lc_id="YC+S7VupJs">
<el-col :span="8" lc_id="ABLkZSuGPS">
<div class="grid-content bg-purple" lc_id="nDJd5yM8Nr"></div>
<el-row :gutter="20" lc-mark lc_id="Gm4zSQrKoN">
<el-col :span="8" lc_id="HBbcLaIE9m">
<div class="grid-content bg-purple" lc_id="BGPEKw0h4I"></div>
</el-col>
<el-col :span="8" lc_id="/Deo/nfRdM">
<div class="grid-content bg-purple" lc_id="LnW2OQ2NVq"></div>
<el-col :span="8" lc_id="pK9Tw20FRI">
<div class="grid-content bg-purple" lc_id="ARxfz9lR3l"></div>
</el-col>
<el-col :span="4" lc_id="vf0CYfffSU">
<div class="grid-content bg-purple" lc_id="Eibajf6Ar2"></div>
<el-col :span="4" lc_id="dRZMyvJPRM">
<div class="grid-content bg-purple" lc_id="XIKrToEQJd"></div>
</el-col>
<el-col :span="4" lc_id="XqrufGjyFK">
<div class="grid-content bg-purple" lc_id="6CDgh9dRiB"></div>
<el-col :span="4" lc_id="0pIE7zGZUg">
<div class="grid-content bg-purple" lc_id="rW6P8kYrWR"></div>
</el-col>
</el-row>
<el-row :gutter="20" lc-mark lc_id="v6mXva7Ifr">
<el-col :span="4" lc_id="GrGSA1uKJv">
<div class="grid-content bg-purple" lc_id="0x2kjflvjy"></div>
<el-row :gutter="20" lc-mark lc_id="jgi7BKYF+0">
<el-col :span="4" lc_id="EZF3aOWMra">
<div class="grid-content bg-purple" lc_id="2HeQgzYeYn"></div>
</el-col>
<el-col :span="16" lc_id="9YsDY7Y6M4">
<div class="grid-content bg-purple" lc_id="jy3k/ylVM5"></div>
<el-col :span="16" lc_id="2AVcBud9PA">
<div class="grid-content bg-purple" lc_id="6XvbIskPHD"></div>
</el-col>
<el-col :span="4" lc_id="vbEJZx5KlA">
<div class="grid-content bg-purple" lc_id="JPRghBbcwh"></div>
<el-col :span="4" lc_id="y4UEbmjim5">
<div class="grid-content bg-purple" lc_id="m4yavM6CB5"></div>
</el-col>
</el-row>
</div>

36
src/rawComponents/element/table.vue
View File

@ -1,29 +1,29 @@
<template lc_id="BHClb68uyL">
<div lc_id="4wLY9fQl2E">
<div lc_id="Ko17F4IQXP">
<div class="demonstration-element" lc_id="vYOpmmF/R0">Table 表格</div>
<el-table :data="tableData" style="width: 100%" lc-mark lc_id="T6T7c1p16B">
<el-table-column prop="date" label="日期" width="180" lc_id="oG9cZ3BlCT"></el-table-column>
<el-table-column prop="name" label="姓名" width="180" lc_id="LkLHx3aqOa"></el-table-column>
<el-table-column prop="address" label="地址" lc_id="lsXfyqD4Er"></el-table-column>
<template lc_id="f5Ag3iA9vi">
<div lc_id="rC5FKIl93Q">
<div lc_id="5hZQP7chtb">
<div class="demonstration-element" lc_id="yKAcBIB8ML">Table 表格</div>
<el-table :data="tableData" style="width: 100%" lc-mark lc_id="h1AxSuk1JX">
<el-table-column prop="date" label="日期" width="180" lc_id="N5KOR7kGoN"></el-table-column>
<el-table-column prop="name" label="姓名" width="180" lc_id="v3jApEZujz"></el-table-column>
<el-table-column prop="address" label="地址" lc_id="Ryei21Kxoy"></el-table-column>
</el-table>
</div>
<div lc_id="taXbrp1lKH">
<div class="demonstration-element" lc_id="l2+MLlmW8Y">Table 动态表格👍</div>
<el-table :data="tableData" style="width: 100%" lc-mark lc_id="Pndn3Vp6Rx">
<el-table-column :prop="propItem.prop" :label="propItem.label" v-for="propItem in propList" :key="propItem.prop" lc_id="neIrh92kHU">
<template v-slot="{ row }" lc_id="sKUOEvY82H">
<span v-if="!propItem.component" lc_id="8Jox7iwljY">{{
<div lc_id="FoIEdS4sgT">
<div class="demonstration-element" lc_id="9MFKGxfvJ5">Table 动态表格👍</div>
<el-table :data="tableData" style="width: 100%" lc-mark lc_id="+5AJzAYChF">
<el-table-column :prop="propItem.prop" :label="propItem.label" v-for="propItem in propList" :key="propItem.prop" lc_id="gfwgFzB3gO">
<template v-slot="{ row }" lc_id="WHqNxzDsFe">
<span v-if="!propItem.component" lc_id="isWGW9SLlm">{{
row[propItem.prop]
}}</span>
<component v-else v-bind:is="propItem.component" :rowinfo="row" lc_id="aMR4DSYBZz"></component>
<component v-else v-bind:is="propItem.component" :rowinfo="row" lc_id="DktA4JZ5fs"></component>
</template>
</el-table-column>
</el-table>
</div>
<div lc_id="LSgcsWU12G">
<div class="demonstration-element" lc_id="RW6uK0v/uQ">Pagination 分页</div>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[100, 200, 300, 400]" :page-size="100" lc-mark layout="prev, pager, next" :total="400" lc_id="r+K0+FJnu3"></el-pagination>
<div lc_id="GHEnA/+R+x">
<div class="demonstration-element" lc_id="LphVmiAWKZ">Pagination 分页</div>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[100, 200, 300, 400]" :page-size="100" lc-mark layout="prev, pager, next" :total="400" lc_id="V3nz0Q3sZA"></el-pagination>
</div>
</div>
</template>