fix: 修复自定义组件引用类型定义错误,Textarea组件缺少导出focus方法(#233)

This commit is contained in:
pipipi-pikachu 2023-11-14 22:52:49 +08:00
parent a71c9ffbd3
commit effd46e05e
4 changed files with 16 additions and 4 deletions

View File

@ -39,7 +39,7 @@
<div class="formula" v-else> <div class="formula" v-else>
<div class="formula-item" v-for="item in formulaList" :key="item.label"> <div class="formula-item" v-for="item in formulaList" :key="item.label">
<div class="formula-title">{{item.label}}</div> <div class="formula-title">{{item.label}}</div>
<div class="formula-item-content" @click="latex =item.latex"> <div class="formula-item-content" @click="latex = item.latex">
<FormulaContent <FormulaContent
:width="236" :width="236"
:height="60" :height="60"
@ -107,7 +107,7 @@ const symbolTabs = SYMBOL_LIST.map(item => ({
const latex = ref('') const latex = ref('')
const toolbarState = ref<'symbol' | 'formula'>('symbol') const toolbarState = ref<'symbol' | 'formula'>('symbol')
const textAreaRef = ref<HTMLTextAreaElement>() const textAreaRef = ref<InstanceType<typeof TextArea>>()
const selectedSymbolKey = ref(SYMBOL_LIST[0].type) const selectedSymbolKey = ref(SYMBOL_LIST[0].type)
const symbolPool = computed(() => { const symbolPool = computed(() => {

View File

@ -5,6 +5,7 @@
'disabled': disabled, 'disabled': disabled,
'resizable': resizable, 'resizable': resizable,
}" }"
ref="textareaRef"
:disabled="disabled" :disabled="disabled"
:value="value" :value="value"
:rows="rows" :rows="rows"
@ -14,6 +15,8 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue'
withDefaults(defineProps<{ withDefaults(defineProps<{
value: string value: string
rows?: number rows?: number
@ -34,6 +37,15 @@ const emit = defineEmits<{
const handleInput = (e: Event) => { const handleInput = (e: Event) => {
emit('update:value', (e.target as HTMLInputElement).value) emit('update:value', (e.target as HTMLInputElement).value)
} }
const textareaRef = ref<HTMLTextAreaElement>()
const focus = () => {
if (textareaRef.value) textareaRef.value.focus()
}
defineExpose({
focus,
})
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View File

@ -101,7 +101,7 @@ const { resetSlides } = useSlideHandler()
const mainMenuVisible = ref(false) const mainMenuVisible = ref(false)
const hotkeyDrawerVisible = ref(false) const hotkeyDrawerVisible = ref(false)
const editingTitle = ref(false) const editingTitle = ref(false)
const titleInputRef = ref<HTMLInputElement>() const titleInputRef = ref<InstanceType<typeof Input>>()
const titleValue = ref('') const titleValue = ref('')
const startEditTitle = () => { const startEditTitle = () => {

View File

@ -77,7 +77,7 @@ const close = () => {
mainStore.setSearchPanelState(false) mainStore.setSearchPanelState(false)
} }
const searchInpRef = ref<HTMLInputElement>() const searchInpRef = ref<InstanceType<typeof Input>>()
onMounted(() => { onMounted(() => {
searchInpRef.value!.focus() searchInpRef.value!.focus()
}) })