nrails-stations

A Vue component to nrails-stations 一个车站列表插件

安装

npm install nrails-stations  -S

使用

    // ES6
import stations from 'nrails-stations.js'
// require
var stations = require('pluginsObj')

Vue.use(stations)

// 或者直接使用script导入
<script src="./node_modules/nrails-stations/dist/nrails-stations.js"></script>

// 作为组件的方式使用
<station></station>

配置

<station :stations="arrys" :car="bus" :carPostion="carPostion" :startName="startName" :endName="endName"
   :disabledNum=disabled v-on:selectedData="getSelectedData"></station>

import car from './assets/images/car.jpg'
export default {
  name: 'app',
  data () {
    return {
       bus:car,
       carPostion:5,
       startName:"起",
       endName:"终",
        arrys: [
        { name: "省立医院", id: 1 ,num:1 , cars:0},
        { name: "五一广场福大北门辖区", Id: 2 ,num:2 },
        { name: "五一广场", id: 3  ,num:3},
        { name: "省立医院", id: 4  ,num:4},
        { name: "西洪路招呼站", Id: 5 ,num:5,cars:3 },
        { name: "五一广场", id: 6 ,num:6},
        { name: "省立医院", id: 7 ,num:7},
        { name: "福大北门辖区", Id: 8 ,num:8,cars:0},
        { name: "五一广场", id: 9 ,num:9},
        { name: "五一广场福大北门辖区", id: 10,num:10 },
        { name: "五一广场福大北门辖区",id: 11 ,num:11},
        { name: "福大北门辖区", id: 12 ,num:12},
        { name: "省立医院", id: 13 ,num:13},
        { name: "福大北门辖区", id: 14 ,num:14},
        { name: "五一广场", id: 15 ,num:15},
        { name: "五一广场", id: 16 ,num:16}
      ],
      disabled:5,
    }
  },
  methods:{
    getSelectedData(val){
     console.log(val);
    }
  }
}

Props

| name | Description | type |default| | ----------------- | ---------------- | :--------: | :----------: | | stations | 站点信息数组 |Array| [] | car | 车辆图标（目前显示最近一辆车） |String | 空 | carPostion | 显示车辆图标的位置 |Number | 1 | startName | 显示第一个li的名称 |String | 起 | endName | 显示最后一个li的名称 |String | 终 | disabled | 列表不用li |Number | 0

Events

| name | Description | | :--------: | ----- | | getSelectedData | 点击选择之后,接收所数据

效果图