有一个包gifski，它有一个CLI版本windows，要简单GUI，以免在终端输入命令。
NodeJS你如何构建一个应用程序来Electron访问这个文件并执行命令？
如何正确制定您的搜索问题google？我不知道该如何提问
有puppeteer一个服务器在服务器上执行授权，它作为对服务的方便授权，提供作为多帐户的机会。简而言之，一项服务补充了另一项无法做到这一点的服务。
有一次通过短信验证码确认的授权，手动输入验证码，然后将帐户添加到数据库中，将来允许从不同设备在一个地方登录。
问题是什么：
在填写原始数据时，需要确认进入，通过短信，原始输入包括用用户数据替换服务，这是异步完成的，需要等待短信确认才能进入。
我通过 RabbitMQ 消息代理组织了这个系统。代理接收消息，然后将这些消息发送到服务器，在那里执行它们。
Broker 中的授权系统分为两部分。
获取原始数据（登录名/密码）。
通过短信代码确认登录。
我制作了两个相互独立地接收数据和代码的队列，因此它们被破坏了。
如何组织系统，以便在输入数据并处理它们之后，服务器正在等待代码？
就我自己而言，我看到了两种解决问题的方法：
在数据监听器内部，创建另一个监听器，它将等待代码并检查是否符合当前数据（因为可能有很多代码，它们将在不同的时间交付给不同的用户）。
创建与授权相同级别的侦听器并创建一个变量，我将在其中放置所有传入代码并在时间过去后将它们从变量中删除。我将通过代理查看此变量，如果找到匹配项，则进一步执行我的操作。
这些选项中哪个更正确？
摆脱这种情况的最佳方法是什么？
我只是想等待我的队列的代码应用该操作，但直接在其中执行或在其中执行一次，这就是问题所在。
如何做出用零填充数字的效果？
0从到有一个数字999。
根据这个数字的长度，有必要在它前面输出零。
如果是数字9，结果是009。
如果是数字27，结果是027。
如果是数字120，结果是120。
零本身必须包含在标签span中。
const block = document.querySelector('div');
const zeroLength = 3;
let value = 27;
function update() {
const valueSplit = value.toString().split('').reverse();
const result = [...new Array(zeroLength)].map((_, index) => {
const number = valueSplit[valueSplit.length - 1 - index] || 0;
const className = number === 0 ? 'zero' : null;
return `<span class="${className}">${number}</span>`;
});
block.innerHTML = result.join('');
value = (value + 1) % 300;
requestAnimationFrame(update);
}
requestAnimationFrame(update);body {
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: #272727;
color: #fff;
font-family: Arial;
min-height: 100vh;
}
div {
font-size: 100px;
display: flex;
}
span {
width: 75px;
display: block;
}
span.zero {
opacity: 0.25;
}<div></div>我的代码没有按我想要的方式工作。我无法理解在数字前添加零的逻辑的本质。在我看来，这更容易完成，而且不像我做的那样麻烦。
在可以寻找已经相似的效果或至少建议该效果的名称的情况下，即使称为该效果，也无需考虑。
片段：
Vue.component('fade-component', {
template: `<div class="fade-component" ref="container"></div>`,
mounted() {
gsap.fromTo(this.$refs.container, {
autoAlpha: 0
}, {
autoAlpha: 1,
duration: 0.5
});
},
beforeDestroy() {
// Не работает
gsap.to(this.$refs.container, {
autoAlpha: 0
});
}
});
new Vue({
el: "#app",
data: {
show: true
},
methods: {
toggleShow() {
this.show = !this.show;
}
}
})body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
li {
margin: 8px 0;
}
button {
margin-bottom: 20px;
border-radius: 4px;
background-color: #e74c3c;
border: 0;
color: #fff;
font-size: 20px;
padding: 10px 20px;
outline: none;
box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.5);
transition: box-shadow .1s;
cursor: pointer;
}
button:active, button:focus {
box-shadow: 0 0 0 5px rgba(52, 152, 219, 0.5);
}
.fade-component {
width: 300px;
height: 300px;
background-color: #34495e;
border-radius: 4px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<button @click="toggleShow">Toggle</button>
<fade-component v-if="show" />
</div>有一个项目是组件连接fadeComponent的，组件在其连接阶段出现/消失，组件出现的动画直接位于钩子mounted()中，但是有这样的钩子beforeDestroy()吗？更准确地说，如何beforeDestroy()在删除之前为钩子设置超时？
我尝试了使用transitionand hooks enter/的选项leave，但有必要在v-if里面做transition，但在我的任务中，有必要完全禁用该组件。在这种情况下，块消失有什么选择？
我有以下SASS包含一些数据的文件：
@import './functions'
$media-1024: 1024
$media-1280: 1280
$media-default: 1920
$media-2560: 2560
@function calcResolution($value, $resolution, $originalResolution: $media-2560)
$difference: $resolution / $originalResolution
@return to-fixed($value * $difference)
@mixin media-1024
@media (max-width: #{$media-1024 + 1px})
@content
@mixin media-1280
@media (max-width: #{$media-1280 + 1px})
@content
@mixin media-default
@media (max-width: #{$media-default + 1px})
@content
@mixin media-2560
@media (max-width: #{$media-2560 + 1px})
@content
有一个函数calcResolution()可以根据权限之间的差异返回一个值。因此，对于大多数图像，您可以编写以下代码，它将正常工作：
@include media-default // 1920
width: calcResolution(50, $media-default) // 1920 / 2560 * 50 = 37.5
height: calcResolution(100, $media-default) // 1920 / 2560 * 100 = 75
在视觉上它看起来像这样：
.btn
$font-size: 18px
font-size: $font-size
@include media-default
font-size: calcResolution($font-size, $media-default)
@include media-1280
font-size: calcResolution($font-size, $media-1280)
@include media-1024
font-size: calcResolution($font-size, $media-1024)
很多看起来很讨厌的重复代码：
如何在不重复代码的情况下将 mixins 合并为一个？
也许还有其他方法可以解决它？
我使用了纯 Gulp，在编译时，我得到了这样的输出：
class useShowPassword {
constructor(button, input) {
if (!button || !input) throw 'Элементы не найдены';
this.button = button;
this.input = input;
button.addEventListener('click', () => this.toggleAttribute());
}
toggleAttribute() {
const status = this.input.getAttribute('type') === 'text';
this.input.setAttribute('type', status ? 'password' : 'text');
status ? this.button.classList.remove('active') : this.button.classList.add('active');
}
}
我将 Rollup 与模块连接起来，代码开始看起来像这样：
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define('showPassword', factory) :
(global = global || self, global.showPassword = factory());
}(this, (function () { 'use strict';
class useShowPassword {
constructor(button, input) {
if (!button || !input) throw 'Элементы не найдены';
this.button = button;
this.input = input;
button.addEventListener('click', () => this.toggleAttribute());
}
toggleAttribute() {
const status = this.input.getAttribute('type') === 'text';
this.input.setAttribute('type', status ? 'password' : 'text');
status ? this.button.classList.remove('active') : this.button.classList.add('active');
}
}
return useShowPassword;
})));
在html我试图包含一个文件并使用它的功能：
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/app.css" />
</head>
<body>
<!-- // -->
<script src="js/app.js"></script>
<script>
const button = document.querySelector('.button');
const input = document.querySelector('.input');
new useShowPassword(button, input);
</script>
</body>
</html>
因此，我收到一个错误：Uncaught ReferenceError: useShowPassword is not defined
文件本身gulpconfig.js只改变了一行：
.pipe(rollup({ plugins: [babel(), resolve(), commonjs()] }, 'umd'))
这不是配置的问题，而是如何在项目中使用构建的文件。
upd：代码本身，它可以工作，我只是无法访问该类，因为 它是在使用Rollup'a
我无法创建磁化效果，我尝试从这里开始效果，但没有成功
链接到我的结果。（vue上的代码，所以我把它贴在sanbox上）
悬停时，缩放效果有效，但磁化效果无效。
кода нет, все в песочнице
我在 Vue 有一个项目。
应用结构如下
| App.vue
| main.js
| router.js
|
+---components
| | Notifications.vue
| |
| +---hud
| | PlayerHud.vue
| | Showpass.vue
|
+---store
| | index.js
| |
| \---modules
| |
| +---hud
| | index.js
| | playerhud.js
| | showpass.js
| |
| +---notifications
|
\---views
| Hud.vue
Hud.vue 文件本身
<template>
<div id="hud">
<player-hud></player-hud>
<show-pass></show-pass>
<notifications id="notifications"></notifications>
</div>
</template>
<script>
import PlayerHud from "../components/hud/PlayerHud";
import Showpass from "../components/hud/Showpass";
import Notifications from "../components/Notifications";
export default {
components: {
PlayerHud,
Showpass,
Notifications
}
};
</script>
路线：
import Vue from 'vue';
import Router from 'vue-router';
import Hud from './views/Hud';
Vue.use(Router);
export default new Router({
mode: 'history',
routes: [
{
path: '/hud',
component: Hud
}
]
});
底线是有一个 PlayerHud.vue 组件，它应该包含路由，有一个 ShowPass.vue 组件，它也有路由。
有必要确保路由不会相互干扰。
export default new Router({
mode: 'history',
routes: [
{
path: '/hud',
component: Hud,
children: [
{
path: '/playerhud',
component: Stats,
children: [
{
path: 'settings',
component: Settings,
},
{
path: 'other',
component: Other,
}
]
},
{
path: '/show-pass',
component: ShowPass,
children: [
{
path: 'first',
component: First,
},
{
path: 'second',
component: Second,
}
]
}
]
}
]
});
如果我这样做，那么当我沿着 /playerhud 路线前进时，我将关闭 /show-pass 所有内部选项卡，同时组织路线，以便在过渡期间没有任何重叠或关闭，但可以正常工作。
应该是什么结构？可能还有其他我还没有看到的选项。
我要验证一个.json文件。
在控制器中：
public function import(ImportPost $request)
{
ProcessImport::dispatch($request->validated());
return redirect()->back();
}
ImportPost 文件本身包含以下代码
<?php
namespace App\Http\Requests;
use Illuminate\Foundation\Http\FormRequest;
class ImportPost extends FormRequest
{
public function authorize()
{
return true;
}
public function rules()
{
return [
'file' => 'required|file|max:10000',
];
}
}
文件本身使用以下方法解析：
json_decode(File::get($request->file('file')), true);
那么，我怎样才能解析这个文件并在以后验证它呢？
也就是说，最初这是一个file.json文件，我想按重量检查它，并根据其中包含的其他字段检查它的内容。
我假设能够创建两个验证器并首先检查文件本身，然后检查其内容。这种方法正确吗？
如何将一个对象的形状动画化为另一种形状。
路径对象中有一个规则的圆圈。还有形状，它有许多曲线和非常不同的结构。对如何对从一个对象到另一个对象的过渡进行动画处理的问题感兴趣。
#shape {
fill: gray;
}
#circle {
fill: red;
}
#circle-path {
fill: yellow;
}<svg xmlns="http://www.w3.org/2000/svg" width="146.46799mm" height="138.86078mm" viewBox="0 0 146.46799 138.86078" version="1.1">
<path id="shape" d="m 57.994787,35.937017 c -3.565275,22.228189 85.795973,-13.105122 84.666663,-11.339285 -19.96273,35.147623 1.3138,49.902207 26.45833,62.744045 0.99272,0.389339 -25.82829,18.898863 -44.60119,24.190473 -4.04384,1.38725 -41.098315,2.80074 -28.726185,-34.017851 0.136954,-0.718762 -53.549741,5.805982 -53.672618,3.023809 0,0 1.700693,-26.444115 -9.827381,-40.065476 -6.889193,-8.358279 -2.234786,-15.57944 12.095239,-19.654762 10.612461,-2.556252 15.089861,2.556323 13.607142,15.119047 z"/>
<circle id="circle" cx="35.340775" cy="146.37648" r="12.662203"/>
<path id="circle-path" d="M 74.650297,107.63393 A 12.662203,12.662203 0 0 1 61.988094,120.29613 12.662203,12.662203 0 0 1 49.325891,107.63393 12.662203,12.662203 0 0 1 61.988094,94.971724 12.662203,12.662203 0 0 1 74.650297,107.63393 Z"/>
<animate xlink:href="#shape" repeatcount="indefinite" attributeName="d" dur="3s" values="M 74.650297,107.63393 A 12.662203,12.662203 0 0 1 61.988094,120.29613 12.662203,12.662203 0 0 1 49.325891,107.63393 12.662203,12.662203 0 0 1 61.988094,94.971724 12.662203,12.662203 0 0 1 74.650297,107.63393 Z; m 57.994787,35.937017 c -3.565275,22.228189 85.795973,-13.105122 84.666663,-11.339285 -19.96273,35.147623 1.3138,49.902207 26.45833,62.744045 0.99272,0.389339 -25.82829,18.898863 -44.60119,24.190473 -4.04384,1.38725 -41.098315,2.80074 -28.726185,-34.017851 0.136954,-0.718762 -53.549741,5.805982 -53.672618,3.023809 0,0 1.700693,-26.444115 -9.827381,-40.065476 -6.889193,-8.358279 -2.234786,-15.57944 12.095239,-19.654762 10.612461,-2.556252 15.089861,2.556323 13.607142,15.119047 z"/>
</svg>实际上，我理解发生这种情况的原因，到目前为止，解决这个问题的方法似乎是从一种状态到另一种状态的手动调整。将形状拟合到圆对我来说没有问题，但是如果我的形状有超过100 个点和曲线，那么将它们中的每一个至少大致拟合到圆当然是不明智的。这就是为什么我要问是否有可以解决这个问题的东西？
从一条路径到另一条路径，这根本不相关。
这个问题只是理论上的。
如何连接Electron应用程序和一些C++或C#程序，关键是即时数据交换。当然，理想情况下，监听Electron上的事件以进行异步数据处理操作。
有什么选择？
也许有一些方法可以为应用程序编写一个模块来工作？
让我用一个真实的例子来重新表述这个问题。
我有中间件
<?php
namespace App\Http\Middleware;
use Closure;
class EmailIsVerifiedOverride
{
/**
* Handle an incoming request.
*
* @param \Illuminate\Http\Request $request
* @param \Closure $next
* @return mixed
*/
public function handle($request, Closure $next)
{
// TODO: Добавить проверку на верифицированность профиля.
return $next($request);
}
}
在 Laravel 6.0 中（下面不知道）有 Auth
'verified' => \Illuminate\Auth\Middleware\EnsureEmailIsVerified::class
我通过创建一个新层并修改内核的行为来覆盖这个组件：
'verified.default' => \Illuminate\Auth\Middleware\EnsureEmailIsVerified::class,
'verified' => \App\Http\Middleware\EmailIsVerifiedOverride::class,
实际上，我想在我的覆盖中使用中间件并重新定义它。
<?php
namespace App\Http\Middleware;
use Closure;
class EmailIsVerifiedOverride
{
/**
* Handle an incoming request.
*
* @param \Illuminate\Http\Request $request
* @param \Closure $next
* @return mixed
*/
public function handle($request, Closure $next)
{
$requireVerified = true;
if ($requireVerified)
$this->middleware('verified.default');
return $next($request);
}
}
喜欢这个解决方案。
我正在开发一个使用后端作为Laravel和前端作为VueJS的应用程序。SPA应用程序。在Vue 中，我使用routes。
我把样式文件分散在sass文件夹下， 有几个文件：app , variables , auth , profile。
有一个入口点app.vue，其中包含以下代码：
<template>
<router-view></router-view>
</template>
接下来是几个文件：Home.vue、Auth.vue、Profile.vue。
它们本身具有其他模块的连接。实际上，在每个文件中，我通过以下方式连接样式：
<style lang="sass" scoped>
@import "../../sass/app.sass"
</style>
但我有这个问题。这些文件中的每一个在内部都使用了更多的路由，因此将这些导入中的每一个添加到每个组件中是没有意义的，所以我在其中添加了::v-deep选择器来加深它，但这甚至不是重点。
底线是我无法正确分散逻辑。
首先，每个我的风格：auth.sass，app.sass都有完整的代码
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&display=swap')
@import "variables"
*
outline: none
margin: 0
padding: 0
box-sizing: border-box
a
color: inherit
text-decoration: none
&:hover, &:active, &:focus
text-decoration: none
color: inherit
ul, li, ol
list-style-type: none
body
font-family: $font-family-default
background-color: $body-bg
因此，这段代码在导入时甚至在父组件上都不起作用，问题出在选择器上，每个 html 元素分别在样式中分别赋予data-v-782dcf84，分别为body[data-v-782dcf84 ]，但是，当我打开同一个代码检查器时，我的身体没有其他属性。只是一个标签. 好的，如果这个问题可以解决，添加到app.vue输入文件中没有scoped，那么包括字体呢？我如何正确连接所有这些东西？
这里的问题不在于其解决方案，而在于应用程序的正确设置。我对拐杖不感兴趣，我更感兴趣的是如何正确组织风格的呈现并继续前进，以免再次遇到这些事件。
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" viewBox="0 0 1920 150" preserveAspectRatio="none">
<path id="waves" d="M1920,150.4l-1920,0L0,17.19c0,0,111.94,45.39,145.82,48.62c65.77,6.26,159.1-57.84,225.53-57.28
c61.02,0.52,142.91,57.39,203.94,57.28C635.31,65.7,773,20.92,833,19.85c72.2-1.29,193.34,55.5,265.53,53.95
c57.97-1.25,176.24-63.16,234.24-63.94c66.09-0.89,210.02,56.01,276.12,55.95c65.42-0.06,143.53-59.13,208.29-65.27
C1837.43-1.38,1920,17.19,1920,17.19L1920,150.4z">
<animate attributeName="d"
dur="2s"
repeatCount="indefinite"
values="M1920,225L0,225L0,25c0,0,111.94,68.15,145.82,73c65.77,9.41,159.1-86.84,225.53-86
c61.02,0.78,142.91,86.16,203.94,86C635.31,97.84,773,30.61,833,29c72.2-1.93,193.34,83.33,265.53,81
c57.97-1.87,176.24-94.83,234.24-96c66.09-1.33,210.02,84.1,276.12,84c65.42-0.1,143.53-88.78,208.29-98
C1837.43-2.88,1920,25,1920,25L1920,225z;
M1920,150.4l-1920,0L0,17.19c0,0,71.94,55.39,105.82,58.62c65.77,6.26,223.1-63.84,289.53-63.28
c61.02,0.52,171.91,61.39,232.94,61.28C688.31,73.7,782,7.92,842,6.85c72.2-1.29,224.34,75.5,296.53,73.95
c57.97-1.25,193.24-64.16,251.24-64.94c66.09-0.89,196.02,56.01,262.12,55.95c65.42-0.06,140.53-53.13,205.29-59.27
c20.25-1.92,62.82,4.65,62.82,4.65L1920,150.4z;
M1920,225L0,225L0,25c0,0,111.94,68.15,145.82,73c65.77,9.41,159.1-86.84,225.53-86
c61.02,0.78,142.91,86.16,203.94,86C635.31,97.84,773,30.61,833,29c72.2-1.93,193.34,83.33,265.53,81
c57.97-1.87,176.24-94.83,234.24-96c66.09-1.33,210.02,84.1,276.12,84c65.42-0.1,143.53-88.78,208.29-98
C1837.43-2.88,1920,25,1920,25L1920,225z;"/>
</path>
</svg>问题是如何让动画无限循环播放。
此刻，它就像反向执行一样。有没有关于这个正确动画的方法、文章或其他可能的信息来源？
波浪可以向任何方向前进 - 向左或向右，主要是无缝性，并且在此示例中没有“返回”（反向）效果。除了 JS，SVG 本身有没有办法创建这种效果？
我找不到有关将对象绑定到路径的信息。
我有以下 SVG 元素：
svg{
width: 500px;
height: 500px;
}
svg path{
fill: none;
stroke: red;
stroke-width: 5px;
}<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
<path id="curve" d="M64,287 C277,329 191,140 445,210" />
<text style="font-size: 24px;">
<textPath xlink:href="#curve" startOffset="50%" text-anchor="middle">test text</textPath>
</text>
<image href="https://img.icons8.com/ios-filled/50/000000/user-male-circle.png" rx=5 width="50px" height="50px">
<animateMotion
dur="5s"
repeatCount="3"
rotate="auto"
restart="whenNotActive">
<mpath xlink:href="#curve" />
</animateMotion>
</image>
</svg>根据 SO 上的答案创建了我的科学怪人，在那里我找到了附加到路径和图片的文本，这些文本仅通过动画附加。
目标是简单地将图像对象绑定到文本等路径。但是谷歌搜索一个小时没有结果，因此我在这里问这个问题。
有以下代码：
function getFilesFromPathByModifiedTime(){
let file;
fs.readdir(path, (err, files) => {
file = files.map((fileName) => {
return {
name: fileName,
time: fs.statSync(path + '/' + fileName).mtime.getTime()
};
})
.sort((a, b) => { return b.time - a.time; })
.map((v) => { return v.name; });
});
console.log(file); // -> undefined
//setTimeout(() => console.log(file), 1000) // -> Object;
}
此函数读取一个目录并按修改日期对其中的所有文件进行排序。
其实问题是如何正确的把async/await放在里面，把接收到的值放到一个变量中。
该函数是异步的，下面的注释掉的代码会在 1 秒内显示所有必要的数据。
有这样一个网站：
这个“印迹”在右侧和底部有一个曲线边框。
图片是静态的，但我将提供一个链接，说明它是如何在一种流行的服务上实现的。
我想知道如何实现这个效果？只对这些“四舍五入”的动画感兴趣。
你至少可以从哪个方向找到大致的信息？该站点使用画布绘制对象，但我确信这也可以在 SVG 上完成。
有一个效果，在悬停时，以这样的方式为圆设置动画，使得 X 和 Y 中的旋转值发生变化，但是如何实现效果以便它在平移下工作。
var box = $(".scene");
box.on('mousemove', function (e) {
var x = e.clientX - $(this).offset().left + $(window).scrollLeft();
var y = e.clientY - $(this).offset().top + $(window).scrollTop();
var rY = map(x, 0, $(this).width(), -30, 30);
var rX = map(y, 0, $(this).height(), -30, 30);
$('#x').html(x);
$('#y').html(y);
$(this).children(".box").css("transform", "rotateY(" + rY + "deg)" + " " + "rotateX(" + -rX + "deg)");
});
box.on('mouseenter', function () {
$(this).children(".box").addClass('transition-fast');
});
box.on('mouseleave', function () {
$(this).children(".box").removeClass('transition-fast');
$(this).children(".box").css("transform", "rotateY(" + 0 + "deg)" + " " + "rotateX(" + 0 + "deg)");
});
function map(x, in_min, in_max, out_min, out_max)
{
return (x - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
font-family: monospace;
font-size: 14px;
}
.stats{
margin-left: 50px;
font-size: 20px;
width: 200px;
}
.scene {
width: 300px;
height: 300px;
perspective: 600px;
cursor: pointer;
border: 5px solid #000;
padding: 50px;
border-radius: 50%;
}
.box {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transform-origin: center;
transition: transform 0.5s ease;
background: #000;
border-radius: 50%;
}
.box.transition-fast {
transition: transform 0.05s linear;
}
.side {
position: absolute;
width: 100%;
height: 100%;
color: white;
backface-visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.side h2 {
transform: translateZ(30px);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scene">
<div class="box">
<div class="side front-side">
<h2>Something text</h2>
</div>
</div>
</div>
<div class="stats">
<p>
X:
<span id="x"></span>
</p>
<p>
Y:
<span id="y"></span>
</p>
</div>实际上，这里是动画（我不知道如何正确调用它），但它必须不旋转，而是朝正确的方向移动但不超出边界。
这是所需的输出：
从 npm 安装一些现成的包，有一个愿望是覆盖其中包含的值，例如，有一个包 - @alfsnd/vue-bootstrap-select
在选择中启用搜索时
<v-select :searchable="true" />
一个输入似乎根据输入的数据对元素进行排序，实际问题是这个输入中的占位符包含英文字母（搜索），我想将它翻译成俄语或只是设置我自己的一些属性。
如何在不触及 node_modules 文件夹的情况下覆盖包本身的值（因为根本不建议在那里更改任何内容）。
当然，也可以选择更改包本身的值，但是在node_modules文件夹中可以不这样做，以免破坏原包的完整性吗？
一路上：
/node_modules/@alfsnd/vue-bootstrap-select/src/vue-bootstrap-select.vue
它包含更改所需的组件，它有一行：
props: {
labelSearchPlaceholder: {
type: String,
default: "Search"
},
},
如何在连接包的组件中将此变量更改为我自己的
从“@alfsnd/vue-bootstrap-select”导入 VSelect
我将简要地重复这个问题：
- 如何覆盖通过 npm 安装的包中设置的值？
