add rate demo

This commit is contained in:
wangxueliang 2017-11-03 17:10:38 +08:00
parent c78a5977b3
commit a971c21460
2 changed files with 95 additions and 25 deletions

View File

@ -0,0 +1,71 @@
<template>
<div>
基本
<Rate class="custom"></Rate>
</br>
半星
<Rate :allowHalf="allowHalf"></Rate>
</br>
默认3颗星
<Rate v-model="initValue"></Rate>
<AntButton type="primary" @click="changeValue">改变</AntButton>
<AntButton type="primary" @click="getValue">当前值</AntButton>
</br>
只读
<Rate :value="initValue" :disabled="disabled"></Rate>
</br>
回调函数
<Rate
:onChange="onChange"
:onHoverChange="onHoverChange"></Rate>
<span v-if="hoverValue">{{hoverValue}}stars</span>
<span v-if="rValue">{{rValue}}stars</span>
<br/>
<Rate
:allowHalf="allowHalf"
:onHoverChange="onHoverChangeAH"></Rate>
<span v-if="hoverValueAH">{{hoverValueAH}}stars</span>
</br>
自定义
<Rate :value="initValue" :allowHalf="allowHalf" :character="character"></Rate>
</div>
</template>
<script>
import '../style'
import { Rate, Icon, Button } from 'antd/index'
export default {
data () {
return {
allowHalf: true,
initValue: 3,
disabled: true,
hoverValue: undefined,
rValue: undefined,
hoverValueAH: undefined,
character: '好',
}
},
methods: {
onHoverChange (val) {
this.hoverValue = val
},
onChange (val) {
this.rValue = val
},
onHoverChangeAH (val) {
this.hoverValueAH = val
},
changeValue () {
this.initValue = undefined
},
getValue () {
console.log(this.initValue)
},
},
components: {
Rate,
Icon,
AntButton: Button,
},
}
</script>

View File

@ -1,40 +1,39 @@
function getScroll(w, top) {
let ret = top ? w.pageYOffset : w.pageXOffset;
const method = top ? 'scrollTop' : 'scrollLeft';
function getScroll (w, top) {
let ret = top ? w.pageYOffset : w.pageXOffset
const method = top ? 'scrollTop' : 'scrollLeft'
if (typeof ret !== 'number') {
const d = w.document;
const d = w.document
// ie6,7,8 standard mode
ret = d.documentElement[method];
ret = d.documentElement[method]
if (typeof ret !== 'number') {
// quirks mode
ret = d.body[method];
ret = d.body[method]
}
}
return ret;
return ret
}
function getClientPosition(elem) {
let box;
let x;
let y;
const doc = elem.ownerDocument;
const body = doc.body;
const docElem = doc && doc.documentElement;
box = elem.getBoundingClientRect();
x = box.left;
y = box.top;
x -= docElem.clientLeft || body.clientLeft || 0;
y -= docElem.clientTop || body.clientTop || 0;
function getClientPosition (elem) {
let x
let y
const doc = elem.ownerDocument
const body = doc.body
const docElem = doc && doc.documentElement
const box = elem.getBoundingClientRect()
x = box.left
y = box.top
x -= docElem.clientLeft || body.clientLeft || 0
y -= docElem.clientTop || body.clientTop || 0
return {
left: x,
top: y,
};
}
}
export const getOffsetLeft = (el) => {
const pos = getClientPosition(el);
const doc = el.ownerDocument;
const w = doc.defaultView || doc.parentWindow;
pos.left += getScroll(w);
return pos.left;
const pos = getClientPosition(el)
const doc = el.ownerDocument
const w = doc.defaultView || doc.parentWindow
pos.left += getScroll(w)
return pos.left
}