grapesjs+vue实现多个page页面示例代码-html代码-BFW代码库

grapesjs+vue实现多个page页面示例代码

代码语言：html

所属分类：其他

代码描述：grapesjs+vue实现多个page页面示例代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script>
   
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/grapes.min.css">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/grapes.min.js"></script>


    <style>
        body, html {
      height: 100%;
      margin: 0;
    }
    .app-wrap {
      height: 100%;
      width: 100%;
      display: flex;
    }
    .editor-wrap  {
      widtH: 100%;
      height: 100%;
    }
    .pages-wrp, .pages {
      display: flex;
      flex-direction: column
    }
    .pages-wrp {
      background: #333;
      padding: 5px;
    }
    .add-page {
      background: #444444;
      color: white;
      padding: 5px;
      border-radius: 2px;
      cursor: pointer;
      white-space: nowrap;
      margin-bottom: 10px;
    }
    .page {
      background-color: #444;
      color: white;
      padding: 5px;
      margin-bottom: 5px;
      border-radius: 2px;
      cursor: pointer;
    
      &.selected {
        background-color: #706f6f
      }
    }
    
    .page-close {
      opacity: 0.5;
      float: right;
      background-color: #2c2c2c;
      height: 20px;
      display: inline-block;
      width: 17px;
      text-align: center;
      border-radius: 3px;
    
      &:hover {
        opacity: 1;
      }
    }
    </style>



</head>

<body>

    <div class="app-wrap">
        <div class="pages-wrp">
            <div class="add-page" @click="addPage">Add new page</div>
            <div class="pages">
                <div v-for="page in pages" :key="page.id" :class="{page: 1, selected: isSelected(page) }" @click="selectPage(page.id)">
                    {{ page.get('name') || page.id }} <span v-if="!isSelected(page)" @click="removePage(page.id)" class="page-close">&Cross;</span>.........完整代码请登录后点击上方下载按钮下载查看