Vue Composable Utils

# ✨ useEmbed

useEmbed uygulamanıza embed kod eklemenizi ya da gerektiğinde kaldırmanızı oldukça kolaylaştırır.

# 🏪 State

useEmbed modülünü import edin ve ihtiyacınız olan metotları aşağıdaki gibi çağırın:

import { useEmbed } from 'vue-composable-utils';

const { isEmbedBlock, clear } = useEmbed(code);

# 🚀 Özellikleri

useEmbed "reactive" bir yapı ile birlikte @vue/composition-api ile uyumlu şekilde kullanılabilir.

  • useEmbed: eklemek istediğiniz embed kodu argüman olarak gönderin.
const code = ref(null);

const { isEmbedBlock, clear } = useEmbed(code);

# ⚗️ isEmbedBlock

isEmbedBlock gönerilen kod bloğunun bir embed kodu olup olmadığını belirler.

<template>
  <div>
    <textarea rows="5" cols="50" placeholder="Place embed code here" v-model="code"></textarea>
    <button type="button" @click="clear">Clear</button>
    <div v-if="isEmbedBlock" v-html="code"></div>
  </div>
</template>

<script>
import { useEmbed } from 'vue-composable-utils';

export default {
  name: 'EmbedComponent',
  setup() {
    const code = ref(null);

    const { isEmbedBlock } = useEmbed(code);

    return {
      code,
      isEmbedBlock,
    };
  },
};
</script>

# ❌ Clear

DOM' a eklenmiş script elementini kaldırır.

<template>
  <div class="hello">
    <textarea rows="5" cols="50" placeholder="Place embed code here" v-model="code"></textarea>
    <button type="button" class="clear-button" @click="clear">Clear</button>
  </div>
</template>

<script>
import { ref } from '@vue/composition-api';
import { useEmbed } from 'vue-composable-utils';

export default {
  name: 'EmbedComponent',
  setup() {
    const code = ref(null);

    const { clear } = useEmbed(code);

    return {
      code,
      clear,
    };
  },
};
</script>

# 💻 Uygulama

Eklenen embed kodun nasıl reaktif şekilde değişebildiğini aşağıdaki örnekte görebilirsiniz:

<template>
  <div>
    <textarea rows="5" cols="50" placeholder="Place embed code here" v-model="code"></textarea>
    <button type="button" class="first" @click="clear">Clear</button>
    <div v-if="isEmbedBlock" v-html="code"></div>
  </div>
</template>

<script>
import { ref, watch } from '@vue/composition-api';
import { useEmbed } from 'vue-composable-utils';

export default {
  setup() {
    const code = ref(null);

    const { isEmbedBlock, clear } = useEmbed(code);

    return {
      code,
      clear,
      isEmbedBlock,
    };
  },
};
</script>

← usePick →