1.0.13 • Published 7 years ago
nrails-stations v1.0.13
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 | 点击选择之后,接收所数据 |