时间戳

首页 > 解决方案 > 在 vue 页面中的单个元素上严格执行 JQuery 函数后，样式未应用于 SINGLE ELEMENT

javascript - 在 vue 页面中的单个元素上严格执行 JQuery 函数后，样式未应用于 SINGLE ELEMENT

问题描述

我在我的 vue.js 项目中使用 JQuery-AsRange ( https://github.com/thecreation/jquery-asRange )。该函数在我的 vue 页面的脚本部分的 .vue 页面中执行，并且 JQuery-AsRange 库完美运行，但缺少任何 css 样式。

加载的 css 样式应该处理那些生成的 id 和标签（我可以复制可以粘贴生成的非样式 JavaScript 代码并将其添加到模板中，它将被正确设置样式 - 它只是不会移动），但是当 JQuery 函数在脚本部分中执行时 - 它奇怪地忽略了页面样式。

在执行 JQuery 后，我无法找到刷新页面样式的方法，但页面的其余部分仍然包含所有样式 - 它只是“AsRange”部分没有样式... 

<template>
...
...

<div class="padding">
  <h5>Range Bar:</h5>
  <input class="range-example" type="text" min="0" max="10" value="4,10" step="1" /> <!-- JS is under /js/script.jss (Copied the styling from the library 'JQuery-AsRange' as part of my .css library 
</div><!-- close div -->

</template>


<script>
import $ from 'jquery';
import 'jquery-asRange';

$(document).ready(function() {
   $(".range-example").asRange({
  range: true,
  limit: false,
  tip: true,
   });
 });
</script>

图片：

预期结果

实际结果

注意 -预期结果使用与实际结果相同的库和 CSS。预期使用直接的 HTML 和 JQuery。我希望它适用于 vue.js 元素。

标签： javascriptjqueryvue.jsvue-componentvuex

解决方案

您可以将asrange初始化的方法放入mounted

...
...

<script>
import $ from 'jquery';
import 'jquery-asRange';

export default {
  mounted(){
    $(".range-example").asRange({
      range: true,
      limit: false,
      tip: true,
    });
  }
}
</script>

推荐阅读