组件将根据屏幕比例及当前浏览器窗口大小,自动进行缩放处理。
创新互联服务项目包括宝丰网站建设、宝丰网站制作、宝丰网页制作以及宝丰网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,宝丰网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到宝丰省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!
fullScreenContainer.vue
autoResize.js
- export default {
- data() {
- return {
- dom: '',
- width: 0,
- height: 0,
- debounceInitWHFun: '',
- domObserver: ''
- };
- },
- methods: {
- debounce(delay, callback) {
- let lastTime;
- return function() {
- clearTimeout(lastTime);
- const [that, args] = [this, arguments];
- lastTime = setTimeout(() => {
- callback.apply(that, args);
- }, delay);
- };
- },
- observerDomResize(dom, callback) {
- const MutationObserver =
- window.MutationObserver ||
- window.WebKitMutationObserver ||
- window.MozMutationObserver;
- const observer = new MutationObserver(callback);
- observer.observe(dom, {
- attributes: true,
- attributeFilter: ['style'],
- attributeOldValue: true
- });
- return observer;
- },
- async autoResizeMixinInit() {
- const {
- initWH,
- getDebounceInitWHFun,
- bindDomResizeCallback,
- afterAutoResizeMixinInit
- } = this;
- await initWH(false);
- getDebounceInitWHFun();
- bindDomResizeCallback();
- if (typeof afterAutoResizeMixinInit === 'function')
- afterAutoResizeMixinInit();
- },
- initWH(resize = true) {
- const { $nextTick, $refs, ref, onResize } = this;
- return new Promise(resolve => {
- $nextTick(() => {
- const dom = (this.dom = $refs[ref]);
- this.width = dom ? dom.clientWidth : 0;
- this.height = dom ? dom.clientHeight : 0;
- if (!dom) {
- console.warn(
- 'DataV: Failed to get dom node, component rendering may be abnormal!'
- );
- } else if (!this.width || !this.height) {
- console.warn(
- 'DataV: Component width or height is 0px, rendering abnormality may occur!'
- );
- }
- if (typeof onResize === 'function' && resize) onResize();
- resolve();
- });
- });
- },
- getDebounceInitWHFun() {
- const { initWH } = this;
- this.debounceInitWHFun = this.debounce(100, initWH);
- },
- bindDomResizeCallback() {
- const { dom, debounceInitWHFun } = this;
- this.domObserver = this.observerDomResize(dom, debounceInitWHFun);
- window.addEventListener('resize', debounceInitWHFun);
- },
- unbindDomResizeCallback() {
- let { domObserver, debounceInitWHFun } = this;
- if (!domObserver) return;
- domObserver.disconnect();
- domObserver.takeRecords();
- domObserver = null;
- window.removeEventListener('resize', debounceInitWHFun);
- }
- },
- mounted() {
- const { autoResizeMixinInit } = this;
- autoResizeMixinInit();
- },
- beforeDestroy() {
- const { unbindDomResizeCallback } = this;
- unbindDomResizeCallback();
- }
- };
这样,一个页面自适应组件就这样搭建完成了,下面,我们将引入组件看一下效果。
- import HelloWorld from "./components/HelloWorld.vue";
- import fullScreenContainer from "./components/fullScreenContainer/fullScreenContainer.vue";
- export default {
- name: "App",
- components: {
- HelloWorld,
- fullScreenContainer,
- },
- };
- #app {
- font-family: Avenir, Helvetica, Arial, sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- text-align: center;
- color: #2c3e50;
- margin-top: 60px;
- }
效果很好,这样对于一些开发自适应页面非常容易。
文章标题:从0到1搭建一款页面自适应组件(Vue.js)
文章路径:http://www.shufengxianlan.com/qtweb/news30/12480.html
网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联