小编doo*_*ean的帖子

如何VueJS路由器链接活动样式

我的页面目前有Navigation.vue组件.我想让每个导航悬停并激活."悬停"有效,但"有效"则无效.

这是Navigation.vue文件的样子:

<template>
    <div>
        <nav class="navbar navbar-expand-lg fixed-top row">

                    <router-link tag="li" class="col" class-active="active" to="/" exact>TIME</router-link>
                    <router-link tag="li" class="col" class-active="active" to="/CNN" exact>CNN</router-link>
                    <router-link tag="li" class="col" class-active="active" to="/TechCrunch" exact>TechCrunch</router-link>
                    <router-link tag="li" class="col" class-active="active" to="/BBCSport" exact>BBC Sport</router-link>
        </nav>
    </div>
</template>
Run Code Online (Sandbox Code Playgroud)

以下是风格.

<style>

   nav li:hover,
   nav li:active{
      background-color: indianred;
      cursor: pointer;
    }

</style>
Run Code Online (Sandbox Code Playgroud)

这就是现在悬停的样子,并且在活动时预期完全相同. 这就是现在悬停的样子,并且在活动时预期完全相同.

如果你给我一个关于样式路由器链接活动作品的建议,我将不胜感激.谢谢.

vue.js vue-router routerlink

45
推荐指数
5
解决办法
7万
查看次数

如何在没有一键的情况下解构对象

我有一个像obj = { test1: 'sth', test2: 'sth', label: 'sth' }.

我想解构这个对象,{...obj} 除了 labelget { test1: 'sth', test2: 'sth' }

如何在没有这个键的情况下解构对象?

我应该创建一个新对象还是有什么方法可以简单地在一行中做到这一点?

javascript destructuring javascript-objects

5
推荐指数
1
解决办法
1828
查看次数

如何在一行中创建多行表格(Material-UI/CSS)

我有这样的数组:

const sample = [
  { name: 'apple', detail: [{'a', 'b'}]},
  { name: 'banana', detail: [{'a', 'b'}]},
];
Run Code Online (Sandbox Code Playgroud)

假设我想创建一个类似于以下附件的表:

在此处输入图片说明

那是表的主体部分,我已经把所有的细节都放在了 . 它按照我的预期创建桌子,但尺寸非常窄,而且与桌子头也不匹配。

我想知道是否有一种智能方法可以将多个数据连续映射并嵌入到一个表格单元格中。

名称部分(苹果和香蕉)必须是第一个具有行跨度的表格单元格。

css user-interface html-table reactjs material-ui

4
推荐指数
1
解决办法
4788
查看次数

这是扩展 Material-UI 组件的正确方法吗(React / Typescript)

我正在尝试将 Material-ui 组件扩展为我自己的具有自定义属性的组件。我正在使用带有打字稿的reactjs。

下面的代码是我的试用:

import React from 'react';
import clsx from 'clsx';
import { makeStyles } from '@material-ui/core';
import { Theme } from '@material-ui/core/styles/createMuiTheme';
import Tabs, { TabsProps } from '@material-ui/core/Tabs';

export interface Iprops extends TabsProps {
  /* how to add a variant ? */
}

const useStyles = makeStyles((theme: Theme) => ({
    root: {
       // styles
     }
}));

export const BasicTabs = (props: Iprops) => {
    const classes = useStyles(props);
    if (props.variant === 'test') {
        return (
            <Tabs
                {...props} …
Run Code Online (Sandbox Code Playgroud)

typescript reactjs material-ui

4
推荐指数
1
解决办法
5497
查看次数

macOS M1 上找不到 pkg-config 问题


我想我已经尝试了互联网上针对此问题的大部分解决方案/建议。
我正在使用 macOS Monterey / M1 Max / node 版本 10.,并面临以下错误:

/bin/sh: 1: pkg-config: 未找到 gyp: 在 binding.gyp 中调用“pkg-config pixman-1 --libs”返回退出状态 127。在尝试加载 binding.gyp 时

错误:gyp失败,退出代码:1

我尝试用brew安装pkg-config,但出现同样的错误。
有人对这个问题有想法吗?我也安装了rosetta。

pkg-config

3
推荐指数
1
解决办法
4250
查看次数

VueJS Router不加载组件

我正在使用VueJS路由器,但路由器没有加载组件.

我有About.vue和Contact.vue,只是带有要测试的标签 - 以下是它的样子:

<template>
  <div>
    <h1>Contact page. Welcome baby!</h1>
  </div>
</template>
Run Code Online (Sandbox Code Playgroud)

这是带有三个路由器链路和路由器视图的App.vue.

<template>
   <div>
     <h1>Routing</h1>
     <router-link to="/">Home</router-link>
     <router-link to="/about">About</router-link>
     <router-link to="/contact">Contact</router-link>
     <router-view></router-view>
  </div>
</template>
Run Code Online (Sandbox Code Playgroud)

这是main.js(导入文件的路径是正确的)

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import {routers} from './router'

Vue.use(VueRouter);

let router = new VueRouter({mode: 'history', routers});

new Vue({
    el:'#app',
    router,
    components: {
    'app-home' : App
    }
});
Run Code Online (Sandbox Code Playgroud)

这是路由器的JS文件.router.js(路径正确)

import About from './About.vue'
import Contact from './Contact.vue'
import Home …
Run Code Online (Sandbox Code Playgroud)

vue.js vue-router vue-component

2
推荐指数
1
解决办法
7931
查看次数

如何使用自定义 webpack 在 React 上设置环境变量

我的 React 应用程序不是由 create-react-app 运行,而是由自定义 Webpack 配置运行。

我已经安装了dotenv//dotenv-expand以及dotenv-webpack.

我有.env/.env.development文件,API_URL其中包含变量。

在我的网址文件上,

const { API_URL } = process.env
Run Code Online (Sandbox Code Playgroud)

并用它API_URL来获取数据。

但在这个文件上,当我 时console.log(process.env),它是空的。

我也尝试过更新webpack.config.js文件

const Dotenv = require('dotenv-webpack');
Run Code Online (Sandbox Code Playgroud)

new Dotenv()
Run Code Online (Sandbox Code Playgroud)

在插件数组中。

但还是不行。

我也尝试过使用变量名REACT_APP_API_URL,但结果相同。

有人可以帮我设置环境变量吗?

谢谢。

webpack.config.js

const webpack = require('webpack')
const Dotenv = require('dotenv-webpack');
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpackMerge = require('webpack-merge')

const modeConfig = env => require(`./build-utils/webpack.${env}`)(env)
const …
Run Code Online (Sandbox Code Playgroud)

environment-variables reactjs webpack

2
推荐指数
1
解决办法
7651
查看次数