小编syn*_*t1c的帖子

我想使用 vue 创建一个组件，该组件具有使用vuejs slot api 的Card标题和内容部分。

我无法理解如何在 Card 组件中创建结构。该卡应包含所有线框样式（填充和边距），但可以从使用该组件的子模板中进行扩展。

我想知道是否有任何标准方法可以对子组件中带有插槽的包装元素进行样式化。

基本Card元素有 2 个插槽，其中包含结构元素，我希望子模板可以在必要时进行修改。

<div class="Card">
  <header class="CardHeader">
    <slot name="header"></slot>
  </header>
  <div class="CardContent">
    <slot></slot>
  </div>
</div>

理想情况下，我想向元素添加一个:class属性#slot，并在插槽中的元素上使用该属性，但是，似乎旧语法在最新版本的框架中已被弃用，例如。

<Card>
  <template #header class="extendHeader">
    stuff
  </template>
</Card>

我可以想到 3 种行之有效的方法，每种方法都有其缺点。

1. 使用 props 通过根元素添加类
2. 在根元素上使用类并在组件元素上使用样式挂钩
3. 将插槽内容包装在另一个元素中

我的项目必须使用 css-modules 来尽可能减少全局 css，因为它在过去给我带来了很多悲伤。

1.使用props通过根元素添加类

此方法允许我使用 css-modules 并使Card元素开放以供扩展

组件模板需要从子模板中组合额外的样式

<header :class="$style.Header, ...headerClasses]">
  <slot name="header"></slot>
</header>

然后，子模板可以用来:header-classes扩展基本 Card 类，或覆盖不需要的样式。

<Card :header-classes="[$style.header]">
  <template #header>
    stuff
  </template> …

我一直在玩CSS尝试创建一个3D框,你可以用香草javascript选择面部.

它只是更改框div的className,并使用transition属性在位置之间平滑过渡.

这是一个jsfiddle,显示一个工作示例http://jsfiddle.net/synthet1c/VdDmA/1/

它目前看起来很酷,但它的表现并不像我想要的那样......有没有人知道如何在盒子过渡时保持盒子稳固？目前,如果脸部从360度变为90度,脸部将以错误的方向旋转270度.我明白为什么它这样做却无法解决它.

我添加了所有的浏览器前缀,但只在firefox上使用过它.

欢呼任何建议,

Andrew #right,#back,#left,#front {height:150px; 宽度:150px; 位置:绝对; 边界:1px solid rgba(200,200,200,0.7); background-color:rgba(0,0,255,0.5); 保证金:0px; }

.right{
    transform: rotateY(90deg) translatez(75px) translatex(-75px);
    transition: all 4s;
}

.back{
    transform: rotateY(180deg) translatez(0px) translatex(0px);
    transition: all 4s;
}

.left{
    transform: rotateY(270deg) translatez(75px) translatex(70px);
    transition: all 4s;
}

.front{
    transform: rotateY(0deg) translatez(150px) translatex(0px);
    transition: all 4s;
}

var id = function(elem){
    var theId = document.getElementById(elem);
    return theId;
}

function button1(){
    id('front').className = 'front';
    id('right').className = 'right';
    id('back').className = 'back';
    id('left').className = 'left';
} …

我有一系列我想并行调用但同步解决的承诺。

我编写了这段代码来完成所需的任务，但是，我需要创建自己的对象QueryablePromise来包装Promise我可以同步检查以查看其已解决状态的本机对象。

有没有更好的方法来完成这个不需要特殊对象的任务？

请注意。我不想使用，Promise.all因为我不想在处理承诺的影响之前等待所有承诺解决。我不能async在我的代码库中使用函数。

const PROMISE = Symbol('PROMISE')
const tap = fn => x => (fn(x), x)

class QueryablePromise {
  resolved = false
  rejected = false
  fulfilled = false
  constructor(fn) {
    this[PROMISE] = new Promise(fn)
      .then(tap(() => {
        this.fulfilled = true
        this.resolved = true
      }))
      .catch(x => {
        this.fulfilled = true
        this.rejected = true
        throw x
      })
  }
  then(fn) {
    this[PROMISE].then(fn)
    return this
  }
  catch(fn) {
    this[PROMISE].catch(fn)
    return this
  }
  static resolve(x) …