Question

我想使用我在vue项目的codepen上找到的js查询代码，但不确定如何集成它。我只是将文件粘贴到了我的Vue组件的created（）中，但似乎无法解决..该代码假定在输入表单中输入中国字时运行视觉动画。这是codepen：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>

谢谢！

我无法在Vue中集成js查询文件

0 个答案: