1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889 |
- import { createNamespace, addUnit } from '../utils';
- import { BindEventMixin } from '../mixins/bind-event';
- var _createNamespace = createNamespace('progress'),
- createComponent = _createNamespace[0],
- bem = _createNamespace[1];
- export default createComponent({
- mixins: [BindEventMixin(function (bind) {
- bind(window, 'resize', this.resize, true);
- bind(window, 'orientationchange', this.resize, true);
- })],
- props: {
- color: String,
- inactive: Boolean,
- pivotText: String,
- textColor: String,
- pivotColor: String,
- trackColor: String,
- strokeWidth: [Number, String],
- percentage: {
- type: [Number, String],
- required: true,
- validator: function validator(value) {
- return value >= 0 && value <= 100;
- }
- },
- showPivot: {
- type: Boolean,
- default: true
- }
- },
- data: function data() {
- return {
- pivotWidth: 0,
- progressWidth: 0
- };
- },
- mounted: function mounted() {
- this.resize();
- },
- watch: {
- showPivot: 'resize',
- pivotText: 'resize'
- },
- methods: {
- // @exposed-api
- resize: function resize() {
- var _this = this;
- this.$nextTick(function () {
- _this.progressWidth = _this.$el.offsetWidth;
- _this.pivotWidth = _this.$refs.pivot ? _this.$refs.pivot.offsetWidth : 0;
- });
- }
- },
- render: function render() {
- var h = arguments[0];
- var pivotText = this.pivotText,
- percentage = this.percentage;
- var text = pivotText != null ? pivotText : percentage + '%';
- var showPivot = this.showPivot && text;
- var background = this.inactive ? '#cacaca' : this.color;
- var pivotStyle = {
- color: this.textColor,
- left: (this.progressWidth - this.pivotWidth) * percentage / 100 + "px",
- background: this.pivotColor || background
- };
- var portionStyle = {
- background: background,
- width: this.progressWidth * percentage / 100 + 'px'
- };
- var wrapperStyle = {
- background: this.trackColor,
- height: addUnit(this.strokeWidth)
- };
- return h("div", {
- "class": bem(),
- "style": wrapperStyle
- }, [h("span", {
- "class": bem('portion'),
- "style": portionStyle
- }, [showPivot && h("span", {
- "ref": "pivot",
- "style": pivotStyle,
- "class": bem('pivot')
- }, [text])])]);
- }
- });
|