-- 添加jquery
yarn add jquery
--添加jquery代码提示
yarn add @types/jquery
--导入jquery
import $ from 'jquery'
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | // 普通的dom元素 <div class="message_content"> // content .....</div> <script> export default { name: 'collapseM', props: { }, data () { return { isContentShow: false } }, methods: { colToggle () { let self = this console.log(this.$refs.message_content_ref) // 实现普通下滑动画 $(this.$refs.message_content_ref).slideToggle(function () { self.isContentShow = !self.isContentShow }) } }, created () { }, computed: { }, watch: { }, mounted () { } } </script> |
传统用jquery是通过 id 或者 class 直接操作 dom ，但是 class 那样在vue组件里面会造成所有相同组件的动画污染，id肯定不可取
通过给元素设置refs 然后再通过jquery 去操作通过refs获取到的dom 实现每个组件自己内部的动画
「梦想一旦被付诸行动，就会变得神圣，如果觉得我的文章对您有用，请帮助本站成长」
下一篇：html实现石头剪刀布小游戏案例
国瑞个人博客: https://www.huanggr.cn/，我们关注Web前端开发技术，web前端开发,移动前端开发，前端资讯，同时分享前端资源和工具等，期待你的参与,了解更多..
博主独立研发主题：
没咋研究，emmm
评：web前端绘制八卦图_超简单教程这个是太极阴阳鱼，不是八卦图。
评：web前端绘制八卦图_超简单教程
后会有期（1年前 (2020-08-14)）文章不错
评：宝塔系统面板无法正常显示我采用该方法解决了才发布的教程
评：iview-admin点击路由报错vue-router.esm.js?8c4f:2007 Uncaught (in promise) NavigationDuplicated {_name: "Navi网站被攻击了，有些源码文件损坏了
评：前端搜索框下方保留搜索记录
12（2年前 (2020-03-11)）为什么我的foreach会报错 Error in v-on handler: "TypeE...
评：iview中多选框单选实现方法
共 0 条评论关于"vue工程化项目导入jquery实现组件内部动画"
最新评论