通过网站做外贸,wordpress主题首页文件夹,民权平台网站建设,如果做网站需要多少钱有时候一个页面请求接口需要加载很长时间，这时候就需要一个加载页面来告知用户内容正在请求加载中，下面就写一个简单的自定义加载组件。 目录 准备工作逻辑思路实战演练效果预览准备工作
在之前的全局组件目录components下新建一个组件文件夹，命名为q-loading，组件为q-loa… 有时候一个页面请求接口需要加载很长时间，这时候就需要一个加载页面来告知用户内容正在请求加载中，下面就写一个简单的自定义加载组件。 目录
准备工作逻辑思路实战演练效果预览准备工作
在之前的全局组件目录components下新建一个组件文件夹，命名为q-loading，组件为q-loading.vue。
再找几个效果不错的 css 加载动画，然后修改一下样式。
逻辑思路
编写模板部分
要求具有扩展性，因此可以使用slot插槽来插入内容，也方便后期修改自定义。
使用class和style绑定一些父组件传过来的值，更加个性化。
这个页面分为图标和文本提示两部分，各自可以自定义显示、大小、颜色。
编写样式部分
这部分就是图标和文本的样式以及一些加载动画的内容。
编写脚本部分
这部分主要是父组件传递过来的参数，通过props进行制定格式。
实战演练
下面就简单实现一个加载组件。
模板部分
viewclass="q-loading":style="{'backgroundColor': props.bgColor}"v-if="props.show"
view class="q-loading-inner"slot name="load"!-- 图标部分 --view:class="{'q-loading-icon': true, 'pause': !props.show !props.showIcon}"v-if="props.showIcon"slot name="icon"!-- 圆环 --viewclass="q-loading-item q-loading-circle":style="{'width': props.borSize +'rpx', 'height': props.borSize +'rpx', 'borderWidth': props.borWin + 'rpx', 'borderColor': props.borColor, 'borderLeftColor': props.bordActiveColor}"v-if="props.iconName == 'circle'"/view!-- 呼吸 --view
