Я не могу интегрировать JS файл запроса в VUE - PullRequest
Новая
       6

Я не могу интегрировать JS файл запроса в VUE

0 голосов
/ 11 ноября 2018

Я хотел бы использовать код запроса js, который я нашел на codepen в моем проекте vue, но я не уверен, как его интегрировать. Я просто вставил файл в созданный мной () компонент vue, но он, похоже, не сработал ... код предполагает запуск визуальной анимации при наборе китайского символа в форме ввода. это кодовая ручка: https://codepen.io/simeydotme/pen/CFcke

var $input = $('input');
 $input.on({

"focus": function(e) {
$(".input-container").addClass("active");
},

"blur": function(e) {
  $(".input-container").removeClass("active");
}

});

var previous = null;
setInterval( function() {
if( previous !== $input.val()
|| "" === $input.val()) {
getGoodCharacters( $input );
previous = $input.val();
 }
  }, 500);



function getGoodCharacters( $this ) {

var output = $this.val().trim();
var letters = output.split("");
var url = "https://service.goodcharacters.com/images/han/$$$.gif";

 $(".error-container, .help").removeClass("show");
 $(".output-container").empty();

 for( letter in letters ) {

var img = letters[letter] + "";
var newurl = url.replace("$$$",img);
loadCharacter( newurl , img );

 }

}

  function loadCharacter( url , letter ) {

 var img = new Image();
  var $output = $(".output-container");
 var $a = $("<a/>");
  var l = $("input").val().length;

  var cwidth = "120px";
 if( l > 7 ) { cwidth = "70px"; }
 else if( l > 6 ) { cwidth = "90px"; }
 else if( l > 5 ) { cwidth = "100px"; }

 $(img).load(function(){
  $a.attr({
   "href": url,
   "title": "Good Character Chinese Symbol: "+ letter + ""
  }).css("width", cwidth ).append( $(this) ).appendTo($output);
   $(".help").addClass("show");
}).attr({
  src: url
   }).error(function(){
   $(".error-container").addClass("show");
   });

  }


var $try = $(".tryme a").on("click", function(e) {

 e.preventDefault();
 $input.val( $(this).text() );

 });

Я также импортировал модуль jquery в свой компонент 

import $ from "jquery";

вот HTML, который я добавил в шаблон 

 <div class="container input-container">

  <input type="text" id="input" placeholder="中文" value="中文"/>

</div>

Спасибо!

...