小编Al-*_*-76的帖子

我正在尝试实现flexbox但无法使其工作.我错过了什么？我有所有的flexbox供应商前缀.

.main-navigation ul { 
   width:100%; 
   display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
   display: -ms-flexbox;  /* TWEENER - IE 10 */
   display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
   display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
  }

.main-navigation ul li {
   justify-content:space-between; 
   width:100px; 
   background:#666; 
   display:block;
 }

目标是让最li左侧与ul容器的左侧齐平,最右侧与ul容器的右侧li齐平.欢迎任何帮助.

我正在尝试消除与 相关的错误@vue/prettier。我尝试了一些方法，但似乎会出现更多错误。

我.eslintrc.js的如下：

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ["plugin:vue/essential", "@vue/prettier"],
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
  },
  parserOptions: {
    parser: "babel-eslint"
  }
};

我"endOfLine":"auto"在规则部分尝试过，但这会导致更多'prettier/prettier': ['error', {endOfLine: 'auto'}]

我已经删除了下面的制表符间距；

    events_filtered_monthsNews: function() {
        return this.news.filter(u => u.monthsNews)
    },

格式如下；

        events_filtered_monthsNews: function() {return this.news.filter(u => u.monthsNews)},

这消除了警告，但现在会产生更多错误，并且对于工作来说完全不切实际。

我正在尝试在我的 VueJS 项目中导入一个 scss 文件，然后它将在其中进行编译，从而能够与我的项目一起使用。但是，我需要一些帮助，因为目前它只是错误。有没有办法做到这一点？请注意，我对 VueJS 很陌生，所以我只是在了解基础知识。

我在 src 文件夹中创建了一个名为 scss 的文件夹，其中包含我的 main.scss 文件。接下来在我的 Vue.JS 中，我有以下代码；

<template>
  <div id="app">
    <Home></Home>
    <Primary></Primary>
    <Secondary></Secondary>
  </div>
</template>

<script>
import Home from './components/Home.vue'
import Primary from './components/Primary.vue'
import Secondary from './components/Secondary.vue'

export default {
  name: 'app',
  components: {
    'Home': Home,
    'Primary': Primary,
    'Secondary': Secondary
  }
}

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `
          @import "@/scss/main.scss";
        `
      }
    }
  }
};

</script>

<style lang="scss">
#app {
    display:block;
}
</style>

我创建了两个选项卡，<li>默认情况下，我希望在第一个选项卡上设置活动类。

然后，选择第二个选项卡时，.Active类应该传递到第二个选项卡<li>并从第一次移除。

我可以使用 CSS 创建一些样式规则，以便为当前处于活动状态的选项卡提供视觉指示。

我还创建了一个JS Fiddle来查看当前输出。

欢迎任何帮助，因为我被困住了。

<ul class="overlay-panel-actions-primary">
    <li v-for="(tab, index) in tabs" @click="currentTab = index">{{tab}}</li>
</ul>
<div class="content-bd">
    <div class="tab-content">
        <div v-show="currentTab === 0">
            List of filters options
        </div>
        <div v-show="currentTab === 1">
            List of sort options
        </div>
    </div>
</div>

new Vue({
  el: "#app",
    data() {
        return {
            currentTab: 0,
            tabs: ['Filter', 'Sort']
        };
    },
})

我有以下桌面,它创建4个相等的列,全部为25%.

.footer-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

<div class="footer-inner">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
</div>

但是,如何在媒体查询中调整这些大小以使第一列达到100%并且其余列自然地包裹在下面,现在仍然使用CSS网格33.333%？

.footer-inner {
  display: grid;
  grid-template-columns: 100% 1fr 1fr 1fr; 
  /* AND THIS */
  grid-template-columns: 100% 33.333% 33.333% 33.333%;
}

我想在我的页面上显示文章列表.首先显示所有内容,但如果用户单击按钮,则只显示与单击按钮相关的文章.这意味着它将查看阵列中的"葡萄",如果是红色,则显示列表中的红葡萄酒.最好有一个按钮来显示所有默认返回初始视图的按钮.欢迎任何帮助.

<button>Show ALL Articles<button>
<button ng-click="filter('red')">Show me articles with red wines<button>
<button ng-click="filter('white')">Show me articles with white wines<button>
<button ng-click="filter('rose')">Show me articles with rose wines<button>

<ul>
    <li ng-repeat="item in wineListings | filter: filter">
        <h2>{{item.country}}</h2>
        <p>{{item.grape}}</p>
    </li>
</ul>

$scope.wineListings = [
    {
        country:"France",
        grape:"red"
    },
    {
        country:"Spain",
        grape:"red"
    },
    {
        country:"Italy",
        grape:"white"
    },    
    {
        country:"USA",
        grape:"rose"
    }
];

我在为投影创建 @mixin 时遇到问题。常规CSS中我想要的阴影如下

-webkit-box-shadow: 0px 2px 3px 2px rgba(0, 0, 0, 0.2);
 -moz-box-shadow: 0px 2px 3px 2px rgba(0, 0, 0, 0.2);
 box-shadow: 0px 2px 3px 2px rgba(0, 0, 0, 0.2);

我创建的@mixin 就是这样；

@mixin box-shadow(
    $top, $left, $blur, $size, $color) {
}

然后为了使用它，我将以下内容添加到我的 scss 文件中

@include box-shadow(0,2px,3px,2px, rgba(0,0,0, 0.2));

但是，它被破坏了，因为我没有看到在编译 SCSS 后应用了任何阴影 CSS。

我正在尝试将元素设置为相对onclick.我的代码将div设置为relative,但是我需要将其他div重置为绝对定位.到目前为止我有......

<div class="case-studies">
    <section class="pagination">
        <div>one</div>
        <div>two</div>
        <div>three</div>
        <div>four</div> 
    </section>

    <div class="case-study" style="background:blue;"></div>
    <div class="case-study" style="background:green;"></div>
    <div class="case-study" style="background:orange;"></div>
    <div class="case-study" style="background:pink;"></div>
</div>

$('.pagination div:first-of-type').on('click', function() {
    $('.case-study:first-of-type').css("position", "relative"); 
});

$('.pagination div:nth-of-type(2)').on('click', function() {
    $('.case-study:nth-of-type(2)').css("position", "relative");    
});
$('.pagination div:nth-of-type(3)').on('click', function() {
    $('.case-study:nth-of-type(3)').css("position", "relative");    
});

$('.pagination div:last-of-type').on('click', function() {
    $('.case-study:last-of-type').css("position", "relative");  
});

我试图在Vue JS中创建一个启动屏幕（加载屏幕），几秒钟后消失，显示我的默认视图。我尝试了几种方法，但都无法使用。最接近此示例的是CodePen上的示例，但理想情况下，该组件不在main.js中，而是位于其自己的组件中。尽管如此，以下代码仍无法正常工作。

我的main.js如下所示：

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

Vue.config.productionTip = false;

// FILTERS
Vue.filter('snippet', function(value) {
    return value.slice(0,100);
});

Vue.component('loading-screen', {
  template: '<div id="loading">Loading...</div>'
})

new Vue({
  router,
  store,
  render: h => h(App),
  data: {
    isLoading: true
  },
  mounted () {
    setTimeout(() => {
      this.isLoading = false
    }, 3000)
  }
}).$mount("#app");

我的App.vue如下

<template>
  <div id="app">

    <loading-screen v-if="isLoading"></loading-screen>

    <Top/>
    <router-view/>
    <PrimaryAppNav/>

  </div>
</template>


<script>

import Top from './components/Top.vue' …