如何在Bootstrap Modal上使用Vue.js渲染插件jQuery(作为工具提示和Switchery)
How to render plugins jQuery (as tooltip and Switchery) with Vue.js on a Bootstrap Modal?
你好吗?我希望一切顺利!
所以我在ThemeForest有一个模板(纯HTML+CSS+jQuery),我正在Vue.js+Laravel中开发应用程序。
当我必须在Bootstrap Modal中使用两个插件(一个是Bootstrap Tooltip,另一个是Switchery)时,我面临着一个问题。
我想保持原样,因为我不想更改模板=)
当我把它放在视图组件中时,它根本不起作用!这是我的密码,如果有人能帮忙的话!
OBS:我让上面的代码比真正的代码更干净,我正在使用VUEIFY,我认为这不是问题
按钮触发模式
<a href="#" data-toggle="modal" data-target="#sources-modal">My Modal</a>
我的MODAL代码
<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>
在这里,我从MODAL中提取了工具和交换机代码,以便更容易地显示
<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>
有人知道怎么帮我吗?
提前感谢!
没人!!哈哈哈哈现在我已经更好地学会了如何使用view,我将分享我的解决方案,试图帮助别人!
只是做了两个指令让它工作!
关于交换机我放弃了这个jquery插件,而是用我自己的I组件!你可以在这个帖子上结账在指令VueJS 中封装交换机
关于工具提示
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');
}
});
我希望它能帮助到别人!
相关文章:
- 如何在Angular2中使用jQuery插件
- 如何使jQuery插件函数可调用以供独立使用,而不在集合上操作
- 我的jQuery插件参数没有正确启动,遇到了问题
- 是否有任何snippet或jQuery插件可以列出easylist.txt模式匹配的DOM中的所有元素
- TableExport jquery插件:文件名和扩展名问题
- 如何在使用selectBoxIt JQuery插件时检测选项更改
- jQuery插件-从插件中调用公共方法
- 扩展jQuery插件以更改配置
- "工具提示"jQuery插件坏了
- 不能在图像中的地图标记中使用花式框jquery插件的区域标记
- 使用Booklet Jquery插件,我如何验证最后一页是否显示
- 合并TinyMCE(jQuery插件)文件
- 带有jquery插件的backbone.js视图
- 自制jQuery插件已触发,但无法工作
- 我如何才能找到哪些网站使用我的jQuery插件
- jquery插件或javascript方法自动调整文本输入(而非文本区域)(固定宽度)可变高度的大小
- 在多个元素上使用jquery插件,只需稍作修改
- HtmlBox(jquery插件)在ajax调用中不起作用
- 构造jQuery插件
- 使用filedownload jquery插件处理FilePathResult返回值