Morph Directive

Quasar 工具函数
DOM 变形工具

"v-morph"是 Quasar 提供的指令，它可以使 DOM 在两种状态间变换。

底层原理使用了 Morph 函数工具.

Morph API

Morph API
类型
Object | Any
说明
配置对象或触发器值

用法

请先阅读 Morph 工具函数页面，有利于理解这个指令的工作原理。

这个指令将组中的一个元素变形为另一个元素（变形过程带有动画）。变形是通过改变指令的值(model)来匹配变形元素的名称来激活的。

WARNING

  • "name"和"group"字段是必传的（可以作为指令参数或者值传入）
  • 若指令的值为对象格式，那么"model"字段也是必传的。
<template>
  <div class="q-pa-md relative-position" style="height: 600px; max-height: 80vh">
    <div
      class="absolute-top-left bg-red text-white q-ma-md q-pa-lg"
      style="border-radius: 10px; font-size: 32px"
      v-morph:topleft:boxes:800="morphGroupModel"
    >
      Top left
    </div>

    <div
      class="absolute-top-right bg-blue text-white q-ma-lg q-pa-xl"
      style="border-radius: 20px; font-size: 18px"
      v-morph:topright:boxes:600.tween="morphGroupModel"
    >
      Top right
    </div>

    <div
      class="absolute-bottom-right bg-orange text-white q-ma-lg q-pa-lg"
      style="border-radius: 0"
      v-morph:bottomright:boxes:400="morphGroupModel"
    >
      Bottom right
    </div>

    <div
      class="absolute-bottom-left bg-green text-white q-ma-xl q-pa-md"
      style="border-radius: 40px; font-size: 24px"
      v-morph:bottomleft:boxes:600.resize="morphGroupModel"
    >
      Bottom left
    </div>

    <q-btn
      class="absolute-center"
      color="purple"
      label="Next morph"
      no-caps
      @click="nextMorph"
    />
  </div>
</template>
Top left
Top right
Bottom right
Bottom left 
<template>
  <div class="q-pa-md relative-position" style="height: 280px; max-height: 80vh">
    <q-btn
      v-morph:btn:mygroup:300.resize="morphGroupModel"
      class="absolute-bottom-left q-ma-md"
      fab
      color="primary"
      size="lg"
      icon="add"
      @click="nextMorph"
    />

    <q-card
      v-morph:card1:mygroup:500.resize="morphGroupModel"
      class="absolute-bottom-left q-ma-md bg-primary text-white"
      style="width: 300px; border-bottom-left-radius: 2em"
    >
      <q-card-section class="text-h6">
        New user
      </q-card-section>

      <q-card-section class="text-subtitle1">
        Please fill the details for a new user.
      </q-card-section>

      <q-card-actions align="right">
        <q-btn flat label="Next" @click="nextMorph" />
      </q-card-actions>
    </q-card>

    <q-card
      v-morph:card2:mygroup:500.tween="morphGroupModel"
      class="absolute-bottom-left q-ma-md bg-primary text-white"
      style="width: 300px; border-bottom-left-radius: 2em"
    >
      <q-card-section class="text-h6">
        Finalize registration
      </q-card-section>

      <q-card-section class="q-py-xl text-center text-subtitle2">
        Thank you for registering.
      </q-card-section>

      <q-card-actions align="right">
        <q-btn flat label="Close" @click="nextMorph" />
      </q-card-actions>
    </q-card>
  </div>
</template>
New user
Please fill the details for a new user.
Finalize registration
Thank you for registering.
查看更多？
Vue 指令
Mutation 突变
Vue 指令
Scroll 滚动
发现了一处错误？帮助改进提交问题
Privacy Policy | Quasar Artwork
版权声明 本中文文档内容版权为站长个人所有，保留所有权利。
免责声明 本站点所包含的任何跳转链接均为第三方广告内容，站点对这些广告内容的准确性、合法性、真实性不承担任何责任。用户点击跳转链接进入第三方网站后，应自行判断广告内容的真实性和合法性，并自行承担因使用广告内容而产生的风险和责任。任何因使用第三方广告内容而导致的损失或损害，本站点概不负责。