自定义指令：样式指令

概述

将频繁使用的 CSS 样式封装为了指令，可以不用写大量的 style 行内样式。以下是支持的指令：

• v-display：设置元素的框类型 display
• v-width：设置元素宽度 width
• v-height：设置元素高度 height
• v-margin：设置元素 margin 值
• v-padding：设置元素 padding 值
• v-font：设置元素 fontSize
• v-color：设置元素 color
• v-bg-color：设置元素 background-color

代码示例

v-display

设置元素的框类型 display。注意，绑定的值应为字符串。

这是一个 span 标签 这是一个 span 标签

<template>
    <div>
        <span v-display="'block'">这是一个 span 标签</span>
        <span v-display="'block'">这是一个 span 标签</span>
    </div>
</template>
<script>
    export default {
        
    }
</script>

Expand Copy Copy

v-width

设置元素宽度 width。如果绑定的值为百分比，则以百分比显示，例如 25%；如果绑定的值是数值，则以像素显示，比如 25，最终会显示为 25px。

<template>
    <div>
        <Button type="primary" v-width="200">按钮</Button>
    </div>
</template>
<script>
    export default {
        
    }
</script>

Expand Copy Copy

v-height

设置元素高度 height。如果绑定的值为百分比，则以百分比显示，例如 25%；如果绑定的值是数值，则以像素显示，比如 25，最终会显示为 25px。

这是一个 div

这是一个 div

<template>
    <div>
        <div v-height="100">这是一个 div</div>
        <div v-height="100">这是一个 div</div>
    </div>
</template>
<script>
    export default {
        
    }
</script>

Expand Copy Copy

v-margin

设置元素的 margin。只能绑定一个值。

这是一个 普通div

这是一个 margin 100px 的 div

<template>
    <div>
        <div>这是一个 普通div</div>
        <div v-margin="100">这是一个 margin 100px 的 div</div>
    </div>
</template>
<script>
    export default {
        
    }
</script>

Expand Copy Copy

v-padding

设置元素的 padding。只能绑定一个值。

这是一个 普通div

这是一个 padding 100px 的 div

<template>
    <div>
        <div>这是一个 普通div</div>
        <div v-padding="100">这是一个 padding 100px 的 div</div>
    </div>
</template>
<script>
    export default {
        
    }
</script>

Expand Copy Copy

v-font

设置 fontSize。

这是一个 span 图标也可以：

<template>
    <div>
        <span v-font="24">这是一个 span</span>
        图标也可以：<Icon type="logo-apple" v-font="24" />
    </div>
</template>
<script>
    export default {
        
    }
</script>

Expand Copy Copy

v-color

设置颜色 color。注意绑定的值应为字符串。

这是一个 span

<template>
    <div>
        <span v-color="'#ed4014'">这是一个 span</span>
    </div>
</template>
<script>
    export default {
        
    }
</script>

Expand Copy Copy

v-bg-color

设置背景颜色 background-color。注意绑定的值应为字符串。

这是一个 span

<template>
    <div>
        <span v-bg-color="'#2db7f5'">这是一个 span</span>
    </div>
</template>
<script>
    export default {
        
    }
</script>

Expand Copy Copy