PmFlip

翻转效果切换元素

基础用法

<el-row :gutter="20">
  <el-col :span="12">
    <PmFlip width="300px" height="150px" class="p-20">
      <template slot="front">
        <el-card>
          <h2>标题</h2>
        </el-card>
      </template>
      <template slot="back">
        <el-card>
          <h2>正文正文正文正文正文正文正文正文正文</h2>
        </el-card>
      </template>
    </PmFlip>
  </el-col>
  <el-col :span="12">
    <PmFlip width="300px" height="150px" class="p-20" direction="X">
      <template slot="front">
        <div style="background:#409EFF">
          <h2>标题</h2>
        </div>
      </template>
      <template slot="back">
        <div style="background:#67C23A">
          <h2>正文正文正文正文正文正文正文正文正文</h2>
        </div>
      </template>
    </PmFlip>
  </el-col>
</el-row>

Attributes

参数	说明	类型	可选值	默认值
direction	旋转方向	string	X,Y	Y
width	宽度	string	-	200px
height	高度	string	-	200px