-
学习内容
1.el-input-number的使用
2.禁用按钮 disabled
3.设置 step
4.设置严格 step step-strictly
5.精度设置 precision
6.按钮大小 size
7.按钮位置 controls-position -
代码效果图
-
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id='app'>
<!-- el-input-number -->
<el-input-number v-model='number' @change='handleChange' :min='1' :max='10'></el-input-number>
<!-- disabled -->
<el-input-number v-model='number' @change='handleChange' :min='1' :max='10' disabled></el-input-number>
<!-- step -->
<el-input-number v-model='stepNumber' :step='2'></el-input-number>
<!-- step + step-strictly -->
<el-input-number v-model='stepNumber' :step='2' step-strictly></el-input-number>
<!-- precision必须是一个非负整数，并且不能小于step的小数位数 -->
<el-input-number v-model='floatNumber' :precision='2' :step='0.02'></el-input-number>
<!-- size -->
<el-input-number v-model='floatNumber' :precision='2' :step='0.1' size='mini'></el-input-number>
<!-- controls-position -->
<el-input-number v-model='number' controls-position='right' :min='1' :max='10'></el-input-number>
</div>
</body>
</html>
<script>
let vm = new Vue({
el: '#app',
data: {
number: 1,
stepNumber:0,
floatNumber: 1,
},
methods: {
handleChange(number) {
console.log(number)
}
}
})
</script>
<style></style>
- 官网地址：element-ui官网
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
