mjz update
This commit is contained in:
mjz
@@ -10,7 +10,6 @@ article: false
|
||||
:::
|
||||
|
||||
|
||||
|
||||
## 引入样式
|
||||
|
||||
编辑 `App.vue`文件在`<style>` 项引入 `icon.css`
|
||||
|
||||
@@ -5,6 +5,8 @@ permalink: /pages/basics/button
|
||||
article: false
|
||||
---
|
||||
|
||||
在 button 上加 class `cu-btn` 即可
|
||||
|
||||
## 按钮形状
|
||||
> css 代码
|
||||
```css
|
||||
|
||||
@@ -5,6 +5,8 @@ permalink: /pages/basics/tag
|
||||
article: false
|
||||
---
|
||||
|
||||
需要设置成标签的元素加上 class `cu-tag` 即可
|
||||
|
||||
## 标签形状
|
||||
> css 代码
|
||||
```css
|
||||
|
||||
@@ -5,6 +5,8 @@ permalink: /pages/basics/avatar
|
||||
article: false
|
||||
---
|
||||
|
||||
需要设置成头像的元素加上 class `cu-avatar`，然后再设置 css 样式 `background-image` 即可
|
||||
|
||||
## 头像形状
|
||||
> css 代码
|
||||
```css
|
||||
|
||||
@@ -5,10 +5,47 @@ permalink: /pages/basics/shadow
|
||||
article: false
|
||||
---
|
||||
|
||||
## 边框阴影
|
||||
## 边框
|
||||
在需要加边框的元素加上 class `solid`，加粗的就是 `solids`，然后还有单独四个不同的方向 `solid-top|...`
|
||||
|
||||
::: details 点此查看页面源代码
|
||||
页面位置：`/pages/basics/shadow`
|
||||
```vue
|
||||
> css 代码
|
||||
```css
|
||||
.solid 四周
|
||||
.solid-top 上
|
||||
.solid-right 右
|
||||
.solid-bottom
|
||||
.solid-left
|
||||
```
|
||||
:::
|
||||
|
||||
> 演示代码
|
||||
```vue
|
||||
<view class="padding solid">四周</view>
|
||||
<view class="padding solid-top">上</view>
|
||||
<view class="padding solid-right">右</view>
|
||||
<view class="padding solid-bottom">下</view>
|
||||
<view class="padding solid-left">左</view>
|
||||
```
|
||||
|
||||
## 阴影
|
||||
|
||||
在需要加阴影的元素加上 class `shadow` 即可
|
||||
|
||||
> css 代码
|
||||
```css
|
||||
.shadow 默认阴影
|
||||
.shadow bg-blue|... 根据背景颜色而改变的阴影
|
||||
.shadow shadow-lg 长阴影
|
||||
.shadow-warp 翘边阴影
|
||||
```
|
||||
|
||||
> 演示代码
|
||||
```vue
|
||||
<view class="padding-xl radius shadow bg-white">默认阴影</view>
|
||||
<view class="padding-xl radius shadow bg-blue">根据背景颜色而改变的阴影</view>
|
||||
<view class="padding-xl radius shadow shadow-lg bg-white">长阴影</view>
|
||||
<view class="padding-xl radius shadow shadow-lg bg-blue">长阴影</view>
|
||||
<view class="padding-xl radius shadow-warp bg-white">翘边阴影</view>
|
||||
<view class="padding-xl radius shadow-blur bg-red bg-img" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big91005.jpg);">
|
||||
<view>根据背景图而改变的阴影</view>
|
||||
</view>
|
||||
```
|
||||
@@ -5,10 +5,95 @@ permalink: /pages/basics/loading
|
||||
article: false
|
||||
---
|
||||
|
||||
## 加载
|
||||
在需要设置加载的元素加上 class `cu-load loading`，这样既是横条加载状态，可以设置自己喜欢的背景颜色 `.bg-red|...`
|
||||
|
||||
::: details 点此查看页面源代码
|
||||
页面位置：`/pages/basics/loading`
|
||||
```vue
|
||||
> css
|
||||
```
|
||||
:::
|
||||
.cu-load loading 加载中
|
||||
.cu-load over 加载结束
|
||||
.cu-load erro 加载错误
|
||||
.cu-load loading load-cuIcon 只有加载图标没有文字
|
||||
```
|
||||
因此 `loading、over、erro`，可以动态设置配合使用
|
||||
|
||||
加载的文案，是固定的，如需设置，复制 `main.css` 里的样式在当前文件改动即可
|
||||
|
||||
> 演示代码
|
||||
```vue
|
||||
<!-- 动态设置加载状态 -->
|
||||
<view class="cu-load bg-grey" :class="!isLoad?'loading':'over'"></view>
|
||||
<!-- 加载错误 -->
|
||||
<view class="cu-load bg-red erro"></view>
|
||||
<!-- 预览框，可以看到自定义顶部导航栏右侧有加载转动 -->
|
||||
<cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">加载</block>
|
||||
<block slot="right">
|
||||
<view class="action">
|
||||
<view class="cu-load load-cuIcon" :class="!isLoad?'loading':'over'"></view>
|
||||
</view>
|
||||
</block>
|
||||
</cu-custom>
|
||||
```
|
||||
|
||||
## 弹窗加载
|
||||
|
||||
父容器加上 class `cu-load load-modal`，且用变量控制弹窗的显示与隐藏，父容器里面的内容，既是弹窗中间的内容
|
||||
|
||||
可以在弹窗里面放文字、带颜色的图标、静态图片等
|
||||
|
||||
> 演示代码
|
||||
```vue
|
||||
<view class="cu-load load-modal" v-if="loadModal">
|
||||
<!-- <view class="cuIcon-emojifill text-orange"></view> -->
|
||||
<image src="/static/logo.png" mode="aspectFit"></image>
|
||||
<view class="gray-text">加载中...</view>
|
||||
</view>
|
||||
```
|
||||
|
||||
## 进度条加载
|
||||
|
||||
父容器加上 class `load-progress show|hide`，动态变量控制 class `show 和 hide`，动态 style 设置距离顶部的高度 `top: 高度px`
|
||||
|
||||
容器里第一个就是加载的进度条，需要加上 class `load-progress-bar bg-green|...`，通过动态 style，控制进度
|
||||
|
||||
容器里第二个就是右侧的加载圆圈，需要加上 class `load-progress-spinner text-green|...`
|
||||
|
||||
> 演示代码
|
||||
```vue
|
||||
<view class="cu-bar bg-white margin-top">
|
||||
<view class="action">
|
||||
<text class="cuIcon-title text-blue"></text>进度条加载
|
||||
</view>
|
||||
<view class="action">
|
||||
<button class="cu-btn bg-green shadow" @tap="LoadProgress">
|
||||
点我
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="load-progress" :class="loadProgress!=0?'show':'hide'" :style="[{top:CustomBar+'px'}]">
|
||||
<view class="load-progress-bar bg-green" :style="[{transform: 'translate3d(-' + (100-loadProgress) + '%, 0px, 0px)'}]"></view>
|
||||
<view class="load-progress-spinner text-green"></view>
|
||||
</view>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
CustomBar: this.CustomBar,
|
||||
loadProgress: 0
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
LoadProgress(e) {
|
||||
this.loadProgress = this.loadProgress + 3;
|
||||
if (this.loadProgress < 100) {
|
||||
setTimeout(() => {
|
||||
this.LoadProgress();
|
||||
}, 100)
|
||||
} else {
|
||||
this.loadProgress = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
Reference in New Issue
Block a user