1.1.3 • Published 5 years ago
ax-view v1.1.3
Welcome to Ax-View
Get Started
npm install ax-view --save
main.js
import Vue from 'vue'
import App from './App.vue'
import AxView from 'ax-view'
Vue.use(AxView)
new Vue({
el: '#app',
render: h => h(App)
})
pagination:
<ax-pagination :total="total" :currentPage="currentPage" :pageSize="pageSize" @changePage="changePage"> </ax-pagination>
<script>
......
data() {
return {
total: 120,
currentPage: 1,
pageSize: 10
}
},
methods: {
changePage(val) {
console.log(val)
this.currentPage = val
}
}
</script>
> select:
```html
<ax-select
v-model="selectedVal"
@change="change"
:disabled="false"
:placeholder="'DIY placeholder~'">
<ax-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
:disabled="item.disabled">
</ax-option>
</ax-select>
<script>
......
data() {
return {
options: [{
value: 'one',
label: 'option1'
}, {
value: 'two',
label: 'option2',
disabled: true
}, {
value: 'three',
label: 'option3'
}],
selectedVal: ''
}
},
methods: {
change(obj) {
console.log(obj)
}
}
</script>
input:
<ax-input v-model="inputVal" placeholder="please enter your name." @focus="focus" @blur="blur" @change="change" :width="240" :disabled="false" :readonly="false"> </ax-input> <script> ...... data() { return { inputVal: 'AlexiXiang' } }, methods: { focus(e) { console.log('focus') }, blur(e) { console.log('blur') }, change(val) { console.log('change', val) } } </script>
date-picker:
<div> <ax-date-picker class="ax-date-picker" v-model="date" :disabled="false" :placeholder="'请选择会议日期'" @change="change"> </ax-date-picker> <ax-date-picker class="ax-date-picker" v-model="dateRange" type="daterange" :disabled="false" :startPlaceholder="'开始日期'" :endPlaceholder="'结束日期'" @change="change"> </ax-date-picker> </div> <script> ...... data() { return { date: new Date() } }, methods: { change(val) { console.log('change监听', val) } } </script>
...... ......