先講結果，還沒成功
- 12月 17 週二 202413:54
Vue專案部屬於Azure static App上
先講結果，還沒成功
- 11月 25 週一 202410:08
Line Id轉換成Url，可以自行帶入查詢
今天在開發社群相關功能，發現Line可以依照Id將資訊帶入到查詢頁面中，這樣就可以簡單地進行好友新增囉!
- 5月 22 週三 202417:07
快速刪除node_modules方法
方法1:
npm install rimraf -g
rimraf node_modules
npm install rimraf -g
rimraf node_modules
- 2月 20 週二 202414:14
[MS SQL]查詢含特定文字的Stored Procedure或View
太常查詢了，筆記一下
[MS SQL]查詢含特定文字的Stored Procedure或view
- 6月 25 週六 202217:00
在Gitlab中使用Gif做大頭貼
簡單說明一下程序
1. 先找一張自己喜歡的200K以下的Gif動圖
1. 先找一張自己喜歡的200K以下的Gif動圖
- 6月 24 週五 202217:00
[C#]ORA-00911: invalid character
有時候寫SQL寫得太順手的時候，就會報出這個未知的錯誤
太久沒遇到還是會忘記XD
太久沒遇到還是會忘記XD
- 6月 23 週四 202217:00
introjs網站導覽功能
最近覺得網站比較複雜，所以問了谷哥大神看看有沒有甚麼方式可以讓使用者更簡單的了解網站的使用方式
就找到了introjs這個簡單的前端套件
- 6月 22 週三 202217:00
Vuetify 表單驗證簡易說明
最近有做到驗證，筆記一下，發現真的蠻淺顯易懂的，比elementUI還簡單...
- 5月 31 週二 202222:42
vue3 wangeditor3.0 版本 光標跳到最後問題
最近遇到一個問題，在使用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>
<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>
IT (3)