mirror of
https://gitee.com/ulthon/layui-ul.git
synced 2026-07-08 21:22:48 +08:00
基本完成新的组件架构
This commit is contained in:
@@ -10,5 +10,6 @@
|
||||
<script src="/static/lib/jquery/jquery.cookie.js"></script>
|
||||
<script src="/static/lib/layui/layui.js"></script>
|
||||
<script src="/static/js/common.js"></script>
|
||||
<script src="/static/lib/vue/vue.global.js"></script>
|
||||
|
||||
{:get_system_config('site_tongji')}
|
||||
@@ -64,34 +64,56 @@
|
||||
<div class="ql-snow">
|
||||
<div class="ql-editor">{$model_post->content_html|raw}</div>
|
||||
</div>
|
||||
<div class="demo-page">
|
||||
<div class="demo-page" id="app-demo-page">
|
||||
{$model_post->demo_page|raw}
|
||||
|
||||
{volist name='model_post->components' id='vo'}
|
||||
<fieldset class="layui-elem-field layui-field-title no-parser">
|
||||
<legend>{$vo.title}</legend>
|
||||
<legend>{$vo.config.TITLE}</legend>
|
||||
<div class="layui-field-box">
|
||||
<div class="desc">
|
||||
{$vo.desc|raw}
|
||||
</div>
|
||||
<div class="preview">{$vo.html|raw}</div>
|
||||
<div class="component-item" style="margin-top: 10px;" data-margin="{$vo.config.MARGIN|default='0'}" data-padding="{$vo.config.PADDING|default='0'}" data-gray="{$vo.config.GRAY|default='0'}">
|
||||
<div class="">
|
||||
<span>预览效果</span>
|
||||
<div class="layui-btn-group" style="margin-left: 10px;">
|
||||
<button type="button" class="layui-btn layui-btn-xs" @click="padding = 1" :class="padding == 1 ? 'layui-btn-normal' : 'layui-btn-primary'">padding</button>
|
||||
<button type="button" class="layui-btn layui-btn-xs" @click="padding = 0" :class="padding == 0 ? 'layui-btn-normal' : 'layui-btn-primary'">无</button>
|
||||
</div>
|
||||
<div class="layui-btn-group" style="margin-left: 10px;">
|
||||
<button type="button" class="layui-btn layui-btn-xs" @click="margin = 1" :class="margin == 1 ? 'layui-btn-normal' : 'layui-btn-primary'">margin</button>
|
||||
<button type="button" class="layui-btn layui-btn-xs" @click="margin = 0" :class="margin == 0 ? 'layui-btn-normal' : 'layui-btn-primary'">无</button>
|
||||
</div>
|
||||
<div class="layui-btn-group" style="margin-left: 10px;">
|
||||
<button type="button" class="layui-btn layui-btn-xs" @click="gray = 1" :class="gray == 1 ? 'layui-btn-normal' : 'layui-btn-primary'">gray</button>
|
||||
<button type="button" class="layui-btn layui-btn-xs" @click="gray = 0" :class="gray == 0 ? 'layui-btn-normal' : 'layui-btn-primary'">无</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="" style="margin-top: 10px;">
|
||||
<div class="preview" :class="{'ul-bg-gray':gray,'ul-padding-md':padding,'ul-margin-md':margin}">{$vo.html|raw}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="code">
|
||||
<div class="layui-tab layui-tab-card">
|
||||
<ul class="layui-tab-title">
|
||||
<li class="layui-this">HTML</li>
|
||||
<li>SCSS</li>
|
||||
<li>CSS</li>
|
||||
<li>UniApp</li>
|
||||
</ul>
|
||||
<div class="layui-tab-content" style="padding:0">
|
||||
<div class="layui-tab-item layui-show">
|
||||
<pre class="layui-code" style="margin: 0;">{$vo.html}</pre>
|
||||
</div>
|
||||
<div class="layui-tab-item ">
|
||||
{$vo.scss|raw}
|
||||
<pre class="layui-code" style="margin: 0;">{$vo.scss|raw}</pre>
|
||||
</div>
|
||||
<div class="layui-tab-item">
|
||||
{$vo.css|raw}
|
||||
|
||||
<pre class="layui-code" style="margin: 0;">{$vo.css|raw}</pre>
|
||||
</div>
|
||||
<div class="layui-tab-item">
|
||||
<pre class="layui-code" style="margin: 0;">{$vo.uniapp|raw}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -246,6 +268,23 @@
|
||||
})
|
||||
layui.util.fixbar()
|
||||
|
||||
const { createApp } = Vue
|
||||
|
||||
|
||||
$('.component-item').each(function (index, elem) {
|
||||
|
||||
createApp({
|
||||
data() {
|
||||
return {
|
||||
margin: $(elem).data('margin'),
|
||||
padding: $(elem).data('padding'),
|
||||
gray: $(elem).data('gray'),
|
||||
}
|
||||
}
|
||||
}).mount(elem)
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user