孔明灯

孔明灯是翻牌子的变体（变体的详细说明可以查看变体与预设）。其为不可控组件（详细说明可查看基础玩法组件逻辑规范）

按需引入

import Vue from 'vue'
import SkyLanterns from '@tuia/market-ui/lib/SkyLanterns'
import '@tuia/market-ui/lib/SkyLanterns/style'

Vue.use(SkyLanterns)

代码演示

普通形式

<mk-sky-lanterns
  ref="skyLanterns"
  v-bind="baseConfig"
  @clickStart="clickStart"
/>

点击展开js部分代码

export default {
  data() {
    return {
      // 静态配置可以 freeze 来减少vue监听 （非必需）
      baseConfig: Object.freeze({
        cardsConfig: {
          img: '//yun.tuisnake.com/market-ui/d5f4f929-6513-41a6-af11-37cd647afca2.png',
          length: 9,
        },
        // 传入 empty，表示默认不显示
        frontImg: 'empty',
      }),
    };
  },

  methods: {
    async clickStart(index) {
      const skyLanterns = this.$refs.skyLanterns;
      if (!skyLanterns.isWaitStart) {
        return;
      }
      await skyLanterns.start({
        // 传入需要放飞的孔明灯
        index,
        // （非必传）传入 empty 表示显示为空，传入其他cdn地址则显示对应图片
        frontImg: 'empty',
      });
      // 判断是否还可以继续玩
      if (true) {
        await skyLanterns.reset();
      } else {
        // 不可玩就禁用
        await skyLanterns.disable();
      }
    },
  },
};

重置所有孔明灯

// 只重置组件状态，不会重置孔明灯状态
this.$refs.skyLanterns.reset();
// 重置组件状态，并重置所有孔明灯状态
this.$refs.skyLanterns.reset({
  needResetAll: true,
});

塞入特殊的孔明灯状态

// 通过reset方法来塞入特殊的孔明灯状态
this.$refs.skyLanterns.reset({
  // 状态中每一项都是孔明灯放飞后图片的cdn地址
  cardsState: Array.from({ length: 9 }, () => ''),
});

推荐出图规范

按照以下尺寸格式出图，可以更快速更方便地定制使用

资源名	对应参数	宽x高	说明	示例
孔明灯图片	-	200x285	-

API

支持基本的屏幕适配以及基础玩法组件逻辑规范涉及的API

基本类型定义

// 样式值定义
export type StyleValueType = string | number;
// 样式对象定义
export type StyleType = Record<string, StyleValueType>;

// 孔明灯配置定义
export interface CardsConfigType {
  // 孔明灯图片
  img: string;
  // 总孔明灯数
  length: number;
}

// 开始方法参数定义
export interface StartOptType {
  // 需要放飞的孔明灯索引
  index: number;
  // 孔明灯放飞后图片，传入 empty 表示不显示
  frontImg?: string;
}

// 重置方法参数定义
export interface ResetOptType {
  // 是否全部重置为关闭
  needResetAll?: boolean;
  // 重置为特殊的孔明灯状态，状态中每一项都是孔明灯放飞后图片的cdn地址
  cardsState?: string[];
}

Props

参数	说明	类型	默认值
containerStyle	容器样式	StyleType	{ width: 700, height: 720 }
cardsArray	孔明灯图片数组，每个孔明灯图片可不同，长度大于0时，优先级比 cardsConfig 高	string[]	-
cardsConfig	孔明灯图片以及孔明灯数，每个孔明灯图片一样，优先级比 cardsArray 低	CardsConfigType	{ img: '//yun.tuisnake.com/market-ui/d5f4f929-6513-41a6-af11-37cd647afca2.png', length: 9 }
frontImg	默认孔明灯放飞后图片，默认不显示	string	empty
rowsAmount	一行孔明灯数	number	3
cardStyle	孔明灯样式	StyleType	{ width: 200, height: 285 }
waitShakeInterval	等待开始时，每个孔明灯晃动间隔（ms）	number	1500
waitShakeIndexArray	等待开始时，摇动的顺序, 默认按照正常顺序	number[]	-
handStyle	手势样式	StyleType	{ width: 165, height: 145, top: 100, left: 80 }
handImg	手势图片	string	//yun.tuisnake.com/market-ui/72c5c1b8-b93a-4b38-8330-4ae27cf2c870.png
forceUnitFunc	自定义屏幕适配转换方法，详见屏幕适配	addUnitFuncType	undefined

Slots

暂未提供插槽

Events

名称	参数	说明
clickStart	number	点击孔明灯，会将孔明灯索引传出
stateChange	StateChangeDataType	状态变化事件，详见基础玩法组件逻辑规范

Methods

因为其为不可控组件，故不提供stop方法，当然支持其他基础玩法组件的方法

名称	入参	出参	说明
start	StartOptType	Promise	开始方法，规范详见基础玩法组件逻辑规范
stop	-	-	不提供结束方法，详见基础玩法组件逻辑规范
reset	ResetOptType	Promise	重置方法，详见基础玩法组件逻辑规范
disable	无	Promise	禁用方法，详见基础玩法组件逻辑规范
getState	无	StateConstant	获取状态方法，详见基础玩法组件逻辑规范
getCardsState	无	string[]	获取当前所有孔明灯的状态
addUnitFunc	StyleValueType	string	单位转换方法（仅处理数字），优先使用forceUnitFunc，若未定义则按照750=100vw来转换，详见屏幕适配
addUnitForAll	StyleType	StyleType	对样式对象中所有数字样式进行转换处理，详见屏幕适配

State

暴露了部分computed的数据，方便外部判断

参数	说明	类型	示例
isWaitStart	是否为等待开始状态，详见基础玩法组件逻辑规范	boolean	true
isDisable	是否为禁用状态，详见基础玩法组件逻辑规范	boolean	false