capacitor-test/pages/profile.vue

<template>
  <div class="profile-page">
    <van-space direction="vertical" fill>
      <van-row justify="center">
        <van-col>
          <van-image
            width="10rem"
            height="10rem"
            fit="cover"
            round
            src="/nadarik.jpg"
            @click="previewAvatar"
          />
        </van-col>
      </van-row>

      <van-cell-group title="Информация о пидарасе" inset>
        <van-cell title="Имя" value="Надар" />
        <van-cell title="Должность" value="Хуеплет" label="Это чистая правда" />
      </van-cell-group>

      <van-cell-group inset>
        <van-cell title="Нажми меня" is-link @click="showActions = true" />
      </van-cell-group>
    </van-space>

    <van-action-sheet
      v-model:show="showActions"
      duration="0.1"
      :actions="actions"
      cancel-text="Атминет"
      close-on-click-action
      @select="onClickAction"
      @cancel="onCancel"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { ActionSheetAction } from 'vant'
import { Haptics } from '@capacitor/haptics'

const showActions = ref(false)

const actions: ActionSheetAction[] = [
  {
    name: 'Моча',
  },
  {
    name: 'Какаши',
  },
]

function onClickAction(action: ActionSheetAction) {
  showNotify({ type: 'success', message: action.name })
  Haptics.vibrate()
}

function onCancel() {
  showNotify({ type: 'danger', message: 'Закрыто нахой' })
}

function previewAvatar() {
  showImagePreview({
    images: ['https://i.imgur.com/PE3sVPb.jpeg'],
    showIndex: false,
  })
}
</script>

<style scoped>
</style>