mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-11-30 02:57:50 +08:00
add rate demo
This commit is contained in:
parent
c78a5977b3
commit
a971c21460
71
components/rate/demo/rate.vue
Normal file
71
components/rate/demo/rate.vue
Normal 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>
|
@ -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
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user