IT的隱形人世界

先講結果，還沒成功

今天在開發社群相關功能，發現Line可以依照Id將資訊帶入到查詢頁面中，這樣就可以簡單地進行好友新增囉!

方法1:
npm install rimraf -g

簡單說明一下程序

1.  先找一張自己喜歡的200K以下的Gif動圖

有時候寫SQL寫得太順手的時候，就會報出這個未知的錯誤

太久沒遇到還是會忘記XD

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

就找到了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>