Vue与ElementUI的v-loading控件

Hrational

4530人浏览 · 2022-07-13 15:31:58

Hrational · 2022-07-13 15:31:58 发布

Vue与Element的v-loading控件

在需要添加loading动画的组件中加入v-loading="xxx", xxx为true时表示加载，false时关闭加载，默认样式如下：
在这里插入图片描述
如果要修改样式或者添加文字，则使用element-loading进行修改
添加加载中提示文字：element-loading-text="拼命加载中"
修改加载中动画：element-loading-spinner="el-icon-loading"
最终效果为：

v-loading="xxx"使用时绑定变量动态修改true或false，在需要修改此变量的地方可封装一个loading函数，增加timeout设置，加载超时后停止此加载动画

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^