2025年1月14日 星期二

vue3-simple-alert 學習心得

官網

顯示提示輸入訊息並於按下確定時檢查是否有輸入,防止未輸入就按確定,且和按取消用不同邏輯處理

VueSimpleAlert.fire({
    title: '請輸入原因',
    input: 'text',
    showCancelButton: true,
    reverseButtons: true,
    confirmButtonText: '確定',
    cancelButtonText: '取消',
    preConfirm: (inputValue) => {
        if (!inputValue) {
            // show some message
            return false; // Prevents the alert from closing
        }
        return inputValue;
    }
}).then(r => {
    if (r.value) { 
      // do something (按取消則 r.dismiss='cancel' 且 r.value 不會有值)
    }
});

2024年12月24日 星期二

強制網頁不要被瀏覽器翻譯影響

中翻中會變得很奇怪,使用以下設定禁止翻譯網頁

<html lang="zh-Hant-TW" translate="no" class="notranslate">
<head>
    <meta name="google" content="notranslate" />
</head>

2024年10月18日 星期五

2024年9月26日 星期四

讓 div 也有 button 的 disabled 效果避免連續觸發click事件

.按鍵[disabled="true"] {
    opacity: 0.4;
    pointer-events: none;

<div class="按鍵" @click="aaa" :disabled="busy">click me</div>

※ 某些前端框架要改用 disabled="disabled"

2024年9月4日 星期三

vue router 學習心得

import router from '@/router/index';

index.ts
const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'home',
        component: () => import('../views/Index.vue'),
        meta: { requireAuth: true, title: 'sample app' }
    },

取得網址: process.env.BASE_URL+router.resolve({ name: 'xxx' }).href
導向網址: router.push({ name: 'xxx', query: {p1: 123} })

2024年7月8日 星期一

vue3-simple-alert 學習心得

官網 顯示提示輸入訊息並於按下確定時檢查是否有輸入,防止未輸入就按確定,且和按取消用不同邏輯處理 VueSimpleAlert.fire({     title: '請輸入原因',     input: 'text',     showCancel...