IT的隱形人世界

最近覺得網站比較複雜，所以問了谷哥大神看看有沒有甚麼方式可以讓使用者更簡單的了解網站的使用方式

就找到了introjs這個簡單的前端套件

最近有做到驗證，筆記一下，發現真的蠻淺顯易懂的，比elementUI還簡單...

之前看網站時，發現一個功能，就是閱讀進度條

這功能可以讓User知道自己的頁面還有多長多多，就是一個炫麗的效果，這邊筆記一下

最近遇到一個問題，在使用vue3的wangeditor3.0 ，發現在輸入文字後，文字的光標會自行的跳到最後一個字，導致打字非常麻煩

<template>
        <div class="editor-container">
                <div :id="id"></div>
        </div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted, watch } from 'vue';
import wangeditor from 'wangeditor';
export default {
        name: 'wngEditor',
        props: {
                id: {
                        type: String,
                        default: () => 'wangeditor',
                },
                // 是否禁用
                isDisable: {
                        type: Boolean,
                        default: () => false,
                },
                // 雙像綁定
                // 参考：https://v3.cn.vuejs.org/guide/migration/v-model.html#%E8%BF%81%E7%A7%BB%E7%AD%96%E7%95%A5
                modelValue: String,
        },
        setup(props, { emit }) {
                const state = reactive({
                        editor: null,
                        isChanged : false,
                });
                // 初始化
                // https://doc.wangeditor.com/
                const initWangeditor = () => {
                        state.editor = new wangeditor(`#${props.id}`);
                        state.editor.config.placeholder = '請輸入內容';
                        state.editor.config.uploadImgShowBase64 = true;
                        state.editor.config.showLinkImg = false;
                        onWangeditorChange();
                        state.editor.create();
                        state.editor.txt.html(props.modelValue);
                        props.isDisable ? state.editor.disable() : state.editor.enable();
                };
                // 内容改變時
                const onWangeditorChange = () => {
                        state.editor.config.onchange = (html: string) => {
                                state.isChanged = true;    //標記改變
                                emit('update:modelValue', html);
                        };
                };

                // 監聽雙像綁定值
                // https://gitee.com/lyt-top/vue-next-admin/issues/I4LM7I

                watch(
                        () => props.modelValue,
                        (value) => {
                                if(!state.isChanged)
                                        state.editor.txt.html(value);
                                
                                state.isChanged = false;
                        }
                );

                onMounted(() => {
                        initWangeditor();
                });
                return {
                        ...toRefs(state),
                };
        },
};
</script>

最近開始使用open ID進行驗證認證 , 我在找尋解決方案時發現了identityserver4 得這個集大成的open ID使用 套件 , 切可以很方便擴展公司內部所使用的AD認證 或者是Google認證LINE認證等方式, 那我們就開始簡單的介紹一下identityserver4實作的方式。

筆記一下

EasyUI的Combobox擴展方法，可直讓Combobox可直接使用此方法調整require的狀態

今天重灌VS2019在發不時發生以下錯誤訊息

Web deployment task failed. ('Microsoft.Web.Deployment.DeploymentManager' 的類型初始設定式發生例外狀況。)

最近使用到在頁面中引入不同的html元素進行顯示

在建立元素的形態時會發現click被重複繫結，導致code重覆動作

最近遇到的問題，就是在一個View中使用多個Model的資料

這是其中之一個解法，使用dynamic的方式進行處理