Vue中嵌入LayUI框架

全栈程序员站长

发布于 2022-09-12 21:24:48

1K0

发布于 2022-09-12 21:24:48

文章被收录于专栏：全栈程序员必看全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

Auther：江湖人称平头哥

前言

Vue.js是一套构建用户界面的渐进式框架。Vue采用自底向上增量开发的设计。Vue的核心库只是关注图层。容易学习和整合其他项目。 LayUI是开源的模块化前端UI框架，其中提供了丰富的内置模块，都可以通过模块化的方式按需加载，可作为PC网页端后台管理系统和前台界面的速成开发。

下载LayUI文件 链接： https://www.layui.com/

将解压文件放入Vue项目的static目录

Vue的 index.html中引入 LayUI 的 css 和 js

 <link type="text/css" rel="stylesheet" href="./static/layui/css/layui.css"/>
 <script type="text/javascript" src="./static/layui/layui.js"></script>

新建Vue组件（AddNews.vue），引入 LayUI 组件代码如下：

<template>
 <div class="main" >
   <form class="layui-form" action>
     <div class="layui-form-item">
       <label class="layui-form-label">新闻标题</label>
       <div class="layui-input-block">
         <input
           type="text"
           name="news_title"
           required
           lay-verify="required"
           placeholder="请输入新闻标题"
           autocomplete="off"
           class="layui-input"
         />
       </div>
     </div>
     <div class="layui-form-item">
       <label class="layui-form-label">新闻副标题</label>
       <div class="layui-input-block">
         <input
           type="text"
           name="news_subhead"
           required
           lay-verify="required"
           placeholder="请输入新闻副标题"
           autocomplete="off"
           class="layui-input"
         />
       </div>
     </div>
     <div class="layui-form-item">
       <label class="layui-form-label">作者</label>
       <div class="layui-input-block">
         <input
           type="text"
           name="auther"
           required
           lay-verify="required"
           placeholder="请输入作者"
           autocomplete="off"
           class="layui-input"
         />
       </div>
     </div>
     <div class="layui-form-item">
       <label class="layui-form-label">关键字</label>
       <div class="layui-input-block">
         <input
           type="text"
           name="tags"
           required
           lay-verify="required"
           placeholder="请输入关键字"
           autocomplete="off"
           class="layui-input"
         />
       </div>
     </div>
     <div class="layui-form-item">
       <label class="layui-form-label">导读</label>
       <div class="layui-input-block">
         <input
           type="text"
           name="navi_content"
           required
           lay-verify="required"
           placeholder="请输入导读"
           autocomplete="off"
           class="layui-input"
         />
       </div>
     </div>

     <div class="layui-form-item">
       <label class="layui-form-label">新闻类型</label>
       <div class="layui-input-block">
         <select name="city" lay-verify="required">
           <option value></option>
           <option value="0">国内新闻</option>
           <option value="1">国际新闻</option>
           <option value="2">案例新闻</option>
         </select>
       </div>
     </div>

     <div class="layui-form-item">
       <label class="layui-form-label">开启评论</label>
       <div class="layui-input-block">
         <input type="checkbox" name="switch" lay-skin="switch" />
       </div>
     </div>

     <div class="layui-form-item">
       <label class="layui-form-label">是否置顶</label>
       <div class="layui-input-block">
         <input type="radio" name="is_top" value="1" title="是" checked />
         <input type="radio" name="is_top" value="0" title="否" />
       </div>
     </div>

     <div class="layui-form-item layui-form-text">
       <label class="layui-form-label">封面上传</label>
       <button type="button" class="layui-btn" id="test1">
         <i class="layui-icon">&#xe67c;</i>图片上传
       </button>
     </div>

     <div class="layui-form-item layui-form-text">
       <label class="layui-form-label">新闻内容</label>
       <div class="layui-input-block">
         <textarea name="content" placeholder="请输入新闻内容" class="layui-textarea"></textarea>
       </div>
     </div>

     <div class="layui-form-item">
       <div class="layui-input-block">
         <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
         <button type="reset" class="layui-btn layui-btn-primary">重置</button>
       </div>
     </div>
   </form>
 </div>
</template>

<script>
</script>

<style>
.main {
 width: 50%;
 margin: auto;
}
</style>

加点小样式，不然真的太丑了