Giter VIP home page Giter VIP logo

vueuc's Introduction

Vueuc

codecov Total alerts License

Util Components for Vue.

Preview

https://vueuc.vercel.app

Components

VBinder

Includes v-binder, v-follower and v-target.

Content in v-follower will track v-target. Use v-binder to wrap 1 v-target and 1 or more v-target.

For more API please read the source code. I'm too lazy to write them since I'm the only one that uses the library.

<v-binder>
  <v-target>
    <target-element />
  </v-target>
  <v-follower show placement="top">
    <follwer-element-1 />
  <v-follower>
  <v-follower show placement="bottom">
    <follwer-element-1 />
  <v-follower>
</v-binder>

VVirtialList

A simple virtual list which supports flexable-height items

VXScroll

All content inside it to be scroll in X direction when you wheel at Y direction.

VResizeObserver

<v-resize-observer :on-resize="handleResize">
  <el />
</v-resize-observer>

vueuc's People

Contributors

07akioni avatar dependabot-preview[bot] avatar dependabot[bot] avatar doom-9-zz avatar jaulz avatar jinmarcus avatar kungege avatar lyerin avatar nooooooom avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

vueuc's Issues

binder/follow 字体模糊问题

在使用binder/follow渲染的下拉菜单弹出的选项中的菜单有时候会出现字体模糊的情况,我找了一下原因
原因是在下拉菜单的浮层中使用了transform: translateX或translateY中的数字不是整数引起的

比如以下会出现字体模糊:
image

<div class="v-binder-follower-content" v-placement="bottom-start" style="width: 170px; min-width: 170px; transform: translateX(666.5px) translateY(215.5px); transform-origin: left top;">
</div>

但是如果translateX或translateY中的像素是整数就不会,如下就不会出现模糊
image

<div class="v-binder-follower-content" v-placement="bottom-start" style="width: 170px; min-width: 170px; transform: translateX(671px) translateY(206px); transform-origin: left top;">
</div>

应该是修改:

follower.style.transform = `translateX(${left}) translateY(${top}) ${transform}`

修改为:

follower.style.transform = `translateX(${parseInt(left)}px) translateY(${parseInt(top)}px) ${transform}`

如果这样不行的话,我觉得只有修改:

export function getOffset (

这个里面的值了。

作者是否可以修复一下呢?

Error when trying to load finweck-tree.js in Nuxt 3

Error when trying to load finweck-tree.js in Nuxt 3

/Users/christoffer/coding/nuxt3-app/node_modules/vueuc/es/shared/finweck-tree.js:4
export class FinweckTree {
^^^^^^

SyntaxError: Unexpected token 'export'
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1027:15)
    at Module._compile (node:internal/modules/cjs/loader:1063:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:170:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:198:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:409:24)
[nitro] [request error] [vite dev] Error loading external "/Users/christoffer/coding/nuxt3-app/node_modules/vueuc/es/shared/finweck-tree.js".
  at ./.nuxt/dist/server/server.mjs:10131:293
  at async __instantiateModule__ (./.nuxt/dist/server/server.mjs:121698:3)
[nitro] [request error] [vite dev] Error loading external "/Users/christoffer/coding/nuxt3-app/node_modules/vueuc/es/shared/finweck-tree.js".
  at ./.nuxt/dist/server/server.mjs:10131:293
  at async __instantiateModule__ (./.nuxt/dist/server/server.mjs:121698:3)

question: How about add a ResizeObserverProvider?

ResizeObserverDelegate.registerHandler can be called multiple time.

registerHandler (el: Element, handler: ResizeHandler): void {
this.elHandlersMap.set(el, handler)
this.observer.observe(el)
}
unregisterHandler (el: Element): void {
if (!this.elHandlersMap.has(el)) {
return
}
this.elHandlersMap.delete(el)
this.observer.unobserve(el)
}
}

And these methods can be used for any file that has been imported the delegate.

import delegate from './delegate'

So, is there need a naive-ui-style api like below?

// App.vue
<NResizeObserverProvider>
    <content />
</NResizeObserverProvider>
// YourComponent.vue
<script setup>
const divRef1 = ref(null)
const divRef2 = ref(null)

const observer = useResizeObserver()
observer.add(divRef1, onResize1)
observer.add(divRef2, onResize2)
</script>

<template>
    <div>
        <div ref="divRef1" />
        <div ref="divRef2" />
    </div>
</template>

So we can use multiple observer at once.

Remove @juggle/resize-observer?

I wonder if @juggle/resize-observer is necessary at all as most browsers anyway support it and in case someone wants to support older versions he could still load the polyfill optionally? Just noticed while checking the code because of minor performance issues...

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.