Nuxt. js: Найти размер окна просмотра клиента и сгенерировать контент - PullRequest
Новая
       122

Nuxt. js: Найти размер окна просмотра клиента и сгенерировать контент

0 голосов
/ 13 апреля 2020

Я создал приложение на Nuxt. Часть приложения использует технологии визуализации данных, такие как D3 и Vega. Я считаю, что Vega и D3 хитры в Nuxt.

Моя самая большая проблема: как я могу найти размер области просмотра клиента и генерировать мои визуализации на основе этого? Обычно я делаю это просто JavaScript.

Например, я бы сделал это: 

const vw = Math.min(Math.max(document.documentElement.clientWidth, window.innerWidth || 0), 900) 
const ratio = 1.52

      var yourVlSpec = {
        $schema: 'https://vega.github.io/schema/vega-lite/v2.0.json',
        description: 'A simple bar chart with embedded data.',
        data: {
          values: [
            {a: 'A', b: 28},
            {a: 'B', b: 55},
            {a: 'C', b: 43},
            {a: 'D', b: 91},
            {a: 'E', b: 81},
            {a: 'F', b: 53},
            {a: 'G', b: 19},
            {a: 'H', b: 87},
            {a: 'I', b: 52}
          ]
        },
        width: vw,
        height: vw / ratio,
        mark: 'bar',
        encoding: {
          x: {field: 'a', type: 'ordinal'},
          y: {field: 'b', type: 'quantitative'}
        }
      };
      vegaEmbed('#vis', yourVlSpec);

Как получить размеры окна просмотра клиента в Nuxt? И что еще мне нужно сделать, чтобы это можно было сделать, учитывая, что Nuxt по умолчанию использует SSR?

...