Vue 大画面対応の究極のソリューション

vスケールスクリーン

v-scale-screenこれは大画面に適応するコンポーネントであり、実際のビジネスでは、データの統計、データの表示、データの視覚化、および明確なデータ表示を実現するその他の直感的な方法にチャートを使用することがよくありますが、大画面の開発プロセスでは、多くの場合、適応 画面が違って困っています、v-scale-screenこの問題を解決するために使用しましょう

効果

くだらない話はしないで、まず写真を見に行きましょう

比例スケーリングを通じて自己適応を達成したことがわかります。また、この目的のためにvueコンポーネントv-scale-screenもリリースしました。

コンポーネント

v-scale-screen はcss 属性の変換を使用してズーム効果を実現し、比例計算を実行して比例スケーリングの効果を実現すると同時に、フルスクリーン、幅比、高さ比などの適応ソリューションもサポートしています。 。

使用

1. 依存関係をインストールする

注: vue2 には [email protected] バージョンを使用してください。vue3 には [email protected] バージョンを使用してください

npm install v-scale-screen -save
# or
yarn add v-scale-screen

2. main.jsで導入されました

vue2 でプラグイン インポートを使用する、vue3 コンポーネントでインポートする

• ビュー2

// main.js
import VScaleScreen from 'v-scale-screen'
Vue.use(VScaleScreen)

• ビュー3

<v-scale-screen width="1920" height="1080">
  <div>
    <v-chart>....</v-chart>
    <v-chart>....</v-chart>
    <v-chart>....</v-chart>
    <v-chart>....</v-chart>
    <v-chart>....</v-chart>
  </div>
</v-scale-screen>
<script>
import VScaleScreen from 'v-scale-screen'
export default {
      
      
  components:{
      
      
    VScaleScreen
  }
}
</script>

3. コンポーネントで使用される

<v-scale-screen width="1920" height="1080">
  <div>
    <v-chart>....</v-chart>
    <v-chart>....</v-chart>
    <v-chart>....</v-chart>
    <v-chart>....</v-chart>
    <v-chart>....</v-chart>
  </div>
</v-scale-screen>

リンク

• vスケールスクリーン
• v-form-antd