الصفحة الرئيسية>المتعلقة بالبرمجة>مكونات الطرف الثالث
تنزيل

الإنجليزية | 简体中文

VUE نموذجي

Vue الرسوم المتحركة في ~ 400 بايت؟ من جافا سكريبت. معاينة →

عرض العرض التوضيحي https://vue-typical.vercel.app

؟ تثبيت

تثبيت مع الغزل 

yarn add vue-typical

أو يمكنك 

npm install vue-typical

أو حقن البرنامج النصي في صفحتك بواسطة JSDelivr CDN 

 < script src =" https://cdn.jsdelivr.net/npm/vue-typical@latest/dist/vue-typical.umd.js " > </ script >

هذه المكتبة تدعم فقط Vue 3 الآن

إذا كنت Vue 2 ، يرجى الاطلاع على الفرع V1 وتثبيت [email protected]

الاستخدام

1. مكون

يمكنك استيراده كمكون مخصص. 

< template >
  < v-typical
    class = " blink "
    :steps = " ['Hello', 1000, 'Hello World !', 500, 'Hello World ! ', 1000] "
    :loop = " Infinity "
    :wrapper = " 'h2' "
  ></ v-typical >
</ template >

< script lang="ts">
import VTypical from ' vue-typical ' ;

export default {
  components: {
    VTypical ,
  },
};
</ script >

2. Plugin API

إذا كنت ترغب في تكوين الخيارات الافتراضية ، فيمكنك تسجيل هذا البرنامج المساعد من خلال API use of vue.js. 

 // main.js or index.js
import VTypical from 'vue-typical' ;

Vue . use ( VTypical , {
  /* options */
} ) ;

إذا كنت تستخدم واجهة برمجة تطبيقات المكون الإضافي ، فسيتم تسجيل المكون VTypical كمكون عالمي تمامًا مثل إدراجه مع علامة script ، لكنك لن تحتاج إلى إعادة تسجيله من خلال خاصية components في مكوناتك الخاصة.

3. تكوين API

يمكنك أيضًا إنشاء رسوم متحركة نموذجية بواسطة API Composition useTypical . 

 const ref = useTypical ( options ) ;

قريباً ...

؟ ملكيات

دعم مطلوب يكتب على سبيل المثال.
steps حقيقي صفيف <string | رقم | وظيفة> ['Hello', 1000, () => alert('Word')]
loop خطأ شنيع رقم 1 أو 'Infinity'
wrapper خطأ شنيع خيط 'div'

أسلوب

أضف تأثير Blink Lucresor مع blink ClassName. 

. blink :: after {
  content : '|' ;
  animation : blink 1 s infinite step-start;
}

@keyframes blink {
  50 % {
    opacity : 0 ;
  }
}

؟ قريباً

  • العرض التوضيحي لتكوين API في Vue 3.0
  • مدعوم Vue 2 و 3

؟ يساهم

تثبيت التبعيات ، 

$ npm i

ابدأ خادم DEV ، 

$ npm start

بناء الوثائق ، 

$ npm run docs:build

بناء المكتبة عبر father-build ، 

$ npm run build

❤ المساهمين

شكرا يذهب لهؤلاء الناس:

لا تتردد في الاستمتاع والمشاركة في المصدر المفتوح!

النجوم

شكرا لنجمك!

؟ رخصة

تعتمد هذه المكتبة على @camwiegert/العمل النموذجي وهي حاليًا مجرد غلاف لـ Vue.

مستوحاة من @CatalinMiron/React-typical.

معهد ماساتشوستس للتكنولوجيا © Turkyden

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل