starpost-ui v1.1.67

starpost-ui

A Vue2.0 UI Components for Web.

项目演示

演示地址

安装

npm install starpost-ui -S

使用

//ES6
import starpostUI from 'starpost-ui.js'

// require
var starpostUI = require('Starpost')

Vue.use(starpostUI)

// 或者直接使用script导入
<script src="https://unpkg.com/starpost-ui/dist/starpost-ui.js"></script>

sp-img 组件

<sp-img :urlArr="urlArr" @get-urlArr="getUrlArr" @active-index="getActiveIndex"></sp-img>
<sp-dialog :title="title" :visible.sync="visible">
  <sp-img-content :urlArr="spImgArr" :activeIndex="activeIndex" @active-index="getActiveIndex"></sp-img-content>
</sp-dialog>

<script>
export default {
  data () {
    return {
      visible: false,
      title: "",
      spImgArr: [],
      activeIndex: null, //当前展示图片的index
      urlArr: [
        {
          src: "http://pic2.97uimg.com/58pic/19/69/83/38658PICuUm.jpg!w1200",
          title: "标题1"
        },
        {
          src: "http://pic2.97uimg.com/58pic/21/56/66/15D58PICHdR.jpg!w1200",
          title: "标题2"
        },
        {
          src: "http://pic2.97uimg.com/58pic/18/23/47/56r58PICHN3.jpg!w1200",
          title: "标题3"
        }
      ]
    }
  },
  methods: {
    getUrlArr(val) {
      this.visible = true;
      this.spImgArr != val && (this.spImgArr = val);
    },
    //图片组件获取当前index
    getActiveIndex(index) {
      this.activeIndex = index;
      this.$nextTick(function() {
        this.title =
          this.spImgArr.length > 0 && this.spImgArr[index].title
            ? this.spImgArr[index].title
            : "标题";
      });
      console.log("图片组件获取当前index: " + index);
    }
  }
}
</script>

sp-dialo gAttribute

sp-dialo Events

sp-img Attribute

sp-img Events

sp-img-content Attribute

sp-img-content Events

Menu 菜单(无限循环)

<sp-menu-group
  :menuWidth="['40px', '200px']"
  :menuStatus.sync="status">
  <sp-menu :menus="menus"
    :menuStatus="status"
    :select-id="selectId"
    @select-id="getSelectId"/>
</sp-menu-group>

<script>
export default {
  data () {
    return {
      status: true,
      selectId: '1',
      menus: [{
        label: '一级 1',
        active: false,
        icon: 'icon-wutu',
        children: [{
          label: '二级 1-0',
          active: false,
          url:'#',
          children: [//如果使用权限，这样写，有url的children会转成configs数组，不会渲染出来，权限后台tree建议用element tree
            {'label': '新建'}
          ]
        },{
          label: '二级 1-1',
          active: false,
          children: [{
            label: '三级 1-1-1',
            active: false,
            url:'#'
          },{
            label: '三级 1-1-2',
            active: false,
            children: [{
              label: '4级 1-1-1-1',
              active: false,
              url:'#'
            }]
          }]
        }]
      }],
    }
  },
  methods: {
    //菜单选中的ID
    getSelectId(val) {
      this.selectId = val;
      console.log('选中的ID： '+ val);
    },
    menuOpen(val) {
      console.log("菜单组件 打开的ID: " + val);
    },
    menuClose(val) {
      console.log("菜单组件 关闭的ID: " + val);
    },
  }
}
</script>

Props

Events

Amap 地图(高德)

<sp-amap :markers="markers" @get-map-form="getMapForm" @get-geocoder="getGeocoder"></sp-amap>

import VueAMap from 'vue-amap';

VueAMap.initAMapApiLoader({
  key: 'mykey',
  plugin: ['Autocomplete', 'PlaceSearch', 'Scale', 'OverView', 'ToolBar', 'MapType', 'PolyEditor', 'AMap.CircleEditor', 'AMap.Geolocation', 'Geocoder']
});

Vue.use(VueAMap);

<script>
export default {
  data () {
    return {
      markers: [
        {
          title: "东莞",
          position: [113.753228, 22.9833],
          phone: "13713262222"
        },
        {
          title: "龙岗",
          position: [114.234824, 22.723301],
          phone: "13713263333"
        },
        {
          title: "坂田",
          position: [114.07314, 22.62579],
          phone: "13713261111"
        }
      ],
    }
  },
  methods: {
    //返回数据及距离中心点最近的距离
    getMapForm(val) {
      console.log("选择仓库： " + JSON.stringify(val));
    },
    //获取经纬度：
    getGeocoder(val) {
      console.log("获取经纬度： " + JSON.stringify(val));
    },
  }
}
</script>

Props

Events

Transfer 穿梭框(拖动)

<sp-transfer :data="transferData" @clear="clear" :callbakData.sync="callbakData" :title="['列表1', '列表2']" />

npm install -S vuedraggable

<script>
export default {
  data () {
    return {
      transferData: [
        { id: 1, label: "item1" },
        { id: 2, label: "item2" },
        { id: 3, label: "item3" },
        { id: 4, label: "item4" },
        { id: 5, label: "item5" }
      ],
      callbakData: []
    }
  },
  watch: {
    callbakData(val) {
      console.log("穿梭框数组：" + JSON.stringify(val));
    }
  }
}
</script>

Props

Events

【全选/复选框】组件配置

<sp-checkbox
	:checkboxAll="true"
	:checkedArr="checkArr"
	v-model="checkAlled"
	@change="getCheckArr">全选&nbsp;&nbsp;
</sp-checkbox>
<sp-checkbox-group v-for="(item, index) in checkArr">
    <sp-checkbox
	  	v-model="item.checked"
	  	:checkedArr="checkArr"
	  	:checkAlled="checkAlled"
	  	@change="getCheckAlled">选项{{index}}
    </sp-checkbox>
</sp-checkbox-group>

<script>
export default {
  data () {
    return {
      checkAlled: false,
      checkArr: [
        { checked: false },
        { checked: false },
        { checked: false },
        { checked: false },
        { checked: false }
      ]
    }
  },
  methods: {
    getCheckArr(val){
        this.checkArr = val
    },
    getCheckAlled(val) {
        this.checkAlled = val
    }
  }
}
</script>

Props

【单选/复选按钮】组件配置

<sp-checkbox-button
  :checkList="checkList"
  :checkValues="checkValues"
  @callback="getSaskStatus">
</sp-checkbox-button>

<script>
export default {
  data () {
    return {
      checkValues: ['01'],
      checkList: [
        {
          id: '01',
          name: '已付款',
        },{
          id: '02',
          name: '已发货',
        },{
          id: '03',
          name: '已签收',
        },
      ]
    }
  },
  methods: {
    //当前选中的值
    getSaskStatus(val) {
      this.checkValues = val;
      console.log('按钮 选中的值: '+val)
    },
  }
}
</script>

Props