Closed lovanya closed 5 years ago
Could you please give me a copy of the code in the screenshot? And tell me what file it is? (JavaScript?)
So I can find out bugs easier.
sorry, I am not at office now. It's a vue(vuejs) file and it happened on Windows 10.
Wait for your copy. Copy the whole code in the file.
If you don’t go to office this weekend, then solve it on Monday, have a nice weekend.
Thanks for ur wish)).
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue';
import App from './App';
import router from './router';
import store from './store';
import iView from 'iview';
import i18n from '@/locale';
import config from '@/config';
import importDirective from '@/directive';
import importComponents from '@/components';
import 'iview/dist/styles/iview.css';
import './index.less';
import '@/assets/icons/iconfont.css';
// 实际打包时应该不引入mock
if (process.env.NODE_ENV !== 'production') {
require('@/mock');
}
Vue.use(iView, {
i18n: (key, value) => i18n.t(key, value),
transfer: true // 所有带浮层的组件,是否将浮层放置在 body 内,默认为不设置,详见各组件默认的 transfer 值。可选值为 true 或 false。
});
Vue.config.productionTip = false;
/**
* @description 全局注册应用配置
*/
Vue.prototype.$config = config;
/**
* 注册指令
*/
importDirective(Vue);
/**
* 注册组件
*/
importComponents(Vue);
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
i18n,
store,
render: h => h(App)
});
count-to.vue
<template>
<div class="count-to-wrapper">
<slot name="left" />
<p class="content-outer"><span :class="['count-to-count-text', countClass]"
:id="counterId">{{ init }}</span><i :class="['count-to-unit-text', unitClass]">{{ unitText }}</i></p>
<slot name="right" />
</div>
</template>
<script>
import CountUp from 'countup';
import './index.less';
export default {
name: 'CountTo',
props: {
init: {
type: Number,
default: 0
},
/**
* @description 起始值,即动画开始前显示的数值
*/
startVal: {
type: Number,
default: 0
},
/**
* @description 结束值,即动画结束后显示的数值
*/
end: {
type: Number,
required: true
},
/**
* @description 保留几位小数
*/
decimals: {
type: Number,
default: 0
},
/**
* @description 分隔整数和小数的符号,默认是小数点
*/
decimal: {
type: String,
default: '.'
},
/**
* @description 动画持续的时间,单位是秒
*/
duration: {
type: Number,
default: 2
},
/**
* @description 动画延迟开始的时间,单位是秒
*/
delay: {
type: Number,
default: 0
},
/**
* @description 是否禁用easing动画效果
*/
uneasing: {
type: Boolean,
default: false
},
/**
* @description 是否使用分组,分组后每三位会用一个符号分隔
*/
usegroup: {
type: Boolean,
default: false
},
/**
* @description 用于分组(usegroup)的符号
*/
separator: {
type: String,
default: ','
},
/**
* @description 是否简化显示,设为true后会使用unit单位来做相关省略
*/
simplify: {
type: Boolean,
default: false
},
/**
* @description 自定义单位,如[3, 'K+'], [6, 'M+']即大于3位数小于6位数的用k+来做省略
* 1000即显示为1K+
*/
unit: {
type: Array,
default() {
return [[3, 'K+'], [6, 'M+'], [9, 'B+']];
}
},
countClass: {
type: String,
default: ''
},
unitClass: {
type: String,
default: ''
}
},
data() {
return {
counter: null,
unitText: ''
};
},
computed: {
counterId() {
return `count_to_${this._uid}`;
}
},
methods: {
getHandleVal(val, len) {
return {
endVal: parseInt(val / Math.pow(10, this.unit[len - 1][0]), 10),
unitText: this.unit[len - 1][1]
};
},
transformValue(val) {
let len = this.unit.length;
let res = {
endVal: 0,
unitText: ''
};
if (val < Math.pow(10, this.unit[0][0])) {
res.endVal = val;
} else {
for (let i = 1; i < len; i++) {
if (val >= Math.pow(10, this.unit[i - 1][0]) && val < Math.pow(10, this.unit[i][0])) {
res = this.getHandleVal(val, i);
}
}
if (val > Math.pow(10, this.unit[len - 1][0])) {
res = this.getHandleVal(val, len);
}
}
return res;
},
getValue(val) {
let res = 0;
if (this.simplify) {
let { endVal, unitText } = this.transformValue(val);
this.unitText = unitText;
res = endVal;
} else {
res = val;
}
return res;
}
},
mounted() {
this.$nextTick(() => {
let endVal = this.getValue(this.end);
this.counter = new CountUp(
this.counterId,
this.startVal,
endVal,
this.decimals,
this.duration,
{
useEasing: !this.uneasing,
useGrouping: this.useGroup,
separator: this.separator,
decimal: this.decimal
}
);
window.setTimeout(() => {
if (!this.counter.error) {
this.counter.start();
}
}, this.delay);
});
},
watch: {
end(newVal) {
let endVal = this.getValue(newVal);
this.counter.update(endVal);
}
}
};
</script>
您好! 我新建文件, 复制进您的代码, 在我这里显示全部是正常的, 后面附代码截图。我把解决办法写在前面:
1, 您先查看下您的Eva Theme版本是不是最新的? 升级至最新。
2, vue的语法高亮好像需要Vetur插件的支持(这是在我打开.vue文件, VSCode自动提示安装的)
3, 如果上面二条都没解决问题, 可能是您别的插件影响, 目前我只遇到过一个:
4, 如果您没这个插件, 那您需要去VSCode的插件文件夹(Windows在 C:/Users/您的用户名/.vscode/extensions。MacOS在Macintosh HD/Users/您的用户名/.vscode/extensions), 保留Eva Theme插件文件夹, 其它插件文件夹先移至别处 → 重启VSCode, 查看是否显示正常 → 如果正常, 逐批移入其它插件文件夹, 再重启VSCode, 查看代码显示, 直至找出问题插件。
如果extensions里只有Eva Theme一个插件文件夹, 依然显示不正常, 我还真不知道怎么办, 有这种情况您再来留言吧。
下面是在我这里, 您的代码截图, 全部显示正常
main.js
count-to.vue
真心感谢你的帮助。:)
确实是因为插件造成的, Babel Javascript 和 Sublime Babel 都会影响,卸载之后都正常了。
VS Code was just updated to 1.29.1, then the colors were changed。 looks strange!