This commit is contained in:
darenhsu
2022-07-17 13:16:16 +08:00
parent 84759556ff
commit befd344ab0
28070 changed files with 4008428 additions and 1 deletions
+92
View File
@@ -0,0 +1,92 @@
// Style
import "../../../src/components/VParallax/VParallax.sass"; // Mixins
import Translatable from '../../mixins/translatable';
import mixins from '../../util/mixins';
const baseMixins = mixins(Translatable);
/* @vue/component */
export default baseMixins.extend().extend({
name: 'v-parallax',
props: {
alt: {
type: String,
default: ''
},
height: {
type: [String, Number],
default: 500
},
src: String,
srcset: String
},
data: () => ({
isBooted: false
}),
computed: {
styles() {
return {
display: 'block',
opacity: this.isBooted ? 1 : 0,
transform: `translate(-50%, ${this.parallax}px)`
};
}
},
mounted() {
this.init();
},
methods: {
init() {
const img = this.$refs.img;
if (!img) return;
if (img.complete) {
this.translate();
this.listeners();
} else {
img.addEventListener('load', () => {
this.translate();
this.listeners();
}, false);
}
this.isBooted = true;
},
objHeight() {
return this.$refs.img.naturalHeight;
}
},
render(h) {
const imgData = {
staticClass: 'v-parallax__image',
style: this.styles,
attrs: {
src: this.src,
srcset: this.srcset,
alt: this.alt
},
ref: 'img'
};
const container = h('div', {
staticClass: 'v-parallax__image-container'
}, [h('img', imgData)]);
const content = h('div', {
staticClass: 'v-parallax__content'
}, this.$slots.default);
return h('div', {
staticClass: 'v-parallax',
style: {
height: `${this.height}px`
},
on: this.$listeners
}, [container, content]);
}
});
//# sourceMappingURL=VParallax.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../../../src/components/VParallax/VParallax.ts"],"names":[],"mappings":"AAAA;AACA,OAAO,kDAAP,C,CAEA;;AACA,OAAO,YAAP,MAAyB,2BAAzB;AAIA,OAAO,MAAP,MAAmB,mBAAnB;AAEA,MAAM,UAAU,GAAG,MAAM,CACvB,YADuB,CAAzB;AASA;;AACA,eAAe,UAAU,CAAC,MAAX,GAA6B,MAA7B,CAAoC;AACjD,EAAA,IAAI,EAAE,YAD2C;AAGjD,EAAA,KAAK,EAAE;AACL,IAAA,GAAG,EAAE;AACH,MAAA,IAAI,EAAE,MADH;AAEH,MAAA,OAAO,EAAE;AAFN,KADA;AAKL,IAAA,MAAM,EAAE;AACN,MAAA,IAAI,EAAE,CAAC,MAAD,EAAS,MAAT,CADA;AAEN,MAAA,OAAO,EAAE;AAFH,KALH;AASL,IAAA,GAAG,EAAE,MATA;AAUL,IAAA,MAAM,EAAE;AAVH,GAH0C;AAgBjD,EAAA,IAAI,EAAE,OAAO;AACX,IAAA,QAAQ,EAAE;AADC,GAAP,CAhB2C;AAoBjD,EAAA,QAAQ,EAAE;AACR,IAAA,MAAM,GAAA;AACJ,aAAO;AACL,QAAA,OAAO,EAAE,OADJ;AAEL,QAAA,OAAO,EAAE,KAAK,QAAL,GAAgB,CAAhB,GAAoB,CAFxB;AAGL,QAAA,SAAS,EAAE,mBAAmB,KAAK,QAAQ;AAHtC,OAAP;AAKD;;AAPO,GApBuC;;AA8BjD,EAAA,OAAO,GAAA;AACL,SAAK,IAAL;AACD,GAhCgD;;AAkCjD,EAAA,OAAO,EAAE;AACP,IAAA,IAAI,GAAA;AACF,YAAM,GAAG,GAAG,KAAK,KAAL,CAAW,GAAvB;AAEA,UAAI,CAAC,GAAL,EAAU;;AAEV,UAAI,GAAG,CAAC,QAAR,EAAkB;AAChB,aAAK,SAAL;AACA,aAAK,SAAL;AACD,OAHD,MAGO;AACL,QAAA,GAAG,CAAC,gBAAJ,CAAqB,MAArB,EAA6B,MAAK;AAChC,eAAK,SAAL;AACA,eAAK,SAAL;AACD,SAHD,EAGG,KAHH;AAID;;AAED,WAAK,QAAL,GAAgB,IAAhB;AACD,KAjBM;;AAkBP,IAAA,SAAS,GAAA;AACP,aAAO,KAAK,KAAL,CAAW,GAAX,CAAe,aAAtB;AACD;;AApBM,GAlCwC;;AAyDjD,EAAA,MAAM,CAAE,CAAF,EAAG;AACP,UAAM,OAAO,GAAc;AACzB,MAAA,WAAW,EAAE,mBADY;AAEzB,MAAA,KAAK,EAAE,KAAK,MAFa;AAGzB,MAAA,KAAK,EAAE;AACL,QAAA,GAAG,EAAE,KAAK,GADL;AAEL,QAAA,MAAM,EAAE,KAAK,MAFR;AAGL,QAAA,GAAG,EAAE,KAAK;AAHL,OAHkB;AAQzB,MAAA,GAAG,EAAE;AARoB,KAA3B;AAWA,UAAM,SAAS,GAAG,CAAC,CAAC,KAAD,EAAQ;AACzB,MAAA,WAAW,EAAE;AADY,KAAR,EAEhB,CACD,CAAC,CAAC,KAAD,EAAQ,OAAR,CADA,CAFgB,CAAnB;AAMA,UAAM,OAAO,GAAG,CAAC,CAAC,KAAD,EAAQ;AACvB,MAAA,WAAW,EAAE;AADU,KAAR,EAEd,KAAK,MAAL,CAAY,OAFE,CAAjB;AAIA,WAAO,CAAC,CAAC,KAAD,EAAQ;AACd,MAAA,WAAW,EAAE,YADC;AAEd,MAAA,KAAK,EAAE;AACL,QAAA,MAAM,EAAE,GAAG,KAAK,MAAM;AADjB,OAFO;AAKd,MAAA,EAAE,EAAE,KAAK;AALK,KAAR,EAML,CAAC,SAAD,EAAY,OAAZ,CANK,CAAR;AAOD;;AAtFgD,CAApC,CAAf","sourcesContent":["// Style\nimport './VParallax.sass'\n\n// Mixins\nimport Translatable from '../../mixins/translatable'\n\n// Types\nimport { VNode, VNodeData } from 'vue/types/vnode'\nimport mixins from '../../util/mixins'\n\nconst baseMixins = mixins(\n Translatable\n)\ninterface options extends InstanceType<typeof baseMixins> {\n $refs: {\n img: HTMLImageElement\n }\n}\n\n/* @vue/component */\nexport default baseMixins.extend<options>().extend({\n name: 'v-parallax',\n\n props: {\n alt: {\n type: String,\n default: '',\n },\n height: {\n type: [String, Number],\n default: 500,\n },\n src: String,\n srcset: String,\n },\n\n data: () => ({\n isBooted: false,\n }),\n\n computed: {\n styles (): object {\n return {\n display: 'block',\n opacity: this.isBooted ? 1 : 0,\n transform: `translate(-50%, ${this.parallax}px)`,\n }\n },\n },\n\n mounted () {\n this.init()\n },\n\n methods: {\n init () {\n const img = this.$refs.img\n\n if (!img) return\n\n if (img.complete) {\n this.translate()\n this.listeners()\n } else {\n img.addEventListener('load', () => {\n this.translate()\n this.listeners()\n }, false)\n }\n\n this.isBooted = true\n },\n objHeight () {\n return this.$refs.img.naturalHeight\n },\n },\n\n render (h): VNode {\n const imgData: VNodeData = {\n staticClass: 'v-parallax__image',\n style: this.styles,\n attrs: {\n src: this.src,\n srcset: this.srcset,\n alt: this.alt,\n },\n ref: 'img',\n }\n\n const container = h('div', {\n staticClass: 'v-parallax__image-container',\n }, [\n h('img', imgData),\n ])\n\n const content = h('div', {\n staticClass: 'v-parallax__content',\n }, this.$slots.default)\n\n return h('div', {\n staticClass: 'v-parallax',\n style: {\n height: `${this.height}px`,\n },\n on: this.$listeners,\n }, [container, content])\n },\n})\n"],"sourceRoot":"","file":"VParallax.js"}
+4
View File
@@ -0,0 +1,4 @@
import VParallax from './VParallax';
export { VParallax };
export default VParallax;
//# sourceMappingURL=index.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../../../src/components/VParallax/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAP,MAAsB,aAAtB;AAEA,SAAS,SAAT;AACA,eAAe,SAAf","sourcesContent":["import VParallax from './VParallax'\n\nexport { VParallax }\nexport default VParallax\n"],"sourceRoot":"","file":"index.js"}