Question

我正在尝试使用此侧边栏（https://codepen.io/andymerskin/pen/wGbEOp）在我的webpacked vue.js项目中工作。我无法翻译或过渡！但它在控制台中应该改变，并且没有任何错误。请帮忙。我完全忽视了一些东西并且已经长期存在了。感谢您的帮助。 ;）

我有2个组件;身体和侧边栏。侧栏正在body.vue中调用。

这是我的Body.vue;

<template>
  <div id="main">
    <div class="info">
      <h1 class="title">
      <pre>&lt;zap-slideout&gt;</pre>
      </h1>
      <p class="description">Give it a jolt. Click <strong>Open</strong> at the top.</p>
    </div>
    <div>
      <sidebar></sidebar>
    </div>
  </div>
</template>

<script>
import Sidebar from '../components/Sidebar'
export default {
  components: {
    'sidebar': Sidebar
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
a {
  color: #42b983;
}
</style>

和我的Sidebar.vue;

<template>
  <div id="sidebar" class="sidebar"
        :class="{ isOpen: isOpen }">
     <div class="sidebar-opener"
          @click="toggle">{{openerText}}</div>
     <ul class="sidebar-menu">
       <li class="sidebar-menu-item">
         <img class="zap-emoji" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/19332/zap-emoji.svg" alt="Zap Emoji" />
       </li>
       <li class="sidebar-menu-item"
         v-for="item in menu">{{item}}</li>
       <li class="sidebar-menu-item--small"
         v-for="item in smallMenu">{{item}}</li>
     </ul>
   </div>
</template>

<script type="text/javascript">
export default {
  data: () => ({
    openerText: 'Open',
    isOpen: false,
    menu: [ 'Home', 'Work', 'Contact' ],
    smallMenu: [ 'Tips', 'Resources', 'Shenanigans' ]
  }),
  methods: {
    open () {
      this.openerText = 'Close'
      this.isOpen = true
    },
    close () {
      this.openerText = 'Open'
      this.isOpen = false
    },
    toggle () {
      if (this.isOpen) {
        this.close()
      } else {
        this.open()
      }
    }
  }
}
</script>

和我的main.js;

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import Sidebar from './components/Sidebar'
Vue.component('sidebar', Sidebar)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

和我的App.vue;

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style lang="css">
  @import "../public/style.css";
</style>

和我的index.js

import Vue from 'vue'
import Router from 'vue-router'
import Body from '@/components/Body'
import Sidebar from '@/components/Sidebar.vue'
Vue.component('sidebar', Sidebar)

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Body',
      component: Body
    }
  ]
})

和我的css;

/* main css, body, etc */

body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: #fff;
  background-color: #2c3e50;
  -webkit-font-smoothing: antialiased;
}

strong {
  font-weight: 600;
}

.info {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translateX(50%);
  text-align: center;

}

.title {
  font-size: 24px;
  font-weight: 600;
}

.description {
  margin-top: 20px;
}

/*
Sidebar styles...
 */
.sidebar {
  position: relative;
  width: 340px;
  height: 100vh;
  padding: 30px;
  background-color: #34495e;
  transform: translateX(100%);
  transition: transform 0.6s ease(out-cubic);

  &.isOpen {
    transform: translateX(0);
  }
}

.sidebar-opener {
  position: absolute;
  top: 20px;
  right: 100%;
  margin-right: 20px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  cursor: pointer;

  &:hover {
    text-decoration: underline;
  }
}

.sidebar-menu {
  font-weight: 600;
  color: #fff;
}

.sidebar-menu-item,
.sidebar-menu-item--small {
  cursor: pointer;

  &:hover {
    text-decoration: underline;
  }

  & + & {
    margin-top: 20px;
  }
}

.sidebar-menu-item {
  font-size: 36px;

  & + .sidebar-menu-item--small {
    margin-top: 30px;
  }
}

.sidebar-menu-item--small {
  font-size: 18px;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #ecf0f1;
}

/* The famed Zap agency logo (TM) */
.zap-emoji {
  height: 120px;
}

Answer 1

它在scss中。卫生署！谢谢您的帮助。这是与css，现在正在工作。

/* main css, body, etc */
body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: #fff;
  background-color: #2c3e50;
  -webkit-font-smoothing: antialiased;
}

strong {
  font-weight: 600;
}

.info {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translateX(50%);
  text-align: center;

}

.title {
  font-size: 24px;
  font-weight: 600;
}

.description {
  margin-top: 20px;
}

/* responsive grid */

* {
    box-sizing: border-box;
}

.container {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
}

.col-1 { width: 8.33%; }
.col-2 { width: 16.66%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33%; }
.col-5 { width: 41.66%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33%; }
.col-8 { width: 66.66%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33%; }
.col-11 { width: 91.66%; }
.col-12 { width: 100%; }

[class*="col-"] {
    float: left;
    padding: 15px;
    background: #e4e4e4;
}

.row {
    margin-bottom: 25px;
}

.row::after {
    content: "";
    clear: both;
    display: block;
}

/*
Sidebar styles...
 */
.sidebar {
  position: relative;
  width: 340px;
  height: 100vh;
  padding: 30px;
  background-color: #34495e;
  transform: translateX(100%);
  transition: transform 0.6s ease(out-cubic);
}
.sidebar.isOpen {
  transform: translateX(0);
}

.sidebar-opener {
  position: absolute;
  top: 20px;
  right: 100%;
  margin-right: 20px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  cursor: pointer;
}
.sidebar-opener:hover {
  text-decoration: underline;
}

.sidebar-menu {
  font-weight: 600;
  color: #fff;
}

.sidebar-menu-item,
.sidebar-menu-item--small {
  cursor: pointer;
}
.sidebar-menu-item:hover,
.sidebar-menu-item--small:hover {
  text-decoration: underline;
}
.sidebar-menu-item + .sidebar-menu-item,
.sidebar-menu-item--small + .sidebar-menu-item, .sidebar-menu-item +
.sidebar-menu-item--small,
.sidebar-menu-item--small +
.sidebar-menu-item--small {
  margin-top: 20px;
}

.sidebar-menu-item {
  font-size: 36px;
}
.sidebar-menu-item + .sidebar-menu-item--small {
  margin-top: 30px;
}

.sidebar-menu-item--small {
  font-size: 18px;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #ecf0f1;
}

/* The famed Zap agency logo (TM) */
.zap-emoji {
  height: 120px;
}

vue.js和侧边栏示例

1 个答案: