Как использовать css выход Zeplin для определения внешнего интерфейса - PullRequest
Новая
       15

Как использовать css выход Zeplin для определения внешнего интерфейса

0 голосов
/ 09 марта 2020

Я уверен, что это проблема, с которой многие сталкивались раньше, но я ничего не могу найти на ней:

Как использовать пиксель за пикселем css определения Zeplin определить форму элементов на странице?

enter image description here

В качестве примера возьмем пункт меню «О программе» выше:

У него есть x, y, ширина, высота и шрифт. Но как вы на самом деле реализуете это css для элемента?

Context

Я использую element.io для html компонентов и Vue. js в качестве основы.

Пример 

var Main = {
    data() {
      return {
        activeIndex: '1',
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
@import url("//unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css");
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.13.0/lib/index.js"></script>
  <div id="app" class="banner-container" ref="container">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-menu-item index="1" class="sparc-menu-item">Logo</el-menu-item>
      <el-menu-item index="2">About</el-menu-item>
      <el-submenu index="3">
        <template slot="title">Explore data</template>
        <el-menu-item index="3-1">item one</el-menu-item>
        <el-menu-item index="3-2">item two</el-menu-item>
        <el-menu-item index="3-3">item three</el-menu-item>
      </el-submenu>
      <el-submenu index="4">
        <template slot="title">Learn</template>
        <el-menu-item index="4-1">item one</el-menu-item>
        <el-menu-item index="4-2">item two</el-menu-item>
        <el-menu-item index="4-3">item three</el-menu-item>
      </el-submenu>
      <el-menu-item index="5">News</el-menu-item>
      <el-submenu index="6">
        <template slot="title">Community</template>
        <el-menu-item index="6-1">item one</el-menu-item>
        <el-menu-item index="6-2">item two</el-menu-item>
        <el-menu-item index="6-3">item three</el-menu-item>
      </el-submenu>
      <el-submenu index="7">
        <template slot="title">Support</template>
        <el-menu-item index="7-1">item one</el-menu-item>
        <el-menu-item index="7-2">item two</el-menu-item>
        <el-menu-item index="7-3">item three</el-menu-item>
      </el-submenu>
    </el-menu>
    <div class="line"></div>
  </div>
...