cordova Framework7 vue中的CSS选择器

mwyxok5s  于 2022-11-15  发布在  Framework7
关注(0)|答案(2)|浏览(237)

我尝试使用vue.js和Framework 7构建一个Cordova/Phonegap应用程序。我了解了如何在html元素中使用“v-on:click=“OnClick”属性来使用像“onClick”这样的函数。Framework 7已经在dom中实现了jquery。
但是有一个问题。我怎样才能直接访问dom,这样我就可以用jquery选择器选择整个css类了。比如:$('.likeButton') .?
在offical framework 7中,我找到了类似下面的代码来访问dom及其函数:

this.$$ or this.Dom7

这是我已经在home.vue文件中写下的内容:

<script>

  //import Fonts-awesome Icons
  import FontAwesomeIcon from '@fortawesome/vue-fontawesome'
  import {} from '@fortawesome/fontawesome-free-solid'
  import F7Icon from "framework7-vue/src/components/icon";
  import F7PageContent from "framework7-vue/src/components/page-content";
  import * as Framework7 from "framework7";

  export default {
    name: 'FAExample',

    components: {
      F7PageContent,
      F7Icon,
      FontAwesomeIcon
    },
    methods: {
      clickit: function () {
        console.log("hi");

        //this is what i have tested, looking if i have access to dom
        let $$ = this.$$;
        console.log($$);
      },
      //this is what i want to use
      $('.likebutton').on('click',function () {

  })
  }

  }

</script>

我希望你们能帮助我。我是vue.js和framework 7的新手。
谢谢你的帮助:)

rkttyhzu

rkttyhzu1#

我们可以使用所有DOM函数,就像

this.$$('.classname)

例如,如果您想通过jquery隐藏某些内容,您可以使用如下代码:

this.$$('.classname).hide()

要检查所有DOM函数,您可以查看官方文档。https://framework7.io/docs/dom7.html
但要确保你的DOM函数不应该在任何Window函数中。如果你在实现它时遇到错误,只需先创建“this”示例。
就像:var self=this;//使用此示例的全局变量

self.$$('.classname).hide()

如果需要任何framework 7帮助,请在skyp上给我打个电话:萨加尔希曼5_1

dzjeubhm

dzjeubhm2#

您是否尝试过使用Vue的$refs?您可以设置对特定DOM元素的引用,然后在Vue中访问它。
举个简单的例子:

<template>
  <div class="some-item" ref="itemRef">Some item</div>
</template>

然后在组件中:

var myItem = this.$refs.myItem;
// do what you want with that DOM item...

您也可以从父级访问$refs。下面链接中的示例给出了详细信息。
有关$refs的更多信息:https://v2.vuejs.org/v2/guide/components.html#Child-Component-Refs

相关问题