add rate demo
							parent
							
								
									c038b9daa7
								
							
						
					
					
						commit
						bff24a4c9d
					
				| 
						 | 
				
			
			@ -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