MessagePractise/resources/js/src/views/CardAction.vue

<template>
	<section id="card-actions">
		<b-row>

			<b-col cols="12">
				<b-card-actions ref="cardAction" title="ability test" @refresh="refreshStop('cardAction')">
					<b-row>
						<b-col cols="12">
							<div v-if="checkAbility">
								<b-table responsive :items="messages" bordered>
									<template #cell(ICON)="data" class="text-center">
										<div class="text-center">
											<feather-icon :icon="data.value" />
										</div>
									</template>
								</b-table>
							</div>
							<div v-else>沒權限</div>
						</b-col>
					</b-row>
				</b-card-actions>
			</b-col>


			<b-col md="6" v-for="message in messages" :key="message.id">
				<b-card :img-src="require('@/assets/images/slider/01.jpg')" img-alt="Card image" img-top no-body>
					<!-- body -->
					<b-card-body>
						<b-card-title>{{ message.title }}</b-card-title>
						<b-card-text>
							{{ message.content }}
						</b-card-text>
					</b-card-body>

					<!-- card links -->
					<b-card-body>
						<b-card-text>
							{{ message.name }} - {{ message.updated_at }}
						</b-card-text>
						<b-link class="card-link">
							詳細內容
						</b-link>
					</b-card-body>
				</b-card>
			</b-col>


			<b-col md="6" lg="6">
				<b-card :img-src="require('@/assets/images/slider/01.jpg')" img-alt="Card image" img-top no-body>
					<!-- body -->
					<b-card-body>
						<b-card-title>Card title</b-card-title>
						<b-card-text>
							Some quick example text to build on the card title.
						</b-card-text>
					</b-card-body>

					<!-- kitchen sink link -->
					<b-list-group flush>
						<b-list-group-item v-for="data in kitchenSinkList" :key="data.text">
							{{ data.text }}
						</b-list-group-item>
					</b-list-group>

					<!-- card links -->
					<b-card-body>
						<b-link class="card-link">
							Card link
						</b-link>
						<b-link class="card-link">
							Another link
						</b-link>
					</b-card-body>
				</b-card>
			</b-col>

			<!-- card collapsible  -->
			<b-col md="6">
				<b-card-actions title="Collapsible" action-collapse>
					<b-card-text>
						<span>You can create a collapsible content by adding </span>
						<code>actionCollapse</code>
						<span> prop in </span>
						<code>&lt;b-card-actions&gt;</code>
					</b-card-text>
					<b-card-text>
						<span>Click on </span>
						<feather-icon icon="ChevronDownIcon" />
						<span> to see card collapse in action.</span>
					</b-card-text>
				</b-card-actions>
			</b-col>

			<!-- card refresh -->
			<b-col md="6">
				<b-card-actions ref="refreshCard" title="Refresh Content" action-refresh
					@refresh="refreshStop('refreshCard')">
					<b-card-text>
						To create a card with refresh action use <code>actionRefresh</code> prop along with
						<code>&lt;b-card-actions&gt;</code>
					</b-card-text>
					<b-card-text>
						<span>Click on </span>
						<feather-icon icon="RotateCwIcon" />
						<span> icon to see refresh card content in action.</span>
					</b-card-text>
				</b-card-actions>
			</b-col>

			<!-- card remove -->
			<b-col md="6">
				<b-card-actions title="Remove Card" action-close>
					<b-card-text>
						You can create a closeable card by using <code>actionClose</code> prop along with
						<code>&lt;b-card-actions&gt;</code>
					</b-card-text>
					<b-card-text>
						<span>Click on </span>
						<feather-icon icon="XIcon" />
						<span> icon to see closeable card in action.</span>
					</b-card-text>
				</b-card-actions>
			</b-col>
		</b-row>
	</section>
</template>

<script>
import BCardActions from '@core/components/b-card-actions/BCardActions.vue'
import {
	BTable, BRow, BCol, BCard, BCardText, BLink, BListGroup, BListGroupItem, BCardTitle, BCardBody,
} from 'bootstrap-vue'
import useJwt from '@/auth/jwt/useJwt'
import ability from '../libs/acl/ability'

export default {
	components: {
		BCardActions,
		BTable,
		BRow,
		BCol,
		BCard,
		BCardText,
		BLink,
		BCardTitle,
		BListGroup,
		BListGroupItem,
		BCardBody,
	},
	data() {
		return {
			fields: [
				'ACTION',
				{ key: 'ICON', label: 'ICON' },
				'DETAILS',
			],
			show: false,
			messages: [],
			kitchenSinkList: [
				{ text: 'Cras justo odio' },
				{ text: 'Vestibulum at eros' },
			],
		}
	},
	computed: {
		checkAbility() {
			return ability.can('read', 'management')
		},
	},
	created() {
		useJwt.getMessages({ number: 2 })
			.then(res => {
				this.messages = res.data
			})
	},
	methods: {

		// stop refreshing card in 3 sec
		refreshStop(cardName) {
			setTimeout(() => {
				this.$refs[cardName].showLoading = false
			}, 3000)
		},
	},
}

</script>