小编Yar*_*nko的帖子

如何在 Vue.js 项目中添加字体

我有一个使用 Laravel 和 Vue.js 的项目，我使用 scss。我想在我的项目中添加新字体，但我不能这样做。我创建文件 fonts.scss，用字体创建一个变量

@font-face {
  font-family: "Proxima Nova Bold";
  src: url(/Proxima-Nova-Bold.otf);
}

$proxima-nova-bold: 'Proxima Nova Bold', sans-serif;

Run Code Online (Sandbox Code Playgroud)

我有控制台错误 GET http://local.{my-domain}/Proxima-Nova-Bold.otf net::ERR_ABORTED

这是我在 Vue 组件中导入 scss 文件的方法

@import '../../../fonts/fonts.scss';

Run Code Online (Sandbox Code Playgroud)

这是我的 Laravel 组合

let mix = require('laravel-mix');

mix.copy('resources/assets/images', 'public/images', false)
    .js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css')

Run Code Online (Sandbox Code Playgroud)

我哪里出错了？或者告诉我如何正确添加字体？

javascript sass laravel vue.js

Yar*_*nko

2018 07-26

8
推荐指数

3
解决办法

2万
查看次数

保存并加载输入图像

我创建了一个输入类型=文件的表单。从此表单提交信息后，将转到本地存储并添加到某个块。我可以添加文本，但无法添加图像，不是文件名，而是真实图像。

所以结果应该看起来像 div，里面有一些文本信息和来自用户电脑的真实图像

let outputs = $('.output-text');
  let idMask = "outputs_";
  function showArticle(){
    let isLen = localStorage.length;
    if(isLen > 0){
        for(let i = 0; i < isLen; i++){
            let key = localStorage.key(i);
            if(key.indexOf(idMask) == 0){
                $('<div></div>').addClass('student-card')
                    .attr('data-itemId', key)
                    .html(localStorage.getItem(key))
                    .prependTo(outputs);
            }
        }
    }
}

showArticle();


$(".load-form").on('submit', function(event) {
    event.preventDefault();

    let groupName = $(this).find('#select-group option:selected').text();
    let pupilName = $(this).find('#select-pupil option:selected').text();
    let message = $(this).find('#textarea').val();
    let inputImg = $(this).find('#file-name').text();
    let addArticle = '<div class = "student-card__group">Group: <span class = "group-name_js">'+groupName'+
 '</span></div><div class …

Run Code Online (Sandbox Code Playgroud)

javascript jquery

Yar*_*nko

2021 08-28

5
推荐指数

1
解决办法

2万
查看次数

悬停不使用字体真棒图标

这是一些html和css。我需要在链接内悬停时显示箭头，但我不能这样做。我该如何解决？

.header-text-links a {
  display: block;
  width: 278px;
  height: 55px;
  padding: 0px 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #fab608;
  color: #fab608;
  font-size: 18px;
  font-family: "Futura Demi";
  text-transform: uppercase;
}

.header-text-links a .svg-inline--fa {
  display: none;
}

.header-text-links a:hover {
  color: white;
  background: #fab608;
  text-decoration: none;
  justify-content: space-around;
}

.header-text-links a:hover .header-text-links a .svg-inline--fa {
  display: block;
}

Run Code Online (Sandbox Code Playgroud)

<script src="https://use.fontawesome.com/releases/v5.0.8/js/fontawesome.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/solid.js"></script>
<div class="header-text-links">
  <a class="header-text-links__works" href="#">Some text<i class="fas fa-arrow-right"></i></a>
</div>

Run Code Online (Sandbox Code Playgroud)

另外，我尝试通过类 .fas …

html css svg font-awesome

Yar*_*nko

2018 03-16

2
推荐指数

1
解决办法

1302
查看次数

联系表 7 将禁用的属性添加到按钮以防止重复提交

我有一个 WordPress 网站，并且有 Contact form 7 插件，我想添加 attr 以提交按钮以禁用双重提交。现在我有这个代码来防止双重提交

$(document).on('click', '.wpcf7-submit', function(e){
            if( $('.ajax-loader').hasClass('is-active') ) {
                e.preventDefault();
                return false;
            }
        });

Run Code Online (Sandbox Code Playgroud)

但我想在表单发送或获取错误响应时添加 attr disabled 以获得更好的用户体验

javascript wordpress jquery contact-form-7

Yar*_*nko

lucky-day

1
推荐指数

1
解决办法

5186
查看次数