Skip to content

Need guide on paneresizestart use ! #37

@Femil-Micra

Description

@Femil-Micra

I want to trigger paneresizestart but its not working

`


<multipane @pane-resize="onResizeStart" layout="vertical">

<iframe
class="opacity-100 h-[550px]"
width="100%"
srcdoc="

                <head>
                    <meta charset='UTF-8'>
                    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
                    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
                    <link href='https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css' rel='stylesheet'>
                </head>

                <body class='pointer'>
                    <div class='xl:relative mx-auto xl:px-0 sm:px-4 grid md:grid-cols-2 items-center bg-white'>
                        <div class='h-full'>
                            <img src='https://source.unsplash.com/random/800x600' alt='img' class='w-full h-full object-cover object-left'>
                        </div>
                        <div class='max-w-lg container mx-auto px-4 lg:py-6 py-3'>

                            <h2 class='lg:text-4xl text-2xl font-medium'>Login</h2>
                            <p class='border-b border-gray-300 lg:text-lg text-sm py-4 text-gray-500'>We Connect and Keep your
                                Social
                                data.</p>
                            <div class='flex flex-col my-4 lg:my-6'>
                                <div
                                    class='flex justify-center items-center bg-blue-400 hover:bg-blue-500 rounded-sm px-8 lg:py-3 py-2'>
                                    <input type='button' value='Login with Github'
                                        class='bg-transparent text-white lg:text-xl text-base ml-1'>
                                </div>
                                <div class='text-center lg:my-3 my-1'>
                                    <samp class='text-xl'>OR</samp>
                                </div>
                                <div class='rounded-md px-4 lg:py-3 py-2 border border-gray-300 mb-5'>
                                    <input type='email' placeholder='E-mail' class='outline-none lg:text-xl text-base w-full'>
                                </div>
                                <div class='rounded-md px-4 lg:py-3 py-2 border border-gray-300 mb-5'>
                                    <input type='password' placeholder='Password' class='outline-none lg:text-xl text-base'>
                                </div>
                                <div
                                    class='text-center bg-blue-400 hover:bg-blue-500 rounded-sm px-8 py-2 my-2'>
                                    <input type='button' value='Sign in' class='bg-transparent text-white lg:text-xl text-base'>
                                </div>
                            </div>
                            <div class='text-center'>
                                <div class='text-center lg:text-md text-xs font-medium text-blue-500'>
                                    <a href='!#' class='block lg:mb-2 mb-1'>Forgot your Password ?</a>
                                    <a href='!#'>I Want to Sign up</a>
                                </div>
                            </div>
                        </div>
                    </div>

                </body>

                </html>"
				frameborder="2"
			></iframe>
			<div :class="{ 'pointer-events-none': !resizing }" class="hidden absolute opacity-0 inset-0 mr-4 sm:block pointer-events-none"></div>
		</div>
		<multipane-resizer></multipane-resizer>
	</multipane>
</div>
<script> import Vue from 'vue'; import iframeResize from 'iframe-resizer/js/iframeResizer'; import { Multipane, MultipaneResizer } from 'vue-multipane'; // import DetailsCode from './detailsCode.vue' Vue.directive('resize', { bind: function (el, { value = {} }) { el.addEventListener('load', () => iframeResize(value, el)); }, unbind: function (el) { el.iFrameResizer.removeListeners(); }, }); export default { components: { Multipane, MultipaneResizer, }, data() { return { resizing: false, }; }, methods: { onResizeStart() { console.log('jojo'); }, }, }; </script> <style> iframe::-webkit-scrollbar { display: none; } .layout-v > .multipane-resizer { width: 20px; height: auto; margin-left: -20px; left: 0; cursor: ew-resize; } </style>

`

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions