[英]How to render plugins jQuery (as tooltip and Switchery) with Vue.js on a Bootstrap Modal?
How are you doing? 你好吗? I hope well!
我希望很好!
So I've got a template at ThemeForest (pure HTML + CSS + jQuery) and I am developing app in Vue.js + Laravel. 所以我在ThemeForest有一个模板(纯HTML + CSS + jQuery),我正在Vue.js + Laravel中开发应用程序。
I am facing a problem when I have to make 2 plugins work (one is the Bootstrap Tooltip and other the Switchery ) inside a Bootstrap Modal. 我必须在Bootstrap Modal内使2个插件正常工作时遇到一个问题(一个是Bootstrap Tooltip,另一个是Switchery )。
I would like keep it as it is because I would not like the change the template =) 我想保持原样,因为我不希望更改模板=)
When I put it inside a View Component it simply does not work! 当我将其放在View组件中时,它根本无法工作! There is my code, if somebody can help!
如果有人可以提供帮助,就有我的代码!
OBS: I make the code above a bit cleaner then the real one and I am using VUEIFY what I thinks it's not a problem! OBS:我把上面的代码比真正的代码更干净了,我正在使用VUEIFY,我认为这不是问题!
BUTTON THET TRIGGERS THE MODAL 按钮THET触发模态
<a href="#" data-toggle="modal" data-target="#sources-modal">My Modal</a>
MY MODAL CODE 我的模态代码
<template>
<!-- Source -->
<div id="sources-modal" class="modal fade" style="display: none;">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Sources</h4>
</div>
<div class="modal-body">
<div class="row p-10">
<div class="col-md-6 m_md_bottom_15">
<span class="waves-effect btn btn-warning" data-toggle="tooltip" data-original-title="Refresh" @click="fetchRecordList()"><i class="fa fa-refresh"></i></span>
</div>
</div>
<div class="over_auto" v-el:data-grid>
<table class="table table-striped table-bordered m-0">
<thead>
<tr>
<th class="w_50">
<input @click="selectAll()" v-model="allSelected" type="checkbox">
</th>
<th class="th_sort" @click="sort('name')" :class="isSortedColumn('name')">Name</th>
<th class="t_center th_sort w_100" @click="sort('active')" :class="isSortedColumn('active')">Active</th>
<th class="t_center w_100">Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="r in list | filterBy tableFilter | orderBy sortProperty sortDirection" track-by="$index">
<td>
<input type="checkbox" v-model="selected" value="{{ r.id }}">
</td>
<td>{{ r.name }}</td>
<td class="t_center">
<input type="checkbox" data-plugin="switchery" data-color="#5fbeaa" data-size="small" v-model="r.active" />
</td>
<td class="t_center">
<span class="waves-effect btn btn-warning btn-xs" data-toggle="tooltip" title="Edit" @click="fillForm(r)"><i class="fa-fw fa fa-pencil"></i></span>
<span class="waves-effect btn btn-danger btn-xs" data-toggle="tooltip" title="Delete" @click="deleteRecord(r)"><i class="fa-fw fa fa-times"></i></span>
</td>
</tr>
<tr v-show="!list.length">
<td class="t_center" colspan="4">No records found</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</template>
HERE I EXTRACTED THE TOOLTIP AND SWITCHERY CODE FROM THE MODAL TO SHOW IT EASYER 在这里,我从模态中提取了TOOLTIP和SWITCHERY代码,以使其更加轻松
<input type="checkbox" data-plugin="switchery" data-color="#5fbeaa" data-size="small" v-model="r.active" />
<span class="waves-effect btn btn-warning" data-toggle="tooltip" data-original-title="Refresh" @click="fetchRecordList()"><i class="fa fa-refresh"></i></span>
Somebody knows how to help me? 有人知道如何帮助我吗?
Thanks in advance! 提前致谢!
Nobody!! 没有人!! hahahahaa Now that I've learned better how to work with view I will share my solution trying to help someone!
hahahahaa现在我已经更好地学习了如何使用视图,我将分享尝试帮助某人的解决方案!
Just did 2 directives to make it work! 刚做了2条指令使其生效!
About Switchery I gave up from this jquery plugin and did by my own I component! 关于Switchery,我放弃了这个jquery插件,由我自己的I组件完成了! You can checkout on this post Wrapping Switchery in a Directive VueJS
您可以在指令VueJS中对此帖子进行包装开关检出
About tooltip 关于工具提示
import Vue from 'vue';
Vue.directive('plTooltip', {
params: [
'animation',
'container',
'html',
'placement',
'trigger',
],
bind: function() {
$(this.el).tooltip({
animation: this.params.animation || true,
container: this.params.container || false,
html: this.params.html || false,
placement: this.params.placement || 'top',
title: this.vm.$t(this.expression) || '',
trigger: this.params.trigger || 'hover focus',
});
},
unbind: function() {
$(this.el).tooltip('destroy');
}
});
I hope it helps someone! 希望对您有所帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.