【问题标题】:How to setup a property class to extend on all components on VueJS project?如何设置一个属性类来扩展 Vue JS 项目中的所有组件?
【发布时间】:2021-10-30 02:56:12
【问题描述】:

我在我的 VueJS 项目中使用 Vuetify,几个组件的文本都是大写的,我需要在我想要的每个组件上设置 class="text-none" 属性。那么,我怎样才能将这个属性扩展到所有组件或细节呢?

我使用属性类时的一些例子。

<v-tab class="text-none" key="meetingsListTab">Reuniões</v-tab>

<v-btn @click="onClickBack" text class="text-none grey--text">
<span class="material-icons"> arrow_back </span> Voltar
</v-btn>

<v-btn
@click="onClickDeleteMeeting"
outlined
color="red lighten-1"
class="text-none mr-4">
Deletar reunião
</v-btn>

【问题讨论】:

    标签: html css vue.js vuetify.js


    【解决方案1】:

    我会发出一个全局事件并让所有相关组件监听它。

    // button function
    function deleteHandler() {
      this.$root.$emit('<meeting-id>', {action: 'delete'})
    }
    
    // on your-component
    {
      props: {
        meetingId: {
          type: String,
          default: 'meeting-id'
        }  
      }
      data: {
        noText: ''
      },
      mounted() {
        this.$root.$on(this.meetingId, (payload) => {
          if(payload.action === 'delete') this.setNoTextClass
        }
      }
    }
    

    在您的 HTML 中

    <your-component 
      :class="[noText, 'grey--text']" 
      key="meetingsListTab">
    Reuniões
    </your-component>
    

    参考资料:

    【讨论】:

    • 我能回答你的问题吗?
    猜你喜欢
    • 2020-09-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-06-09
    • 2020-09-23
    相关资源
    最近更新 更多