Vue的CSS网格布局系统– vue-block

Vue的CSS网格布局系统– vue-block
插件名称 vue-block
发布时间 2020年12月31日
插件作者 0067ED

vue-block是一个Vue插件,可帮助您在IE9之类的旧浏览器的支持下构建CSS网格状布局系统。

特征:

  • CSS网格状布局系统。
  • 真正易于使用的API,特别是对于新Vue初学者。
  • 支持IE9 +和其他支持CSS calc的现代浏览器。
  • 功能组件,无状态且无实例。

安装

使用npm安装:

npm install --save-dev vue-block

用法

基本上vue-block是一个Vue插件。您也可以将其用作Vue组件。

插件用法:

import 'vue-block/dist/block.css';
import block from 'vue-block';
import Vue from 'vue';
Vue.use(block);

new Vue({
    el: '#app',
    template: `<block>
        <div slot="left"><div>
        <div slot="right"><div>
    </block>`
});

组件用法:

import 'vue-block/dist/block.css';
import block from 'vue-block';
import Vue from 'vue';

new Vue({
    el: '#app',
    template: `<block>
        <div slot="left"><div>
        <div slot="right"><div>
    </block>`,
    components: { block }
});