Jst UI

# 布局

24 分法栅格化布局。

# 基础布局

通过设置 span 属性可动态控制所占的等分，最大不超24。

<j-row>
  <j-col :span="24"><div class="col-con bg-dark"></div></j-col>
</j-row>
<j-row>
  <j-col :span="12"><div class="col-con bg-purple"></div></j-col>
  <j-col :span="12"><div class="col-con bg-purple-l"></div></j-col>
</j-row>
<j-row>
  <j-col :span="8"><div class="col-con bg-purple"></div></j-col>
  <j-col :span="8"><div class="col-con bg-purple-l"></div></j-col>
  <j-col :span="8"><div class="col-con bg-purple"></div></j-col>
</j-row>
<j-row>
  <j-col :span="6"><div class="col-con bg-purple"></div></j-col>
  <j-col :span="6"><div class="col-con bg-purple-l"></div></j-col>
  <j-col :span="6"><div class="col-con bg-purple"></div></j-col>
  <j-col :span="6"><div class="col-con bg-purple-l"></div></j-col>
</j-row>
<j-row>
  <j-col :span="4"><div class="col-con bg-purple"></div></j-col>
  <j-col :span="4"><div class="col-con bg-purple-l"></div></j-col>
  <j-col :span="4"><div class="col-con bg-purple"></div></j-col>
  <j-col :span="4"><div class="col-con bg-purple-l"></div></j-col>
  <j-col :span="4"><div class="col-con bg-purple"></div></j-col>
  <j-col :span="4"><div class="col-con bg-purple-l"></div></j-col>
</j-row>

<style>
  .j-col {
    border-radius: 4px;
  }
  .bg-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-l {
    background: #e5e9f2;
  }
  .col-con {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
显示代码 复制代码

# 分栏间隔

通过 gutter 属性设置每栏之间的间隔。

<j-row :gutter="20">
  <j-col :span="6"><div class="col-con bg-purple"></div></j-col>
  <j-col :span="6"><div class="col-con bg-purple"></div></j-col>
  <j-col :span="6"><div class="col-con bg-purple"></div></j-col>
  <j-col :span="6"><div class="col-con bg-purple"></div></j-col>
</j-row>

<style>
  .j-col {
    border-radius: 4px;
  }
  .bg-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-l {
    background: #e5e9f2;
  }
  .col-con {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
显示代码 复制代码

# 搜索表格区域

  <j-search-panel 
        :width-size="3"  hide-btn>
    <j-input
      v-model="shopId"
      placeholder="店铺编号"
    />
    <j-input
      v-model="shopName"
      placeholder="店铺名称"
    />
    <j-input
      v-model="goodsName"
      placeholder="商品名称"
    />
    <j-input
      v-model="goodsId"
      placeholder="商品编号"
      :width-size="2"
    />
    <j-select v-model="express" placeholder="请选择快递" :width-size="4">
      <j-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </j-option>
    </j-select>
    
    <j-button type="primary">查询</j-button>  
    <j-button>重置</j-button>
  </j-search-panel>
  <script>
    export default {
      data() {
        return {
          options: [{
          value: 'shanghai',
          label: '上海'
        }, {
          value: 'beijing',
          label: '北京'
        }, {
          value: 'shanxi',
          label: '山西'
        }, {
          value: 'henan',
          label: '河南'
        }, {
          value: 'sichuan',
          label: '四川'
        }],
          shopId: '',
          shopName:'',
          goodsId:'',
          goodsName:'',
          express:'',
        }
      }
    }
  </script>
显示代码 复制代码

# 搜索表格区域-数据配置

- 
  <j-search-panel ref="search" :options="options" :width-size="3" @onSubmit="getData">
  </j-search-panel>
  <script>
    export default {
      data() {
        return {
          options:[
            {
              prop:'shopId',
              label:'店铺编号',
              type:'input',
              defaultValue:'1101'
            },
            {
              prop:'shopName',
              label:'店铺名称',
              type:'input'
            },
            {
              prop:'goodsName',
              label:'商品名称',
              type:'input'
            },
            {
              prop:'express',
              label:'物流快递',
              type:'select',
              options: [{
                value: 'sf',
                label: '顺丰'
              }, {
                value: 'jd',
                label: '京东'
              }, {
                value: 'yt',
                label: '圆通',
                disabled:true
              }, {
                value: 'zt',
                label: '中通'
              }, {
                value: 'st',
                label: '申通'
              }]
            },
            {
              prop:'adress',
              label:'仓库地址',
              type:'select',
              config:{
                label:'adress',
                value:'id',
                disableList:['shanghai']
              },
              options: [{
                id: 'shanghai',
                adress: '上海'
              }, {
                id: 'beijing',
                adress: '北京'
              }, {
                id: 'shanxi',
                adress: '山西'
              }, {
                id: 'henan',
                adress: '河南'
              }, {
                id: 'sichuan',
                adress: '四川'
              }]
            },
            {
              prop:'orderTime',
              label:'下单时间',
              type:'date',
            },
            {
              prop:'deliverTime',
              label:'发货',
              type:'daterange',
            }
          ]
        }
      },
      methods:{
        getData(data){
          // console.log(data);
        }
      }
    }
  </script>
显示代码 复制代码

Icon 图标 →