import {Directive, DirectiveBinding} from "vue";
export const clickOutside: Directive<HTMLElement, string> = {
mounted(el: HTMLElement, bind: DirectiveBinding) {
if(bind.value) {
window.addEventListener('click', (e) => {
if(!el.contains(<HTMLElement>e.target)) {
bind.value()
}
})
}
},
unmounted: function (el: HTMLElement, bind: DirectiveBinding) {
if(bind.value) {
window.removeEventListener('click', (e) => {
if(!el.contains(<HTMLElement>e.target)) {
bind.value()
}
})
}
}
}<div v-click-outside="() => isFilterOpen = false">
....
</div><a-config-provider :locale="currentLang">
<router-view v-slot="{ Component }">
<transition name="router" mode="out-in">
<component :is="Component"></component>
</transition>
</router-view>
</a-config-provider>const currentLang = ref(lang[CURRENT_LOCALE.value])
watch(CURRENT_LOCALE, () => {
currentLang.value = lang[CURRENT_LOCALE.value]
})
export enum LOCALES {
ru = 'ru',
en = 'en'
}
export const CURRENT_LOCALE: Ref<Locale> = ref(LOCALES.ru)<component :is="currentComponent" />
<button @click="currentComponent = ComponentTwo">Switch to component2</button
<button @click="currentComponent = ComponentThree">Switch to component3</buttonimport ComponentOne from '...'
import ComponentTwo from '...'
import ComponentThree from '...'
const currentComponent = shallowRef(ComponentOne)const table_headers = ref([
{name: "family_name", label: "Фамилия", widget_type: 'TextWidget', component: ComponentOne},
{name: "given_name", label: "Имя", widget_type: 'TextWidget', component: ComponentTwo},
{name: "date_of_birth", label: "Дата рождения", widget_type: 'TextWidget', component: ComponentThree},
])<component
:is="col.component"
:widget_name="[[col.name]]"
:widget_label="[[col.label]]"
></component>watch(() => props.modelValue, () => {
if(props.modelValue) update()
})export const useClientsStore = defineStore('client', () => {
const clientsData = ref()
}const store = useClientsStore();
onMounted(() => {
const clientJson: string | null = localStorage.getItem('clients')
if(clientJson) store.clientsData = JSON.parse(clientJson)
else store.clientsData = []
})state: () => ({
count: 0,
}),
getters: {
doubleCount: (state) => state.count * 2,
},export default {
methods: {
checkInput (event: any, options?: {storeID?:number, itemID?:number}):number {
// code
},
}
}export default {
methods: {
checkInput (event: any, storeID?:number, itemID?:number):number {
if(storeID) {
// code
}
},
}
}const app = createApp()
app.mount()<div>
<h3>{{ t(`tos.fundamentals.['1'].title`) }}</h3>
<p>{{ t(`tos.fundamentals.['1'].body`) }}</p>
</div>Component.vue
<script setup lang="ts">
const props = defineProps<{
imgSrc: string
}>()
</script>
<template>
<img :src="props.imgSrc" />
</template<template>
<component imgSrc="./assets/img.png" />
</template