mirror of
https://github.com/sahadev/vue-component-creater-ui.git
synced 2025-09-27 23:03:22 +08:00
feat: 更新ElementUI,集成骨架屏等新组件
This commit is contained in:
shangbin
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -48,6 +48,47 @@
|
||||
</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>
|
||||
<div lc_id="/+eytuLsMO">
|
||||
<div class="demonstration-element" lc_id="q2Xgt807d0">Empty 空状态</div>
|
||||
<el-empty lc-mark description="描述文字" lc_id="GhNJigV87p"></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 slot="extra" lc_id="eKy+B81uWz">
|
||||
<el-button type="primary" size="medium" lc_id="mjvsUigHYK">返回</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 slot="extra" lc_id="NZlnnaHVpe">
|
||||
<el-button type="primary" size="medium" lc_id="8+A/PdJlL/">返回</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 slot="extra" lc_id="04xPYOz/ON">
|
||||
<el-button type="primary" size="medium" lc_id="7MAezDvKx5">返回</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 slot="extra" lc_id="b1LfBHu9OM">
|
||||
<el-button type="primary" size="medium" lc_id="ke499n5dzw">返回</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
@@ -92,6 +92,27 @@
|
||||
</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>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="联系地址" lc_id="OoN2WiOmV9">江苏省苏州市吴中区吴中大道 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-item>
|
||||
<el-descriptions-item label="联系地址" lc_id="FOfDHeKGh6">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
@@ -1,80 +1,80 @@
|
||||
<template lc_id="vSeYn6dQcE">
|
||||
<div lc_id="NahfEKxF68" class="demonstration-raw">
|
||||
<table border="0" lc_id="RDLbKPIVyp">
|
||||
<tr lc_id="riqra/6H1d">
|
||||
<td lc_id="RhfgQCKISj">
|
||||
<div class="title" lc_id="OnWMPOSYwo">div:</div>
|
||||
</td>
|
||||
<td lc_id="ZOFUAuegZ7">
|
||||
<div lc_id="jayChQGWVD" div-lc-mark lc-mark></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr lc_id="i+v/R6TP05">
|
||||
<td lc_id="wLL4oua+v6">
|
||||
<div class="title" lc_id="ySJLvpCtUj">span:</div>
|
||||
</td>
|
||||
<td lc_id="Wg/gdfZ1hC">
|
||||
<span lc_id="m+Oy7pHzNT" lc-mark>Span Element</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr lc_id="xunAa9pXZZ">
|
||||
<td lc_id="m11Db3zz1r">
|
||||
<div class="title" lc_id="dSImHjC62W">center:</div>
|
||||
</td>
|
||||
<td lc_id="KrJXHbe0Y4">
|
||||
<center lc_id="CN8KOU6sKz" lc-mark>Center Element</center>
|
||||
</td>
|
||||
</tr>
|
||||
<tr lc_id="Ejan36KyM/">
|
||||
<td lc_id="ke9QDthYso">
|
||||
<div class="title" lc_id="V2t1JzpJnA">a（超链接）:</div>
|
||||
</td>
|
||||
<td lc_id="SUPSw5gtWC">
|
||||
<a lc-mark lc_id="MjGtLkly03">W3School</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr lc_id="bgvuIIHVqY">
|
||||
<td lc_id="h0nRibffcF">
|
||||
<div class="title" lc_id="MxMSt/pxUC">abbr（标记缩写）:</div>
|
||||
</td>
|
||||
<td lc_id="lX0P4NPEIk">
|
||||
<abbr lc-mark title="People's Republic of China" lc_id="oFoyJEu70y">PRC</abbr>
|
||||
</td>
|
||||
</tr>
|
||||
<tr lc_id="inCzutb68I">
|
||||
<td lc_id="mh8/q4jJAC">
|
||||
<div class="title" lc_id="Kl4zl6s4bN">article:</div>
|
||||
</td>
|
||||
<td lc_id="ylNI9kdThf">
|
||||
<article lc_id="p6pMF5D2hP">
|
||||
<h1 lc-mark lc_id="GcMEfj/r8i">Internet Explorer 9</h1>
|
||||
<p lc-mark lc_id="odzwtRzLYd">Windows Internet Explorer 9（简称 IE9）于 2011 年 3 月
|
||||
<div lc_id="NahfEKxF68" class="demonstration-raw">
|
||||
<table border="0" lc_id="RDLbKPIVyp">
|
||||
<tr lc_id="riqra/6H1d">
|
||||
<td lc_id="RhfgQCKISj">
|
||||
<div class="title" lc_id="OnWMPOSYwo">div:</div>
|
||||
</td>
|
||||
<td lc_id="ZOFUAuegZ7">
|
||||
<div lc_id="jayChQGWVD" div-lc-mark lc-mark></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr lc_id="i+v/R6TP05">
|
||||
<td lc_id="wLL4oua+v6">
|
||||
<div class="title" lc_id="ySJLvpCtUj">span:</div>
|
||||
</td>
|
||||
<td lc_id="Wg/gdfZ1hC">
|
||||
<span lc_id="m+Oy7pHzNT" lc-mark>Span Element</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr lc_id="xunAa9pXZZ">
|
||||
<td lc_id="m11Db3zz1r">
|
||||
<div class="title" lc_id="dSImHjC62W">center:</div>
|
||||
</td>
|
||||
<td lc_id="KrJXHbe0Y4">
|
||||
<center lc_id="CN8KOU6sKz" lc-mark>Center Element</center>
|
||||
</td>
|
||||
</tr>
|
||||
<tr lc_id="Ejan36KyM/">
|
||||
<td lc_id="ke9QDthYso">
|
||||
<div class="title" lc_id="V2t1JzpJnA">a（超链接）:</div>
|
||||
</td>
|
||||
<td lc_id="SUPSw5gtWC">
|
||||
<a lc-mark lc_id="MjGtLkly03">W3School</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr lc_id="bgvuIIHVqY">
|
||||
<td lc_id="h0nRibffcF">
|
||||
<div class="title" lc_id="MxMSt/pxUC">abbr（标记缩写）:</div>
|
||||
</td>
|
||||
<td lc_id="lX0P4NPEIk">
|
||||
<abbr lc-mark title="People's Republic of China" lc_id="oFoyJEu70y">PRC</abbr>
|
||||
</td>
|
||||
</tr>
|
||||
<tr lc_id="inCzutb68I">
|
||||
<td lc_id="mh8/q4jJAC">
|
||||
<div class="title" lc_id="Kl4zl6s4bN">article:</div>
|
||||
</td>
|
||||
<td lc_id="ylNI9kdThf">
|
||||
<article lc_id="p6pMF5D2hP">
|
||||
<h1 lc-mark lc_id="GcMEfj/r8i">Internet Explorer 9</h1>
|
||||
<p lc-mark lc_id="odzwtRzLYd">Windows Internet Explorer 9（简称 IE9）于 2011 年 3 月
|
||||
14
|
||||
日发布.....</p>
|
||||
</article>
|
||||
</td>
|
||||
</tr>
|
||||
<tr lc_id="sQR/stqYia">
|
||||
<td lc_id="cw8+279Hwb">
|
||||
<div class="title" lc_id="NpMarePQQF">aside:</div>
|
||||
</td>
|
||||
<td lc_id="/RsZDrC6KZ">
|
||||
<aside lc-mark lc_id="65Oo0WGvvy">The Epcot Center is a theme park in Disney World, Florida.</aside>
|
||||
<h4 lc_id="oSbd1PW0Nw" lc-mark>Epcot Center</h4>
|
||||
</td>
|
||||
</tr>
|
||||
<tr lc_id="YpolLNtaim">
|
||||
<td lc_id="0L0kRmNEHS">
|
||||
<div class="title" lc_id="lLb2wnV7cj">p:</div>
|
||||
</td>
|
||||
<td lc_id="E3Kwwe8iVC">
|
||||
<p lc-mark lc_id="t5axePjnHi">这是普通文本</p>
|
||||
<b lc-mark lc_id="MKNiVzEnZC">这是粗体文本</b>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
</article>
|
||||
</td>
|
||||
</tr>
|
||||
<tr lc_id="sQR/stqYia">
|
||||
<td lc_id="cw8+279Hwb">
|
||||
<div class="title" lc_id="NpMarePQQF">aside:</div>
|
||||
</td>
|
||||
<td lc_id="/RsZDrC6KZ">
|
||||
<aside lc-mark lc_id="65Oo0WGvvy">The Epcot Center is a theme park in Disney World, Florida.</aside>
|
||||
<h4 lc_id="oSbd1PW0Nw" lc-mark>Epcot Center</h4>
|
||||
</td>
|
||||
</tr>
|
||||
<tr lc_id="YpolLNtaim">
|
||||
<td lc_id="0L0kRmNEHS">
|
||||
<div class="title" lc_id="lLb2wnV7cj">p:</div>
|
||||
</td>
|
||||
<td lc_id="E3Kwwe8iVC">
|
||||
<p lc-mark lc_id="t5axePjnHi">这是普通文本</p>
|
||||
<b lc-mark lc_id="MKNiVzEnZC">这是粗体文本</b>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { deepLCEle } from "@/utils/initRawComponent";
|
||||
export default {
|
||||
@@ -92,8 +92,7 @@ export default {
|
||||
},
|
||||
methods: {},
|
||||
}; </script>
|
||||
<style scoped>
|
||||
.title {
|
||||
<style scoped>.title {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
@@ -105,5 +104,4 @@ export default {
|
||||
border: 1px grey dashed;
|
||||
min-height: 1rem;
|
||||
border-radius: 5px;
|
||||
}
|
||||
</style>
|
||||
}</style>
|
||||
|
||||
Reference in New Issue
Block a user