基本完成新的组件架构

This commit is contained in:
2022-10-21 19:40:31 +08:00
parent 68d95268e7
commit 3921f7a807
10 changed files with 16112 additions and 20 deletions

View File

@@ -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')}

View File

@@ -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>